📌 Project Overview
The Restaurant / Food template is a complete digital dining platform built for restaurants, cafes, bakeries, and food brands that need more than a static menu page. With a Supabase-backed online ordering system powered by Stripe, a real-time kitchen dashboard, and automated reservation confirmations via Resend, this template bridges the gap between the front-of-house guest experience and the back-of-house operational workflow.
From family-run eateries to multi-location restaurant groups, this platform presents a branded, appetizing online presence while delivering real operational value through live order management and staff-facing admin tools.
🧩 Core Features
1. Categorized Menu with Framer Motion Cards
The Menu page is statically generated from Supabase and organized into categories (starters, mains, desserts, drinks). Framer Motion hover cards add visual delight to each menu item, making digital browsing feel as appetizing as the physical menu.
2. Online Ordering with Stripe
Guests can browse the menu, build a cart via Zustand, and complete checkout through a Stripe-powered payment flow. Orders are saved to Supabase and instantly visible in the kitchen dashboard.
3. Reservation System with Time Slots
A React DatePicker-powered reservations page shows available time slots from Supabase. On booking, a confirmation email is sent via Resend with full reservation details.
4. Real-Time Kitchen Order Queue
The Admin Panel includes a Supabase Realtime-powered kitchen queue where new orders appear live. Staff can update order status through a clear workflow: Received → Preparing → Ready → Delivered.
5. Reservation Management Table
Admins can view, confirm, and manage all incoming reservations from a structured table in the admin panel — with the ability to filter by date and party size.
6. Google Maps Location Embed
The Contact page includes an interactive Google Maps embed showing the restaurant's location with directions support — critical for guest discoverability.
🧰 Tech Stack
| Feature Area | Technology | Purpose |
|---|---|---|
| Frontend Framework | Next.js 14 (App Router) + TypeScript | SSG menu pages, fast load |
| Styling | Tailwind CSS | Visual menu layout |
| Animations | Framer Motion | Menu item hover cards |
| Cart State | Zustand | Online order cart management |
| Booking UI | React DatePicker | Reservation date/time picker |
| Maps | @react-google-maps/api | Location embed & directions |
| Payments | Stripe React + Stripe API | Online order checkout |
| Database | Supabase (PostgreSQL) | Menu items, orders, reservations |
| Auth | Supabase Auth | Staff & admin portal login |
| Live Updates | Supabase Realtime | Live kitchen order queue |
| Resend | Reservation confirmations & receipts | |
| Hosting | Vercel | Hosting & deployment |
🗂️ Website Structure
| Page / Component | Functionality |
|---|---|
| Home | Hero with food imagery, specials highlight, and quick-order CTA |
| Menu | Category-filtered SSG menu with Framer Motion item cards |
| Reservations | DatePicker booking form with Supabase time-slot availability |
| Order Online | Zustand cart, item customization, and Stripe checkout |
| Gallery | Food and ambiance photo gallery with lightbox |
| About | Restaurant story, chef profiles, and brand values |
| Contact | Address, hours, Google Maps embed, contact form |
| Admin Panel | Realtime order queue, status management, and reservation table |
🔒 Key Technical Highlights
- Supabase Realtime hook for live kitchen order queue updates
- Order status workflow: Received → Preparing → Ready → Delivered
- Reservation management with date filtering and confirmation controls
- Menu item management: add, edit, and toggle item availability
- Supabase schema: menu_items, menu_categories, reservations, orders, order_items