Restaurant Food Ordering Management System - React, Express.js FullStack MERN Project (including Business-Insights Dashboard)

---

A comprehensive, modern food ordering platform built with the MERN stack (MongoDB, Express.js, React, Node.js) featuring real-time order management, payment processing, analytics dashboard, and advanced search capabilities.

• Frontend-Live: https://mern-food-ordering.netlify.app/
• Backend-Live: https://mern-food-ordering-hnql.onrender.com

---

📋 Table of Contents

• Features
• Technology Stack
• Project Structure
• Getting Started
• Environment Variables
• API Documentation
• Component Library
• Key Features Walkthrough
• Deployment
• Contributing
• License

---

✨ Features

🍽️ Core Functionality

• Restaurant Management: Complete CRUD operations for restaurants
• Menu Management: Dynamic menu creation and management
• Order Processing: Real-time order tracking and status updates
• Payment Integration: Secure Stripe payment processing
• User Authentication: Auth0-based secure authentication

📊 Advanced Features

• Analytics Dashboard: Business insights with charts and metrics
• Advanced Search: Multi-filter search with real-time results
• API Documentation: Interactive Swagger-like API docs
• Performance Monitoring: Real-time system health monitoring
• Order Status Tracking: Comprehensive order lifecycle management

🎨 User Experience

• Responsive Design: Mobile-first responsive layout
• Modern UI: Shadcn/ui components with Tailwind CSS
• Real-time Updates: Live order status and notifications
• Toast Notifications: Professional status feedback
• Dark/Light Mode: Theme switching capability

---

🛠️ Technology Stack

Frontend

• React 18.2.0 - Modern React with hooks and concurrent features
• TypeScript 5.3.3 - Type-safe development
• Vite - Fast build tool and development server
• Tailwind CSS - Utility-first CSS framework
• Shadcn/ui - Modern component library
• React Query - Server state management
• React Router - Client-side routing
• React Hook Form - Form handling with validation
• Zod - Schema validation
• Auth0 - Authentication and authorization
• Stripe - Payment processing
• Lucide React - Beautiful icons

Backend

• Node.js - JavaScript runtime
• Express.js - Web application framework
• TypeScript - Type-safe backend development
• MongoDB - NoSQL database
• Mongoose - MongoDB object modeling
• Stripe - Payment processing API
• Auth0 - Authentication middleware
• Cloudinary - Image upload and management
• Multer - File upload handling
• Express Validator - Request validation
• CORS - Cross-origin resource sharing

Development Tools

• ESLint - Code linting
• Prettier - Code formatting
• Nodemon - Development server with auto-reload
• Concurrently - Run multiple commands simultaneously

---

📁 Project Structure

food-ordering/
├── food-ordering-frontend/          # React frontend application
│   ├── src/
│   │   ├── components/              # Reusable UI components
│   │   │   ├── ui/                  # Shadcn/ui components
│   │   │   ├── EnhancedOrdersTab.tsx
│   │   │   ├── OrderStatusDetail.tsx
│   │   │   ├── AdvancedSearchBar.tsx
│   │   │   └── ...
│   │   ├── pages/                   # Page components
│   │   │   ├── HomePage.tsx
│   │   │   ├── ManageRestaurantPage.tsx
│   │   │   ├── AnalyticsDashboardPage.tsx
│   │   │   └── ...
│   │   ├── api/                     # API integration
│   │   ├── auth/                    # Authentication logic
│   │   ├── config/                  # Configuration files
│   │   ├── forms/                   # Form components
│   │   ├── layouts/                 # Layout components
│   │   ├── lib/                     # Utility functions
│   │   ├── types.ts                 # TypeScript type definitions
│   │   └── AppRoutes.tsx           # Application routing
│   ├── package.json
│   └── vite.config.ts
│
├── food-ordering-backend/           # Node.js backend application
│   ├── src/
│   │   ├── controllers/             # Request handlers
│   │   ├── middleware/              # Custom middleware
│   │   ├── models/                  # MongoDB schemas
│   │   ├── routes/                  # API routes
│   │   └── index.ts                 # Server entry point
│   ├── package.json
│   └── .env.example
│
└── README.md                        # This file

---

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• MongoDB Atlas account
• Auth0 account
• Stripe account
• Cloudinary account

Installation

1. Clone the repository

git clone https://github.com/yourusername/food-ordering.git
cd food-ordering

2. Install backend dependencies

cd food-ordering-backend
npm install

