# aamir569696/snitch architecture

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

- Interactive diagram: https://gitdiagram.com/aamir569696/snitch
- Repository: https://github.com/aamir569696/snitch

## Overview

This is a buyer-and-seller product marketplace with a React frontend and Express API. The main workflow is seller sign-in, product creation with image upload and persistence, then buyer browsing and viewing product details; sellers can also retrieve their own products. Authentication includes registration, login, session-user lookup, and Google OAuth. The graph includes the documented routes and the sampled controller/storage behavior; frontend API wiring and product-route internals are not sampled, so uncertain connections are omitted.

Main entry points: [`Frontend/src/App/App.jsx`](https://github.com/aamir569696/snitch/blob/main/Frontend/src/App/App.jsx) (React app), [`Backend/src/router/route.js`](https://github.com/aamir569696/snitch/blob/main/Backend/src/router/route.js) (Auth routes), [`Frontend/src/feature/auth/Hook/useAuth.js`](https://github.com/aamir569696/snitch/blob/main/Frontend/src/feature/auth/Hook/useAuth.js) (Auth hook), [`Backend/src/app.js`](https://github.com/aamir569696/snitch/blob/main/Backend/src/app.js) (Express app)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Marketplace frontend"]
  node_webapp["React app<br/>[App.jsx]"]
  node_routes["Page routes<br/>[app.route.jsx]"]
  node_store["Redux store<br/>[app.store.js]"]
end

subgraph group_auth["Authentication"]
  node_authpages["Login and register"]
  node_authhook["Auth hook<br/>[useAuth.js]"]
  node_authapi["Auth API client<br/>[auth.api.js]"]
  node_authstate["Auth state<br/>[auth.slice.js]"]
end

subgraph group_products["Product workflows"]
  node_productpages["Product pages"]
  node_producthook["Product hook<br/>[useProduct.js]"]
  node_productapi["Product API client<br/>[product.api.js]"]
  node_productstate["Product state<br/>[product.slice.js]"]
  node_productcomponents["Product UI"]
end

subgraph group_backend["Backend API"]
  node_express["Express app<br/>[app.js]"]
  node_authroutes["Auth routes<br/>[route.js]"]
  node_productroutes["Product routes<br/>[product.route.js]"]
  node_authcontroller["Auth controller<br/>[auth.controller.js]"]
  node_productcontroller["Product controller"]
  node_authvalidation["Auth validation<br/>[auth.validator.js]"]
  node_authmiddleware["Auth middleware<br/>[auth.middleware.js]"]
  node_users[("User model<br/>[user.model.js]")]
  node_productsdb[("Product model<br/>[product.model.js]")]
  node_storage["Image upload service<br/>[storage.service.js]"]
end

node_visitor(("Buyer or seller"))
node_mongodb[("MongoDB")]
node_imagekit["ImageKit"]
node_google["Google OAuth"]

node_visitor -->|"uses"| node_webapp
node_webapp -->|"renders routes"| node_routes
node_webapp -->|"loads user"| node_authhook
node_webapp -->|"uses state"| node_store
node_routes -->|"routes to"| node_authpages
node_routes -->|"routes to"| node_productpages
node_authpages -->|"uses"| node_authhook
node_authhook -->|"requests"| node_authapi
node_authhook -->|"dispatches"| node_authstate
node_productpages -->|"uses"| node_producthook
node_productpages -->|"renders"| node_productcomponents
node_producthook -->|"requests"| node_productapi
node_producthook -->|"dispatches"| node_productstate
node_authapi -->|"calls API"| node_express
node_productapi -->|"calls API"| node_express
node_express -->|"mounts"| node_authroutes
node_express -->|"mounts"| node_productroutes
node_authroutes -->|"validates"| node_authvalidation
node_authroutes -->|"dispatches"| node_authcontroller
node_authroutes -->|"authenticates"| node_authmiddleware
node_authmiddleware -->|"guards"| node_authcontroller
node_authcontroller -->|"reads and writes"| node_users
node_productcontroller -->|"reads and writes"| node_productsdb
node_productcontroller -->|"uploads images"| node_storage
node_storage -->|"uploads"| node_imagekit
node_authcontroller -.->|"uses OAuth"| node_google
node_users -->|"persists"| node_mongodb
node_productsdb -->|"persists"| node_mongodb

click node_webapp "https://github.com/aamir569696/snitch/blob/main/Frontend/src/App/App.jsx"
click node_routes "https://github.com/aamir569696/snitch/blob/main/Frontend/src/App/app.route.jsx"
click node_store "https://github.com/aamir569696/snitch/blob/main/Frontend/src/App/app.store.js"
click node_authpages "https://github.com/aamir569696/snitch/tree/main/Frontend/src/feature/auth/pages"
click node_authhook "https://github.com/aamir569696/snitch/blob/main/Frontend/src/feature/auth/Hook/useAuth.js"
click node_authapi "https://github.com/aamir569696/snitch/blob/main/Frontend/src/feature/auth/services/auth.api.js"
click node_authstate "https://github.com/aamir569696/snitch/blob/main/Frontend/src/feature/auth/state/auth.slice.js"
click node_productpages "https://github.com/aamir569696/snitch/tree/main/Frontend/src/feature/products/pages"
click node_producthook "https://github.com/aamir569696/snitch/blob/main/Frontend/src/feature/products/Hooks/useProduct.js"
click node_productapi "https://github.com/aamir569696/snitch/blob/main/Frontend/src/feature/products/services/product.api.js"
click node_productstate "https://github.com/aamir569696/snitch/blob/main/Frontend/src/feature/products/state/product.slice.js"
click node_productcomponents "https://github.com/aamir569696/snitch/tree/main/Frontend/src/feature/products/components"
click node_express "https://github.com/aamir569696/snitch/blob/main/Backend/src/app.js"
click node_authroutes "https://github.com/aamir569696/snitch/blob/main/Backend/src/router/route.js"
click node_productroutes "https://github.com/aamir569696/snitch/blob/main/Backend/src/router/product.route.js"
click node_authcontroller "https://github.com/aamir569696/snitch/blob/main/Backend/src/controllers/auth.controller.js"
click node_productcontroller "https://github.com/aamir569696/snitch/blob/main/Backend/src/controllers/product.controller.js"
click node_authvalidation "https://github.com/aamir569696/snitch/blob/main/Backend/src/validator/auth.validator.js"
click node_authmiddleware "https://github.com/aamir569696/snitch/blob/main/Backend/src/middleware/auth.middleware.js"
click node_users "https://github.com/aamir569696/snitch/blob/main/Backend/src/models/user.model.js"
click node_productsdb "https://github.com/aamir569696/snitch/blob/main/Backend/src/models/product.model.js"
click node_storage "https://github.com/aamir569696/snitch/blob/main/Backend/src/services/storage.service.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_webapp,node_routes,node_store toneBlue
class node_authpages,node_authhook,node_authapi,node_authstate,node_mongodb toneAmber
class node_productpages,node_producthook,node_productapi,node_productstate,node_productcomponents toneMint
class node_express,node_authroutes,node_productroutes,node_authcontroller,node_productcontroller,node_authvalidation,node_authmiddleware,node_users,node_productsdb,node_storage toneRose
class node_visitor,node_imagekit,node_google toneIndigo
```

## Components

### Marketplace frontend

- [React app](https://github.com/aamir569696/snitch/blob/main/Frontend/src/App/App.jsx): `Frontend/src/App/App.jsx`
- [Page routes](https://github.com/aamir569696/snitch/blob/main/Frontend/src/App/app.route.jsx): `Frontend/src/App/app.route.jsx`
- [Redux store](https://github.com/aamir569696/snitch/blob/main/Frontend/src/App/app.store.js): `Frontend/src/App/app.store.js`

### Authentication

- [Login and register](https://github.com/aamir569696/snitch/tree/main/Frontend/src/feature/auth/pages): `Frontend/src/feature/auth/pages`
- [Auth hook](https://github.com/aamir569696/snitch/blob/main/Frontend/src/feature/auth/Hook/useAuth.js): `Frontend/src/feature/auth/Hook/useAuth.js`
- [Auth API client](https://github.com/aamir569696/snitch/blob/main/Frontend/src/feature/auth/services/auth.api.js): `Frontend/src/feature/auth/services/auth.api.js`
- [Auth state](https://github.com/aamir569696/snitch/blob/main/Frontend/src/feature/auth/state/auth.slice.js): `Frontend/src/feature/auth/state/auth.slice.js`

### Product workflows

- [Product pages](https://github.com/aamir569696/snitch/tree/main/Frontend/src/feature/products/pages): `Frontend/src/feature/products/pages`
- [Product hook](https://github.com/aamir569696/snitch/blob/main/Frontend/src/feature/products/Hooks/useProduct.js): `Frontend/src/feature/products/Hooks/useProduct.js`
- [Product API client](https://github.com/aamir569696/snitch/blob/main/Frontend/src/feature/products/services/product.api.js): `Frontend/src/feature/products/services/product.api.js`
- [Product state](https://github.com/aamir569696/snitch/blob/main/Frontend/src/feature/products/state/product.slice.js): `Frontend/src/feature/products/state/product.slice.js`
- [Product UI](https://github.com/aamir569696/snitch/tree/main/Frontend/src/feature/products/components): `Frontend/src/feature/products/components`

### Backend API

- [Express app](https://github.com/aamir569696/snitch/blob/main/Backend/src/app.js): `Backend/src/app.js`
- [Auth routes](https://github.com/aamir569696/snitch/blob/main/Backend/src/router/route.js): `Backend/src/router/route.js`
- [Product routes](https://github.com/aamir569696/snitch/blob/main/Backend/src/router/product.route.js): `Backend/src/router/product.route.js`
- [Auth controller](https://github.com/aamir569696/snitch/blob/main/Backend/src/controllers/auth.controller.js): `Backend/src/controllers/auth.controller.js`
- [Product controller](https://github.com/aamir569696/snitch/blob/main/Backend/src/controllers/product.controller.js): `Backend/src/controllers/product.controller.js`
- [Auth validation](https://github.com/aamir569696/snitch/blob/main/Backend/src/validator/auth.validator.js): `Backend/src/validator/auth.validator.js`
- [Auth middleware](https://github.com/aamir569696/snitch/blob/main/Backend/src/middleware/auth.middleware.js): `Backend/src/middleware/auth.middleware.js`
- [User model](https://github.com/aamir569696/snitch/blob/main/Backend/src/models/user.model.js): `Backend/src/models/user.model.js`
- [Product model](https://github.com/aamir569696/snitch/blob/main/Backend/src/models/product.model.js): `Backend/src/models/product.model.js`
- [Image upload service](https://github.com/aamir569696/snitch/blob/main/Backend/src/services/storage.service.js): `Backend/src/services/storage.service.js`

### Other components

- **Buyer or seller**
- **MongoDB**
- **ImageKit**
- **Google OAuth**

## Connections

- Buyer or seller → React app: uses
- React app → Page routes: renders routes
- React app → Auth hook: loads user
- React app → Redux store: uses state
- Page routes → Login and register: routes to
- Page routes → Product pages: routes to
- Login and register → Auth hook: uses
- Auth hook → Auth API client: requests
- Auth hook → Auth state: dispatches
- Product pages → Product hook: uses
- Product pages → Product UI: renders
- Product hook → Product API client: requests
- Product hook → Product state: dispatches
- Auth API client → Express app: calls API
- Product API client → Express app: calls API
- Express app → Auth routes: mounts
- Express app → Product routes: mounts
- Auth routes → Auth validation: validates
- Auth routes → Auth controller: dispatches
- Auth routes → Auth middleware: authenticates
- Auth middleware → Auth controller: guards
- Auth controller → User model: reads and writes
- Product controller → Product model: reads and writes
- Product controller → Image upload service: uploads images
- Image upload service → ImageKit: uploads
- Auth controller → Google OAuth: uses OAuth
- User model → MongoDB: persists
- Product model → MongoDB: persists