Restaurant Online Menu

A modern, responsive restaurant menu website built with Next.js and Bootstrap 5. The menu content is fully configurable through a JSON file, making it easy to update items, categories, images, and branding without code changes.

Features

• JSON-Driven Content: All menu items, categories, restaurant info, logo, and cover image are loaded from public/menuData.json
• Mobile Responsive: Fully responsive design using Bootstrap 5, optimized for all screen sizes
• Category-Based Navigation: Organized menu items by food categories with smooth transitions
• Rich Item Details: Each menu item displays name, description, price, vegetarian/vegan indicators, and spice level
• Modern UI: Clean, professional design with hover effects and animations
• Fast Loading: Built with Next.js for optimal performance and SEO

Project Structure

website-menu/
├── app/
│   ├── layout.js           # Root layout with Bootstrap import
│   ├── page.js             # Main menu page
│   └── globals.css         # Global styles
├── components/
│   ├── Header.js           # Restaurant header with logo
│   ├── CategoryTabs.js     # Category navigation tabs
│   ├── MenuGrid.js         # Menu items grid layout
│   ├── MenuItem.js         # Individual menu item card
│   └── Footer.js           # Footer component
├── public/
│   └── menuData.json       # Menu data configuration
├── next.config.js          # Next.js configuration
├── package.json            # Dependencies
├── netlify.toml            # Netlify deployment config
└── tsconfig.json           # TypeScript/JavaScript config

Setup & Installation

1. Install Dependencies

   npm install

2. Configure Menu Data Edit public/menuData.json to customize:

   • Restaurant name and description
   • Logo and cover image URLs
   • Food categories
   • Menu items with prices and details

3. Development Server

   npm run dev

   Open http://localhost:3000

4. Build for Production

   npm run build
   npm start

Menu Data Configuration

Edit public/menuData.json:

{
  "restName": "Your Restaurant",
  "description": "Restaurant tagline",
  "logo": {
    "url": "/path/to/logo.png",
    "alt": "Logo alt text"
  },
  "coverImage": {
    "url": "/path/to/cover.jpg",
    "alt": "Cover image alt text"
  },
  "categories": [
    {
      "id": 1,
      "name": "Category Name",
      "icon": "🍛",
      "description": "Category description",
      "items": [
        {
          "id": 101,
          "name": "Dish Name",
          "description": "Dish description",
          "price": 350,
          "image": "/path/to/image.jpg",
          "vegetarian": true,
          "spicy": true
        }
      ]
    }
  ]
}

Deployment

Deploy to Netlify

1. Push your code to GitHub/GitLab/Bitbucket
2. Connect your repository to Netlify
3. Build command: npm run build
4. Publish directory: .next
5. Deploy!

Or deploy directly:

npm install -g netlify-cli
netlify deploy --prod

Customization

Styling

• Colors can be modified in app/globals.css
• CSS variables are available at the root level
• Bootstrap 5 classes can be used throughout

Adding Images

1. Place images in the public/ folder
2. Update image URLs in menuData.json
3. Images support jpg, png, webp formats

Responsive Breakpoints

• Mobile: < 480px
• Tablet: 480px - 768px
• Desktop: > 768px

Technologies Used

• Next.js 14: React framework
• Bootstrap 5: CSS framework
• React 18: UI library
• Netlify: Hosting & deployment

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

License

MIT License - feel free to use this for your restaurant

RoadMap

• Make Image heavy menu and non image menu versions
• Add WhatsApp - Confirm Order feature
• Make a localhost JSON file Editor for Managing Menu Items and Cover Page Contents - copy the JSON in menuData.json and deploy for making the changes live.