# raselahmed2023/resellhub architecture

> Architecture diagram of the GitHub repository raselahmed2023/resellhub, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/raselahmed2023/resellhub
- Repository: https://github.com/raselahmed2023/resellhub

## Overview

1. **Overall shape**
   ReSell Hub is organized as a **Next.js App Router** application. The repository is primarily the **frontend + route handlers** for a second-hand marketplace, with a clear split between public marketplace pages, authentication endpoints, and role-based dashboards.

2. **Route structure and page shells**
   The app uses two major layout boundaries:
   - `src/app/(mainLayout)` for the public storefront
   - `src/app/dashboard` for authenticated, role-specific areas  
   This makes the architecture easy to diagram as two top-level user experiences sharing the same codebase but different layouts and navigation.

3. **Public marketplace experience**
   The public side includes:
   - Home page with featured products, marketplace stats, popular categories, and sustainability messaging
   - Products listing and product detail pages
   - Categories page  
   These pages are the discovery layer where buyers browse and evaluate inventory before logging in or purchasing.

4. **Authentication and session boundary**
   Authentication is handled through **Better Auth**:
   - `src/app/api/auth/[...all]/route.js` exposes the auth API surface
   - `src/app/api/verify-session/route.js` is a dedicated session-check endpoint
   - `src/lib/auth.js` and `src/lib/auth-client.js` centralize auth setup  
   This creates a distinct boundary between anonymous browsing and protected app areas.

5. **Role-based dashboard architecture**
   The dashboard is split into three user roles:
   - **Buyer**: orders, payments, profile, wishlist
   - **Seller**: add product, manage products, manage orders, analytics, profile
   - **Admin**: analytics, orders, products, users  
   `src/app/dashboard/layout.js` and `src/components/dashboard/Sidebar.jsx` indicate a shared dashboard shell with role-specific navigation and page content underneath.

6. **Seller workflow**
   Seller pages support the supply side of the marketplace:
   - Adding products
   - Editing own products
   - Managing listings and orders
   - Viewing seller analytics  
   The README’s feature list implies image upload via **ImgBB**, so product creation likely includes media upload as part of the listing flow.

7. **Buyer workflow**
   Buyer pages focus on purchase tracking and saved items:
   - Wishlist management
   - Orders
   - Payments
   - Profile  
   The checkout flow is split out into dedicated pages under `src/app/checkout`, with a separate success screen, which suggests a transaction lifecycle that starts from product/cart selection and ends with payment confirmation.

8. **Admin workflow**
   The admin section is built around marketplace governance:
   - Product approval/management
   - Order oversight
   - User management
   - Analytics  
   This implies a moderation boundary where seller-submitted inventory can be reviewed before becoming visible in the public catalog.

9. **Data access and secure client calls**
   `src/lib/axiosSecure.js` suggests a shared, authenticated HTTP client for protected API calls. In architecture terms, this is the main client-side data access layer used by dashboard and transactional pages to talk to backend services while carrying auth context.

10. **External service integration**
   The README shows the platform depends on a few external systems that materially shape the architecture:
   - **Stripe** for payments
   - **Better Auth** for login and session management
   - **ImgBB** for image hosting
   - A backend stack based on **Express + MongoDB** is referenced in the README, implying the frontend likely consumes a separate API/service layer for marketplace data

11. **UI composition and shared presentation**
   The app uses reusable UI components for the storefront and marketing surface:
   - `Navbar`, `Footer`, `HeroBanner`, `SustainabilityImpact`
   - Home-page feature sections such as stats and popular categories  
   This keeps the public experience modular while the dashboard has its own reusable shell elements.

12. **Nonfunctional concerns**
   The stack emphasizes:
   - responsive UI
   - animation via **Framer Motion**
   - analytics visualization via **Recharts**
   - search/filter/sort and pagination for browsing efficiency  
   These are not separate subsystems, but they influence how data is presented and how the marketplace scales in the UI.

13. **How the main flows connect**
   The end-to-end architecture is:
   public browsing → authentication/session verification → role-based dashboard → product creation/approval → checkout/payment → order tracking/analytics.  
   That flow is the core diagram to draw, with auth and secure API access as the central boundary between the public storefront and protected marketplace operations.

