This is a Next.js project bootstrapped with create-next-app.

Getting Started

This project includes a traffic tracking feature that fetches daily traffic data from this repository and showcases it on your GitHub profile. This helps you monitor user progress and engagement over time with an auto-updating chart.

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev.    

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.js. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Daily Views

An auto-updating chart displays the daily views of this repository, providing a visual representation of traffic trends directly on your GitHub profile. This feature helps you stay informed about the popularity and user engagement of your project in real-time.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

🍽️ Next Restaurant

A modern restaurant UI built with Next.js, featuring a smooth food ordering interface, cart system, animated sidebar cart, and responsive layout.

This project is designed as a learning-friendly frontend project for developers who want to understand how a real food ordering UI works using the Next.js App Router.

---

🚀 Project Overview

Next Restaurant demonstrates how modern food ordering interfaces work with features like:

• Dynamic food listing
• Add‑to‑cart functionality
• Cart quantity management
• Sliding cart sidebar
• Persistent cart using localStorage
• Responsive UI

The project structure is beginner‑friendly and ideal for learning Next.js fundamentals and UI architecture.

---

File Tree: Dine@flow

Generated: 4/17/2026, 4:25:06 PM Root Path: /Users/shubhamsharma/VS CODE/Dine@flow

├── 📁 .github
│   └── 📁 workflows
│       └── ⚙️ gridgreen.yml
├── 📁 public
│   └── 📁 images
│       ├── 🖼️ Marghereta pizza.jpg
│       ├── 🖼️ Tandoori-momos.jpg
│       ├── 🖼️ aloo-tikki.jpg
│       ├── 🖼️ banana-shake.jpg
│       ├── 🖼️ biryani.jpg
│       ├── 🖼️ butter-chicken.jpg
│       ├── 🖼️ cappuccino.jpg
│       ├── 📄 chicken burger.avif
│       ├── 🖼️ chocolate-shake.jpg
│       ├── 🖼️ chole-bhature.jpg
│       ├── 🖼️ cold-coffee.jpg
│       ├── 🖼️ espresso.jpg
│       ├── 🖼️ fried-momos.jpg
│       ├── 🖼️ idli.jpg
│       ├── 🖼️ latte.jpg
│       ├── 🖼️ mango-shake.jpg
│       ├── 🖼️ masala-dosa.jpg
│       ├── 🖼️ mocha.jpg
│       ├── 🖼️ momos.jpg
│       ├── 🖼️ oreo-shake.jpg
│       ├── 🖼️ paneer-butter-masala.jpg
│       ├── 🖼️ paneer-tikka.jpg
│       ├── 🖼️ pav-bhaji.jpg
│       ├── 🖼️ samosa-chaat.jpg
│       ├── 🖼️ strawberry-shake.jpg
│       ├── 🖼️ vada-pav.jpg
│       └── 🖼️ vanilla-shake.jpg
├── 📁 src
│   ├── 📁 app
│   │   ├── 📁 checkout
│   │   │   ├── 📁 components
│   │   │   │   ├── 📄 CheckoutItems.jsx
│   │   │   │   ├── 📄 DeliveryForm.jsx
│   │   │   │   ├── 📄 OrderNotes.jsx
│   │   │   │   ├── 📄 PaymentMethod.jsx
│   │   │   │   ├── 📄 PriceBreakdown.jsx
│   │   │   │   ├── 📄 PromoSection.jsx
│   │   │   │   └── 📄 
ReservationForm.jsx
│   │   │   ├── 📁 styles
│   │   │   │   ├── 🎨 checkout-animations.css
│   │   │   │   ├── 🎨 checkout-card.css
│   │   │   │   ├── 🎨 checkout-form.css
│   │   │   │   ├── 🎨 checkout-header.css
│   │   │   │   ├── 🎨 checkout-layout.css
│   │   │   │   ├── 🎨 checkout-payment.css
│   │   │   │   ├── 🎨 checkout-popup.css
│   │   │   │   ├── 🎨 checkout-promo.css
│   │   │   │   ├── 🎨 checkout-reservation.css
│   │   │   │   └── 🎨 checkout-summary.css
│   │   │   ├── 🎨 checkout.css
│   │   │   └── 📄 page.jsx
│   │   ├── 📁 components
│   │   │   ├── 📁 CartSidebar
│   │   │   │   ├── 📄 CartSidebar.jsx
│   │   │   │   └── 🎨 cartsidebar.css
│   │   │   ├── 📁 CategoryFilter
│   │   │   │   ├── 📄 CategoryFilter.jsx
│   │   │   │   └── 🎨 category.css
│   │   │   ├── 📁 FoodCard
│   │   │   │   ├── 📄 FoodCard.jsx
│   │   │   │   └── 🎨 card.css
│   │   │   ├── 📁 Footer
│   │   │   │   ├── 📄 Footer.jsx
│   │   │   │   └── 🎨 footer.css
│   │   │   ├── 📁 Hero
│   │   │   │   ├── 📄 Hero.jsx
│   │   │   │   └── 🎨 hero.css
│   │   │   ├── 📁 Loader
│   │   │   │   └── 📄 Loader.jsx
│   │   │   └── 📁 Navbar
│   │   │       ├── 📄 Navbar.jsx
│   │   │       └── 🎨 navbar.css
│   │   ├── 📁 reservation
│   │   │   ├── 📄 page.jsx
│   │   │   └── 🎨 reservation.css
│   │   ├── 📁 test-loader
│   │   │   └── 📄 page.js
│   │   ├── 📄 favicon.ico
│   │   ├── 🎨 global.css
│   │   ├── 📄 layout.js
│   │   ├── 📄 loading.js
│   │   ├── 📄 page.js
│   │   └── 🎨 page.module.css
│   ├── 📁 context
│   │   ├── 🎨 CartContext.css
│   │   └── 📄 CartContext.jsx
│   ├── 📁 lib
│   │   └── 📁 db
│   │       └── 📄 mongo.js
│   ├── 📁 styles
│   │   └── 🎨 globals.css
│   └── 📄 next.config.js
├── ⚙️ .gitignore
├── 📝 README.md
├── 📄 eslint.config.mjs
├── ⚙️ jsconfig.json
├── 📄 next
├── 📄 next-restaurant@0.1.0
├── 📄 next.config.mjs
├── ⚙️ package-lock.json
├── ⚙️ package.json
└── ⚙️ views-data.json

