Latido is a full-stack, high-performance digital menu web application built for a modern fast-food brand. It features a striking Neo-Brutalist design, complex product variant management, and a seamless direct-to-WhatsApp ordering system.
This project was developed to showcase advanced front-end architecture, complex state management, and real-time database integration.
- 🛒 Complex State Management: Handled via
Zustandto manage dynamic cart calculations (Base Prices, Variants, Size Upgrades, Sauces, and Add-ons). - 📲 WhatsApp Integration: Dynamically generates a formatted WhatsApp message with the exact order details and total price.
- 🔐 Secure Admin Dashboard: Protected routes with Firebase Authentication to manage the menu.
- 🎛️ Dynamic Product Forms: Category-reactive forms (e.g., Tacos have different options than Burgers) using
react-hook-form. - ☁️ Cloud Storage: Direct image uploads for menu items.
- 🎨 Neo-Brutalist UI: Custom styling using Tailwind CSS, Shadcn UI, and smooth animations with Framer Motion.
- Framework: Next.js 14 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS & Shadcn UI
- Animations: Framer Motion
- State Management: Zustand
- Backend / BaaS: Firebase (Firestore & Auth)
- Forms: React Hook Form + Zod