Café Fausse - Full-Stack Modern Restaurant Platform

📌 Project Overview

Café Fausse is a comprehensive, modern full-stack web application built for an Asian-inspired poke restaurant. It provides a seamless digital experience for customers to explore a dynamic menu, learn about the brand, and make real-time table reservations. It features a decoupled, mobile-first architecture utilizing a responsive React SPA frontend and a robust Python/Flask RESTful API backend.

🛠️ Technology Stack

Frontend (Client Application)

• Framework: React (v18/19), built with Vite for optimized development and bundling.
• Routing & State: TanStack React Router & React Query for efficient, file-based routing and server state management.
• Styling & UI: Tailwind CSS (v4) unified with HeroUI React components, and Framer Motion for fluid micro-animations.
• API Client: Axios & customized hooks for data fetching.

Backend (REST API)

• Framework: Python Flask (v3.1)
• Database: PostgreSQL, integrated with SQLAlchemy ORM and Flask-Migrate for robust schema migrations.
• Key Libraries: Flask-CORS for cross-origin management, and Email-Validator for newsletter subscriptions.

✨ Key Features & Technical Implementations

1. Automated Reservation & Table Matrix System

The backbone of the backend is an intelligent reservation engine built to manage dynamic restaurant capacity:

• Algorithmic Time Slot Generation: Calculates active 30-minute intervals aligned strictly with business operating hours (Mon-Sat 5PM-11PM, Sun 5PM-9PM) ensuring a standard 2-hour dining block.
• Dynamic Capacity Allocation: Manages an inventory of 30 distinct tables of varying sizes (accommodating 2, 4, 6, and 8 guests). The system calculates live availability and sequentially assigns the most optimally sized table without overbooking.
• Data Integrity & Validation: Prevents double-bookings natively at the database level and enforces strict validation checks to prevent backdated reservations.

2. High-Performance, Dynamic Display Menu

• Data Architecture: Organized via hierarchical entities (MenuCategory and MenuItem), allowing the restaurant to flexibly add, hide, or reorganize offerings instantly.
• Search & Filtering: Integrates an API-level search algorithm to allow users to efficiently query items by name or description ingredients.

3. Modern, Immersive User Interface (UI/UX)

• Mobile-First & Responsive: The UI scales natively to all breakpoints without losing visual fidelity, using Tailwind CSS and specific container configurations.
• Aesthetic & Animation: High aesthetic quality utilizing Framer Motion to apply fluid component transitions and card hover states. Includes an educational “What is Poke?” section, customer testimonials, and an interactive Location API.

4. Admin Initialization & Scaling

• Pre-Built Seeding: Incorporates a robust initialization script to generate tables, categories, menu items, and admin credentials, ensuring instantaneous database readiness in any new deployment environment.
• Database Migrations: Designed around alembic (via Flask-Migrate) to guarantee that any schema change is safely handled across staging and production phases.

🎯 Challenges Solved

• State Management Complexity: Managing the UI state between asynchronous API calls when searching availability for tables could result in visual lag. Solved seamlessly by routing server state through TanStack Query, offering predictive caching and zero-lag user feedback.
• Availability Logic: Building a reservation system required managing overlapping event durations over a fixed matrix of tables. Successfully resolved by utilizing rigorous SQL constraints and algorithmically validating 2-hour blocks of availability before insertion.