🛍️ ATELIER

Objetos cuidadosamente seleccionados para quienes aprecian la belleza en lo cotidiano.

🌐 Ver Demo · 🐛 Reportar Bug

---

✨ Qué es esto

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.

---

🖼️ Preview

Hero	Catálogo	Carrito

---

🔥 Features

• 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

---

🛠️ Stack

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

---

🚀 Cómo correrlo localmente

# 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 dev

Abre http://localhost:5173 en tu navegador.

# Build de producción
npm run build

# Preview del build
npm run preview

# Tests
npm run test

---

📁 Estructura del proyecto

src/
├── 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

---

🧠 Lo que aprendí / demostré

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 localStorage y 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

---

🎨 Decisiones de diseño

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

---

📬 Contacto

Juan Florian Dev — Email

---

Hecho con ☕ y demasiadas horas de Figma

⭐ Si te gustó el proyecto, dale una estrella — significa mucho.