Udemy

Platform

Español

Language

Web Development

Category

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.

4.72 (150 reviews)

Students

18.5 hours

Content

May 2021

Last Update
Regular Price

EXCLUSIVE SKILLSHARE OFFER
Exclusive  SkillShare  Offer
Unlimited access to 30 000 Premium SkillShare courses
30-DAY FREE TRIAL

What you will 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...


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 por microservicios 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

  • 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.


Screenshots

Next JS: Crea tu tienda online completa
Next JS: Crea tu tienda online completa
Next JS: Crea tu tienda online completa
Next JS: Crea tu tienda online completa

Content

Introducción

Resultado final de la aplicación

Repositorio de la aplicación

Antes de empezar

Entorno de desarrollo

Seleccionando el Navegador

Instalando Editor de Código

Extensiones para Visual Studio Code

Instalando Node JS

Instalando Yarn

Instalando Robo 3T

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

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

Empezando con el E-Commerce

Creando la aplicación de Next JS

Añadiendo SASS

Implementando Semantic UI

Generando el Layout

Variables de colores en SASS

Estructura del Header

TopBar - Logo

TopBar - Buscador

Menu Web

Creando una base de datos en MongoDB Atlas

Creando el proyecto de Strapi

Creando un Bucket S3 en AWS

Conectando Strapi al S3

Terminando Layout

Sistema de usuarios

Modal reutilizable

Sistema de formularios de Registro y Login

Formulario de registro de usuarios

Añadiendo Fromik y Yup al formulario de registro

Registrando usuario en Strapi

Limpiando formulario y mostrando errores

Formulario de login

Añadiendo Fromik y Yup al formulario de login

Logeando usuario con Strapi

Creando el AuthContext y useAuth

Guardando los datos del usuario en el Context

Recuperando los datos del token

Recuperar contraseña

Menu usuario logeado

Botón para cerrar sesión

AuthFetch

Obteniendo todos los datos del usuario con su ID

Menu usuario logeado

Página del usuario

Creando la pagina del usuario

Bloqueando páginas y añadiendo estilos

Formulario cambio de nombre y apellidos

Manejando los datos del formulario de cambio de nombre y apellidos

Enviando el nuevo nombre al Strapi

Actualizando el nombre en el menu

Formulario cambio de email

Manejando los datos del formulario de email

Enviando el nuevo email al Strapi

Formulario cambio de contraseña

Manejando los datos del formulario de contraseña

Actualizando la contraseña

Sistemas de direcciones

Creando la sección de Direcciones

Modal para crear y editar direcciones

Formulario creación de dirección

Gestionando y validando datos del formulario

Creando la colección de direcciones en Strapi

Guardando nueva dirección

Obteniendo odas las direcciones del usuario

Listando direcciones

Refrescando direcciones al crear una nueva

Eliminando direcciones

Reutilizando AddressForm para crear y actualizar

Actualizando direcciones

Sistema de Categorias

Creando la colección de categorias

Obteniendo todas las plataformas

Pintando plataformas y generando las rutas

Categorias de juegos

Creando la colección de juegos

Obteniendo los últimos juegos añadidos

Renderizando lista de juegos

Estructura y estilos de la lista de juegos

Lista de juegos responsive

Obteniendo juegos por plataformas

Renderizando todos los juegos

Generando datos para la paginación

Creando el componente Pagination

Añadiendo estilos a la paginación

Página del Juego

Creando la pagina de los juegos

Obteniendo los datos del juego

Estructura de la página del juego

Añadiendo la información del juego

Creando las Tabs de información

Mostrando el video del juego

Creando el carrousel de imágenes

Abriendo las imágenes al hacer click

Fecha de lanzamiento y descripción

Sistema de Favoritos

Creando la colección de juegos favoritos

Comprobando si tenemos un juego en favoritos

Añadiendo juegos a favoritos

Eliminar juegos de favoritos

Creando la pagina de favoritos

Obteniendo todos los juegos añadidos a la lista

Renderizando la lista de juegos

Sistema de búsqueda

Creando la pagina de búsqueda

Cargando la pagina de search al empezar una búsqueda

Obteniendo los resultados de la búsqueda

Renderizando los resultados de la búsqueda

Sistema de Carrito

CartContext y useCart

Obteniendo los productos del carrito

Añadiendo un producto al carrito

Contador de productos que hay en el carrito

Creando la pagina del carrito

Obteniendo los datos de los productos del carrito

Mostrando el listado de productos

Terminando de mostrar la información de los productos

Eliminando productos del carrito

Obteniendo direcciones de envio disponibles

Mostrando la lista de direcciones de envío disponibles

Selecionado la dirección de envio

