🍽️ Digital Menu System

an interactive, animated restaurant menu — HTML5, JS, Node/Express & MySQL

🌐 Menu 🌐 Admin

---

📚 Table of Contents

• About
• Features
• Theme & Colors
• Tech Stack
• Getting Started
• Database Setup
• Project Structure
• API Endpoints
• Roadmap
• License

---

🔍 About

Digital Menu System is a modern, responsive restaurant menu app featuring 50 Indian dishes across 9 categories, real-time search, detail modals, and a clean navy & orange design system. Built with a decoupled frontend/ + backend/ architecture — a static-friendly frontend that gracefully falls back to local data if the MySQL-backed API is offline.

---

✨ Features

Feature	Description
🍛 50 Dishes, 9 Categories	Pure Veg, Non-Veg, Starters, Tandoor, Curries, Biryani & Rice, Breads & Thalis, Desserts, Drinks & Chai
🖼️ High-Res Imagery	50 curated food photos stored locally in frontend/images/
📱 Responsive Grid	fluid CSS Grid layout, adapts across desktop / tablet / mobile
🔎 Real-time Search	debounced search across titles, descriptions, dietary tags
🗂️ Category Filters	instant filtering with active-state indicators
🪟 Detail Modals	click a card for prep time, calories, ratings, chef specials, pricing
✨ Micro-Animations	CSS keyframe entrances, hover elevation, smooth modal transitions
🛟 Graceful Fallback	serves local dataset automatically if MySQL is offline

---

🎨 Theme & Colors

Role	Hex	Used For
Primary Navy	#14356A	header, hero banner, main buttons
Primary Dark	#0D2348	gradients, footer, overlays
Accent Orange	#FF6600	chef special badges, active states, hovers
Slate Blue	#3B719F	sub-headers, tags, secondary links
Cool Gray	#E2E8F0 / #64748B	borders, dividers, muted text
Surface	#F8FAFC / #FFFFFF	page canvas, card surfaces

---

🛠 Tech Stack

• Frontend: HTML5, Vanilla CSS3, JavaScript (ES6 Modules)
• Backend: Node.js, Express
• Database: MySQL
• Hosting: Vercel

---

🚀 Getting Started

Prerequisites

• Node.js installed
• MySQL Server 8.0+ (optional — app falls back to local data without it)

Clone

git clone https://github.com/Subhanjeet/Digital-Menu.git
cd Digital-Menu

Run (root scripts)

npm run frontend   # http://localhost:3000
npm run backend    # http://localhost:5000

Manual setup

Backend

cd backend
npm install
cp .env.example .env
# update .env with your MySQL credentials
npm run dev

Frontend

npx serve frontend
# or just open frontend/index.html in your browser

---

🗄️ Database Setup (MySQL)

1. install & start MySQL (default port 3306)
2. import the schema:

mysql -u root -p < backend/database/schema.sql

or open backend/database/schema.sql in MySQL Workbench / phpMyAdmin and execute it — this creates menu_db with categories and menu_items tables, seeded with all 50 dishes.

---

📁 Project Structure

Digital-Menu/
├── backend/
│   ├── config/db.js           # MySQL connection pool
│   ├── data/fallbackData.js   # 50-dish fallback dataset
│   ├── database/schema.sql    # DDL + seed data
│   ├── routes/menu.js         # REST API endpoints
│   ├── .env.example
│   └── server.js
│
├── frontend/
│   ├── icons/                 # category SVG icons
│   ├── images/                # 50 food images
│   ├── index.html
│   ├── styles/
│   │   ├── variables.css      # theme tokens, 8px grid
│   │   ├── layout.css         # header, hero, search, nav
│   │   ├── cards.css
│   │   ├── modal.css
│   │   ├── components.css
│   │   └── main.css
│   └── js/
│       ├── api.js             # fetcher with fallback
│       ├── fallbackData.js
│       ├── renderers.js
│       ├── modal.js
│       └── app.js
│
├── package.json                # root script runner
└── README.md

---

📡 API Endpoints

Method	Endpoint	Description
GET	/api/status	health check — API + MySQL connection status
GET	/api/categories	all active menu categories
GET	/api/menu	menu items, supports ?category=slug and ?search=query
GET	/api/menu/:id	single item by ID

---

🗺 Roadmap

• admin panel for managing dishes (folder scaffolded, not built yet)
• cart + ordering flow
• user reviews and ratings
• multi-language menu support
• dark mode toggle

---

📄 License

MIT — free to use, modify, and share.

made with 🍛 + navy & orange