Atelier es una tienda de accesorios premium con una experiencia de compra completamente funcional. Un proyecto e-commerce de punta a punta: catálogo con filtros, carrito persistente, simulación de checkout y una UI que parece sacada de una agencia de diseño.
Más que un CRUD, este proyecto demuestra cómo construir UX compleja con React — gestión de estado global, rutas dinámicas y flujos de usuario reales.
| Hero | Catálogo | Carrito |
|---|---|---|
 |
 |
 |
- Catálogo completo — grid de productos con badges (Bestseller, Premium, Nuevo, Edición Limitada)
- Búsqueda y filtros — por categoría, precio y disponibilidad en tiempo real
- Carrito persistente — se mantiene entre sesiones con
localStorage - Sidebar de carrito — slide-in con gestión de cantidades, subtotal y envío gratis
- Simulación de pago — flujo de checkout con validación de formulario
- Favoritos — marcar y guardar productos
- Ratings con estrellas — sistema de reseñas visual
- Diseño responsive — mobile-first, se ve bien en cualquier pantalla
- Animaciones suaves — transiciones y micro-interacciones cuidadas
| Tecnología | Uso |
|---|---|
| React 18 | UI y componentes |
| TypeScript | Tipado estático |
| Vite | Bundler y dev server |
| Tailwind CSS | Estilos utilitarios |
| React Router | Rutas dinámicas |
| Zustand / Context API | Estado global del carrito |
| Vitest | Tests unitarios |
# Clona el repositorio
git clone https://github.com/tu-usuario/atelier-shop.git
cd atelier-shop
# Instala dependencias
npm install
# Corre el dev server
npm run devAbre http://localhost:5173 en tu navegador.
# Build de producción
npm run build
# Preview del build
npm run preview
# Tests
npm run testsrc/
├── components/
│ ├── ui/ # Componentes base (Button, Badge, Rating...)
│ ├── layout/ # Header, Footer, CartSidebar
│ └── product/ # ProductCard, ProductGrid, Filters
├── pages/
│ ├── Home.tsx # Hero + productos destacados
│ ├── Catalog.tsx # Catálogo con filtros
│ ├── Product.tsx # Detalle de producto
│ └── Checkout.tsx # Simulación de pago
├── store/
│ └── cartStore.ts # Estado global del carrito
├── types/
│ └── index.ts # Interfaces y tipos
└── data/
└── products.ts # Catálogo de productos
Este proyecto fue un ejercicio deliberado en complejidad de frontend:
- Estado global sin Redux — usando Zustand (o Context + useReducer) de forma escalable
- Persistencia del carrito con
localStoragey sincronización entre tabs - Rutas dinámicas con parámetros (
/product/:id) - UX de carrito — el sidebar con overlay, el badge del ícono que se actualiza en tiempo real
- Filtros combinados — varios filtros activos simultáneamente sin romper el estado
- Diseño de sistema — componentes reutilizables con variantes (badges, botones, cards)
- TypeScript estricto — interfaces bien definidas para productos, carrito y usuario
La paleta y tipografía apuntan a un e-commerce de lujo accesible:
- Tipografía serif para los títulos → sensación editorial
- Cognac (#B5682A) como color de acento → cálido, premium, sin ser ostentoso
- Fondo crema (#F5F0EB) → evita el blanco frío, da sensación de papel de calidad
- Badges en negro sólido → contraste máximo, legibilidad ante cualquier imagen
Juan Florian Dev — Email
Hecho con ☕ y demasiadas horas de Figma
⭐ Si te gustó el proyecto, dale una estrella — significa mucho.