How mrunalg141/e-commerce- works
This repository combines a React storefront with an Express/MongoDB API. The customer workflow is product discovery and detail viewing, adding items to a persistent cart, and visiting the account page; the backend currently exposes a health route, while broader commerce endpoints are documented as planned. The graph distinguishes storefront behavior from API infrastructure and domain schemas. The tree and README identify additional API capabilities, but sampled backend routes do not show them wired into request handling.
Main entry points: App.jsx Storefront routes · CartContext.jsx Cart state · app.js Express app · index.js API routes
Components 24
Storefront
- Storefront routes
frontend/src/App.jsx - Page layout
frontend/src/components/Layout.jsx - Home page
frontend/src/pages/Home.jsx - Shop page
frontend/src/pages/Shop.jsx - Product details
frontend/src/pages/ProductDetails.jsx - Account page
frontend/src/pages/Account.jsx - Product card
frontend/src/components/ProductCard.jsx
Cart and catalog
- Product data
frontend/src/data/products.js - Cart state
frontend/src/context/CartContext.jsx - Cart page
frontend/src/pages/Cart.jsx
API runtime
- API client
frontend/src/services/api.js - API server
server.js - Express app
src/app.js - API routes
src/routes/index.js - Database connection
src/config/database.js
Security and API support
- JWT authorization
src/middleware/auth.js - Request validation
src/middleware/validation.js - Error handling
src/middleware/errorHandler.js - API documentation
src/config/swagger.js
Domain data
- Commerce schemas
models
Other components
- Shopper
- Browser
- Browser storage
- MongoDB
Connections 28
- Shopper → Browser: uses
- Browser → Storefront routes: opens
- Storefront routes → Page layout: renders
- Storefront routes → Home page: routes
- Storefront routes → Shop page: routes
- Storefront routes → Product details: routes
- Storefront routes → Cart page: routes
- Storefront routes → Account page: routes
- Home page → Product card: renders
- Shop page → Product card: renders
- Product card → Product data: reads
- Product details → Product data: reads
- Storefront routes → Cart state: provides
- Cart page → Cart state: reads and updates
- Cart state → Browser storage: persists
- Product card → Cart state: adds items
- Product details → Cart state: adds items
- Account page → API client: requests
- API client → API server: HTTP requests
- API server → Database connection: connects
- API server → Express app: starts
- Express app → API routes: mounts
- Express app → API documentation: sets up
- Express app → Error handling: registers
- Database connection → MongoDB: connects
- API routes → Commerce schemas: planned API use
- API routes → JWT authorization: planned protection
- API routes → Request validation: planned validation