Sistema de pago con Stripe

Creando una cuenta de Stripe

Creando la colección de pedidos

Flujo de un pedido con stripe

Dependencias de Stripe para el cliente

Añadiendo el formulario de Stripe

Creando el acuerdo de cobre con Stripe

Función en back para realizar el pedido y pago

Realizando pago

Limpiando carrito

Página de pedidos

Creando la página de orders

Obteniendo todos los pedidos del usuario

Renderizando todos los pedidos

Terminando de pintar los pedidos

Modal para ver mas información

SEO

Creando el componente SEO

Usando el componente SEO

Despliegues

Desplegando Strapi en Heroku

Cambiando Favicon

Desplegando Next en Netlify

Despedida

Clase Extra


Reviews

A
Ana29 May 2021

Agustín eres excelente! Conocía React y Nextjs por mi cuenta, pero contigo aprendí a mejorar y con buenas prácticas de programación. Gracias de veras! Dios te bendiga!

S
Sebastián27 May 2021

Bueno curso pero quedan muchos temas pendientes sobre seguridad de un ecommerce y el poder utilizar getStaticProps, getServerSideProps o getStaticPaths para sacarle mayor provecho a NextJS.

G
Gabriel24 May 2021

Un poco desactualizado el curso. Stripe tiene una versión en la que se ve bastante diferente. No sé por qué no maqueta en modo responsive desde el principio. Le llama "pleca" a la barra ( / ) cuando una pleca es una "pipe" ( | ) . Esto me da mucho TOC.

D
Daniel22 May 2021

Muy bien explicado, lo unico que complica el seguimiento es que la plataforma de strapi esta actualizada y hay varios cambios con lo que se ve en el curso, pero de todas formas, el curso esta bien hecho.

C
Carlos21 May 2021

Excelente curso. El profe enseña bien y explica de manera clara como se realiza la aplicación. Falta agregar mas cosas en la aplicación, pero con lo aprendido en el mismo curso se puede complementar de manera sencilla lo faltante

V
Vinicio29 April 2021

Muy buen curso, aprendí bastante y el instructor no le da tantas vuelvas al asunto, va directo al grano y ¡explica muy bien!. Me gusto bastante y ya entré al de react native para seguir aprendiendo.

M
Martín12 March 2021

Es un curso completo, pero por sobre todo la respuesta del profesor es excelente ayudando en cada traba que se presenta y esto es muy importante en etapa de aprendizaje. De los mejores que he tomado en esta plataforma.

D
Daniel17 February 2021

El instructor tiene los conocimientos y explica cada detalle, fácil de entender y comprender. Gracias a este curso pude expandir mas mis conocimientos en react y otras tecnologías relacionadas, tener noción en crear aplicaciones de e-commerce.

L
Luis19 January 2021

Un curso completamente increíble y genial en todo aspecto, desde el inicio es muy intuitivo, así como la ayuda del instructor es de lo mejor en todo.

M
Marvin29 December 2020

Excelente curso. Las explicaciones son bastante claras, el proyecto desarrollado tiene muchas cosas interesantes. Totalmente recomendado.

J
Jose13 December 2020

Hasta el momento no me está defraudando. Todos los cursos de este instructor tienen un nivel muy alto, se aprenden muchas cosas, avanzando en complejidad poco a poco, pero siempre muy bien explicadas. Más practico y útil imposible. Justo lo que estaba buscando.

J
Jhon9 December 2020

quizás quedo faltando lo mas importante de next js, el uso de getStaticProps y demás funciones, pero he aprendido bastante en este curso que me han ayudado a expandir mis conocimientos. gracias por el trabajo.

F
Franyer11 November 2020

Agustín siempre nos da excelentes cursos, compartiendo todo su conocimiento, este curso es genial para realizar tu propia tienda en línea.

L
Luis8 November 2020

Gracias por estos cursos. Empezando el curso, mas adelante actualizo mi comentario, pero conozco al teacher cursos de calidad y le doy 5 estrellas

J
Jack8 November 2020

Excelente curso y Agustín espléndido como instructor, estoy aprendiendo mucho de como conectar next y strapi, además que lo usamos con aws


Coupons

DateDiscountStatus
11/8/202050% OFFExpired
11/15/202050% OFFExpired
12/22/202050% OFFExpired
1/5/202150% OFFExpired
1/20/202150% OFFExpired
2/19/202150% OFFExpired
3/13/202150% OFFExpired
5/3/202150% OFFExpired
5/21/202150% OFFExpired
6/8/202150% OFFExpired
6/15/202150% OFFExpired

3595222

Udemy ID

10/26/2020

Course created date

11/8/2020

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram