How shivamrawatt/ecommercewebsite works
This repository implements a clothing storefront with a customer-facing shop, an admin console, and an Express/MongoDB API. The main customer workflow is browsing and searching products, building a cart, placing an order, and tracking its payment and status; administrators manage products and orders. The graph reflects sampled controllers and context for API and cart behavior. Other product and account subsystems are included based on the route and directory structure, but their internal wiring was not sampled.
Main entry points: server.js API server · src/App.jsx Storefront routes · ShopContext.jsx Shop state · src/App.jsx Admin routes
Components 30
Customer storefront
- Storefront routes
frontend/src/App.jsx - Shop state
frontend/src/context/ShopContext.jsx - Catalog browsing
frontend/src/pages/Collection.jsx - Product details
frontend/src/pages/Product.jsx - Product search
frontend/src/components/SearchBar.jsx - Cart and totals
frontend/src/pages/Cart.jsx - Checkout
frontend/src/pages/PlaceOrder.jsx - Customer account
frontend/src/pages/Login.jsx - Order history
frontend/src/pages/Orders.jsx - Payment result
frontend/src/pages/Verify.jsx
Admin console
- Admin routes
admin/src/App.jsx - Admin sign-in
admin/src/components/Login.jsx - Product management
admin/src/pages/Add.jsx - Product listing
admin/src/pages/List.jsx - Order management
admin/src/pages/Orders.jsx
Backend API
- API server
backend/server.js - User operations
backend/controllers/userController.js - Product operations
backend/controllers/productController.js - Cart operations
backend/controllers/cartController.js - Order and payment
backend/controllers/orderController.js - Request authorization
backend/middleware/auth.js - Admin authorization
backend/middleware/adminAuth.js
Persistence and integrations
- User records
backend/models/userModel.js - Product records
backend/models/productModel.js - Order records
backend/models/orderModel.js - MongoDB connection
backend/config/mongodb.js - Image hosting
backend/config/cloudinary.js - Payment providers
Other components
- Shopper
- Administrator
Connections 43
- Shopper → Storefront routes: browses
- Storefront routes → Shop state: uses state
- Storefront routes → Catalog browsing: routes to
- Storefront routes → Product details: routes to
- Storefront routes → Cart and totals: routes to
- Storefront routes → Checkout: routes to
- Storefront routes → Customer account: routes to
- Storefront routes → Order history: routes to
- Storefront routes → Payment result: routes to
- Product search → Shop state: updates query
- Shop state → API server: fetches products
- Shop state → API server: syncs cart
- Catalog browsing → Shop state: reads products
- Product details → Shop state: reads products
- Cart and totals → Shop state: updates cart
- Checkout → API server: places order
- Customer account → API server: authenticates
- Order history → API server: loads orders
- Payment result → API server: verifies payment
- Administrator → Admin routes: manages shop
- Admin routes → Admin sign-in: routes to
- Admin routes → Product management: routes to
- Admin routes → Product listing: routes to
- Admin routes → Order management: routes to
- Admin sign-in → API server: signs in
- Product management → API server: submits product
- Product listing → API server: loads products
- Order management → API server: manages orders
- API server → User operations: dispatches user
- API server → Product operations: dispatches products
- API server → Cart operations: dispatches cart
- API server → Order and payment: dispatches orders
- User operations → User records: reads and writes
- Cart operations → User records: reads and writes cart
- Product operations → Product records: reads and writes
- Order and payment → Order records: reads and writes
- Order and payment → User records: clears cart
- Product operations → Image hosting: uploads images
- Order and payment → Payment providers: creates and verifies
- API server → MongoDB connection: connects
- API server → Image hosting: connects
- API server → Request authorization: uses token checks
- API server → Admin authorization: uses admin checks