Explore Menu Platform

A comprehensive restaurant menu management system with an admin dashboard and customer-facing menu board.

🏗️ Architecture Overview

This project consists of:

• Backend API: Node.js + Express.js + Sequelize (MySQL)
• Frontend: React.js with Material-UI
• Database: MySQL

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v14 or higher)
• MySQL (v5.7 or higher)
• npm or yarn

🚀 Setup Instructions

1. Database Setup

1. Start your MySQL server
2. Open MySQL command line or MySQL Workbench
3. Run the database schema:

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

Or manually execute the SQL file in your MySQL client.

2. Backend Setup

1. Navigate to the server directory:

cd server

2. Install dependencies:

npm install

3. Create a .env file in the server directory:

DB_HOST=localhost
DB_USER=root
DB_PASSWORD=your_mysql_password
DB_NAME=explore_menu
DB_PORT=3306

JWT_SECRET=your_super_secret_jwt_key_change_this_in_production
JWT_EXPIRE=7d

PORT=5000
NODE_ENV=development

MAX_FILE_SIZE=5242880
UPLOAD_PATH=./uploads

4. Start the server:

npm start

For development with auto-reload:

npm run dev

The server will run on http://localhost:5000

3. Frontend Setup

1. Navigate to the client directory:

cd client

2. Install dependencies:

npm install

3. Create a .env file in the client directory (optional):

REACT_APP_API_URL=http://localhost:5000/api/v1

4. Start the development server:

npm start

The frontend will run on http://localhost:3000

📁 Project Structure

explore-menu/
├── database/
│   └── schema.sql              # Database schema
├── server/                     # Backend
│   ├── config/
│   │   └── database.js         # Database configuration
│   ├── controllers/            # Route controllers
│   │   ├── authController.js
│   │   ├── restaurantController.js
│   │   ├── categoryController.js
│   │   └── menuItemController.js
│   ├── models/                 # Sequelize models
│   │   ├── User.js
│   │   ├── Restaurant.js
│   │   ├── Category.js
│   │   ├── MenuItem.js
│   │   ├── Setting.js
│   │   └── index.js
│   ├── routes/                 # API routes
│   │   ├── authRoutes.js
│   │   ├── restaurantRoutes.js
│   │   ├── categoryRoutes.js
│   │   └── menuItemRoutes.js
│   ├── middleware/             # Custom middleware
│   │   ├── authMiddleware.js
│   │   └── uploadMiddleware.js
│   ├── uploads/                # Uploaded images
│   ├── server.js               # Entry point
│   └── package.json
├── client/                     # Frontend
│   ├── public/
│   ├── src/
│   │   ├── components/
│   │   │   └── admin/          # Admin components
│   │   ├── pages/              # Page components
│   │   ├── services/           # API services
│   │   ├── App.js
│   │   └── index.js
│   └── package.json
└── README.md

🔑 API Endpoints

Authentication

• POST /api/v1/auth/register - Register a new user
• POST /api/v1/auth/login - Login
• GET /api/v1/auth/verify - Verify token (protected)

Restaurants

• GET /api/v1/restaurants/:id - Get restaurant (protected)
• PUT /api/v1/restaurants/:id - Update restaurant (protected)
• GET /api/v1/restaurants/:id/menu - Get public menu (public)

Categories

• GET /api/v1/categories/restaurant/:restaurant_id - Get categories (protected)
• POST /api/v1/categories - Create category (protected)
• PUT /api/v1/categories/:id - Update category (protected)
• DELETE /api/v1/categories/:id - Delete category (protected)
• PUT /api/v1/categories/:id/reorder - Reorder category (protected)

Menu Items

• GET /api/v1/menu-items/restaurant/:restaurant_id - Get menu items (protected)
• GET /api/v1/menu-items/category/:category_id - Get items by category (protected)
• POST /api/v1/menu-items - Create menu item (protected, multipart/form-data)
• PUT /api/v1/menu-items/:id - Update menu item (protected, multipart/form-data)
• DELETE /api/v1/menu-items/:id - Delete menu item (protected)
• PUT /api/v1/menu-items/:id/toggle-availability - Toggle availability (protected)

🎯 Features

Admin Dashboard

• ✅ User authentication (JWT)
• ✅ Dashboard with statistics
• ✅ Category management (CRUD)
• ✅ Menu item management (CRUD with image upload)
• ✅ Restaurant settings
• ✅ Real-time menu updates

Customer Menu Board

• ✅ Public menu display
• ✅ Category-based navigation
• ✅ Search functionality
• ✅ Dietary filter indicators
• ✅ Responsive design

🔒 Security Features

• JWT-based authentication
• Password hashing with bcrypt
• Protected routes with middleware
• File upload validation
• SQL injection prevention (Sequelize ORM)
• CORS configuration

🧪 Testing the Application

1. Register a new user:

   • Navigate to /admin/login
   • Click "Register" or use the API to create an account
   • The registration will create a restaurant if you provide restaurant_name

2. Login:

   • Use your credentials to login
   • You'll be redirected to the dashboard

3. Create Categories:

   • Go to "Categories" in the sidebar
   • Click "Add Category"
   • Fill in the form and save

4. Add Menu Items:

   • Go to "Menu Items" in the sidebar
   • Click "Add Menu Item"
   • Fill in details, upload an image, and save

5. View Public Menu:

   • Navigate to /menu/:restaurant_id
   • Replace :restaurant_id with your restaurant ID

🐛 Troubleshooting

Database Connection Issues

• Ensure MySQL is running
• Check your .env file has correct database credentials
• Verify the database explore_menu exists

Port Already in Use

• Change the PORT in .env file
• Or kill the process using the port

Image Upload Issues

• Ensure the server/uploads directory exists
• Check file size limits in .env
• Verify file types (only images allowed)

📝 Notes

• Images are stored in server/uploads/ directory
• JWT tokens are stored in localStorage (consider httpOnly cookies for production)
• The application uses Sequelize ORM for database operations
• Material-UI is used for the frontend components

🚀 Future Enhancements

• Multi-restaurant support for admin users
• Advanced menu themes and customization
• QR code generation for tables
• Online ordering integration
• Analytics dashboard
• Mobile app
• Real-time updates using WebSockets

📄 License

This project is open source and available for educational purposes.

👥 Support

For issues or questions, please check the code comments or create an issue in the repository.