Problem & Solution
Problem
Online grocery delivery requires coordinating multiple stakeholders—customers browsing and ordering, admins managing inventory and orders, and delivery partners fulfilling orders—while ensuring payment security, real-time visibility, and reliable delivery confirmation.
Solution
Built a full-stack Next.js platform with three distinct dashboards, secure payment workflows, real-time delivery tracking using Socket.IO and geolocation, radius-based delivery assignment, and AI-powered communication assistance.
Technical Metrics
Technology Stack
Frontend
Backend
Realtime
Integrations
Other
User Roles & Features
Customer
- Browse products by category
- Add items to cart with Redux state management
- Checkout with address and payment method selection
- Razorpay payment or cash-on-delivery
- Track delivery in real-time on interactive map
- Chat with delivery partner with AI quick-reply suggestions
- Order history and status tracking
Admin
- Manage product inventory and categories
- Upload product images to Cloudinary
- View and manage all orders
- Assign deliveries to available partners
- Monitor delivery status and operations
- Generate reports and analytics
Delivery Partner
- Receive delivery assignments within 10km radius
- View order details and customer location
- Update delivery status in real-time
- Navigate using integrated maps
- Chat with customers
- Confirm delivery with OTP
- Track earnings and delivery history
Order Lifecycle
Browse
Customer browses products by category, views details, and adds items to cart
Cart
Redux Toolkit manages cart state, quantities, and total calculations
Checkout
Customer enters delivery address and selects payment method
Payment
Razorpay integration with server-side HMAC verification or cash-on-delivery option
Assignment
Admin assigns order to available delivery partner within 10km radius
Live Tracking
Real-time Socket.IO updates show delivery partner location on Leaflet map
OTP Confirmation
Delivery partner enters customer OTP to confirm successful delivery
Delivered
Order marked complete, email notification sent, status updated
System Architecture
SnapCart uses Next.js 14 for both frontend and API routes, MongoDB for data persistence, Socket.IO for real-time features, and integrates third-party services for payments, media, and AI.
Frontend Application
React.js, Next.js 14, TypeScript, Redux Toolkit
- User interface for three roles
- Cart state management
- Real-time map updates
- Chat interface
API Routes
Next.js API Routes, 27 endpoints
- Authentication
- CRUD operations
- Payment processing
- Order management
- Delivery assignment
Database
MongoDB, Mongoose
- User data
- Product inventory
- Order records
- Delivery assignments
Real-Time Layer
Socket.IO, Geolocation APIs
- Live location tracking
- Chat messaging
- Delivery status updates
External Services
Razorpay, Cloudinary, Gemini AI
- Payment processing
- Image storage
- AI-powered chat suggestions
Key Engineering Features
Multi-Role Authentication
NextAuth.js with Google OAuth, credentials login, JWT sessions, and role-based access control. Each role has dedicated dashboard and permissions.
Secure Payments
Razorpay integration with server-side payment verification using HMAC signature validation. Supports both online payment and cash-on-delivery.
Real-Time Delivery Tracking
Socket.IO broadcasts delivery partner location updates. Customer sees live position on Leaflet map with route visualization and ETA.
Radius-Based Assignment
Delivery assignments consider partner availability and 10km radius from customer location using geolocation calculations.
AI-Powered Chat
Gemini AI analyzes chat context and suggests quick replies for delivery partners, improving response time and communication quality.
OTP Delivery Confirmation
System generates OTP sent to customer. Delivery partner must enter correct OTP to mark order as delivered, preventing fraud.
Engineering Decisions & Tradeoffs
Next.js for both frontend and API routes
Rationale: Unified codebase, simplified deployment, built-in API routes, TypeScript support, and excellent developer experience.
Tradeoffs: Couples frontend and backend; alternative would be separate services but adds deployment complexity.
MongoDB with Mongoose
Rationale: Flexible schema for evolving product and order data. Good fit for document-oriented data like orders with nested items.
Tradeoffs: No complex joins; relationships handled in application layer. Considered PostgreSQL but prioritized flexibility.
Socket.IO for real-time features
Rationale: Battle-tested WebSocket library with fallback mechanisms, room-based messaging, and straightforward event handling.
Tradeoffs: Requires persistent connection; considered polling but real-time updates were core requirement.
Redux Toolkit for cart state
Rationale: Cart state needs to be accessible across components; Redux Toolkit provides clean state management with minimal boilerplate.
Tradeoffs: Adds bundle size; considered Context API but Redux DevTools and middleware were valuable.
Server-side payment verification
Rationale: Security requirement: never trust client-side payment success. HMAC signature validation on server ensures payment integrity.
Tradeoffs: None—this is a security best practice, not an optimization.
OTP-based delivery confirmation
Rationale: Prevents fraudulent delivery confirmation. Customer receives OTP, partner must enter it, creating two-party verification.
Tradeoffs: Slight UX friction; considered photo proof but OTP is simpler and more reliable.
Challenges & Solutions
Coordinating real-time location updates across multiple active deliveries
Solution: Socket.IO rooms per order; only relevant participants receive updates. Geolocation updates throttled to reduce server load.
Ensuring payment security and handling edge cases
Solution: Implemented comprehensive payment verification: HMAC validation, status checks, timeout handling, and cash-on-delivery fallback.
Managing three different user flows in one codebase
Solution: Role-based routing and components. Middleware checks role; each dashboard has dedicated route structure. Shared components where appropriate.
Lessons Learned
- Real-time features add complexity but significantly improve user experience for logistics applications
- Payment integration requires careful security considerations and testing of failure scenarios
- Role-based access control should be implemented early and consistently across API and UI
- Geospatial features (radius calculations, maps) are powerful but require understanding coordinate systems and accuracy
- AI assistance works best for specific, well-defined tasks like quick-reply suggestions rather than full automation