Next JS: Crea tu tienda online completa
Para crear el E-Commerce usaremos Next.js, React, Hooks, Strapi, Stripe, AWS, SASS, Formik, Yup, buenas practicas y mas.
5,00(3 valoraciones)
Creado por Agustin Navarro Galdon
Última actualizacion: 02/2024
Comenzar ahoraContenido del curso
Introducción2 clases
Resultado final de la aplicación
Repositorio de la aplicación
Entorno de desarrollo6 clases
Seleccionando el Navegador
Instalando Editor de Código
Extensiones para Visual Studio Code
Instalando Node JS
Instalando Yarn
Instalando y configurando Insomnia
Conceptos básicos de React JS15 clases
¿Qué vamos hacer en esta sección?
Introducción a JSX
Conceptos básicos de React JS
Creando nuestra primera app en React JS
Estructura de React JS
Nuestro primer Componente en React JS
¿Que son los Props de React?
Pasando props básicos entre componentes
Pasando variables y objetos entre componentes por los props
Pasando funciones entre componente por los props
El uso de la Asignación por Destructuring
Props por defecto
Template Strings
Hook de efecto - useEffect
Hook de estado - useState
Conceptos básicos de Next JS8 clases
¿Que es Next JS?
Que es el SSR (Server Side Rendering)
Crea una App de Next Js
Estructura de ficheros
Sistema de rutas simple
Sistemas de rutas dinámicas
Navegando entre paginas
SEO con Next/Head
Inicializando proyecto de Strapi - BACKEND5 clases
Creando App y registrando admin
Conociendo el admin panel
Creando un Bucket S3 en AWS
Configurando S3 en Strapi
Creando una cuenta en Stripe
Sistema de usuarios - BACKEND6 clases
Activar GET de usuario
Ampliar modelo del usuario
Registro de usuarios
Login de usuario
Obtener información del usuario
Actualizar usuario
Sistema de direcciones - BACKEND6 clases
Creando el modelo Address
Endpoint para crear direcciones
Endpoint para obtener direciones propias
Endpoint para eliminar direcciones
Endpoint para actualizando direcciones
Endpoint para obtener dirección por su ID
Sistema de plataformas - BACKEND3 clases
Creando el modelo de la plataforma
Endpoint para obtener las plataformas
Endpoint para obtener una plataforma por su slug
Sistema de juegos - BACKEND3 clases
Creando el modelo de juegos
Endpoint para obtener juegos
Endpoint para obtener un juego con su ID
Sistema lista de deseos - BACKEND5 clases
Creando el modelo de la lista de deseos
Endpoint para añadir a la lista de deseos
Endpoint chequear un juego
Endpoint para eliminar un juego de la lista
Endpoint para obtener lista de deseos
Sistema de pedidos - BACKEND4 clases
Creando el modelo de pedidos
Endpoint para obtener mis pedidos
Endpoint para registrar un pedido simple
Endpoint para pagar y realizar el pedido
Inicializando app de Next - FRONTEND7 clases
Creando la app de Next js
Instalando Semantic UI React
Implementando SASS Module
Sistema de variables en SASS
Estilos para componente de semantic
Modificando estilos a componentes de Semantic UI
Fichero de constantes
Sistema de autenticación - FRONTEND16 clases
Creando las paginas de auth
Creando el JoinLayout
Formulario de registro
Controlando y validando formulario
Registrando usuario
Formulario de login
Controlando y validando formulario
Iniciando sesión
Creando el AuthContext
Hook para obtener los datos del contexto
Función login del contexto
Guardando token y obteniendo datos del usuario
Creando el AuthFecher
Recuperando la sesión del usuario
Cerrando sesión
Función para actualizar el usuario local
Layout Principal, TopBar y Footer - FRONTEND7 clases
Creando el layout principal
Estructura del TopBar
Bloque Account del TopBar
Obteniendo las plataformas
Renderizando menu
Añadiendo el buscador
Footer
Sistema de mi cuenta - FRONTEND13 clases
Información del usuario
Creando los tabs de opciones
Formulario para cambiar el nombre
Controlando y validando formulario
Actualizando nombre y apellidos
Componente Separador
Formulario para cambiar email
Validando y controlando formulario
Actualizando email del usuario
Formulario para cambiar la contraseña
Validando y controlando formulario
Actualizando contraseña
Fix errores del Tab
Sistema de direcciones - FRONTEND12 clases
Botón para añadir direciones
Creando el componente Modal
Formulario para crear direciones
Validando y controlando formulario
Registrando dirección del usuario
Obteniendo direciones del usuario
Listado direciones
Recargando lista de direciones
Formulario para editar dirección
Actualizando dirección
Creando el modal de confirmación
Eliminando dirección
Home web - FRONTEND9 clases
Obteniendo ultimo juego publicado
Pintando la información del juego
Label y calculo de precio
Obteniendo los últimos juegos publicados
Grid de juegos
Barra de información
Ultimos juegos de PlayStation
Banner de publicidad
Ultimos juegos de Xbox
Página de categorias - FRONTEND4 clases
Obteniendo los juegos de una categoria
Renderizando juegos
Componente NoResult
Añadiendo paginación
Sistema de búsquedas - FRONTEND4 clases
Empezando las búsquedas
Buscando los juegos
Fix espacios
Pintando juegos y paginación
Página del juego - FRONTEND10 clases
Creando la página del juego
Obteniendo los datos del juegos por su slug
Fondo del videojuegos
Estructura del panel del juego
Icono de Wishlist
Información sobre el juego
Video del juego
Mosaico de imágenes
FullModal
Slider de imágenes
Sistema lista de deseos - FRONTEND6 clases
Comprobando si lo tenemos en la lista
Añadiendo juego a la lista
Eliminando juego de la lista
Obteniendo juegos de la lista
Grid de la lista
Icono para quitar de la lista
Sistema de compra - FRONTEND20 clases
Creando el contexto del carrito
Añadir productos al carrito
Obteniendo productos del carrito
Añadiendo mas de un producto al carrito
Contando productos del carrito
Página del carrito y layout
Header del layout
Controlando steps
Sistema de steps en el carrito
Obteniendo los productos del carrito
StepOne - Listado de productos
StepOne - Cambiar cantidad del producto
StepOne - Eliminar producto del carrito
StepOne - Resumen del carrito
StepTwo - Obteniendo direcciones
StepTwo - Direcciones
StepTwo - Añadiendo metodo de pago
StepTwo - Resumen del carrito
StepTwo - Pago del carrito
StepThree - Confirmación de compra
Historial de compras - FRONTEND3 clases
Obteniendo lista de pedidos
Listado pedidos
Información del pedido
Seo - FRONTEND3 clases
Creando el componente para el SEO
Añadiendo el componente Seo en las páginas
Añadiendo Favicon
Deploy4 clases
Subiendo server a GitHub
Creando una cuenta en Reyway
Desplegando servidor
Desplegando cliente
Comentarios de los estudiantes
5.0
Valoración del curso
Este curso incluye:
181 recursos educativos
Certificado de finalizazión
Consultas al tutor gratuitas
Compatible con todos los dispositivos
Compartir
Instructor del curso
Agustin Navarro Galdon
Frontend Developer
Soy un desarrollador de aplicaciones multiplataforma, mobile y E-Commerce con más de 7 años en el mundo del desarrollo de aplicaciones de todo tipo.
Valoraciones
No se ha escrito ningún comentario para la calificación que has seleccionado.