# sayemimran/resell-hub-client architecture

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

- Interactive diagram: https://gitdiagram.com/sayemimran/resell-hub-client
- Repository: https://github.com/sayemimran/resell-hub-client

## Overview

1. **Overall shape**  
   Resell Hub is a Next.js App Router application that combines the storefront, account areas, and dashboard experiences in one codebase. The repo is organized around route segments in `src/app`, with reusable UI and domain logic in `src/components` and shared auth/payment helpers in `src/lib`.

2. **Primary runtime boundary**  
   The visible backend surface is Next.js route handlers under `src/app/api`, not a separate server app in this tree. The README references Express and MongoDB, but in this repository snapshot the concrete API entry points are the Next route handlers, plus server/client helper modules that encapsulate authentication and payment calls.

3. **Authentication subsystem**  
   Auth is centered on Better Auth. The catch-all handler at `src/app/api/auth/[...all]/route.js` serves the auth endpoints, while `src/lib/auth.js`, `src/lib/auth-client.js`, `src/lib/clientAuthFetch.js`, and `src/lib/server/serverAuthFetch.js` split auth concerns between browser and server contexts. The login/register pages and forms live under `src/app/auth/*` and `src/components/auths/*`.

4. **Marketplace storefront**  
   Public commerce flows are split across home, product discovery, category browsing, cart, checkout, and order success routes. The landing page uses home components such as hero, featured products, stats, categories, and trust/social-proof sections. Product listing/detail pages live under `src/app/products` and `src/app/products/[id]`, with reusable product cards, review sections, and add-to-cart controls in `src/components/products`.

5. **Cart and checkout flow**  
   Cart state is presented in `src/app/cart` using `CartContents` and related UI. Checkout is handled by `src/app/checkout` and `src/components/cart/CheckoutForm.jsx`, which likely posts to the `src/app/api/checkout_sessions/route.js` endpoint. That route is the payment boundary that creates Stripe checkout sessions; the success page at `src/app/order-success` handles the post-payment landing state.

6. **Role-based dashboard boundary**  
   The dashboard is segmented by role under `src/app/dashboard`: buyer, seller, and admin each have their own route subtree and page set. `src/app/dashboard/layout.jsx` and shared dashboard components provide the shell, navigation, and responsive sidebars, while each role has its own views and data widgets. This is an important architectural boundary: users only see the subset of commerce data relevant to their role.

7. **Buyer workspace**  
   The buyer area focuses on post-purchase and personal commerce management: orders, payments, and wishlist. Components like `RecentPayments`, `WishlistPreview`, `OrdersTable`, and buyer dashboard composites suggest that buyer pages are mostly read-oriented, showing order history and account activity rather than product management.

8. **Seller workspace**  
   Seller routes cover product creation, listing management, order handling, and seller analytics. The seller component set includes `AddProductForm`, `MyProducts`, `ManageOrder`, `SellerOrderCard`, and `AnalyticsCharts`, indicating a workflow where sellers can create/edit inventory, monitor fulfillment, and inspect performance metrics from within their dashboard boundary.

9. **Admin workspace**  
   Admin pages are dedicated to platform oversight: analytics, orders, products, and users. Client components such as `AdminAnalyticsClient`, `AdminOrdersClient`, `UserTable`, `CategoryPieChart`, and `AdminProductCard` point to a management console that aggregates system-wide data and supports moderation or operational review.

10. **Profile and account management**  
   Profile editing is separated into its own route subtree under `src/app/profile` and `src/app/profile/edit/[id]`. Supporting components include profile info, avatar, edit form, and password change form, which suggests account maintenance is treated as a distinct domain from marketplace browsing and purchasing.

11. **Shared UI and layout system**  
   The app uses a component-driven design system with reusable navigation, footer, dashboard shell, and content cards. `src/app/layout.js` and `src/app/globals.css` define the global app shell and styling, while feature components are grouped by domain so the same product, auth, and dashboard primitives can be reused across multiple routes.

12. **Data and service integrations**  
   The repo explicitly integrates Stripe for payments and Better Auth for sessions; MongoDB is the intended persistence layer per the README. Client/server fetch helpers suggest the app distinguishes between browser-initiated requests and server-side authenticated requests, which matters for diagramming trust boundaries and data flow between UI, auth, API routes, and external services.

Main entry points: [`src/app/dashboard/layout.jsx`](https://github.com/sayemimran/resell-hub-client/blob/main/src/app/dashboard/layout.jsx) (Dashboard), [`src/app/layout.js`](https://github.com/sayemimran/resell-hub-client/blob/main/src/app/layout.js) (Next app), [`src/app/page.js`](https://github.com/sayemimran/resell-hub-client/blob/main/src/app/page.js) (Storefront), [`src/app/products/page.jsx`](https://github.com/sayemimran/resell-hub-client/blob/main/src/app/products/page.jsx) (Catalog)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App router"]
  node_root["Next app<br/>Next.js client<br/>[layout.js]"]
  node_home["Storefront<br/>route group<br/>[page.js]"]
  node_products["Catalog<br/>route group<br/>[page.jsx]"]
  node_cart["Cart<br/>route<br/>[page.jsx]"]
  node_checkout["Checkout<br/>route<br/>[page.jsx]"]
  node_order_success["Order success<br/>route<br/>[page.jsx]"]
  node_auth_routes["Auth routes<br/>route group<br/>[page.jsx]"]
  node_auth_api["Auth API<br/>route handler<br/>[route.js]"]
  node_checkout_api["Checkout API<br/>route handler<br/>[route.js]"]
  node_profile["Profile<br/>route group<br/>[page.jsx]"]
  node_dashboard["Dashboard<br/>route shell<br/>[layout.jsx]"]
  node_buyer_dash["Buyer area<br/>dashboard subtree<br/>[page.jsx]"]
  node_seller_dash["Seller area<br/>dashboard subtree<br/>[page.jsx]"]
  node_admin_dash["Admin area<br/>dashboard subtree<br/>[page.jsx]"]
end

subgraph group_components["UI components"]
  node_navbar["Site chrome<br/>layout UI<br/>[Navbar.jsx]"]
  node_home_ui["Home UI<br/>feature UI<br/>[HeroSection.jsx]"]
  node_product_ui["Product UI<br/>feature UI<br/>[ProductCard.jsx]"]
  node_cart_ui["Cart UI<br/>feature UI<br/>[CartContents.jsx]"]
  node_dash_ui["Dashboard UI<br/>feature UI"]
  node_buyer_ui["Buyer widgets<br/>dashboard widgets"]
  node_seller_ui["Seller widgets<br/>dashboard widgets<br/>[AddProductForm.jsx]"]
  node_admin_ui["Admin widgets<br/>dashboard widgets"]
  node_profile_ui["Profile UI<br/>account UI<br/>[ProfileInfo.jsx]"]
  node_auth_ui["Auth UI<br/>[LoginForm.jsx]"]
end

subgraph group_lib["Shared logic"]
  node_auth_lib["Auth helpers<br/>auth library<br/>[auth.js]"]
  node_stripe_lib["Stripe helper<br/>payment library<br/>[stripe.js]"]
end

subgraph group_external["External services"]
  node_better_auth(("Better Auth<br/>external auth"))
  node_stripe(("Stripe<br/>external payments"))
  node_mongodb[("MongoDB<br/>external data store")]
end

node_root -->|"uses"| node_navbar
node_root -->|"routes to"| node_home
node_root -->|"routes to"| node_dashboard
node_home -->|"renders"| node_home_ui
node_home -->|"links"| node_products
node_products -->|"renders"| node_product_ui
node_products -->|"adds to cart"| node_cart
node_cart -->|"renders"| node_cart_ui
node_cart -->|"proceeds to"| node_checkout
node_checkout -->|"calls"| node_checkout_api
node_checkout_api -->|"creates session"| node_stripe
node_order_success -->|"confirms payment"| node_stripe_lib
node_auth_routes -->|"renders"| node_auth_ui
node_auth_routes -->|"authenticates with"| node_auth_api
node_auth_api -->|"uses"| node_auth_lib
node_auth_lib -->|"integrates"| node_better_auth
node_profile -->|"renders"| node_profile_ui
node_dashboard -->|"contains"| node_buyer_dash
node_dashboard -->|"contains"| node_seller_dash
node_dashboard -->|"contains"| node_admin_dash
node_dashboard -->|"uses"| node_dash_ui
node_buyer_dash -->|"renders"| node_buyer_ui
node_seller_dash -->|"renders"| node_seller_ui
node_admin_dash -->|"renders"| node_admin_ui
node_buyer_ui -.->|"reads"| node_mongodb
node_seller_ui -.->|"reads/writes"| node_mongodb
node_admin_ui -.->|"reads"| node_mongodb
node_auth_lib -.->|"stores sessions"| node_mongodb

click node_root "https://github.com/sayemimran/resell-hub-client/blob/main/src/app/layout.js"
click node_home "https://github.com/sayemimran/resell-hub-client/blob/main/src/app/page.js"
click node_products "https://github.com/sayemimran/resell-hub-client/blob/main/src/app/products/page.jsx"
click node_cart "https://github.com/sayemimran/resell-hub-client/blob/main/src/app/cart/page.jsx"
click node_checkout "https://github.com/sayemimran/resell-hub-client/blob/main/src/app/checkout/page.jsx"
click node_order_success "https://github.com/sayemimran/resell-hub-client/blob/main/src/app/order-success/page.jsx"
click node_auth_routes "https://github.com/sayemimran/resell-hub-client/blob/main/src/app/auth/login/page.jsx"
click node_auth_api "https://github.com/sayemimran/resell-hub-client/blob/main/src/app/api/auth/[...all]/route.js"
click node_checkout_api "https://github.com/sayemimran/resell-hub-client/blob/main/src/app/api/checkout_sessions/route.js"
click node_profile "https://github.com/sayemimran/resell-hub-client/blob/main/src/app/profile/page.jsx"
click node_dashboard "https://github.com/sayemimran/resell-hub-client/blob/main/src/app/dashboard/layout.jsx"
click node_buyer_dash "https://github.com/sayemimran/resell-hub-client/blob/main/src/app/dashboard/buyer/page.jsx"
click node_seller_dash "https://github.com/sayemimran/resell-hub-client/blob/main/src/app/dashboard/seller/page.jsx"
click node_admin_dash "https://github.com/sayemimran/resell-hub-client/blob/main/src/app/dashboard/admin/page.jsx"
click node_navbar "https://github.com/sayemimran/resell-hub-client/blob/main/src/components/navbar/Navbar.jsx"
click node_home_ui "https://github.com/sayemimran/resell-hub-client/blob/main/src/components/home/HeroSection.jsx"
click node_product_ui "https://github.com/sayemimran/resell-hub-client/blob/main/src/components/products/ProductCard.jsx"
click node_cart_ui "https://github.com/sayemimran/resell-hub-client/blob/main/src/components/cart/CartContents.jsx"
click node_dash_ui "https://github.com/sayemimran/resell-hub-client/blob/main/src/components/dashboard/DashboardSidebar.jsx"
click node_buyer_ui "https://github.com/sayemimran/resell-hub-client/blob/main/src/components/dashboard/BuyerDashboardComponents.jsx"
click node_seller_ui "https://github.com/sayemimran/resell-hub-client/blob/main/src/components/dashboard/sellercomponents/AddProductForm.jsx"
click node_admin_ui "https://github.com/sayemimran/resell-hub-client/blob/main/src/components/dashboard/admin/AdminAnalyticsClient.jsx"
click node_profile_ui "https://github.com/sayemimran/resell-hub-client/blob/main/src/components/profiles/ProfileInfo.jsx"
click node_auth_ui "https://github.com/sayemimran/resell-hub-client/blob/main/src/components/auths/LoginForm.jsx"
click node_auth_lib "https://github.com/sayemimran/resell-hub-client/blob/main/src/lib/auth.js"
click node_stripe_lib "https://github.com/sayemimran/resell-hub-client/blob/main/src/lib/stripe.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_root,node_home,node_products,node_cart,node_checkout,node_order_success,node_auth_routes,node_auth_api,node_checkout_api,node_profile,node_dashboard,node_buyer_dash,node_seller_dash,node_admin_dash toneBlue
class node_navbar,node_home_ui,node_product_ui,node_cart_ui,node_dash_ui,node_buyer_ui,node_seller_ui,node_admin_ui,node_profile_ui,node_auth_ui toneAmber
class node_auth_lib,node_stripe_lib toneMint
class node_better_auth,node_stripe,node_mongodb toneRose
```

## Components

### App router

Next.js route segments and API handlers

- [Next app](https://github.com/sayemimran/resell-hub-client/blob/main/src/app/layout.js): Next.js client · Top-level App Router application entry and shared shell · `src/app/layout.js`
- [Storefront](https://github.com/sayemimran/resell-hub-client/blob/main/src/app/page.js): route group · Public landing and shopping experience · `src/app/page.js`
- [Catalog](https://github.com/sayemimran/resell-hub-client/blob/main/src/app/products/page.jsx): route group · Product browsing and product detail pages · `src/app/products/page.jsx`
- [Cart](https://github.com/sayemimran/resell-hub-client/blob/main/src/app/cart/page.jsx): route · Cart review and item summary · `src/app/cart/page.jsx`
- [Checkout](https://github.com/sayemimran/resell-hub-client/blob/main/src/app/checkout/page.jsx): route · Checkout flow and payment handoff · `src/app/checkout/page.jsx`
- [Order success](https://github.com/sayemimran/resell-hub-client/blob/main/src/app/order-success/page.jsx): route · Post-payment landing state · `src/app/order-success/page.jsx`
- [Auth routes](https://github.com/sayemimran/resell-hub-client/blob/main/src/app/auth/login/page.jsx): route group · Login and registration pages · `src/app/auth/login/page.jsx`
- [Auth API](https://github.com/sayemimran/resell-hub-client/blob/main/src/app/api/auth/[...all]/route.js): route handler · Catch-all authentication endpoint · `src/app/api/auth/[...all]/route.js`
- [Checkout API](https://github.com/sayemimran/resell-hub-client/blob/main/src/app/api/checkout_sessions/route.js): route handler · Creates Stripe checkout sessions · `src/app/api/checkout_sessions/route.js`
- [Profile](https://github.com/sayemimran/resell-hub-client/blob/main/src/app/profile/page.jsx): route group · Account profile viewing and editing · `src/app/profile/page.jsx`
- [Dashboard](https://github.com/sayemimran/resell-hub-client/blob/main/src/app/dashboard/layout.jsx): route shell · Shared dashboard layout and role-based subtrees · `src/app/dashboard/layout.jsx`
- [Buyer area](https://github.com/sayemimran/resell-hub-client/blob/main/src/app/dashboard/buyer/page.jsx): dashboard subtree · Orders, payments, and wishlist views · `src/app/dashboard/buyer/page.jsx`
- [Seller area](https://github.com/sayemimran/resell-hub-client/blob/main/src/app/dashboard/seller/page.jsx): dashboard subtree · Inventory, orders, and seller analytics · `src/app/dashboard/seller/page.jsx`
- [Admin area](https://github.com/sayemimran/resell-hub-client/blob/main/src/app/dashboard/admin/page.jsx): dashboard subtree · Platform analytics and moderation views · `src/app/dashboard/admin/page.jsx`

### UI components

Reusable feature and layout components

- [Site chrome](https://github.com/sayemimran/resell-hub-client/blob/main/src/components/navbar/Navbar.jsx): layout UI · Global navigation, footer, and app shell components · `src/components/navbar/Navbar.jsx`
- [Home UI](https://github.com/sayemimran/resell-hub-client/blob/main/src/components/home/HeroSection.jsx): feature UI · Landing page hero, stats, categories, and trust sections · `src/components/home/HeroSection.jsx`
- [Product UI](https://github.com/sayemimran/resell-hub-client/blob/main/src/components/products/ProductCard.jsx): feature UI · Cards, details, reviews, and add-to-cart controls · `src/components/products/ProductCard.jsx`
- [Cart UI](https://github.com/sayemimran/resell-hub-client/blob/main/src/components/cart/CartContents.jsx): feature UI · Cart contents and checkout form components · `src/components/cart/CartContents.jsx`
- [Dashboard UI](https://github.com/sayemimran/resell-hub-client/blob/main/src/components/dashboard/DashboardSidebar.jsx): feature UI · Shared dashboard shell, tables, cards, and overview widgets · `src/components/dashboard/DashboardSidebar.jsx`
- [Buyer widgets](https://github.com/sayemimran/resell-hub-client/blob/main/src/components/dashboard/BuyerDashboardComponents.jsx): dashboard widgets · Buyer-specific summary cards and history widgets · `src/components/dashboard/BuyerDashboardComponents.jsx`
- [Seller widgets](https://github.com/sayemimran/resell-hub-client/blob/main/src/components/dashboard/sellercomponents/AddProductForm.jsx): dashboard widgets · Seller forms, product management, and analytics widgets · `src/components/dashboard/sellercomponents/AddProductForm.jsx`
- [Admin widgets](https://github.com/sayemimran/resell-hub-client/blob/main/src/components/dashboard/admin/AdminAnalyticsClient.jsx): dashboard widgets · Admin analytics, order, product, and user management widgets · `src/components/dashboard/admin/AdminAnalyticsClient.jsx`
- [Profile UI](https://github.com/sayemimran/resell-hub-client/blob/main/src/components/profiles/ProfileInfo.jsx): account UI · Profile info, avatar, edit, and password change forms · `src/components/profiles/ProfileInfo.jsx`
- [Auth UI](https://github.com/sayemimran/resell-hub-client/blob/main/src/components/auths/LoginForm.jsx): auth UI · Login and registration forms plus Google sign-in button · `src/components/auths/LoginForm.jsx`

### Shared logic

Auth, fetch, and payment helpers

- [Auth helpers](https://github.com/sayemimran/resell-hub-client/blob/main/src/lib/auth.js): auth library · Better Auth client/server configuration and fetch wrappers · `src/lib/auth.js`
- [Stripe helper](https://github.com/sayemimran/resell-hub-client/blob/main/src/lib/stripe.js): payment library · Stripe integration utilities · `src/lib/stripe.js`

### External services

Third-party systems the app integrates with

- **Better Auth**: external auth · Session and authentication provider
- **Stripe**: external payments · Checkout session and payment provider
- **MongoDB**: external data store · Persistence layer referenced by the project

## Connections

- Next app → Site chrome: uses · Global shell composes shared navigation and footer
- Next app → Storefront: routes to · App Router serves the storefront at the root path
- Next app → Dashboard: routes to · Shared dashboard shell hosts role-specific sections
- Storefront → Home UI: renders · Landing experience is built from home sections
- Storefront → Catalog: links · Storefront drives users into catalog browsing
- Catalog → Product UI: renders · Catalog pages reuse product cards and details components
- Catalog → Cart: adds to cart · Product actions feed the cart flow
- Cart → Cart UI: renders · Cart page is driven by cart contents UI
- Cart → Checkout: proceeds to · Cart handoff continues into checkout
- Checkout → Checkout API: calls · Checkout form creates a payment session through the route handler
- Checkout API → Stripe: creates session · Server-side payment boundary with Stripe
- Order success → Stripe helper: confirms payment · Success page reflects completed checkout state
- Auth routes → Auth UI: renders · Login and register pages are form-driven
- Auth routes → Auth API: authenticates with · UI flows are backed by the auth route handler
- Auth API → Auth helpers: uses · Route handler delegates to shared auth helpers
- Auth helpers → Better Auth: integrates · Auth stack is centered on Better Auth
- Profile → Profile UI: renders · Profile routes use dedicated account editing components
- Dashboard → Buyer area: contains · Buyer subtree is one role branch under dashboard
- Dashboard → Seller area: contains · Seller subtree is one role branch under dashboard
- Dashboard → Admin area: contains · Admin subtree is one role branch under dashboard
- Dashboard → Dashboard UI: uses · Shared layout and dashboard primitives support all roles
- Buyer area → Buyer widgets: renders · Buyer pages focus on orders, payments, and wishlist widgets
- Seller area → Seller widgets: renders · Seller pages expose product and fulfillment management
- Admin area → Admin widgets: renders · Admin pages expose platform management widgets
- Buyer widgets → MongoDB: reads · Buyer data is backed by persisted commerce records
- Seller widgets → MongoDB: reads/writes · Seller inventory and order management depend on persisted data
- Admin widgets → MongoDB: reads · Admin views aggregate platform data from persistence
- Auth helpers → MongoDB: stores sessions · Auth flows are expected to persist or validate user state