Proyecto Académico: Rincón del Sabor - App Restaurante

Este proyecto es una aplicación web interactiva desarrollada como parte de un programa académico enfocado en el Diseño de Interfaces Frontend y Maquetación Responsiva utilizando React y Vite.

La aplicación simula el sitio web de un restaurante de comida rápida casera ("Rincón del Sabor"), implementando flujos de navegación dinámicos, un catálogo interactivo de productos dividido por categorías, un carrito de compras funcional en tiempo real y un diseño completamente adaptable a dispositivos móviles.

---

🎯 Objetivos Académicos y Competencias

• Desarrollo Orientado a Componentes: Estructuración de interfaces modulares y componentes reutilizables con React.
• Gestión del Estado en React: Uso práctico de React Hooks (useState) para controlar de manera síncrona el flujo de navegación, la adición/eliminación de ítems del carrito de compras y la interactividad del menú móvil.
• Maquetación Semántica y Accesibilidad (A11y): Implementación rigurosa de elementos semánticos de HTML5 para optimizar el SEO y la lectura en lectores de pantalla.
• Diseño Web Responsivo (RWD): Creación de hojas de estilo (CSS3) fluidas basadas en Flexbox y Grid, empleando breakpoints responsivos para asegurar una visualización excelente desde celulares compactos hasta pantallas de escritorio.
• Interactividad y Micro-animaciones: Diseño de transiciones y efectos de hover fluidos para mejorar la experiencia de usuario (UX) e interacción táctil.

---

🚀 Características Clave del Proyecto

1. Menú Hamburguesa Interactivo (Móvil):
   • En pantallas medianas/celulares (≤ 768px), la barra de navegación se convierte automáticamente en un menú hamburguesa animado.
   • Al activarlo, se despliega un panel lateral (drawer) interactivo mediante transiciones fluidas de CSS y un fondo semitransparente con desenfoque (glassmorphic overlay).
   • El menú se cierra de forma automática al hacer clic fuera del panel o al seleccionar cualquier enlace.
2. Carrito de Compras en Tiempo Real:
   • Permite agregar combos de menús, bebidas y postres de forma inmutable.
   • Calcula de manera automática las cantidades y el total a pagar de forma dinámica.
   • Permite eliminar productos individuales o vaciar la orden completa.
3. Secciones Dinámicas (Ruteo Sencillo con Estado):
   • Inicio: Landing page con Carrusel animado automático, sección informativa corporativa (Historia, Misión, Visión), mapa incrustado y video promocional.
   • Menús / Bebidas / Postres: Catálogos de productos organizados por tarjetas interactivas (ProductCard).
4. SEO e Indexación Básica:
   • Optimizado mediante metatags responsivos, descripciones contextuales de negocio y tags semánticos.

---

🛠️ Tecnologías Empleadas

• React 18 (Librería Frontend)
• Vite (Herramienta de compilación rápida y servidor de desarrollo)
• JavaScript (ES6+) (Lógica interactiva de datos)
• JSX (Estructura de componentes)
• Vanilla CSS3 (Diseño visual, variables CSS de colores y animaciones)
• HTML5 Semántico (Contenido estructurado)

---

📁 Estructura del Proyecto

A continuación se detalla la organización de los directorios clave del frontend:

App-Restaurante/
├── index.html             # Punto de entrada HTML con Metatags SEO
├── package.json           # Dependencias y scripts de ejecución
├── src/
│   ├── main.jsx           # Punto de entrada de la aplicación React
│   ├── App.jsx            # Componente raíz y lógica del estado global (Carrito/Vistas)
│   ├── App.css            # Estilos globales, variables CSS, animaciones y media queries
│   ├── index.css          # Estilos base globales
│   ├── assets/            # Imágenes, videos y placeholders del proyecto
│   ├── Data/              # Archivos de datos JSON de productos (Menu, Bebidas, Postres)
│   └── components/        # Componentes de React modulares
│       ├── Header.jsx     # Cabecera, hero banner y menú hamburguesa móvil
│       ├── Carrusel.jsx   # Slider animado del banner de inicio
│       ├── ProductCard.jsx# Tarjeta individual de presentación de cada producto
│       ├── Menu.jsx       # Catálogo de combos y platos principales
│       ├── Bebidas.jsx    # Catálogo de bebidas
│       ├── Postres.jsx    # Catálogo de postres
│       ├── Carrito.jsx    # Módulo de lista de compras y facturación
│       └── Footer.jsx     # Pie de página corporativo

---

⚙️ Instrucciones para Ejecución Local

Para levantar y ver el proyecto en tu entorno local, sigue los siguientes pasos:

1. Clonar o descargar el repositorio

Asegúrate de extraer los archivos en una carpeta de tu sistema operativo.

2. Instalar las dependencias de Node.js

Abre la terminal de comandos dentro de la ruta del proyecto y ejecuta:

npm install

3. Iniciar el servidor de desarrollo local

Para correr el entorno de desarrollo con recarga rápida (HMR):

npm run dev

Una vez ejecutado, abre en tu navegador la dirección indicada en la consola (usualmente http://localhost:5173).

4. Compilar para Producción (Opcional)

Para generar el compilado optimizado en la carpeta /dist:

npm run build

---

📝 Documentación del Informe

Para acceder al análisis técnico detallado, justificaciones del uso del menú hamburguesa, explicaciones detalladas del código de estados en React y la estructura semántica de maquetación, consulta el archivo: 📄 DOCUMENTACION.md en la raíz del proyecto.