3. Install frontend dependencies

cd ../food-ordering-frontend
npm install

4. Set up environment variables (see Environment Variables section)

5. Start the development servers

Backend:

cd food-ordering-backend
npm run dev

Frontend:

cd food-ordering-frontend
npm run dev

The application will be available at:

• Frontend: http://localhost:5173
• Backend: http://localhost:7001

---

🔧 Environment Variables

Backend (.env)

Create a .env file in the food-ordering-backend directory:

# MongoDB Connection
MONGODB_CONNECTION_STRING="mongodb+srv://username:[email protected]/food-ordering?retryWrites=true&w=majority"

# Auth0 Configuration
AUTH0_AUDIENCE="your-auth0-api-identifier"
AUTH0_ISSUER_BASE_URL="https://your-domain.us.auth0.com/"

# Cloudinary Configuration
CLOUDINARY_CLOUD_NAME="your-cloud-name"
CLOUDINARY_API_KEY="your-api-key"
CLOUDINARY_API_SECRET="your-api-secret"

# Stripe Configuration
FRONTEND_URL="http://localhost:5173"
STRIPE_API_KEY="sk_test_your-stripe-secret-key"
STRIPE_WEBHOOK_SECRET="whsec_your-webhook-secret"

Frontend (.env)

Create a .env file in the food-ordering-frontend directory:

# API Configuration
VITE_API_BASE_URL="http://localhost:7001"

# Auth0 Configuration
VITE_AUTH0_DOMAIN="your-domain.us.auth0.com"
VITE_AUTH0_CLIENT_ID="your-client-id"
VITE_AUTH0_CALLBACK_URL="http://localhost:5173/auth-callback"

Setting Up Services

1. MongoDB Atlas

1. Create a MongoDB Atlas account
2. Create a new cluster
3. Get your connection string
4. Replace the placeholder in .env

2. Auth0

1. Create an Auth0 account
2. Create a new application (Single Page Application)
3. Create a new API
4. Configure callback URLs
5. Get your domain, client ID, and audience

3. Stripe

1. Create a Stripe account
2. Get your test API keys
3. Set up webhook endpoints
4. Configure webhook secrets

4. Cloudinary

1. Create a Cloudinary account
2. Get your cloud name, API key, and secret
3. Configure upload presets

---

📚 API Documentation

Authentication Endpoints

// All protected routes require Auth0 JWT token
Authorization: Bearer<jwt_token>;

Restaurant Endpoints

// Get all restaurants
GET /api/restaurant/search
Query Parameters:
- city?: string
- cuisineType?: string
- searchQuery?: string
- sortOption?: string
- page?: number

// Get restaurant by ID
GET /api/restaurant/:restaurantId

// Create restaurant (Protected)
POST /api/my/restaurant
Content-Type: multipart/form-data

// Update restaurant (Protected)
PUT /api/my/restaurant
Content-Type: multipart/form-data

// Get my restaurant (Protected)
GET /api/my/restaurant

Order Endpoints

// Create order (Protected)
POST /api/order/checkout

// Get my orders (Protected)
GET /api/my/order

// Get restaurant orders (Protected)
GET /api/my/restaurant/order

// Update order status (Protected)
PATCH /api/my/restaurant/order/:orderId/status
Body: { status: OrderStatus }

// Stripe webhook
POST /api/order/checkout/webhook

User Endpoints

// Get current user (Protected)
GET / api / my / user;

// Update user profile (Protected)
PUT / api / my / user;

---

🧩 Component Library

Core Components

EnhancedOrdersTab

import EnhancedOrdersTab from "@/components/EnhancedOrdersTab";

<EnhancedOrdersTab orders={orders} showStatusSelector={true} />;

Features:

• Real-time order management
• Status filtering and search
• Dashboard statistics
• Responsive grid/list views
• Order status overview with progress bars

AdvancedSearchBar

import AdvancedSearchBar from "@/components/AdvancedSearchBar";

<AdvancedSearchBar onSearch={handleSearch} filters={filters} />;

Features:

• Multi-filter search
• Real-time suggestions
• Price range slider
• Cuisine type filtering
• Advanced sorting options

OrderStatusToast

import { showOrderStatusToast } from "@/components/OrderStatusToast";

showOrderStatusToast({
  status: "delivered",
  customerName: "John Doe",
  orderId: "order123",
});

Features:

• Dynamic status messages
• Color-coded notifications
• Professional styling
• Auto-dismiss functionality

