04MERN FOOD DELIVERY APP2026

Project CaseGrubbly

Overview

Grubbly is a comprehensive food delivery application connecting customers, kitchen vendors, and platform administrators. It unifies order management, coordinate address pinning, live courier location animations, and secure transaction handling into a single, optimized Vite-React deployment.

Tech Stack

ReactNode.jsExpressMongoDBSocket.ioLeaflet MapsRazorpay API
01 // Problem Statement

The Challenge

Managing separate admin and customer web hostings creates deployment complexity, while static delivery status pages provide poor visibility into order transit updates.

02 // The Solution

How It Works

Consolidated customer storefront and partner portals into a single Vite deployment with role-based JWT navigation guards, and implemented real-time Socket.io timeline updates with Leaflet map tracking animations.

03 // Key Features

Core Deliverables

  • 1

    Multi-Role Auth & Redirects

    Automatically routes vendors to partner dashboards and customers to shop fronts.

  • 2

    Interactive Pinpoint Map

    Pins exact delivery locations using OpenStreetMap and Nominatim reverse-geocoding.

  • 3

    Live WebSocket Timeline

    Broadcaster timeline status updates and animates rider courier movements in real-time.

  • 4

    Secure payment gateway

    Handles Razorpay checkout verified by backend HMAC-SHA256 signatures.

SYSTEM ARCHITECTURE

Grubbly WebSocket and Map Architecture

How events flow through customer checkout, backend Socket.io channels, and live courier map tracking loops.

Customer FrontendNODE 1

Pins address on Leaflet Map and triggers Razorpay checkout.

Express Backend & Socket.ioNODE 2

Verifies payment signatures, saves orders, and broadcasts status updates.

Vendor DashboardNODE 3

Updates order states (Processing, Out for Delivery, Delivered).

Live Tracking TimelineNODE 4

Renders smooth rider movement along OpenStreetMap paths via WebSocket signals.

ENGINEERING LOG

Key Challenges Faced

Consolidating independent customer and admin portals into a single React bundle required dynamic routing layout guards. We implemented useLocation layout filters to isolate CSS grid frameworks and navigation headers, achieving compile success in under 4 seconds.

VISUAL WALKTHROUGH

Interface Gallery

Vendor Dashboard

Vendor Dashboard

Tracks active orders, daily item listings, and revenue metrics.

Live Courier Tracking

Live Courier Tracking

Interactive map view displaying animated rider location updates.

CONTACT

Let's buildsomething great

I'm currently open to software engineering internships, backend architecture roles, and open-source collaborations.

S
Sneha Pal

© 2026— Designed & built with Next.js & Tailwind v4