Main entry points: [`src/app`](https://github.com/raselahmed2023/resellhub/tree/main/src/app) (App Router), [`src/app/dashboard/layout.js`](https://github.com/raselahmed2023/resellhub/blob/main/src/app/dashboard/layout.js) (Dashboard layout), [`src/app/(mainLayout)/layout.jsx`](https://github.com/raselahmed2023/resellhub/blob/main/src/app/(mainLayout)/layout.jsx) (Main layout), [`src/app/dashboard/seller/page.jsx`](https://github.com/raselahmed2023/resellhub/blob/main/src/app/dashboard/seller/page.jsx) (Seller area)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_public["Public storefront"]
  node_main_layout["Main layout<br/>public shell<br/>[layout.jsx]"]
  node_home_page["Home page<br/>landing page<br/>[page.js]"]
  node_products_list["Products<br/>catalog page<br/>[page.jsx]"]
  node_product_detail["Product detail<br/>catalog page<br/>[page.jsx]"]
  node_categories_page["Categories<br/>browse page<br/>[page.jsx]"]
  node_checkout_flow["Checkout<br/>transaction flow<br/>[page.jsx]"]
  node_checkout_success["Success<br/>confirmation page<br/>[page.jsx]"]
end

subgraph group_auth["Authentication"]
  node_auth_routes["Auth API<br/>route handler<br/>[route.js]"]
  node_session_verify["Session verify<br/>route handler<br/>[route.js]"]
  node_login_page["Login<br/>auth page<br/>[page.jsx]"]
  node_register_page["Register<br/>auth page<br/>[page.jsx]"]
end

subgraph group_dashboard["Role dashboard"]
  node_dashboard_layout["Dashboard layout<br/>protected shell<br/>[layout.js]"]
  node_buyer_area["Buyer area<br/>role area<br/>[page.jsx]"]
  node_seller_area["Seller area<br/>role area<br/>[page.jsx]"]
  node_admin_area["Admin area<br/>role area<br/>[page.jsx]"]
end

subgraph group_shared["Shared UI"]
  node_sidebar["Sidebar<br/>nav component<br/>[Sidebar.jsx]"]
  node_site_shell["Site shell<br/>ui components<br/>[Navbar.jsx]"]
end

subgraph group_data["Client data"]
  node_auth_client["Auth client<br/>auth setup<br/>[auth-client.js]"]
  node_auth_server["Auth server<br/>auth setup<br/>[auth.js]"]
  node_secure_http["Secure HTTP<br/>api client<br/>[axiosSecure.js]"]
end

node_root["App Router<br/>Next.js app"]

node_root -->|"routes"| node_main_layout
node_root -->|"routes"| node_dashboard_layout
node_root -->|"routes"| node_checkout_flow
node_root -->|"routes"| node_auth_routes
node_root -->|"routes"| node_login_page
node_root -->|"routes"| node_register_page
node_main_layout -->|"contains"| node_home_page
node_main_layout -->|"contains"| node_products_list
node_main_layout -->|"contains"| node_product_detail
node_main_layout -->|"contains"| node_categories_page
node_home_page -->|"uses"| node_site_shell
node_products_list -->|"uses"| node_site_shell
node_dashboard_layout -->|"uses"| node_sidebar
node_dashboard_layout -->|"contains"| node_buyer_area
node_dashboard_layout -->|"contains"| node_seller_area
node_dashboard_layout -->|"contains"| node_admin_area
node_buyer_area -->|"calls"| node_secure_http
node_seller_area -->|"calls"| node_secure_http
node_admin_area -->|"calls"| node_secure_http
node_auth_routes -->|"uses"| node_auth_server
node_login_page -->|"uses"| node_auth_client
node_register_page -->|"uses"| node_auth_client
node_session_verify -->|"uses"| node_auth_server
node_dashboard_layout -->|"guards"| node_session_verify
node_checkout_flow -->|"calls"| node_secure_http
node_checkout_success -->|"follows"| node_checkout_flow
node_buyer_area -->|"enters"| node_checkout_flow
node_seller_area -.->|"supplies"| node_home_page
node_admin_area -.->|"oversees"| node_seller_area

click node_root "https://github.com/raselahmed2023/resellhub/tree/main/src/app"
click node_main_layout "https://github.com/raselahmed2023/resellhub/blob/main/src/app/(mainLayout)/layout.jsx"
click node_home_page "https://github.com/raselahmed2023/resellhub/blob/main/src/app/(mainLayout)/page.js"
click node_products_list "https://github.com/raselahmed2023/resellhub/blob/main/src/app/(mainLayout)/products/page.jsx"
click node_product_detail "https://github.com/raselahmed2023/resellhub/blob/main/src/app/(mainLayout)/products/[id]/page.jsx"
click node_categories_page "https://github.com/raselahmed2023/resellhub/blob/main/src/app/(mainLayout)/categories/page.jsx"
click node_checkout_flow "https://github.com/raselahmed2023/resellhub/blob/main/src/app/checkout/page.jsx"
click node_checkout_success "https://github.com/raselahmed2023/resellhub/blob/main/src/app/checkout/success/page.jsx"
click node_auth_routes "https://github.com/raselahmed2023/resellhub/blob/main/src/app/api/auth/[...all]/route.js"
click node_session_verify "https://github.com/raselahmed2023/resellhub/blob/main/src/app/api/verify-session/route.js"
click node_login_page "https://github.com/raselahmed2023/resellhub/blob/main/src/app/login/page.jsx"
click node_register_page "https://github.com/raselahmed2023/resellhub/blob/main/src/app/register/page.jsx"
click node_dashboard_layout "https://github.com/raselahmed2023/resellhub/blob/main/src/app/dashboard/layout.js"
click node_buyer_area "https://github.com/raselahmed2023/resellhub/blob/main/src/app/dashboard/buyer/page.jsx"
click node_seller_area "https://github.com/raselahmed2023/resellhub/blob/main/src/app/dashboard/seller/page.jsx"
click node_admin_area "https://github.com/raselahmed2023/resellhub/blob/main/src/app/dashboard/admin/page.jsx"
click node_sidebar "https://github.com/raselahmed2023/resellhub/blob/main/src/components/dashboard/Sidebar.jsx"
click node_site_shell "https://github.com/raselahmed2023/resellhub/blob/main/src/components/Navbar.jsx"
click node_auth_client "https://github.com/raselahmed2023/resellhub/blob/main/src/lib/auth-client.js"
click node_auth_server "https://github.com/raselahmed2023/resellhub/blob/main/src/lib/auth.js"
click node_secure_http "https://github.com/raselahmed2023/resellhub/blob/main/src/lib/axiosSecure.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_main_layout,node_home_page,node_products_list,node_product_detail,node_categories_page,node_checkout_flow,node_checkout_success toneBlue
class node_auth_routes,node_session_verify,node_login_page,node_register_page toneAmber
class node_dashboard_layout,node_buyer_area,node_seller_area,node_admin_area toneMint
class node_sidebar,node_site_shell toneRose
class node_auth_client,node_auth_server,node_secure_http toneIndigo
class node_root toneNeutral
```

## Components

### Public storefront

Anonymous marketplace browsing and product discovery

- [Main layout](https://github.com/raselahmed2023/resellhub/blob/main/src/app/(mainLayout)/layout.jsx): public shell · Layout boundary for the public storefront · `src/app/(mainLayout)/layout.jsx`
- [Home page](https://github.com/raselahmed2023/resellhub/blob/main/src/app/(mainLayout)/page.js): landing page · Marketplace landing experience and featured content · `src/app/(mainLayout)/page.js`
- [Products](https://github.com/raselahmed2023/resellhub/blob/main/src/app/(mainLayout)/products/page.jsx): catalog page · Public product listing and browse experience · `src/app/(mainLayout)/products/page.jsx`
- [Product detail](https://github.com/raselahmed2023/resellhub/blob/main/src/app/(mainLayout)/products/[id]/page.jsx): catalog page · Individual product view for evaluation and purchase flow · `src/app/(mainLayout)/products/[id]/page.jsx`
- [Categories](https://github.com/raselahmed2023/resellhub/blob/main/src/app/(mainLayout)/categories/page.jsx): browse page · Category-based discovery and navigation · `src/app/(mainLayout)/categories/page.jsx`
- [Checkout](https://github.com/raselahmed2023/resellhub/blob/main/src/app/checkout/page.jsx): transaction flow · Purchase and payment entry point · `src/app/checkout/page.jsx`
- [Success](https://github.com/raselahmed2023/resellhub/blob/main/src/app/checkout/success/page.jsx): confirmation page · Post-payment completion screen · `src/app/checkout/success/page.jsx`

### Authentication

Login, registration, and session verification boundary

- [Auth API](https://github.com/raselahmed2023/resellhub/blob/main/src/app/api/auth/[...all]/route.js): route handler · Better Auth endpoint surface for login and session operations · `src/app/api/auth/[...all]/route.js`
- [Session verify](https://github.com/raselahmed2023/resellhub/blob/main/src/app/api/verify-session/route.js): route handler · Dedicated endpoint for checking authenticated session state · `src/app/api/verify-session/route.js`
- [Login](https://github.com/raselahmed2023/resellhub/blob/main/src/app/login/page.jsx): auth page · Sign-in entry for protected areas · `src/app/login/page.jsx`
- [Register](https://github.com/raselahmed2023/resellhub/blob/main/src/app/register/page.jsx): auth page · Account creation entry for new users · `src/app/register/page.jsx`

### Role dashboard

Protected buyer, seller, and admin areas

- [Dashboard layout](https://github.com/raselahmed2023/resellhub/blob/main/src/app/dashboard/layout.js): protected shell · Shared layout for authenticated role-specific areas · `src/app/dashboard/layout.js`
- [Buyer area](https://github.com/raselahmed2023/resellhub/blob/main/src/app/dashboard/buyer/page.jsx): role area · Buyer-facing dashboard section for purchase tracking and saved items · `src/app/dashboard/buyer/page.jsx`
- [Seller area](https://github.com/raselahmed2023/resellhub/blob/main/src/app/dashboard/seller/page.jsx): role area · Seller-facing dashboard section for listing and order management · `src/app/dashboard/seller/page.jsx`
- [Admin area](https://github.com/raselahmed2023/resellhub/blob/main/src/app/dashboard/admin/page.jsx): role area · Admin-facing dashboard section for governance and oversight · `src/app/dashboard/admin/page.jsx`

### Shared UI

Reusable shell and presentation components

- [Sidebar](https://github.com/raselahmed2023/resellhub/blob/main/src/components/dashboard/Sidebar.jsx): nav component · Shared dashboard navigation and role switchboard · `src/components/dashboard/Sidebar.jsx`
- [Site shell](https://github.com/raselahmed2023/resellhub/blob/main/src/components/Navbar.jsx): ui components · Shared storefront header, footer, and hero sections · `src/components/Navbar.jsx`

### Client data

Auth-aware API access and session helpers

- [Auth client](https://github.com/raselahmed2023/resellhub/blob/main/src/lib/auth-client.js): auth setup · Client-side Better Auth configuration and helpers · `src/lib/auth-client.js`
- [Auth server](https://github.com/raselahmed2023/resellhub/blob/main/src/lib/auth.js): auth setup · Server-side auth configuration and session logic · `src/lib/auth.js`
- [Secure HTTP](https://github.com/raselahmed2023/resellhub/blob/main/src/lib/axiosSecure.js): api client · Authenticated client used for protected marketplace requests · `src/lib/axiosSecure.js`

### Other components

- [App Router](https://github.com/raselahmed2023/resellhub/tree/main/src/app): Next.js app · Top-level application structure and route composition · `src/app`

## Connections

- App Router → Main layout: routes · Public route subtree
- App Router → Dashboard layout: routes · Protected dashboard subtree
- App Router → Checkout: routes · Checkout route subtree
- App Router → Auth API: routes · Auth API subtree
- App Router → Login: routes · Login page route
- App Router → Register: routes · Registration page route
- Main layout → Home page: contains · Landing page in public shell
- Main layout → Products: contains · Catalog listing in public shell
- Main layout → Product detail: contains · Product detail in public shell
- Main layout → Categories: contains · Category browsing in public shell
- Home page → Site shell: uses · Shared marketing UI sections
- Products → Site shell: uses · Shared storefront UI
- Dashboard layout → Sidebar: uses · Shared dashboard navigation
- Dashboard layout → Buyer area: contains · Buyer role subtree
- Dashboard layout → Seller area: contains · Seller role subtree
- Dashboard layout → Admin area: contains · Admin role subtree
- Buyer area → Secure HTTP: calls · Protected data requests
- Seller area → Secure HTTP: calls · Protected marketplace operations
- Admin area → Secure HTTP: calls · Protected moderation and analytics calls
- Auth API → Auth server: uses · Server auth implementation
- Login → Auth client: uses · Client sign-in flow
- Register → Auth client: uses · Client sign-up flow
- Session verify → Auth server: uses · Session verification logic
- Dashboard layout → Session verify: guards · Protected-area session check
- Checkout → Secure HTTP: calls · Payment and order submission
- Success → Checkout: follows · Completion step after checkout
- Buyer area → Checkout: enters · Buyer purchase lifecycle
- Seller area → Home page: supplies · Listings feed the public catalog
- Admin area → Seller area: oversees · Moderation and governance over seller inventory