🍔 QuickBite - Modern Food Delivery Platform

A comprehensive, modern food delivery platform built with Next.js and React. Features a complete restaurant experience with 100+ menu items, advanced filtering, responsive design, authentication system, and multiple pages - delivering a premium user experience similar to top food delivery platforms.

✨ Features

🍽️ Complete Menu System

100+ Menu Items across 10 diverse categories
10 Food Categories: Burgers, Sides, Drinks, Desserts, Pizzas, Biryani, Noodles, North Indian, South Indian, Rolls & Momos
Rich Product Details with descriptions, pricing, and high-quality images
Advanced Search & Filtering with price ranges and category filters
Popular Items highlighting with special badges

🎛️ Advanced Customization & Features

Size Selection (Small, Medium, Large, Extra Large)
Add-ons & Extras (cheese, bacon, vegetables, sauces, spices)
Special Instructions for dietary preferences and allergies
Real-time Price Calculation as you customize
Quantity Management with intuitive controls
Smart Search Bar with real-time results

🛒 Enhanced Shopping Cart

Persistent Cart with localStorage integration
Item Management (add, remove, modify quantities)
Order Summary with itemized pricing
Tax Calculation and total computation
Responsive Cart Sidebar with smooth animations
Empty State Handling with helpful suggestions

🔐 Authentication System

Login/Signup Modal with modern UI
Social Authentication (Google, Facebook)
Password Visibility Toggle
Form Validation with error handling
Responsive Design for all screen sizes

📱 Multi-Page Architecture

Home/Menu Page - Main ordering interface
About Us Page - Company story, team, and values
FAQ Page - Comprehensive help section with categories
Contact Page - Multiple contact methods and form
Changelog Page - Feature updates and version history
Enhanced 404 Page - Helpful error page with suggestions

🎨 Modern Design System

Native CSS Architecture - No external CSS frameworks
Global CSS Variables - Consistent theming system
Responsive Design - Mobile-first approach
Professional Color Palette - Orange/red food-focused theme
Typography System - Montserrat + Open Sans combination
Smooth Animations and micro-interactions
Accessibility Compliant (WCAG AA standards)
Dark Mode Support - Complete theme switching

🏗️ Component Architecture

Reusable Components - Modular and maintainable
Layout Components - Header, Footer, Navigation
Independent CSS Files - No component dependencies
TypeScript Integration - Full type safety
Performance Optimized - Lazy loading and code splitting

🛠️ Tech Stack

Framework: Next.js 15 - React framework with App Router
Frontend: React 18 - Modern React with hooks
Styling: Native CSS - Custom CSS architecture with variables
State Management: Zustand - Lightweight state management
UI Components: Radix UI - Accessible component primitives
Icons: Lucide React - Beautiful icon library
Fonts: Google Fonts - Montserrat & Open Sans
TypeScript: Full type safety throughout the application
Build Tool: Turbopack - Fast bundler for development

🚀 Quick Start

Prerequisites

Node.js 18+
npm or yarn package manager

Installation

Clone the repository

git clone <repository-url>
cd quickbite-platform

Install dependencies

npm install
# or
yarn install
# or
pnpm install

