A premium MERN stack restaurant web application solving a real problem in modern food apps β the "Black Box Menu" problem.
Built with MongoDB, Express, React (Vite), and Node.js. Features a live menu availability engine, persistent dietary profiles, a smart reservation wizard with in-booking menu preview, and an admin dashboard β all wrapped in an elegant dark luxury UI.
π Officially part of GirlScript Summer of Code 2026 (GSSoC'26)
- π― The Problem We Solve
- β¨ Features
- π οΈ Tech Stack
- π System Architecture
- π Project Structure
- π Getting Started
- π API Reference
- π¨ Customization
- π€ Contributing
- π License
- π Acknowledgements
Most restaurant websites and food apps share the same flaw β the "Black Box Menu" problem:
Guests book a table with zero context about what's actually available that day. They see static dish names but have no idea which items are sold out, seasonal, or unavailable β until they arrive.
This leads to:
- No-shows when guests find their expected dish unavailable
- Restaurants unable to update menus dynamically without code changes
- Diners with dietary needs having to call ahead with basic questions
- Zero personalization β everyone sees the same menu regardless of context
| Problem | Solution |
|---|---|
| Static menus | Live Menu Engine β isAvailable flag per dish, toggled by admin in real-time |
| Dietary filter resets | Dietary Profile β saved to user account, auto-applies on every visit |
| No pre-booking menu insight | Reservation Menu Preview β Step 3 of the booking wizard shows tonight's available dishes |
| Requires dev to update menu | Admin Dashboard β toggle dishes, add items, moderate reviews β no code needed |
- All 18+ dishes stored in MongoDB with a live
isAvailableboolean - Admins toggle availability from the dashboard β changes reflect instantly for all users
- Public menu only shows available dishes; admins see all with sold-out indicators
GET /api/menu/tonightreturns dishes relevant to the current time of day
- Users set their dietary preference (
Vegetarian/Non-Vegetarian/All) on signup - Allergen alerts stored per user (gluten, dairy, nuts, eggs, soy, shellfish, fish)
- Menu auto-filters on every visit based on the saved profile β no re-selecting needed
- Profile updatable anytime via
PATCH /api/auth/me/dietary
- Date & Guests β pick date, validate against real table availability
- Time Slot β live slots from API showing tables remaining per slot
- Tonight's Menu Preview β see exactly what's available before confirming β the differentiator
- Confirm β special requests, email confirmation
- Elegant dark luxury theme (
#1a1714bg,#c9a962gold accents) - Fonts: Cormorant Garamond (headings) + Inter (body)
- Glassmorphism sticky navbar, parallax hero, scroll animations
- Fully responsive β mobile hamburger menu, fluid grid layouts
- JWT-based auth with
protectandauthorizemiddleware - Three roles:
user,staff,admin - Admin-only routes for menu management and review moderation
- Tokens stored securely with auto-redirect on expiry
- Live stats β total dishes, available now, sold out, reviews count
- Toggle any dish available/sold-out with a single switch
- Add new menu items with full schema (category, tags, allergens, prep time)
- Moderate guest reviews β view and delete
- Reviews stored in MongoDB (replaces the original localStorage approach)
- Authenticated users only can post reviews
- Displayed on the Home page, fetched live from API
| Technology | Purpose |
|---|---|
| Node.js | Runtime |
| Express.js | REST API framework |
| MongoDB | Database |
| Mongoose | ODM β schemas, validation, indexes |
| JSON Web Token | Authentication |
| bcryptjs | Password hashing |
| Nodemailer | Reservation confirmation emails |
| Helmet + CORS | Security middleware |
| Technology | Purpose |
|---|---|
| React 19 | UI framework |
| Vite | Build tool & dev server |
| React Router v7 | Client-side routing |
| Axios | HTTP client with JWT interceptor |
| React Context | Auth + Menu global state |
| Vanilla CSS | Design system (CSS variables) |
The Lighthouse is built on a decoupled MERN architecture comprising a React 19 SPA (/frontend), an Express REST API (/backend), and a legacy static client at the root.
Key architectural features include:
- Live Menu Availability Engine: Real-time dish availability toggling and dynamic time-of-day menu filtering.
- Double-Booking Protection: Database-level Mongoose partial unique index on
{ table: 1, date: 1, time: 1 }for confirmed reservations. - Security & Validation: JWT authentication, sliding-window rate limiting, and real-time DNS MX email domain verification.
π For complete subsystem topology diagrams, sequence flows, database schema constraints, and contributor extension guidelines, see the full Architecture Documentation.
The-Lighthouse/
β
βββ backend/ β Express + MongoDB API
β βββ .env.example β Copy to .env and fill in values
β βββ .gitignore
β βββ package.json
β βββ server.js β App entry, routes, CORS
β βββ src/
β βββ config/
β β βββ database.js β MongoDB connection
β β βββ seed.js β Seeds 18 menu items, tables, users
β βββ controllers/
β β βββ authController.js β Register, login, dietary profile
β β βββ menuController.js β CRUD + live toggle + tonight's menu
β β βββ reservationController.js
β β βββ reviewController.js
β βββ middleware/
β β βββ auth.js β JWT protect + authorize(role)
β β βββ validation.js
β βββ models/
β β βββ MenuItem.js β Live menu (isAvailable flag)
β β βββ Reservation.js
β β βββ Review.js β Persistent reviews
β β βββ Table.js
β β βββ User.js β + dietaryPreference, allergenAlerts
β βββ routes/
β β βββ authRoutes.js
β β βββ menuRoutes.js
β β βββ reservationRoutes.js
β β βββ reviewRoutes.js
β βββ services/
β βββ availabilityService.js
β βββ emailService.js
β
βββ frontend/ β React + Vite SPA
β βββ .gitignore
β βββ index.html
β βββ vite.config.js β Dev proxy β localhost:5000
β βββ package.json
β βββ src/
β βββ api/
β β βββ client.js β Axios + JWT interceptor
β β βββ authApi.js
β β βββ menuApi.js
β β βββ reservationApi.js
β β βββ reviewApi.js
β βββ context/
β β βββ AuthContext.jsx β JWT + user + dietary state
β β βββ MenuContext.jsx β Live menu state
β βββ components/
β β βββ Navbar.jsx β Glassmorphism sticky nav
β β βββ Navbar.css
β β βββ Footer.jsx
β β βββ MenuCard.jsx β Live availability badge + admin toggle
β β βββ ProtectedRoute.jsx β Role-gated route wrapper
β βββ pages/
β β βββ Home.jsx β Hero, problem/solution, live specials
β β βββ Menu.jsx β Live menu with dietary filter
β β βββ Reserve.jsx β 4-step wizard with menu preview
β β βββ Auth.jsx β Login / Signup + dietary setup
β β βββ AdminDashboard.jsx β Stats, toggle, add dish, reviews
β βββ index.css β Full design system (CSS variables)
β βββ App.jsx β Router + context providers
β βββ main.jsx
β
βββ images/ β Shared food/restaurant images
βββ .gitignore β Root-level gitignore
βββ Readme.md
βββ (legacy static files β index.html, script.js, style.css)
- Node.js β₯ 18
- MongoDB running locally β Install MongoDB Community
- Or use a free MongoDB Atlas cloud instance
git clone https://github.com/anushkasark08/The-Lighthouse.git
cd The-Lighthousecd backend
cp .env.example .envEdit .env with your values:
PORT=5000
MONGODB_URI=mongodb://localhost:27017/lighthouse
JWT_SECRET=your-super-secret-key
JWT_EXPIRE=7d
FRONTEND_URL=http://localhost:5173Install dependencies and seed the database:
npm install
npm run seed # Seeds 18 menu items, 9 tables, 2 users
npm run dev # Starts API on http://localhost:5000β
Verify: http://localhost:5000/api/health
# In a new terminal
cd frontend
npm install
npm run dev # Starts React app on http://localhost:5173Open http://localhost:5173 in your browser.
| Role | Password | |
|---|---|---|
| π Admin | admin@thelighthouse.com | Admin@123 |
| π€ User | test@example.com | password123 |
Guest
- Browse
/menuβ see live availability badges on each dish - Go to
/reserveβ complete the 4-step wizard β see Step 3: Tonight's Menu
New User
- Sign up at
/authβ set your dietary preference during signup - Visit
/menuβ your filter is pre-applied automatically
Admin
- Log in β navigate to
/admin - Toggle any dish to "Sold Out" β switch back to
/menuβ it's gone instantly - Add a new menu item from the dashboard form
| Method | Endpoint | Access | Description |
|---|---|---|---|
| POST | /register |
Public | Register with dietary profile |
| POST | /login |
Public | Login, returns JWT |
| GET | /me |
Private | Get current user |
| PATCH | /me/dietary |
Private | Update dietary preference |
| Method | Endpoint | Access | Description |
|---|---|---|---|
| GET | / |
Public | All available items (?category= ?isVeg= ?tag=) |
| GET | /tonight |
Public | Tonight's dishes based on time of day |
| GET | /:id |
Public | Single item |
| POST | / |
Admin | Create item |
| PUT | /:id |
Admin | Update item |
| PATCH | /:id/toggle |
Admin | Toggle isAvailable β live differentiator |
| DELETE | /:id |
Admin | Delete item |
| Method | Endpoint | Access | Description |
|---|---|---|---|
| GET | /slots |
Public | Available time slots for a date + guest count |
| POST | / |
Private | Create reservation |
| GET | / |
Private | Get user's reservations |
| DELETE | /:id |
Private | Cancel reservation |
| Method | Endpoint | Access | Description |
|---|---|---|---|
| GET | / |
Public | All reviews |
| POST | / |
Private | Submit a review |
| DELETE | /:id |
Private/Admin | Delete review |
The design system uses CSS variables in frontend/src/index.css. Change the theme in one place:
:root {
--color-primary: #c9a962; /* Gold accent */
--color-bg: #1a1714; /* Dark background */
--color-text: #f5f2ed; /* Off-white text */
--font-serif: 'Cormorant Garamond', Georgia, serif;
--font-sans: 'Inter', system-ui, sans-serif;
}- Payment gateway integration (Razorpay / Stripe)
- Online food ordering with cart
- Real-time slot updates with Socket.io
- Multi-language support (i18n)
- Push notifications for reservation reminders
- PWA support
Contributions are welcome and appreciated!
-
Fork the repository
-
Create a feature branch
git checkout -b feature/your-feature-name- Commit your changes
git commit -m "feat: add your feature description"- Push the branch
git push origin feature/your-feature-name- Open a Pull Request
Thanks to all the amazing people who contribute to The Lighthouse π
This project is licensed under the MIT License.
Developed with passion by Anushka Sarkar
Special thanks to:
- GirlScript Summer of Code 2026
- Open-source contributors β€οΈ
GitHub Repository: https://github.com/anushkasark08/The-Lighthouse