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.
Lo que serás capaz de hacer
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.
- 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
Temario
UNIDAD 1 - Introducción · 2 leccionesUNIDAD 1 - Introducción
UNIDAD 1 - Introducción
- Resultado final de la aplicación
- Repositorio de la aplicación
UNIDAD 2 - Entorno de desarrollo · 6 leccionesUNIDAD 2 - Entorno de desarrollo
UNIDAD 2 - Entorno de desarrollo
- Seleccionando el Navegador
- Instalando Editor de Código
- Extensiones para Visual Studio Code
- Instalando Node JS
- Instalando Yarn
- Instalando y configurando Insomnia
UNIDAD 3 - Conceptos básicos de React JS · 16 leccionesUNIDAD 3 - Conceptos básicos de React JS
UNIDAD 3 - Conceptos básicos de React JS
- ¿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
- Usando React Developer Tools
- Hook de estado - useState
- Hook de efecto - useEffect
UNIDAD 4 - Conceptos básicos de Next JS · 8 leccionesUNIDAD 4 - Conceptos básicos de Next JS
UNIDAD 4 - Conceptos básicos de Next JS
- ¿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
UNIDAD 5 - Inicializando proyecto de Strapi - BACKEND · 5 leccionesUNIDAD 5 - Inicializando proyecto de Strapi - BACKEND
UNIDAD 5 - Inicializando proyecto de Strapi - BACKEND
- Creando App y registrando admin
- Conociendo el admin panel
- Creando un Bucket S3 en AWS
- Configurando S3 en Strapi
- Creando una cuenta en Stripe
UNIDAD 6 - Sistema de usuarios - BACKEND · 6 leccionesUNIDAD 6 - Sistema de usuarios - BACKEND
UNIDAD 6 - Sistema de usuarios - BACKEND
- Activar GET de usuario
- Ampliar modelo del usuario
- Registro de usuarios
- Login de usuario
- Obtener información del usuario
- Actualizar usuario
UNIDAD 7 - Sistema de direcciones - BACKEND · 6 leccionesUNIDAD 7 - Sistema de direcciones - BACKEND
UNIDAD 7 - Sistema de direcciones - BACKEND
- 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
UNIDAD 8 - Sistema de plataformas - BACKEND · 3 leccionesUNIDAD 8 - Sistema de plataformas - BACKEND
UNIDAD 8 - Sistema de plataformas - BACKEND
- Creando el modelo de la plataforma
- Endpoint para obtener las plataformas
- Endpoint para obtener una plataforma por su slug
UNIDAD 9 - Sistema de juegos - BACKEND · 3 leccionesUNIDAD 9 - Sistema de juegos - BACKEND
UNIDAD 9 - Sistema de juegos - BACKEND
- Creando el modelo de juegos
- Endpoint para obtener juegos
- Endpoint para obtener un juego con su ID
UNIDAD 10 - Sistema lista de deseos - BACKEND · 5 leccionesUNIDAD 10 - Sistema lista de deseos - BACKEND
UNIDAD 10 - Sistema lista de deseos - BACKEND
- 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
UNIDAD 11 - Sistema de pedidos - BACKEND · 4 leccionesUNIDAD 11 - Sistema de pedidos - BACKEND
UNIDAD 11 - Sistema de pedidos - BACKEND
- Creando el modelo de pedidos
- Endpoint para obtener mis pedidos
- Endpoint para registrar un pedido simple
- Endpoint para pagar y realizar el pedido
UNIDAD 12 - Inicializando app de Next - FRONTEND · 7 leccionesUNIDAD 12 - Inicializando app de Next - FRONTEND
UNIDAD 12 - Inicializando app de Next - FRONTEND
- 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
UNIDAD 13 - Sistema de autenticación - FRONTEND · 16 leccionesUNIDAD 13 - Sistema de autenticación - FRONTEND
UNIDAD 13 - Sistema de autenticación - FRONTEND
- 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
UNIDAD 14 - Layout Principal, TopBar y Footer - FRONTEND · 7 leccionesUNIDAD 14 - Layout Principal, TopBar y Footer - FRONTEND
UNIDAD 14 - Layout Principal, TopBar y Footer - FRONTEND
- Creando el layout principal
- Estructura del TopBar
- Bloque Account del TopBar
- Obteniendo las plataformas
- Renderizando menu
- Añadiendo el buscador
- Footer
UNIDAD 15 - Sistema de mi cuenta - FRONTEND · 13 leccionesUNIDAD 15 - Sistema de mi cuenta - FRONTEND
UNIDAD 15 - Sistema de mi cuenta - FRONTEND
- 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
UNIDAD 16 - Sistema de direcciones - FRONTEND · 12 leccionesUNIDAD 16 - Sistema de direcciones - FRONTEND
UNIDAD 16 - Sistema de direcciones - FRONTEND
- 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
UNIDAD 17 - Home web - FRONTEND · 9 leccionesUNIDAD 17 - Home web - FRONTEND
UNIDAD 17 - Home web - FRONTEND
- 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
UNIDAD 18 - Página de categorias - FRONTEND · 4 leccionesUNIDAD 18 - Página de categorias - FRONTEND
UNIDAD 18 - Página de categorias - FRONTEND
- Obteniendo los juegos de una categoria
- Renderizando juegos
- Componente NoResult
- Añadiendo paginación
UNIDAD 19 - Sistema de búsquedas - FRONTEND · 4 leccionesUNIDAD 19 - Sistema de búsquedas - FRONTEND
UNIDAD 19 - Sistema de búsquedas - FRONTEND
- Empezando las búsquedas
- Buscando los juegos
- Fix espacios
- Pintando juegos y paginación
UNIDAD 20 - Página del juego - FRONTEND · 10 leccionesUNIDAD 20 - Página del juego - FRONTEND
UNIDAD 20 - Página del juego - FRONTEND
- 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
UNIDAD 21 - Sistema lista de deseos - FRONTEND · 6 leccionesUNIDAD 21 - Sistema lista de deseos - FRONTEND
UNIDAD 21 - Sistema lista de deseos - FRONTEND
- 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
UNIDAD 22 - Sistema de compra - FRONTEND · 20 leccionesUNIDAD 22 - Sistema de compra - FRONTEND
UNIDAD 22 - Sistema de compra - FRONTEND
- 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
UNIDAD 23 - Historial de compras - FRONTEND · 3 leccionesUNIDAD 23 - Historial de compras - FRONTEND
UNIDAD 23 - Historial de compras - FRONTEND
- Obteniendo lista de pedidos
- Listado pedidos
- Información del pedido
UNIDAD 24 - Seo - FRONTEND · 3 leccionesUNIDAD 24 - Seo - FRONTEND
UNIDAD 24 - Seo - FRONTEND
- Creando el componente para el SEO
- Añadiendo el componente Seo en las páginas
- Añadiendo Favicon
UNIDAD 25 - Deploy · 4 leccionesUNIDAD 25 - Deploy
UNIDAD 25 - Deploy
- Subiendo server a GitHub
- Creando una cuenta en Reyway
- Desplegando servidor
- Desplegando cliente
UNIDAD 26 - ¡Mucho más! · 1 leccionesUNIDAD 26 - ¡Mucho más!
UNIDAD 26 - ¡Mucho más!
- Clase extra
Tu certificado lo emite la SEP, no solo una plataforma
Al demostrar la competencia recibes un certificado emitido por la Secretaría de Educación Pública a través del Gobierno del Estado de México: un documento oficial que puedes presentar con confianza ante cualquier empleador o institución.
Tu certificado con INEC
- Lo emite la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México
- Documento oficial con folio verificable en línea
- Lo otorga la Universidad Tecnológica Fidel Velázquez
Otras plataformas en línea
- Constancia privada emitida por la misma plataforma
- Solo acredita horas cursadas o asistencia
- Sin respaldo de una autoridad educativa
Tu itinerario, de la inscripción al certificado
- 1
Inscripción con pago único
Pagas $2,800 MXN una sola vez y entras de inmediato al curso.
- 2
Estudias a tu ritmo
26 unidades con videos, lecturas y actividades, disponibles 24/7 durante 12 meses.
- 3
Cuestionarios por unidad
Cuestionarios para comprobar lo aprendido.
- 4
Certificado
Emitido por la SEP a través del Gobierno del Estado de México, con folio verificable.
Un certificado oficial de la SEP
Muestra · verificable por folio y QR
- Emitido por la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México. No es una constancia privada: es un documento oficial, y ese respaldo marca la diferencia frente a otras plataformas en línea.
- Contenido impartido por Agustin Navarro Galdon.
- Folio y QR verificables para compartirlo con quien te contrate.
Empieza hoy, a tu ritmo
Un solo pago y acceso inmediato al curso completo durante 12 meses.
- 26 unidades · 183 lecciones · 60 h
- 12 meses de acceso
- Certificado emitido por la SEP (Gob. del Estado de México) con folio verificable
Sobre tu inscripción
¿Cómo es el pago?
Un solo pago de $2,800 MXN. No hay mensualidades ni cargos recurrentes.
¿Cuánto tiempo tengo acceso?
12 meses desde tu inscripción, 24/7, para avanzar a tu ritmo.
¿Quién imparte el contenido?
El curso es impartido por Agustin Navarro Galdon; INEC gestiona tu inscripción, evaluación y certificado.
¿Qué pasa cuando vence mi acceso?
Puedes renovar tu cuenta tú mismo desde la plataforma, sin trámites ni esperas.
