What you'll learn

Serás capaz de crear cualquier aplicación web con Next JS
Crear Hooks personalizados
Uso de Context API para gestionar datos del usuario y carrito
Sistema de rutas avanzadas y links con Next JS
Sistema de Auth con Strapi con JWT
Manejo de Formik y Yup
Integración de pasarela de pago con Stripe
Zonas restringidas usuarios registrados e invitados
Usar Bucket S3 de Amazon AWS para los archivos multimedia
Conectar Strapi con el S3 de AWS
Panel de Administrador
Uso de Layouts
Sistema de Login y Registro de usuarios
Sistema de Direcciones y configuración de cuenta de usuarios
Sistema plataformas de consolas
Sistema de videojuegos
Sistema de pedidos
Buscador de juegos dinámico y veloz
Y muchas más sorpresas...

Course content

26 sections • 183 lectures • 21h 39m total length

Resultado final de la aplicación9:27
Repositorio de la aplicación0:48

Seleccionando el Navegador1:10
Vamos a ver que navegador vamos a estar usando durante el curso.
Instalando Editor de Código2:07
Vamos a ver que editor de código vamos a usar durante el curso.
Extensiones para Visual Studio Code10:03
Vamos a instalar las extensiones que usaremos en Visual Studio Code.
Instalando Node JS3:35
Vamos a instalar node js para poder crear proyectos de next js y gestionar los packages.
Instalando Yarn4:38
Vamos a instalar el gestor de package YARN lanzado por Facebook.
Instalando y configurando Insomnia3:14

¿Qué vamos hacer en esta sección?0:53
Un resumen de lo que veremos en esta sección.
Introducción a JSX3:22
Veremos que es el JSX y por que es tan sencillo crear aplicaciones web con React JS.
Conceptos básicos de React JS4:22
Veremos como funciona React JS desde dentro.
Creando nuestra primera app en React JS2:52
Crearemos nuestra primera app con el comando create-react-app.
Estructura de React JS7:45
Veremos toda la estructura de una aplicación de React JS.
Nuestro primer Componente en React JS11:27
Crearemos nuestro primer componente y veremos todas sus partes.
¿Que son los Props de React?3:57
Veremos una explicación de que son los PROPS de React y como funcionan.
Pasando props básicos entre componentes8:54
Pasaremos props básicos de una componente a otro para crear componentes reutilizables.
Pasando variables y objetos entre componentes por los props6:07
Pasaremos variables y objetos por los props de nuestros componentes.
Pasando funciones entre componente por los props6:30
Vamos a aprender como podemos pasar funciones completas entre componentes usando los props de React JS.
El uso de la Asignación por Destructuring4:17
Veremos que es la asignación por destructuring y como no puede ayudar con el manejo de props.
Props por defecto2:11
Podemos definir en nuestros componentes props por defecto en el caso de que no le pasemos ninguno.
Template Strings3:15
Veremos que el Template Strings y como nos puede ayudar a mostrar las variables en los componentes.
Usando React Developer Tools5:03
Veremos que es la herramienta React Developer Tools y como nos puede ayudar en el desarrollo de aplicaciones.
Hook de estado - useState8:37
Veremos el uso del hook de estado useState de React.
Hook de efecto - useEffect5:10
Veremos el uso del hook de efecto useEffect de React.

¿Que es Next JS?3:18
Vamos a ver que es Next Js y por que es bueno para el e-commerce que vamos a construir.
Que es el SSR (Server Side Rendering)2:47
Vamos a ver que es el Server Side Rendering y que veneficios tienes sobre nuestra aplicación.
Crea una App de Next Js4:44
Vamos a ver como crear una app de Next JS.
Estructura de ficheros7:56
Vamos a ver la estructura de fichero que tiene un proyecto de Next JS.
Sistema de rutas simple6:31
Vamos a ver como podemos crear rutas simples en Next Js.
Sistemas de rutas dinámicas9:10
Vamos a ver como crear un sistema de rutas dinámicas.
Navegando entre paginas4:20
Veremos como podemos generar link para navegar entre páginas.
SEO con Next/Head3:37
Vamos a ver como mejorar el seo de nuestra web con Next/Head.

Requirements

Conocimientos minimo de React JS
Ganas de crear de aprender

Description

Gracias a este curso aprenderás desde a crear tu propia tienda online (E-Commerce) desde cero usando Next JS, Strapi y Stripe.

Serás capaz de crear un ecosistema donde tendrás desacoplado el backend del frontend, crearas tu propio sistema de carrito integrando una pasarela de pago como es Stripe y así poder realizar compras reales, crearas tu propia tienda online desde cero

Aprenderás a crear modelos con Strapi para tus datos del e-commerce, como la creación de endpoint para crear, editar, eliminar y leer registros de la base de datos, también vas a aprender a crear tus propios endpoint desde cero haciendo override los controladores de Strapi.

Puntos

Serás capaz de crear cualquier aplicación web con Next JS
Crear Hooks personalizados
Uso de Context API para gestionar datos del usuario y carrito
Sistema de rutas avanzadas y links con Next JS
Sistema de Auth con Strapi con JWT
Manejo de Formik y Yup
Integración de pasarela de pago con Stripe
Zonas restringidas usuarios registrados e invitados
Usar Bucket S3 de Amazon AWS para los archivos multimedia
Conectar Strapi con el S3 de AWS
Panel de Administrador
Uso de Layouts
Sistema de Login y Registro de usuarios
Sistema de Direcciones y configuración de cuenta de usuarios
Sistema plataformas de consolas
Sistema de videojuegos
Sistema de pedidos
Buscador de juegos dinámico y veloz
Y muchas más sorpresas...

Lo mejor de todo, es que este curso no acaba aquí, va a tener continuas actualizaciones para ir mejorando la aplicación cada vez mucho más.

Who this course is for:

Desarrolladores Web
Programadores de aplicaciones móviles
Programadores de JavaScript
Programadores Frontend

What you'll learn

Explore related topics

Course content

Introducción2 lectures • 10min

Entorno de desarrollo6 lectures • 25min

Conceptos básicos de React JS16 lectures • 1hr 25min

Conceptos básicos de Next JS8 lectures • 42min

Inicializando proyecto de Strapi - BACKEND5 lectures • 37min

Sistema de usuarios - BACKEND6 lectures • 17min

Sistema de direcciones - BACKEND6 lectures • 31min

Sistema de plataformas - BACKEND3 lectures • 11min

Sistema de juegos - BACKEND3 lectures • 19min

Sistema lista de deseos - BACKEND5 lectures • 21min

Requirements

Description

Who this course is for: