How chiefmigz/ecommerce-website works
This MERN storefront presents Toronto Cupcake products and supports catalog browsing, product details, account login, and informational pages. The principal flow is a shopper browsing and filtering products, loading more results, and viewing a product; the backend exposes product and category APIs, with authenticated admin mutations. Authentication and product-image storage are documented capabilities. Some frontend-to-API and unsampled controller wiring is not shown, so those connections are omitted; the documented Cloudinary integration is shown as optional.
Main entry points: Pages.js Page routing · server.js Express server · productRouter.js Product routes · categoryRouter.js Category routes
Components 29
Storefront
- App shell
client/src/App.js - Page routing
client/src/components/mainpages/Pages.js - Home page
client/src/components/mainpages/home/Home.js - Product listing
client/src/components/mainpages/products/Products.js - Catalog filters
client/src/components/mainpages/utils/filtercomponent/FilterComponent.js - Load more
client/src/components/mainpages/products/LoadMore.js - Product detail
client/src/components/mainpages/detailproduct/DetailProduct.js - Login page
client/src/components/mainpages/auth/login.js - Delivery postal code
client/src/components/mainpages/utils/modals/delivery/PostalCode.js - Notifications
client/src/components/mainpages/utils/modals/notification/NotificationModal.js - About and mission
client/src/components/mainpages/about/about.js - Shared state
client/src/GlobalState.js - Products API client
client/src/api/ProductsAPI.js - User API client
client/src/api/UserAPI.js
API backend
- Express server
server.js - Product routes
routes/productRouter.js - Category routes
routes/categoryRouter.js - Image upload route
routes/upload.js - Product operations
controllers/productCtrl.js - Category operations
controllers/categoryCtrl.js - Account operations
controllers/userCtrl.js
Catalog data
- Product model
models/productModel.js - Category model
models/categoryModel.js
Identity and media
- Token authentication
middleware/auth.js - Admin authorization
middleware/authAdmin.js - User model
models/userModel.js
Other components
- Shopper
- MongoDB
- Cloudinary
Connections 28
- Shopper → App shell: uses storefront
- App shell → Page routing: renders pages
- App shell → Shared state: provides state
- Page routing → Home page: routes to
- Page routing → Product listing: routes to
- Page routing → Product detail: routes to
- Page routing → Login page: routes to
- Product listing → Catalog filters: offers filters
- Product listing → Load more: offers paging
- Products API client → Express server: requests products
- Express server → Product routes: mounts routes
- Express server → Category routes: mounts routes
- Express server → Image upload route: mounts routes
- Product routes → Token authentication: protects mutations
- Product routes → Admin authorization: guards mutations
- Product routes → Product operations: dispatches requests
- Category routes → Token authentication: protects mutations
- Category routes → Admin authorization: guards mutations
- Category routes → Category operations: dispatches requests
- Token authentication → Admin authorization: passes identity
- Admin authorization → User model: checks role
- Product operations → Product model: queries and updates
- Category operations → Category model: uses categories
- Account operations → User model: uses accounts
- Product model → MongoDB: persists products
- Category model → MongoDB: persists categories
- User model → MongoDB: persists accounts
- Image upload route → Cloudinary: stores images