How devareeba123/mini-shop-full-stack works
Mini-Shop is a React/Vite storefront backed by an Express API and MongoDB. Shoppers browse products, add them to a locally persisted cart, authenticate, and submit COD orders; the backend verifies product stock and calculates totals before saving the order. Admins can manage products. The graph includes the main UI, API, authorization, and persistence layers. Some frontend-to-backend links are dashed because the sampled files do not show a single source proving the HTTP wiring end to end.
Main entry points: App.jsx Routes and Providers · server.js API Server · productService.js Product Service · Checkout.jsx Checkout
Components 31
Storefront
- Routes and Providers
Frontend/vite-project/src/App.jsx - Product Browsing
Frontend/vite-project/src/pages/Products.jsx - Product Details
Frontend/vite-project/src/pages/ProductDetails.jsx - Product Card
Frontend/vite-project/src/components/ProductCard.jsx - Cart
Frontend/vite-project/src/pages/Cart.jsx - Checkout
Frontend/vite-project/src/pages/Checkout.jsx - Account Pages
Frontend/vite-project/src/pages/Login.jsx - Order History
Frontend/vite-project/src/pages/MyOrders.jsx - Admin Products
Frontend/vite-project/src/pages/admin/AdminProducts.jsx - Add Product
Frontend/vite-project/src/pages/admin/AdminAddProduct.jsx
Customer State
- Authentication State
Frontend/vite-project/src/context/AuthContext.jsx - Cart State
Frontend/vite-project/src/context/CartContext.jsx - Auth Service
Frontend/vite-project/src/services/authService.js - Product Service
Frontend/vite-project/src/services/productService.js - Order Service
Frontend/vite-project/src/services/orderService.js - API Client
Frontend/vite-project/src/services/api.js
Express API
- API Server
Backend/server.js - User Routes
Backend/routes/userRoutes.js - Product Routes
Backend/routes/productRoutes.js - Order Routes
Backend/routes/orderRoutes.js - Account Controller
Backend/controllers/userController.js - Product Controller
Backend/controllers/productController.js - Order Controller
Backend/controllers/orderController.js - JWT Authorization
Backend/middlewares/authMiddleware.js - Token Utility
Backend/utils/generateToken.js
Persistence
- Database Connection
Backend/config/db.js - User Model
Backend/models/user.js - Product Model
Backend/models/product.js - Order Model
Backend/models/order.js - MongoDB
Other components
- Shopper
Connections 47
- Shopper → Routes and Providers: uses
Frontend/vite-project/src/App.jsx - Routes and Providers → Product Browsing: routes to
Frontend/vite-project/src/App.jsx - Routes and Providers → Product Details: routes to
Frontend/vite-project/src/App.jsx - Routes and Providers → Cart: routes to
Frontend/vite-project/src/App.jsx - Routes and Providers → Checkout: routes to
Frontend/vite-project/src/App.jsx - Routes and Providers → Account Pages: routes to
Frontend/vite-project/src/App.jsx - Routes and Providers → Order History: routes to
Frontend/vite-project/src/App.jsx - Routes and Providers → Admin Products: routes to
Frontend/vite-project/src/App.jsx - Routes and Providers → Add Product: routes to
Frontend/vite-project/src/App.jsx - Routes and Providers → Authentication State: provides
Frontend/vite-project/src/App.jsx - Routes and Providers → Cart State: provides
Frontend/vite-project/src/App.jsx - Product Browsing → Product Service: fetches products
Frontend/vite-project/src/pages/Products.jsx - Product Browsing → Product Card: renders
Frontend/vite-project/src/pages/Products.jsx - Product Details → Product Service: fetches details
Frontend/vite-project/src/pages/ProductDetails.jsx - Product Details → Cart State: adds items
Frontend/vite-project/src/pages/ProductDetails.jsx - Cart → Cart State: updates cart
Frontend/vite-project/src/pages/Cart.jsx - Checkout → Cart State: reads cart
Frontend/vite-project/src/pages/Checkout.jsx - Checkout → Authentication State: reads identity
Frontend/vite-project/src/pages/Checkout.jsx - Checkout → Order Service: submits order
Frontend/vite-project/src/pages/Checkout.jsx - Order History → Order Service: fetches orders
Frontend/vite-project/src/pages/MyOrders.jsx - Account Pages → Authentication State: authenticates
Frontend/vite-project/src/pages/Login.jsx - Authentication State → Auth Service: calls
Frontend/vite-project/src/context/AuthContext.jsx - Auth Service → API Client: sends requests
Frontend/vite-project/src/services/authService.js - Product Service → API Client: sends requests
Frontend/vite-project/src/services/productService.js - Order Service → API Client: sends requests
Frontend/vite-project/src/services/orderService.js - Admin Products → Product Service: manages products
Frontend/vite-project/src/pages/admin/AdminProducts.jsx - Add Product → Product Service: creates product
Frontend/vite-project/src/pages/admin/AdminAddProduct.jsx - API Server → Database Connection: connects database
Backend/server.js - API Server → User Routes: mounts routes
Backend/server.js - API Server → Product Routes: mounts routes
Backend/server.js - API Server → Order Routes: mounts routes
Backend/server.js - User Routes → Account Controller: dispatches to
Backend/routes/userRoutes.js - Product Routes → Product Controller: dispatches to
Backend/routes/productRoutes.js - Product Routes → JWT Authorization: guards admin
Backend/routes/productRoutes.js - Order Routes → Order Controller: dispatches to
Backend/routes/orderRoutes.js - Order Routes → JWT Authorization: guards access
Backend/routes/orderRoutes.js - Account Controller → User Model: reads and writes
Backend/controllers/userController.js - Account Controller → Token Utility: generates token
Backend/controllers/userController.js - JWT Authorization → User Model: loads user
Backend/middlewares/authMiddleware.js - Product Controller → Product Model: reads and writes
Backend/controllers/productController.js - Order Controller → Product Model: verifies stock
Backend/controllers/orderController.js - Order Controller → Order Model: creates and reads
Backend/controllers/orderController.js - Database Connection → MongoDB: connects
Backend/config/db.js - User Model → MongoDB: stores users
- Product Model → MongoDB: stores products
- Order Model → MongoDB: stores orders
- API Client → API Server: HTTP API