arifictedge/gadgethub

1. Repo shape / deployment boundary

GadgetHub is split into three runtime areas: frontend/ for the React client, backend/ for the Express + MongoDB API, and api/ plus vercel.json for Vercel/serverless deployment glue. This is a decoupled frontend-backend architecture rather than a single monolith.

2. Client application shell

The React app is Vite-based and starts in frontend/src/main.jsx, with App.jsx handling top-level routing and composition. Global styling comes from Tailwind (tailwind.config.js, index.css), and the app is organized around pages plus reusable layout/product components.

3. Frontend presentation layer

The UI is split into reusable layout pieces (Navbar, Footer, Layout, MobileBottomNav, FloatingActions) and domain components like ProductCard. This suggests the visual shell is shared across pages, while product and commerce views are composed from smaller widgets.

4. Client-side state boundaries

AuthContext and CartContext are the main client-wide state containers. Authentication and cart state are not kept inside individual pages; they are lifted into context so product listing, checkout, navbar, dashboard, and admin views can all read/update them consistently.

5. Frontend feature pages

The pages map directly to commerce flows: browsing (Home, Products, Categories, ProductDetail, Compare), transaction flow (Cart, Checkout), auth (Login, Register), account (UserDashboard), and admin operations (AdminDashboard, AdminProducts, AdminOrders, AdminUsers). This gives a clear separation between customer-facing and staff-facing areas.

6. API access pattern

frontend/src/lib/api.js is the client’s dedicated API boundary. All server communication should flow through this helper rather than being scattered across components, which centralizes base URL handling and request behavior.

7. Backend request pipeline

The backend is a conventional Express service with src/index.js as the entry point and src/app.js as the app wiring layer. Routing is separated from business logic: route files dispatch to controllers, and controllers implement the actual product, order, auth, and user operations.

8. Backend domain model layer

MongoDB data is modeled with Mongoose in src/models/ for Product, User, and Order. Those three models define the core commerce entities and are the main persistence boundary for the system.

9. Security and cross-cutting middleware

authMiddleware.js guards protected routes, especially for authenticated user and admin operations. errorMiddleware.js centralizes API error handling, which keeps controller logic cleaner and makes the backend behavior more uniform.

10. Operational scripts and data hygiene

seed.js supports initial database population, and migrateSlugs.js exists for SEO-friendly product URL maintenance. The README’s mention of JWT, bcrypt, CORS, and rate limiting indicates the backend also handles stateless auth and API hardening as first-class concerns.

11. Main data flow

A typical request path is: user action in the React page → shared UI/context state → api.js request → Express route → controller → Mongoose model → MongoDB → JSON response back to the client. Authentication adds a JWT check in middleware before sensitive order/user/admin endpoints are processed.