UI Components (Shadcn/ui)

All components are built on top of Shadcn/ui for consistency:

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

---

🎯 Key Features Walkthrough

1. Restaurant Management

Location: food-ordering-frontend/src/pages/ManageRestaurantPage.tsx

Features:

• Complete restaurant CRUD operations
• Image upload with Cloudinary
• Menu item management
• Real-time order tracking
• Enhanced order status management

Usage:

// Restaurant form with image upload
const handleSubmit = async (formData: FormData) => {
  await createRestaurant(formData);
};

2. Analytics Dashboard

Location: food-ordering-frontend/src/pages/AnalyticsDashboardPage.tsx

Features:

• Revenue analytics
• Order trends
• Customer insights
• Performance metrics
• Interactive charts

Components:

• Revenue charts
• Order statistics
• Customer demographics
• Performance indicators

3. Advanced Search

Location: food-ordering-frontend/src/pages/SearchPage.tsx

Features:

• Multi-criteria search
• Real-time filtering
• Price range selection
• Cuisine type filtering
• Sort and pagination

Implementation:

const searchParams = {
  city: selectedCity,
  cuisineType: selectedCuisine,
  searchQuery: searchTerm,
  sortOption: sortBy,
  page: currentPage,
};

4. Order Status Tracking

Location: food-ordering-frontend/src/pages/OrderStatusPage.tsx

Features:

• Real-time order status
• Order history
• Delivery tracking
• Status notifications
• Order details

Status Flow:

placed → paid → inProgress → outForDelivery → delivered

5. Payment Processing

Integration: Stripe with webhook handling

Features:

• Secure payment processing
• Webhook verification
• Order confirmation
• Payment status tracking

Implementation:

// Frontend checkout
const handleCheckout = async () => {
  const response = await createCheckoutSession({
    cartItems,
    deliveryDetails,
    restaurantId,
  });
  window.location.href = response.url;
};

---

🚀 Deployment

Frontend Deployment (Vercel)

1. Build the application

   cd food-ordering-frontend
   npm run build

2. Deploy to Vercel

   vercel --prod

3. **Set environment variables in Vercel dashboard**

### Backend Deployment (Railway/Render)

1. **Prepare for production**

   ```bash
cd food-ordering-backend
npm run build

2. Deploy to Railway/Render

Connect your GitHub repository

Set environment variables

Deploy automatically

3. **Update frontend API URL**

### Environment Variables for Production

```env
# Production URLs
FRONTEND_URL="https://your-app.vercel.app"
VITE_API_BASE_URL="https://your-api.railway.app"

# Production Stripe keys
STRIPE_API_KEY="sk_live_your-production-key"

---

🤝 Contributing

1. Fork the repository
2. Create a feature branch

git checkout -b feature/amazing-feature

3. Commit your changes

git commit -m 'Add amazing feature'

4. Push to the branch

git push origin feature/amazing-feature

5. Open a Pull Request

Development Guidelines

• Follow TypeScript best practices
• Use ESLint and Prettier
• Write meaningful commit messages
• Add tests for new features
• Update documentation

---

📝 License

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

---

🎓 Learning Resources

React & TypeScript

• React Documentation
• TypeScript Handbook
• React Query Documentation

Backend Development

• Express.js Guide
• MongoDB Documentation
• Mongoose Documentation

UI/UX Design

• Tailwind CSS Documentation
• Shadcn/ui Components
• Lucide Icons

Payment Integration

• Stripe Documentation
• Stripe Webhooks

Authentication

• Auth0 Documentation
• JWT Tokens

---

🔑 Keywords

Food Delivery, Restaurant Management, Order Processing, Payment Integration, Real-time Tracking, Analytics Dashboard, Advanced Search, User Authentication, Responsive Design, TypeScript, React, Node.js, MongoDB, Stripe, Auth0, Cloudinary, Shadcn/ui, Tailwind CSS, MERN Stack, Full Stack Development, Web Application, E-commerce, Restaurant Technology, Order Management System, Customer Portal, Restaurant Dashboard, Payment Gateway, Image Upload, Real-time Notifications, Performance Monitoring, API Documentation

---

🎉 Happy Coding! 🎉

Feel free to use this project repository and extend this project further!

If you have any questions or want to share your work, reach out via GitHub or my portfolio at https://arnob-mahmud.vercel.app/.

Enjoy building and learning! 🚀

Thank you! 😊

---