☕ Café Lush - Frontend

Un frontend moderno y elegante para una cafetería construido con Next.js 14, HeroUI, y Tailwind CSS.

✨ Características

• 🏠 Página de inicio con hero section atractivo y productos destacados
• 📱 Diseño responsivo que funciona en todos los dispositivos
• 🔐 Sistema de autenticación (login/register)
• 👤 Dashboard de usuario con perfil e historial de pedidos
• 🛒 Carrito de compras completo con gestión de productos
• 🍽️ Menú interactivo con filtros y búsqueda
• 🎨 UI moderna con HeroUI y tema de cafetería
• ⚡ Rendimiento optimizado con Next.js 14

🚀 Tecnologías Utilizadas

• Next.js 14 - Framework de React con App Router
• TypeScript - Tipado estático
• HeroUI - Librería de componentes moderna
• Tailwind CSS - Framework de CSS utility-first
• Lucide React - Iconos
• Context API - Manejo de estado global

📋 Requisitos Previos

• Node.js 18+
• npm o yarn

🛠️ Instalación

1. Clonar o descargar el proyecto

   # Si tienes el código fuente
   cd frontend-cafeteria

2. Instalar dependencias

   npm install

3. Ejecutar en modo desarrollo

   npm run dev

4. Abrir en el navegador

   http://localhost:3000
   

📁 Estructura del Proyecto

frontend-cafeteria/
├── app/                    # App Router de Next.js 14
│   ├── globals.css        # Estilos globales
│   ├── layout.tsx         # Layout principal
│   ├── page.tsx           # Página de inicio
│   ├── providers.tsx      # Providers de contexto
│   ├── login/             # Página de login
│   ├── register/          # Página de registro
│   ├── dashboard/         # Dashboard del usuario
│   ├── menu/              # Página del menú
│   └── cart/              # Página del carrito
├── components/            # Componentes reutilizables
│   └── Navbar.tsx         # Barra de navegación
├── contexts/              # Context API
│   └── AppContext.tsx     # Estado global
├── data/                  # Datos mock
│   └── products.ts        # Productos y categorías
└── public/               # Archivos estáticos

🎮 Funcionalidades

🏠 Página de Inicio

• Hero section con llamada a la acción
• Categorías de productos
• Productos destacados
• Footer informativo

🔐 Autenticación

• Login: demo@cafeLush.com + cualquier contraseña
• Registro: Formulario completo con validaciones
• Estado persistente del usuario

👤 Dashboard

• Perfil del usuario
• Historial de pedidos
• Estadísticas básicas
• Acceso protegido

🍽️ Menú

• Filtros por categoría
• Búsqueda de productos
• Ordenamiento por precio/nombre
• Agregar al carrito

🛒 Carrito

• Gestión de cantidades
• Cálculo de totales
• Envío gratis +$100
• Checkout simulado

🎨 Tema de Colores

El proyecto utiliza una paleta de colores de café personalizada:

coffee: {
  50: '#fdf8f6',
  100: '#f2e8e5',
  200: '#eaddd7',
  300: '#e0cfc5',
  400: '#d2bab0',
  500: '#bfa094',
  600: '#a18072',
  700: '#977669',
  800: '#846358',
  900: '#43302b',
}

🔧 Personalización

Agregar Nuevos Productos

Edita data/products.ts:

{
  id: 'nuevo-id',
  name: 'Producto Nuevo',
  description: 'Descripción del producto',
  price: 50,
  image: 'https://url-de-imagen.jpg',
  category: 'categoria-id',
  available: true,
}

Modificar Categorías

Edita data/products.ts en la sección categories:

{ id: 'nueva-categoria', name: 'Nueva Categoría', icon: '🆕' }

Personalizar Estilos

• Modifica app/globals.css para estilos globales
• Usa clases de Tailwind en los componentes
• Personaliza colores en tailwind.config.ts

📱 Responsive Design

El sitio está optimizado para:

• 📱 Móviles (320px+)
• 📱 Tablets (768px+)
• 💻 Desktop (1024px+)
• 🖥️ Wide screens (1280px+)

🚀 Comandos Disponibles

# Desarrollo
npm run dev

# Construcción para producción
npm run build

# Iniciar en producción
npm start

# Linting
npm run lint

🤝 Demo

Credenciales de Prueba

• Email: demo@cafeLush.com
• Contraseña: Cualquier texto

Flujo de Prueba Recomendado

1. Navegar por la página de inicio
2. Explorar el menú y filtrar productos
3. Agregar productos al carrito
4. Iniciar sesión con las credenciales demo
5. Completar un pedido
6. Revisar el dashboard y historial

📝 Notas Técnicas

• Estado Global: Manejado con Context API y useReducer
• Rutas Protegidas: Implementadas en dashboard
• Datos Mock: Productos e historial de pedidos simulados
• Optimización: Imágenes optimizadas con Next.js Image
• SEO: Meta tags configurados para cada página

🎯 Próximas Mejoras

• Integración con API real
• Sistema de pagos
• Notificaciones push
• PWA (Progressive Web App)
• Modo oscuro
• Múltiples idiomas
• Geolocalización para delivery

📞 Soporte

Para cualquier duda o problema, puedes:

• Revisar la documentación de Next.js
• Consultar la documentación de HeroUI
• Revisar ejemplos de Tailwind CSS

---

¡Disfruta construyendo experiencias web increíbles! ☕✨