Tirth PatelAI Engineer
Back to All Projects
Full StackFRONTEND DEMO

Full-Stack Grocery Commerce & Inventory Platform

End-to-end MERN stack e-commerce web application featuring user authentication, shopping cart workflows, product catalog, and administrator inventory controls.

ReactNode.jsExpress.jsMongoDBJWT AuthenticationBootstrap / CSS3
Source Code (GitHub)Jump to Interactive Demo
Interactive Frontend EnvironmentLive Preview

Interactive Client-Side Demonstration • Demonstrates client-side catalog navigation, shopping cart state, and order workflows.

Check Code
The Problem Statement

What real-world challenge does this system address?

Local grocers and retail operations lack lightweight, zero-bloat digital storefronts that sync user cart sessions with real-time inventory counts.
The Engineering Solution

System Design & Approach

Built a modular MERN architecture with clear separation between public catalog browsing, protected checkout carts, and administrative CRUD inventory management.
Key Capabilities:
  • JWT Role-Based Auth: Secure authentication distinguishing customer accounts from administrative inventory managers.
  • Persistent Shopping Cart: Real-time quantity adjustments and subtotal calculation.
  • Admin Inventory Dashboard: CRUD operations for adding, updating stock quantities, and archiving items.
  • Responsive Catalog Browsing: Filterable product grid optimized for mobile and desktop screens.
System Architecture Flow

System Architecture & Dataflow

React Frontend SPA -> Express RESTful API -> JWT Middleware -> MongoDB Mongoose Data Layer

Phase 01:React SPA

Manages cart state, user session tokens, and responsive UI components.

Frontend ClientReact & Context API
Phase 02:Express Middleware

Verifies bearer tokens and validates incoming request parameters.

Routing & AuthNode.js + Express + JWT
Phase 03:Mongoose Models

Enforces schema constraints for products, orders, and user credentials.

Data PersistenceMongoDB
Technical Implementation

Stack Specification & Components

Language & Runtime

JavaScript / TypeScript

Framework

React + Express.js

Database / Storage

MongoDB

Deployment Target

Frontend Vercel / Render API

Key Libraries
bcryptjsjsonwebtokencorsmongoose
Interactive Demonstration Sandbox
Client-Side Simulation

E-Commerce Cart & Inventory State Sandbox

Simulates client-side cart reducer, subtotal calculation, and JWT session contract

MERN Architecture Demo
Simulated Store Catalog:
Fresh Organic Apples
$3.50 • Stock: 18
Almond Milk 1L
$4.20 • Stock: 14
Whole Grain Bread
$2.80 • Stock: 9
Extra Virgin Olive Oil
$9.50 • Stock: 6
Shopping Cart State (2 items):Total: $11.20
Fresh Organic Apples
$3.50 each
2$7.00
Almond Milk 1L
$4.20 each
1$4.20
Session Token Payload:
role: customer • sub: usr_9421 • status: authenticated
Architectural Rationale & Tradeoffs

Engineering Decisions

Key design choices, constraints, and solutions formulated during development

Stateless JWT Authentication

Decision:

Used signed JSON Web Tokens stored securely in client memory with refresh capabilities.

Engineering Rationale:

Enables horizontal scalability of the Express backend without needing synchronized session stores.

← View All ProjectsExplore 100 Days Python Lab →