Aplicación web de comercio electrónico desarrollada con React para explorar, listar y gestionar productos, incluyendo una vista de compras realizadas. Estructura simple, modular y pensada para extender rápidamente hacia carrito, checkout y autenticación.
/— Inicio: landing y acceso rápido al catálogo./products— Catálogo de productos: listado y detalle básico./purchases— Compras: historial y estado de compras realizadas.
- Navegación clara con barra superior (Navbar) y pie de página (Footer).
- Gestión de estado global con Redux para acciones y datos compartidos.
- Componentes reutilizables y estilos organizados por página.
- Indicadores de carga (Loading) para mejor experiencia de usuario.
- Diseño responsivo básico con CSS.
(Agrega aquí una imagen o GIF de la app cuando tengas una build estable)
💡 Próximamente.
- React 18 — Biblioteca para interfaces de usuario.
- Redux — Estado global y acciones.
- React Router DOM — Enrutamiento SPA.
- CSS — Estilos base por páginas y componentes.
- Jest + React Testing Library — Pruebas unitarias (estructura lista).
00028-e-commerce-web/
├── public/
│ ├── index.html
│ ├── manifest.json
│ ├── robots.txt
│ └── computadora-portatil.png
└── src/
├── App.js
├── App.css
├── App.test.js
├── index.js
├── index.css
├── reportWebVitals.js
├── setupTests.js
├── components/
│ ├── Footer/
│ ├── Loading/
│ ├── Navbar/
│ └── index.js
├── pages/
│ ├── Home.js
│ ├── Products.js
│ ├── Purchases.js
│ └── index.js
├── redux/
│ ├── actions.js
│ └── index.js
└── styles/
├── home/
├── products.css
└── purchases.cssRequisitos: Node.js >= 16 y npm.
-
Instalar dependencias:
npm install
-
Iniciar servidor de desarrollo:
npm start
Abre
http://localhost:3000en tu navegador. -
Construir para producción:
npm run build
-
Ejecutar tests:
npm test
- Listado de productos con estilos por página.
- Gestión básica de estado con Redux (acciones centralizadas).
- Navbar y Footer persistentes.
- Indicadores de carga y estructura para pruebas.
- Página de compras para visualizar historial/estado.
- Los datos y flujos son demostrativos; no se incluye integración de pagos.
- No se conecta a ninguna API externa por defecto; el estado es local.
- La estructura está preparada para crecer hacia carrito, checkout y autenticación.
- Carrito y flujo de checkout.
- Integración con API/Backend (productos, usuarios, órdenes).
- Autenticación y perfiles.
- Búsqueda, filtros y paginación en catálogo.
- Modo oscuro.
- Internacionalización (ES/EN).
- Mejora de accesibilidad y SEO.
- Tests unitarios y de integración adicionales.
- Memoización y optimización de rendimiento.
- Exportar compras a CSV/JSON.
- Organización modular de páginas y componentes.
- Patrón de estado global con Redux.
- Enrutamiento SPA con React Router.
- Pruebas básicas con Jest/RTL.
Actualmente sin licencia. Si deseas reutilizar, puedes aplicar la licencia MIT y añadir el archivo LICENSE.
Las contribuciones son bienvenidas:
- Fork del repositorio.
- Crea una rama:
git checkout -b feature/mi-mejora. - Commit:
git commit -m "feat: añade mejora X". - Push:
git push origin feature/mi-mejora. - Abre un Pull Request.
Charles Castillo (FROSTYLAN)
⭐ Si te resultó útil, considera dar una estrella al repositorio. 🚀 ¡Explora, compra y gestiona productos con una experiencia simple y efectiva!