The public experience
Focused on discovering the restaurant, browsing the menu, placing orders, and managing reservations.
Distrito Gourmet
Featured project · Full-Stack · 2026
A dining experience, from start to finish.
Distrito Gourmet is a full-stack web application connecting the customer's digital experience with a restaurant's internal management.
From exploring the menu and placing orders to managing reservations, products, and users, the project brings different processes together in one platform.
Built as my final project for the Web Application Development vocational programme, I took responsibility for interface design, frontend and backend implementation, data modelling, and system integration.
My role
Full-stack design and development
Core stack
React · Laravel · MySQL · Tailwind CSS · Zustand
Type
Functional academic project
01 / Context
More than a restaurant website.
A restaurant website may be the first point of contact with a customer, but behind that experience are several needs: managing orders, organising reservations, updating products, and overseeing business operations.
Distrito Gourmet started with the idea of connecting both sides of that experience.
The goal was to build more than a visually appealing page: a complete application in which customers and staff interact with the same system through interfaces designed for their respective needs.
02 / Approach
One platform. Two ways to use it.
I organised the project around two main areas:
The internal experience
Designed for staff and administrators to oversee operations and keep restaurant information up to date.
Both share a REST API and a relational database, while available functionality depends on the user's profile.
This separation adapts each interface to its purpose without duplicating the system's core logic.
03 / Design
The first impression.
The first impression is part of the experience. The home page is the entry point to Distrito Gourmet, introducing the restaurant's identity and guiding visitors towards its main features.
I developed a food-focused visual composition, combining images, typography, content hierarchy, and animation to create engaging and consistent navigation.
Visitors can discover the restaurant while keeping the key actions in sight: exploring the menu, making a reservation, or accessing their account.
Video 01 — Home and navigation
00:18A walkthrough of the landing page, its sections, transitions, and navigation experience.
Highlights: Responsive design · React components · Animation · Navigation
04 / Customer experience
From discovery to action.
The public experience goes beyond browsing a page.
I designed journeys for customers to browse the menu, discover available products, manage a cart, prepare a takeaway order, and make reservations.
Each interaction needs to keep information consistent and give users clear feedback.
I used React to build reusable components, Zustand to manage shared state, and Laravel to process operations and apply the corresponding validation.
The goal was to make these processes straightforward to use, even when they involve different states, forms, and business rules.
Video 02 — Customer experience
02:25A demonstration of Distrito Gourmet's main public features.
Highlights: Digital menu · Cart and orders · Reservations · Validation · State management
05 / Backoffice
The system behind the experience.
What happens behind every order and reservation. A customer experience needs internal tools that help the restaurant manage operations in an organised way.
I built an administration environment separate from public navigation, designed to review information and take actions across the system's modules.
The panel supports managing products, overseeing orders and reservations, managing users, and viewing operational indicators according to available permissions.
The backend centralises business rules and applies authorisation controls to distinguish the actions of customers, staff, and administrators.
This part of the project was particularly valuable for working with CRUD operations, entity relationships, authentication, and access control.
Video 03 — Administration panel
01:21A walkthrough of the dashboard and the main internal management modules.
Highlights: Dashboard · Order management · Reservations · Catalogue · Roles and permissions
Order management
Overseeing orders and their states.
Reservations and catalogue
Managing reservations and maintaining products.
Users and permissions
Operations available according to the user's profile.
06 / Architecture and technologies
Separate responsibilities to build a coherent system.
Distrito Gourmet uses a client-server architecture in which interfaces consume a REST API.
Frontend — React, Vite and Tailwind CSS
React divides interfaces into reusable components. Tailwind CSS supports consistent styling that adapts to different screen sizes.
State — Zustand
Manages shared information between components, particularly in journeys that need to retain data during navigation.
Backend — Laravel
Provides API endpoints, request validation, and the business logic for the different modules.
Authentication — Laravel Sanctum
Protects resources and restricts operations according to defined roles.
Database — MySQL
Stores system information through related entities such as users, products, orders, and reservations.
Environment — Docker Compose
Supports running services and preparing a reproducible development environment.
07 / Decisions and challenges
Building the screens was only part of the work.
01. Preserve state between views
The cart and other interactions needed to retain information during navigation. I used Zustand to centralise shared state and simplify communication between components.
02. Manage operations with business rules
Reservations and orders need checks beyond forms. I concentrated the relevant validation in Laravel to avoid depending exclusively on the frontend.
03. Distinguish each user's permissions
Not every profile should access the same operations. I organised authentication and authorisation to separate public and internal functionality.
04. Connect the parts of the system
Communication between React, Laravel, and MySQL let me work with a complete flow: user interaction, HTTP request, backend processing, persistence, and interface update.
08 / Outcome and learnings
A project that changed how I develop.
Distrito Gourmet started as my final Web Application Development project and became an application integrating user experiences, internal operations, and different technologies.
Beyond the visual result, it let me work with full-stack application challenges: architecture, permissions, data relationships, shared state, and business logic.
This project taught me that developing an application is about more than making each screen work: it is about designing a system in which all the pieces make sense together.
What I would improve in the next iteration
Expand automated test coverage, strengthen end-to-end testing, and continue refining accessibility and performance.
Explore the project
Discover how Distrito Gourmet works or browse its source code and technical documentation.