Start development server
```
npm run dev
# or
yarn dev
# or
pnpm dev
```
Open your browser
```
Navigate to `http://localhost:3000`
```

Build for Production

npm run build
npm run start

Linting & Code Quality

npm run lint
npm run lint:fix

📁 Project Structure

quickbite-platform/
├── 📁 app/                          # Next.js App Router
│   ├── 📁 about/                    # About page
│   ├── 📁 api/                      # API routes
│   │   ├── 📁 menu/                 # Menu data endpoints
│   │   └── 📁 orders/               # Order processing
│   ├── 📁 changelog/                # Changelog page
│   ├── 📁 contact/                  # Contact page
│   ├── 📁 faq/                      # FAQ page
│   ├── 📄 layout.tsx                # Root layout
│   ├── 📄 not-found.tsx             # 404 page
│   └── 📄 page.tsx                  # Home/Menu page
├── 📁 components/                   # React components
│   ├── 📁 auth/                     # Authentication components
│   │   └── 📄 auth-modal.tsx        # Login/Signup modal
│   ├── 📁 layout/                   # Layout components
│   │   ├── 📄 header.tsx            # Site header
│   │   └── 📄 footer.tsx            # Site footer
│   ├── 📁 ui/                       # UI components
│   ├── 📄 checkout-modal.tsx        # Checkout flow
│   ├── 📄 item-customization-modal.tsx
│   ├── 📄 shopping-cart-sidebar.tsx
│   └── 📄 theme-provider.tsx
├── 📁 hooks/                        # Custom React hooks
│   ├── 📄 use-mobile.ts
│   └── 📄 use-toast.ts
├── 📁 lib/                          # Utility libraries
│   ├── 📄 cart-store.ts             # Shopping cart state
│   ├── 📄 menu-data.ts              # Menu data & types
│   └── 📄 utils.ts                  # Utility functions
├── 📁 public/                       # Static assets
│   ├── 📁 burger/                   # Food images
│   ├── 📁 desserts/
│   ├── 📁 drinks/
│   ├── 📁 logo/                     # Brand assets
│   ├── 📁 pizzas/
│   └── 📁 sides/
├── 📁 styles/                       # CSS files
│   ├── 📄 globals.css               # Global styles & variables
│   ├── 📄 components.css            # Component styles
│   ├── 📄 layout.css                # Layout styles
│   ├── 📄 pages.css                 # Page-specific styles
│   ├── 📄 auth.css                  # Authentication styles
│   └── 📄 additional-pages.css      # Additional page styles
├── 📄 components.json               # shadcn/ui config
├── 📄 next.config.mjs               # Next.js configuration
├── 📄 package.json                  # Dependencies
├── 📄 tsconfig.json                 # TypeScript config
└── 📖 README.md                     # Documentation

🔌 API Endpoints

Menu Endpoints

GET /api/menu - Get all menu items and categories
GET /api/menu/[category] - Get items by category

Order Endpoints

POST /api/orders - Submit new order
GET /api/orders/[id] - Get order status

🎯 Available Scripts

npm run dev - Start development server
npm run build - Build for production
npm run start - Start production server
npm run lint - Run ESLint
npm run lint:fix - Fix ESLint errors

🔧 Customization

Adding New Menu Items

Edit lib/menu-data.ts and add items to the appropriate category:

{
  id: "new-item",
  name: "New Delicious Item",
  description: "Amazing description",
  price: 12.99,
  image: "/path/to/image.png",
  category: "burgers",
  popular: true,
  customizations: {
    sizes: [
      { name: "Regular", price: 0 },
      { name: "Large", price: 2.5 }
    ],
    addons: [
      { name: "Extra Cheese", price: 1.5 }
    ]
  }
}

Modifying Styles

Global styles: styles/globals.css - CSS variables and base styles
Component styles: styles/components.css - Reusable component styles
Layout styles: styles/layout.css - Header, footer, navigation
Page styles: styles/pages.css - Page-specific styles
Theme colors: Modify CSS variables in globals.css

Adding New Pages

Create new page in app/[page-name]/page.tsx
Add corresponding styles in appropriate CSS file
Update navigation in components/layout/header.tsx
Add to footer links in components/layout/footer.tsx

Customizing Colors

Modify the CSS variables in styles/globals.css:

:root {
  --brand-primary: #ff6b35; /* Main brand color */
  --brand-secondary: #f7931e; /* Secondary brand color */
  --brand-accent: #ffd23f; /* Accent color */
  /* ... other variables */
}

🤝 Contributing

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🌟 Key Features Implemented

✅ Completed Features

✅ Native CSS Architecture - No external CSS frameworks
✅ Global CSS Variables - Consistent theming system
✅ Responsive Design - Mobile-first approach
✅ Search Functionality - Real-time search with filters
✅ Price Filtering - Filter by price ranges
✅ Authentication Modal - Login/Signup with social options
✅ Multi-page Architecture - About, FAQ, Contact, Changelog
✅ Enhanced 404 Page - Helpful error page with suggestions
✅ Footer Component - Complete footer with links and info
✅ Header Component - Navigation with search and cart
✅ Reusable Components - Modular and maintainable
✅ TypeScript Integration - Full type safety
✅ Performance Optimized - Fast loading and smooth interactions

🎨 Design System

Color Palette: Food-focused orange/red theme
Typography: Montserrat (headings) + Open Sans (body)
Spacing: Consistent spacing scale with CSS variables
Border Radius: Rounded corners for modern look
Shadows: Layered shadow system for depth
Animations: Smooth transitions and micro-interactions

📱 Responsive Breakpoints

Mobile: < 768px
Tablet: 768px - 1024px
Desktop: > 1024px
Large Desktop: > 1280px

🚀 Performance Features

Code Splitting - Automatic route-based splitting
Image Optimization - Next.js Image component
Font Optimization - Google Fonts with display swap
CSS Optimization - Minimal CSS with variables
Bundle Analysis - Optimized bundle sizes

🔒 Security Features

Form Validation - Client and server-side validation
XSS Protection - Sanitized inputs and outputs
CSRF Protection - Built-in Next.js protection
Secure Headers - Security headers configuration

📊 Browser Support

Chrome: Latest 2 versions
Firefox: Latest 2 versions
Safari: Latest 2 versions
Edge: Latest 2 versions
Mobile Browsers: iOS Safari, Chrome Mobile

🤝 Contributing

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Development Guidelines

Follow TypeScript best practices
Use semantic HTML elements
Maintain accessibility standards
Write descriptive commit messages
Test on multiple devices and browsers

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

Name		Name	Last commit message	Last commit date
Latest commit History 34 Commits
.vscode		.vscode
app		app
components		components
hooks		hooks
lib		lib
public		public
styles		styles
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
components.json		components.json
next.config.mjs		next.config.mjs
package-lock.json		package-lock.json
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

License

1046prt/QuickBite

Folders and files

Latest commit

History

Repository files navigation

🍔 QuickBite - Modern Food Delivery Platform

✨ Features

🍽️ Complete Menu System

🎛️ Advanced Customization & Features

🛒 Enhanced Shopping Cart

🔐 Authentication System

📱 Multi-Page Architecture

🎨 Modern Design System

🏗️ Component Architecture

🛠️ Tech Stack

🚀 Quick Start

Prerequisites

Installation

Build for Production

Linting & Code Quality

📁 Project Structure

🔌 API Endpoints

Menu Endpoints

Order Endpoints

🎯 Available Scripts

🔧 Customization

Adding New Menu Items

Modifying Styles

Adding New Pages

Customizing Colors

🤝 Contributing

📝 License

🌟 Key Features Implemented

✅ Completed Features

🎨 Design System

📱 Responsive Breakpoints

🚀 Performance Features

🔒 Security Features

📊 Browser Support

Development Guidelines

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 1

Packages 0

Languages

Packages