BistroBook - Restaurant Table Booking System 🍽️

A modern, high-end restaurant table reservation and digital menu web application designed specifically for BistroBook Dhaka, located in Dhanmondi (House 42, Road 27).

Built with 100% Free & Open-Source technologies:

• Next.js 14 App Router + TypeScript
• Tailwind CSS (Charcoal #1C1C1C, Cream #FFFBF0, Terracotta #C86B5A)
• Supabase (PostgreSQL Database, Realtime Subscriptions, RLS Policies) + Instant zero-setup local store fallback
• Leaflet + OpenStreetMap for interactive maps (No Google Maps API keys or charges!)
• qrcode.react for instant QR check-in passes & mobile tabletop menu scanning
• Lucide Icons

---

🌟 Key Features

1. Customer Dining Table Booking (/book)

• Strict Real-Time Availability Engine:
  • Step 1: Filters tables where seats >= guests and is_available = true.
  • Step 2: Queries reservations where booking_date = selected_date AND booking_time = selected_time AND status != 'cancelled'.
  • Step 3: Computes available tables (Step 1 minus Step 2 booked tables).
  • Double-booking prevention on client, repository, and database levels.
• Date & Time Controls: Past dates disabled, service slots from 10:00 AM to 10:00 PM.
• Visual Table Grid: 8 dining tables with capacities for couples (2 seats), standard dining (4 seats), and family booths (6 seats).
• Instant Digital QR Pass: Generates a scannable QR verification pass via qrcode.react with festive confetti celebration.

2. Dining Menu & Tabletop QR Menu (/menu & /qr-menu)

• /menu: Full culinary grid with category tabs (Biryani & Rice, Curries & Grills, Seafood, Starters & Chaat, Desserts, Drinks), BDT (৳) pricing, search bar, and authentic Bangladeshi dishes (Kacchi Biryani, Beef Kala Bhuna, Padma Shorshe Ilish, Dahi Fuchka, Borhani, Shahi Firni).
• /qr-menu: Mobile-optimized dine-in tabletop view designed for patrons scanning the physical QR sticker at their table with draft ordering and a "Call Waiter" buzzer.

3. Leaflet OpenStreetMap (/)

• Centered on Dhanmondi Road 27 (Old), Dhaka 1209 (23.7533° N, 90.3768° E).
• Custom terracotta pulsing pin marker and popup with GPS directions.
• Client-side dynamic rendering (ssr: false) to avoid SSR hydration mismatches.

4. Protected Admin Management Console (/admin & /admin/dashboard)

• Demo Login:
  • Email: admin@bistro.test
  • Password: demo123
  • Includes an instant "Autofill Demo" button on the login screen.
• Live Realtime Bookings: Status badges (Pending, Confirmed, Cancelled), filter by status/guest, one-click Confirm/Cancel with Supabase Realtime synchronization.
• Table Management (CRUD): Add dining tables, change seat numbers, toggle table availability on/off.
• Menu Management (CRUD): Add new dishes, edit price, category, Unsplash image URL, and toggle Chef’s Specials.

---

🚀 Quick Start Guide

1. Clone & Install Dependencies

git clone <repo-url> bistrobook
cd bistrobook
npm install

2. Run Locally (Zero Setup Mode)

The application works instantly out of the box! If Supabase environment variables are omitted, BistroBook runs on a local browser repository pre-seeded with all 8 Dhanmondi tables and 12 authentic dishes.

npm run dev

Open http://localhost:3000 in your browser.

---

🗄️ Setting Up Supabase (100% Free Cloud Database)

To connect live cloud PostgreSQL with Realtime subscriptions:

1. Create a free account at supabase.com and create a new project.
2. In your Supabase project dashboard, navigate to SQL Editor.
3. Open supabase/schema.sql from this repository, paste the entire SQL script, and click Run.
   • This creates all 4 tables: restaurants, tables, menu_items, bookings.
   • Enables Row Level Security (RLS) policies.
   • Adds bookings to supabase_realtime publication.
   • Inserts all initial Bangladeshi seed data.
4. Go to Project Settings -> API and copy:
   • Project URL
   • anon public key
5. Create a .env.local file in the root directory:

NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key

6. Restart your development server:

npm run dev

The admin dashboard header will now display ● Supabase Connected and listen for live Realtime PostgreSQL database updates!

---

🧭 Page Routes

Route	Description
/	Homepage (Hero, Today's Specials, Dhanmondi Leaflet Map, Story, Opening Hours)
/book	Table booking flow with availability engine, visual tables grid, and QR Pass
/menu	Full dining menu with category filtering and keyword search
/qr-menu	Mobile-first tabletop view for dine-in guests
/admin	Owner/staff login page with demo credentials display
/admin/dashboard	Live Realtime reservations table, table CRUD, menu CRUD, and occupancy stats

---

🚢 Deploying to Vercel

1. Push your repository to GitHub.
2. Import the project in Vercel.
3. Add the two environment variables (NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY) in the Vercel project settings.
4. Click Deploy.

---

📜 License

MIT License. Created for BistroBook Dhaka.