La experiencia pública
Centrada en explorar el restaurante, consultar la carta, realizar pedidos y gestionar reservas.
Distrito Gourmet
Proyecto destacado · Full-Stack · 2026
Una experiencia gastronómica, de principio a fin.
Distrito Gourmet es una aplicación web Full-Stack que conecta la experiencia digital del cliente con la gestión interna de un restaurante.
Desde explorar la carta y realizar pedidos hasta gestionar reservas, productos y usuarios, el proyecto reúne diferentes procesos en una única plataforma.
Desarrollado como mi proyecto final del ciclo de Desarrollo de Aplicaciones Web, asumí el diseño de la interfaz, la implementación del frontend y backend, el modelado de datos y la integración del sistema.
Mi rol
Diseño y desarrollo Full-Stack
Stack principal
React · Laravel · MySQL · Tailwind CSS · Zustand
Tipo
Proyecto académico funcional
01 / El contexto
Mucho más que la web de un restaurante.
Una web gastronómica puede ser el primer contacto entre un cliente y un restaurante, pero detrás de esa experiencia existen diferentes necesidades: gestionar pedidos, organizar reservas, actualizar productos y controlar las operaciones del negocio.
Distrito Gourmet surgió con la idea de conectar ambos lados de esa experiencia.
El objetivo no era desarrollar únicamente una página visualmente atractiva, sino construir una aplicación completa en la que clientes y personal interactuasen con el mismo sistema desde interfaces diseñadas para sus respectivas necesidades.
02 / El enfoque
Una plataforma. Dos formas de utilizarla.
Organicé el proyecto alrededor de dos grandes áreas:
La experiencia interna
Pensada para que el personal y los administradores puedan supervisar las operaciones y mantener actualizada la información del restaurante.
Ambas comparten una API REST y una base de datos relacional, mientras que las funcionalidades disponibles dependen del perfil del usuario.
Esta separación permite adaptar cada interfaz a su propósito sin duplicar la lógica principal del sistema.
03 / Diseño
La primera impresión.
La primera impresión también forma parte de la experiencia. La Home es el punto de entrada a Distrito Gourmet. Su objetivo es presentar la identidad del restaurante y guiar al visitante hacia las funcionalidades principales.
Trabajé una composición visual centrada en la gastronomía, combinando imágenes, tipografía, jerarquía de contenidos y animaciones para conseguir una navegación atractiva y coherente.
La experiencia está diseñada para que el usuario pueda descubrir el restaurante sin perder de vista las acciones más importantes: explorar la carta, realizar una reserva o acceder a su cuenta.
Vídeo 01 — Home y navegación
00:18Recorrido por la portada, sus distintas secciones, las transiciones y la experiencia de navegación.
Aspectos destacados: Diseño responsive · Componentes React · Animaciones · Navegación
04 / Experiencia de cliente
Del descubrimiento a la acción.
La experiencia pública va más allá de navegar por una página.
Diseñé diferentes recorridos para que el cliente pudiera consultar la carta, descubrir los productos disponibles, gestionar un carrito, preparar un pedido para recoger y realizar reservas.
Cada interacción necesita mantener la información coherente y ofrecer respuestas claras al usuario.
Para conseguirlo, utilicé React para construir componentes reutilizables, Zustand para gestionar el estado compartido y Laravel para procesar las operaciones y aplicar las validaciones correspondientes.
El objetivo fue que los procesos resultaran sencillos de utilizar, aunque detrás existieran diferentes estados, formularios y reglas de negocio.
Vídeo 02 — Experiencia de cliente
02:25Demostración de las principales funcionalidades públicas de Distrito Gourmet.
Aspectos destacados: Carta digital · Carrito y pedidos · Reservas · Validaciones · Gestión de estado
05 / Backoffice
El sistema detrás de la experiencia.
Lo que ocurre detrás de cada pedido y reserva. Una experiencia de cliente necesita herramientas internas que permitan al restaurante gestionar las operaciones de manera organizada.
Por eso desarrollé un entorno de administración independiente de la navegación pública, pensado para consultar información y realizar acciones sobre los diferentes módulos del sistema.
Desde este panel es posible administrar productos, supervisar pedidos y reservas, gestionar usuarios y consultar indicadores operativos, de acuerdo con los permisos disponibles.
El backend centraliza las reglas de negocio y aplica controles de autorización para diferenciar las acciones de clientes, personal y administradores.
Esta parte del proyecto fue especialmente importante para trabajar con operaciones CRUD, relaciones entre entidades, autenticación y control de acceso.
Vídeo 03 — Panel de administración
01:21Recorrido por el dashboard y los principales módulos de gestión interna.
Aspectos destacados: Dashboard · Gestión de pedidos · Reservas · Catálogo · Roles y permisos
Gestión de pedidos
Supervisión de los pedidos y sus estados.
Reservas y catálogo
Gestión de reservas y mantenimiento de productos.
Usuarios y permisos
Operaciones disponibles según el perfil del usuario.
06 / Arquitectura y tecnologías
Separar responsabilidades para construir un sistema coherente.
Distrito Gourmet se apoya en una arquitectura cliente-servidor donde las interfaces consumen una API REST.
Frontend — React, Vite y Tailwind CSS
React permite dividir las interfaces en componentes reutilizables. Tailwind CSS facilita la construcción de estilos consistentes y adaptables a distintos tamaños de pantalla.
Estado — Zustand
Gestiona información compartida entre componentes, especialmente en los recorridos que requieren conservar datos durante la navegación.
Backend — Laravel
Proporciona los endpoints de la API, la validación de solicitudes y la lógica de negocio relacionada con los diferentes módulos.
Autenticación — Laravel Sanctum
Permite proteger los recursos y restringir operaciones según los roles definidos.
Base de datos — MySQL
Mantiene la información del sistema mediante entidades relacionadas, como usuarios, productos, pedidos y reservas.
Entorno — Docker Compose
Facilita la ejecución de los servicios y la preparación de un entorno de desarrollo reproducible.
07 / Decisiones y desafíos
Construir las pantallas fue solo una parte del trabajo.
01. Mantener el estado entre diferentes vistas
El carrito y otras interacciones necesitaban conservar información mientras el usuario navegaba. Utilicé Zustand para centralizar el estado compartido y simplificar su comunicación entre componentes.
02. Gestionar operaciones con reglas de negocio
Reservas y pedidos requieren controles que van más allá de los formularios. Concentré las validaciones relevantes en Laravel para evitar depender exclusivamente del frontend.
03. Diferenciar los permisos de cada usuario
No todos los perfiles deben tener acceso a las mismas operaciones. Organicé la autenticación y autorización para separar las funcionalidades públicas de las internas.
04. Conectar diferentes partes del sistema
La comunicación entre React, Laravel y MySQL me permitió trabajar con un flujo completo: interacción del usuario, solicitud HTTP, procesamiento en el backend, persistencia y actualización de la interfaz.
08 / Resultado y aprendizajes
Un proyecto que cambió mi manera de desarrollar.
Distrito Gourmet comenzó como mi proyecto final de Desarrollo de Aplicaciones Web y terminó convirtiéndose en una aplicación que integra experiencias de usuario, operaciones internas y diferentes tecnologías.
Más allá del resultado visual, me permitió trabajar con problemas propios de una aplicación Full-Stack: arquitectura, permisos, relaciones entre datos, estados compartidos y lógica de negocio.
Fue el proyecto con el que comprendí que desarrollar una aplicación no consiste solamente en conseguir que cada pantalla funcione, sino en diseñar un sistema en el que todas las piezas tengan sentido juntas.
Lo que mejoraría en una siguiente iteración
Ampliar la cobertura de pruebas automatizadas, reforzar las pruebas de extremo a extremo y seguir refinando la accesibilidad y el rendimiento.
Explora el proyecto
Conoce cómo funciona Distrito Gourmet o consulta su código y documentación técnica.