A real-time food delivery tracking system built with Next.js (frontend) and Node.js, Express, Socket.IO (backend).

• Project Overview
• Features
• Tech Stack
• Folder Structure
• Installation & Setup
  • Backend Setup
  • Frontend Setup
• User Roles
• Key Features
• Detailed Implementation
  • Backend
  • Frontend
• API Endpoints
• Real-time Features
• Development
• License

OrderTracker is a comprehensive food delivery platform that connects customers, vendors, and delivery partners in real-time. The system provides live order tracking with GPS navigation, role-based dashboards, and seamless communication between all parties involved in the delivery process.

Note: This README describes the intended features and architecture of the OrderTracker system. Not all features listed may be fully implemented in the current version. The project serves as a demonstration of modern web development practices and real-time delivery tracking concepts.

• Real-time order tracking with live GPS updates
• Multi-role system (Customer, Vendor, Delivery Partner)
• Interactive map integration with route optimization
• Live location sharing via Socket.IO
• Order management with status updates
• User authentication with JWT
• Responsive UI with dark/light theme support
• Real-time notifications and status updates
• Delivery partner availability management
• Vendor inventory and order processing

Implementation Status: The features listed above represent the planned functionality. Some features may be partially implemented or in development. The current implementation focuses on demonstrating core concepts of real-time delivery tracking and role-based user interfaces.

• Next.js 15 - React framework with App Router
• TypeScript - Type safety and better development experience
• Tailwind CSS - Utility-first CSS framework
• React Leaflet - Interactive maps
• Socket.IO Client - Real-time communication
• Lucide React - Modern icon library
• Radix UI - Headless UI components
• next-themes - Theme management

• Node.js - JavaScript runtime
• Express.js - Web application framework
• TypeScript - Type safety for backend
• MongoDB with Mongoose - Database and ODM
• Socket.IO - Real-time bidirectional communication
• JWT - Authentication and authorization
• bcrypt - Password hashing
• UUID - Unique identifier generation

assignment/
│
├── frontend/                    # Next.js frontend application
│   ├── app/                    # Next.js App Router pages
│   │   ├── customer/           # Customer dashboard
│   │   ├── vendor/             # Vendor dashboard
│   │   ├── deliverypartner/    # Delivery partner dashboard
│   │   ├── ordertracking/      # Real-time order tracking
│   │   ├── login/              # Authentication
│   │   └── signup/             # User registration
│   ├── components/             # Reusable React components
│   │   ├── ui/                 # Base UI components
│   │   └── mapcomponents/      # Map-related components
│   ├── context/                # React Context providers
│   ├── socket/                 # Socket.IO client services
│   ├── types/                  # TypeScript type definitions
│   └── utility/                # Helper functions
│
├── backend/                    # Node.js backend application
│   ├── src/
│   │   ├── controllers/        # Request handlers
│   │   ├── models/             # MongoDB models
│   │   ├── routes/             # API route definitions
│   │   ├── interfaces/         # TypeScript interfaces
│   │   ├── middlewares/        # Custom middleware
│   │   ├── services/           # Business logic services
│   │   ├── socket/             # Socket.IO server logic
│   │   └── config/             # Configuration files
│   └── dist/                   # Compiled JavaScript
│
└── README.md                   # Project documentation

1. Navigate to the backend folder:

   cd backend

2. Install dependencies:

   npm install

3. Create a .env file in the backend root with the following variables:

   MONGO_URI=your_mongodb_connection_string
   JWT_SECRET=your_jwt_secret_key
   PORT=5000
   NODE_ENV=development

4. Start the backend server:

   npm run dev

   The backend will run on http://localhost:5000.

1. Navigate to the frontend folder:

   cd frontend

2. Install dependencies:

   npm install

3. Start the frontend development server:

   npm run dev

   The frontend will run on http://localhost:3000.

• Browse vendors and available items
• Place orders with delivery address
• Track orders in real-time with live GPS
• View order history and receipts
• Manage profile and delivery preferences

• Manage inventory and add new items
• Process incoming orders
• Assign orders to delivery partners
• Track order fulfillment
• View sales analytics

