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://food-mern-ordering.vercel.app/
• Backend-Live: https://food-ordering-backend.arnobmahmud.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

1. Install backend dependencies

cd food-ordering-backend
npm install

1. Install frontend dependencies

cd ../food-ordering-frontend
npm install

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

2. 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:password@cluster.mongodb.net/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

1. 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

1. Commit your changes

git commit -m 'Add amazing feature'

1. Push to the branch

git push origin feature/amazing-feature

1. 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! 🎉

This is an open-source project - feel free to use, enhance, 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://www.arnobmahmud.com/.

Enjoy building and learning! 🚀

Thank you! 😊