Bar de Tapas Virtual
El Reto
Tras consolidar mis conocimientos en desarrollo web nativo, mi siguiente objetivo profesional fue dominar React. Buscaba un proyecto que no solo me permitiera explorar a fondo su arquitectura, sino que también tuviera una aplicación real en un mercado que conozco bien: la hostelería de Córdoba. La idea era simular un encargo profesional, pero con un giro innovador: ¿podría construir el catálogo digital de un bar de tapas que no existe, utilizando imágenes generadas por IA para crear un concepto y una carta completamente virtuales?
Mi Solución
Para dar vida a este concepto, diseñé y construí una Single-Page Application (SPA) completa utilizando React. La meta era replicar la estructura de un sitio web corporativo real. La aplicación cuenta con una navegación fluida entre distintas secciones (Inicio, Sobre Nosotros, Contacto) gracias a la implementación de React Router. La arquitectura se basa en componentes modulares y reutilizables, una de las principales fortalezas de React, lo que permitió construir una interfaz de usuario consistente y fácil de mantener.
Informe del Arquitecto
Pila Tecnológica (Tech Stack)
- React
- React Router
- React-Slick
- FontAwesome
- Vite
- ESLint
- JSON
Arquitectura y Decisiones Clave
- Arquitectura SPA (Single-Page Application) para una experiencia de usuario fluida, utilizando React Router para gestionar las rutas del lado del cliente.
- Gestión de Estado Local y Flujo de "Props": Se tomó la decisión deliberada de manejar el estado a nivel de componente (useState) y a través del flujo de "props", manteniendo el código limpio y de alto rendimiento para la escala del proyecto.
- Interfaz de Usuario Enriquecida: Se integraron librerías de terceros como React-Slick y FontAwesome para crear una UI dinámica y visualmente atractiva.
- Datos Desacoplados: Toda la información de los platos y testimonios se almacenó en ficheros JSON, separando limpiamente los datos de la lógica de la aplicación.
Desafío Técnico Principal
El principal desafío fue construir una aplicación React completa gestionando el estado de forma nativa. Me centré en dominar el flujo de datos unidireccional de React, utilizando 'props' y 'useState' para comunicar y manejar el estado. Este enfoque me obligó a pensar cuidadosamente en la jerarquía de los componentes y me proporcionó una comprensión fundamental de los principios básicos de React, base para escalar a herramientas más complejas cuando el proyecto realmente lo requiere.