• View assigned deliveries
• Accept/reject orders
• Navigate with GPS to pickup and delivery locations
• Update delivery status in real-time
• Track earnings and performance metrics
• Manage availability status

• Live GPS tracking of delivery partners
• Route optimization using OpenRouteService API
• Real-time status updates via Socket.IO
• Interactive map with pickup and delivery markers

1. Order Creation: Customer selects items and places order
2. Vendor Processing: Vendor confirms and assigns to delivery partner
3. Pickup: Delivery partner collects the order
4. In Transit: Live tracking with GPS updates
5. Delivered: Order completion with customer confirmation

• JWT-based authentication
• Role-based access control
• Secure password hashing with bcrypt
• Protected routes and API endpoints

• Express.js server with TypeScript
• CORS configuration for frontend communication
• Socket.IO integration for real-time features
• MongoDB connection with Mongoose ODM

• User Model: Handles customers, vendors, and delivery partners
• Order Model: Manages order lifecycle and status
• Item Model: Vendor inventory management

• join-room: Users join order-specific rooms
• send-location: Delivery partners broadcast location updates
• location-update: Real-time location sharing with customers
• Room-based communication for order-specific updates

• Order Controller: Order creation, status updates, retrieval
• User Controller: Authentication, profile management
• Vendor Controller: Item management, order assignment
• Delivery Partner Controller: Order acceptance, completion, availability

• Next.js App Router for file-based routing
• TypeScript for type safety
• Responsive design with Tailwind CSS

• OrderTracking: Real-time GPS tracking with interactive maps
• Map Components: Leaflet integration with route visualization
• User Context: Global state management for authentication
• Socket Client: Real-time communication with backend

• Customer Dashboard: Order placement and tracking
• Vendor Dashboard: Inventory and order management
• Delivery Dashboard: Delivery management and navigation

• Live location updates via Socket.IO
• Order status notifications
• Real-time route visualization
• GPS navigation for delivery partners

• POST /api/v1/users/register - User registration
• POST /api/v1/users/login - User login
• GET /api/v1/users/logout - User logout

• GET /api/v1/orders - Get all orders
• POST /api/v1/orders/create - Create new order
• POST /api/v1/orders/update-status - Update order status

• POST /api/v1/vendors/createitem - Add new item
• POST /api/v1/vendors/assignorder/:orderId - Assign order to delivery partner

• GET /api/v1/delivery-partners/allassignedorders - Get assigned orders
• POST /api/v1/delivery-partners/acceptorder/:orderId - Accept order
• POST /api/v1/delivery-partners/updateavailability - Update availability status

• GET /api/v1/map/getaddresscoordinate/:address - Geocode address to coordinates

The system implements sophisticated real-time location tracking:

1. GPS Monitoring: Delivery partners' locations are continuously tracked
2. Socket Rooms: Each order has a dedicated Socket.IO room
3. Live Updates: Customers receive real-time location updates
4. Route Optimization: Integration with OpenRouteService for optimal routing

pending → assigned → picked_up → in_transit → delivered

Each status change is broadcasted in real-time to all relevant parties.

• Frontend entry: frontend/app/layout.tsx
• Backend entry: backend/src/app.ts
• Socket server: backend/src/socket/socketConnect.ts
• Order tracking: frontend/components/orderTracking.tsx
• Map integration: frontend/components/mapcomponents/Map.tsx

• Hot reload for both frontend and backend
• TypeScript compilation with watch mode
• Environment-based configuration
• CORS handling for cross-origin requests

• OpenRouteService: Route calculation and navigation
• MongoDB Atlas: Cloud database hosting
• Vercel/Render: Deployment platforms

OrderTracker was inspired by modern food delivery platforms like:

• DoorDash: For order management and tracking features
• Uber Eats: For real-time delivery tracking
• Grubhub: For vendor management systems

The project builds upon these concepts with enhanced real-time capabilities and role-based dashboards.

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

OrderTracker - Bringing real-time delivery tracking to the modern food delivery experience.