---

Generated by FileTree Pro Extension

📦 Installation

Clone the repository:

git clone https://github.com/blackrexdl/next-restaurant.git

Navigate to the project folder:

cd next-restaurant

Install dependencies:

npm install

---

▶️ Run the Project

Start the development server:

npm run dev

Open your browser and visit:

http://localhost:3000

Your project will automatically reload whenever you edit files.

---

🧰 Development Setup

Below is a simple setup guide for different operating systems.

Step	Windows	macOS
Install Node.js	Download from nodejs.org	Install via nodejs.org or brew
Install Git	Download from git-scm.com	brew install git
Clone Repo	git clone repo-url	git clone repo-url
Install Packages	npm install	npm install
Start Dev Server	npm run dev	npm run dev

---

📁 Project Structure

next-restaurant
└── src
    ├── app
    │   ├── cart
    │   │   └── page.jsx
    │   ├── checkout
    │   │   └── page.jsx
    │   ├── order-success
    │   │   └── page.jsx
    │   ├── components
    │   │   ├── Navbar
    │   │   │   ├── Navbar.jsx
    │   │   │   └── navbar.css
    │   │   ├── Hero
    │   │   │   ├── Hero.jsx
    │   │   │   └── hero.css
    │   │   ├── FoodCard
    │   │   │   ├── FoodCard.jsx
    │   │   │   └── card.css
    │   │   ├── CartSidebar
    │   │   │   ├── CartSidebar.jsx
    │   │   │   └── cartsidebar.css
    │   │   └── Footer
    │   │       ├── Footer.jsx
    │   │       └── footer.css
    │   ├── globals.css
    │   ├── layout.js
    │   └── page.js
    │
    ├── context
    │   └── CartContext.jsx
    │
    ├── lib
    │   └── db
    │       └── mongo.js
    │
    └── styles
        └── globals.css

Main areas:

• app/ → Next.js App Router pages
• components/ → Reusable UI components
• context/ → Global cart state using React Context
• lib/ → Database or utility logic
• styles/ → Global styling

---

🎮 Core Features

Feature	Description
Add to Cart	Add food items to cart
Quantity Controls	Increase or decrease items
Cart Sidebar	Smooth slide‑in cart panel
Cart Badge	Shows item count in navbar
Persistent Cart	Cart saved with localStorage
Responsive UI	Works on mobile and desktop

---

🧑‍💻 Beginner Guide

If you're new to Next.js, follow this simple workflow:

1. Clone the project
2. Install dependencies
3. Run the development server
4. Open the project in VS Code
5. Start editing components inside app/components

Example file to modify:

app/page.js

When you save changes, the browser updates automatically.

---

📊 Learning Goals

This project helps you practice:

• Next.js App Router
• React state management
• Context API
• Component based architecture
• UI layout design

---

🌐 Deployment

You can deploy this project easily using Vercel.

Steps:

1. Push your project to GitHub
2. Go to https://vercel.com
3. Import your repository
4. Deploy

Vercel automatically detects the Next.js configuration.

---

🤝 Contributing

Contributions are welcome.

If you want to improve the UI, animations, or add new features:

1. Fork the repository
2. Create a new branch
3. Submit a pull request

---

⭐ Support

If you like this project, consider giving it a star on GitHub. It helps others discover the repository and encourages further improvements.

---

📜 License

This project is open source and available under the MIT License.