How dieukiet5944/finalsproject-ecommerce works
1. Overall shape
This is a monorepo with two main runtime boundaries: a React client in client/ and a Node/Express backend in server/. There is also a shared file-based data store under data/db.json, so the backend is not wired to an external database service in the repo.
2. Frontend application
The client is a Vite-based React SPA (client/src/main.jsx, client/vite.config.js). It serves the shopping experience and admin interface from the same frontend codebase.
3. Frontend feature split
The UI is organized into three areas:
- pages/client: storefront flow such as home, product list/detail, cart, checkout
- pages/auth: login and register
- pages/admin: admin home/dashboard
Supporting UI is split into components/client, components/admin, and shared layout components.
4. Client-side state and shared behavior
AuthContext and CartContext manage global session/cart state across the SPA. Shared layout pieces like Header, Footer, and UserLayout define the shell around page content, while small reusable components handle product cards, loading, and success feedback.
5. Route protection and navigation boundaries
The router layer separates public, authenticated user, and admin-only flows. ProtectedRoute and AdminProtectedRoute enforce access control on the client, and menuRoute.js likely centralizes route/menu definitions for the app’s navigation structure.
6. Frontend-to-backend communication
services/productService.js is the explicit API service layer on the client, acting as the main abstraction for backend data fetching. The rest of the UI likely consumes backend data through this service or direct fetch calls embedded in page/components.
7. Backend runtime and API surface
The server is an Express-style API (server/index.js) split into routers for users, products, orders, and admin. This makes the backend the single authority for authentication, product data, and order processing.
8. Request processing pipeline
Each route group follows a controller/middleware/model pattern: routers dispatch requests, middleware validates or authorizes them, controllers implement the business logic, and models encapsulate data access. This is the main backend execution path an architecture diagram should show.
9. Domain modules
The model layer is explicitly separated into admin, users, products, order, and cart, which suggests domain-specific handling rather than a single generic entity layer. Controllers mirror these concerns with dedicated files for admin, product, order, and user operations.
10. Authentication and authorization
JWT-based auth is implemented in server/utils/jwt.js, with middleware such as checkLoginuser, checkLoginadmin, checkRegisterUser, and update/delete guards. The architecture therefore has role-aware access control on both the client and server sides.
11. Persistence and data flow
Persistent state appears to live in data/db.json, so the backend likely reads/writes structured JSON rather than using a separate database server. The data flow is: browser → API route → middleware → controller → model → JSON storage → response.
12. Operational/deployment concerns
The repo includes GitHub Actions CI (.github/workflows/ci.yml) and a root vercel.json, indicating automated validation and deployment configuration are part of the system boundary. Those files matter for how the app is built and shipped, even though they do not define runtime business logic.
Main entry points: router Routing · index.js API entry · main.jsx Main app · controller Controllers
Components 22
Client SPA
React/Vite frontend for shopping, auth, and admin screens.
- Main app · Client bootstrap and top-level application shell.
client/src/main.jsx - Routing · Route boundaries for public, protected, and admin flows.
client/src/router - App state · Global auth and cart state shared across the SPA.
client/src/context - Layout shell · Shared header, footer, and authenticated user layout.
client/src/components/layout - Storefront pages · Home, product listing/detail, cart, and checkout screens.
client/src/pages/client - Auth pages · Login and registration flows.
client/src/pages/auth - Admin pages · Admin home and dashboard surfaces.
client/src/pages/admin - Store components · Reusable storefront components such as product cards and cart items.
client/src/components/client - Admin widgets · Admin dashboard and management widgets.
client/src/components/admin - API service · Frontend abstraction for backend product/data requests.
client/src/services/productService.js
API Server
Express backend with routers, middleware, controllers, and file-backed models.
- API entry · Backend server bootstrap and top-level app wiring.
server/index.js - Users route · User auth and account endpoints.
server/routers/usersRouter.js - Products route · Product catalog endpoints.
server/routers/productsRouter.js - Orders route · Order creation and order workflow endpoints.
server/routers/ordersRouter.js - Admin route · Admin-specific endpoints.
server/routers/adminRouter.js - Guards · Login, role, and request validation middleware.
server/middleware - Controllers · Request handlers for users, products, orders, and admin actions.
server/controller - Models · Domain models for users, products, cart, order, and admin data.
server/model - JWT utils · Token creation and verification helpers.
server/utils/jwt.js
Data Store
Persistent JSON storage used by the backend.
- JSON store · File-based persistent application data.
data/db.json
Ops
Repository-level build, CI, and deployment configuration.
- CI workflow · Automated validation pipeline.
.github/workflows/ci.yml - Deploy config · Deployment/runtime configuration for the repository.
vercel.json
Connections 29
- Main app → Routing: uses · Bootstraps the route structure.
- Main app → App state: wraps · Provides app-wide auth and cart state.
- Main app → Layout shell: renders · Uses shared shell components.
- Routing → Storefront pages: routes · Dispatches to storefront pages.
- Routing → Auth pages: routes · Dispatches to authentication pages.
- Routing → Admin pages: routes · Dispatches to admin pages.
- Routing → Routing: guards · Separates public, user, and admin paths.
- Storefront pages → Store components: uses · Composes storefront UI widgets.
- Admin pages → Admin widgets: uses · Composes admin widgets.
- Storefront pages → API service: fetches · Loads backend product data.
- Auth pages → Users route: auth · Sends login and registration requests.
- Admin pages → Admin route: admin · Uses admin-backed operations.
- Store components → App state: reads state · Consumes cart and auth context.
- API entry → Users route: mounts · Registers user routes.
- API entry → Products route: mounts · Registers product routes.
- API entry → Orders route: mounts · Registers order routes.
- API entry → Admin route: mounts · Registers admin routes.
- Users route → Guards: validates · Applies auth and request guards.
- Products route → Controllers: dispatches · Hands off to product controller logic.
- Orders route → Controllers: dispatches · Hands off to order controller logic.
- Admin route → Controllers: dispatches · Hands off to admin controller logic.
- Controllers → Models: uses · Reads and writes domain data through models.
- Controllers → JWT utils: auth · Creates and verifies access tokens.
- Models → JSON store: persists · Stores application state in JSON.
- Guards → JWT utils: verifies · Checks login and role claims.
- CI workflow → API entry: tests · Validates the repository build and API code.
- CI workflow → Main app: tests · Validates the frontend build and linting.
- Deploy config → Main app: deploys · Hosts the frontend application.
- Deploy config → API entry: routes · Supports backend deployment wiring.