Construir un ecommerce funcional es una de las mejores formas de consolidar tus conocimientos en React, y eso es justo lo que harás al desarrollar Shoppy, un proyecto que integra hooks, manejo de estado local y global, props y Tailwind CSS. Es ideal si ya tienes bases en React y quieres llevarlas a un caso real.

¿Qué vas a construir en este curso práctico de React?

El proyecto se llama Shoppy y es un ecommerce completo que consume una API pública de Platzi para mostrar productos reales. La idea es que cada funcionalidad te obligue a aplicar un concepto distinto de React.

Dentro de Shoppy vas a implementar varias funcionalidades clave:

• Listado de productos traídos desde una API pública.
• Filtro por título usando un input dinámico que muestra coincidencias en tiempo real.
• Filtro por categoría, por ejemplo clothes o electronics, combinable con el filtro por título.
• Carrito de compras con contador que se incrementa según los productos agregados.
• Botón de agregar que se desactiva cuando el producto ya está en el carrito.
• Checkout con resumen de la última compra y vista de my order con el historial de órdenes.
• Detalle de producto al hacer clic sobre cada card, mostrando precio e información ampliada.

¿Qué es Shoppy? Es un ecommerce construido en React que consume una API pública de Platzi y permite filtrar productos, gestionar un carrito y completar compras con checkout.

¿Qué conceptos de React vas a poner en práctica?

Este curso está pensado para que dejes de ver los conceptos de React de forma aislada y los integres en una aplicación real. Aquí cada decisión técnica responde a una necesidad concreta del ecommerce.

Entre los temas que trabajarás están los hooks, que te permiten manejar estado y efectos dentro de componentes funcionales. También verás estado local para datos que viven dentro de un componente y estado global con Context, que es la API de React para compartir datos entre componentes sin pasar props manualmente por cada nivel.

Las props serán tu herramienta para comunicar componentes padres con hijos, y aprovecharás funcionalidades nativas de JavaScript como métodos de arrays para filtrar, mapear y transformar la data que llega de la API.

¿Qué es Context en React? Es una API que permite compartir información entre componentes sin pasar props nivel por nivel, ideal para datos globales como el carrito de compras.

¿Qué requisitos necesitas para tomar el curso?

Antes de empezar, conviene que revises si tienes la base necesaria para sacarle provecho al proyecto. No es un curso desde cero, sino uno práctico que asume conocimientos previos.

Estos son los requisitos que debes cumplir:

1. HTML y CSS para construir la interfaz de usuario.
2. JavaScript para implementar la lógica de la aplicación.
3. Conocimientos previos en React, especialmente en hooks y manejo de estado.
4. Familiaridad básica con Tailwind CSS, aunque es una herramienta sencilla para aplicar estilos de forma rápida.

Si sientes que te falta alguno de estos puntos, en la caja de recursos encuentras cursos previos recomendados, incluyendo los de React y Tailwind CSS de Platzi.

Cómo obtener el certificado del curso

Tienes dos caminos para certificarte: presentar el examen o enviar la URL de tu proyecto terminado. La segunda opción es la más recomendable porque te obliga a aplicar todo lo aprendido y, además, te deja un proyecto listo para sumar a tu portafolio profesional.

La instructora Stefany Aguilar, senior front-end developer en Lahaus, te acompaña clase a clase. En la siguiente sesión empiezas con la instalación del entorno usando Vite, así que prepara tu editor y nos vemos ahí. ¿Qué funcionalidad de Shoppy te emociona más construir?