# acideshan/full-stack-mern-project-multi-vendor-service-platform architecture

> Architecture diagram of the GitHub repository acideshan/full-stack-mern-project-multi-vendor-service-platform, 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/acideshan/full-stack-mern-project-multi-vendor-service-platform
- Repository: https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform

## Overview

Practicum is a multi-vendor services marketplace: customers discover services, book and pay for orders, then track fulfillment and review vendors. Vendors manage services and bookings; admins oversee marketplace operations, analytics, and payments. The tree supports these product areas, while sampled source confirms routing, service-image uploads, order persistence and notifications, review operations, and payment processing. Several frontend-to-API connections are inferred from matching module names; unsampled implementation details are not treated as confirmed call paths.

Main entry points: [`backend/server.ts`](https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/backend/server.ts) (Express API), [`backend/controllers/paymentController.ts`](https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/backend/controllers/paymentController.ts) (Payment operations), [`backend/controllers/reviewController.ts`](https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/backend/controllers/reviewController.ts) (Review operations), [`frontend/src/Pages/Services/ServiceForm.jsx`](https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/frontend/src/Pages/Services/ServiceForm.jsx) (Service editor)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Marketplace frontend"]
  node_webapp["Web application<br/>[main.jsx]"]
  node_servicebrowse["Service discovery<br/>[Services.jsx]"]
  node_serviceform["Service editor<br/>[ServiceForm.jsx]"]
  node_serviceapi["Service API client<br/>[serviceApi.js]"]
  node_uploadapi["Image upload client<br/>[uploadApi.js]"]
end

subgraph group_commerce["Bookings and payments"]
  node_bookingui["Booking interface<br/>[BookingModal.jsx]"]
  node_orderapi["Order API client<br/>[orderApi.js]"]
  node_paymentui["Payment interface<br/>[PaymentModal.jsx]"]
  node_paymentapi["Payment API client<br/>[paymentApi.js]"]
end

subgraph group_operations["Marketplace operations"]
  node_vendorportal["Vendor dashboard"]
  node_adminportal["Admin dashboards<br/>[AdminDashboard.jsx]"]
  node_couponui["Coupon management"]
end

subgraph group_platform["API and persistence"]
  node_backend["Express API<br/>[server.ts]"]
  node_serviceroutes["Service routes<br/>[serviceRoutes.ts]"]
  node_servicecontroller["Service operations"]
  node_servicemodel[("Service records<br/>[Service.ts]")]
  node_uploadcontroller["Upload operations"]
  node_ordercontroller["Order operations<br/>[orderController.ts]"]
  node_ordermodel[("Order records<br/>[Order.ts]")]
  node_paymentroutes["Payment routes<br/>[paymentRoutes.ts]"]
  node_paymentcontroller["Payment operations"]
  node_transactionmodel[("Transactions<br/>[Transaction.ts]")]
  node_reviewcontroller["Review operations"]
  node_reviewmodel[("Review records<br/>[Review.ts]")]
  node_email["Email service<br/>[emailService.ts]"]
end

node_customer(("Customer"))
node_gateway{{"Payment gateways"}}

node_customer -->|"uses"| node_webapp
node_webapp -->|"routes to"| node_servicebrowse
node_servicebrowse -->|"requests listings"| node_serviceapi
node_serviceapi -->|"calls API"| node_backend
node_backend -->|"mounts routes"| node_serviceroutes
node_serviceroutes -->|"dispatches"| node_servicecontroller
node_servicecontroller -->|"reads and writes"| node_servicemodel
node_vendorportal -->|"opens editor"| node_serviceform
node_serviceform -->|"submits service"| node_serviceapi
node_serviceform -->|"uploads images"| node_uploadapi
node_uploadapi -->|"calls API"| node_backend
node_backend -->|"dispatches upload"| node_uploadcontroller
node_customer -->|"books service"| node_bookingui
node_bookingui -->|"submits booking"| node_orderapi
node_orderapi -->|"calls API"| node_backend
node_backend -->|"dispatches orders"| node_ordercontroller
node_ordercontroller -->|"reads and writes"| node_ordermodel
node_ordercontroller -->|"sends notices"| node_email
node_customer -->|"pays order"| node_paymentui
node_paymentui -->|"starts payment"| node_paymentapi
node_paymentapi -->|"calls API"| node_backend
node_backend -->|"mounts routes"| node_paymentroutes
node_paymentroutes -->|"dispatches"| node_paymentcontroller
node_paymentcontroller -->|"records transactions"| node_transactionmodel
node_paymentcontroller -->|"updates payment status"| node_ordermodel
node_paymentcontroller -.->|"processes payment"| node_gateway
node_adminportal -->|"manages coupons"| node_couponui
node_customer -->|"submits review"| node_reviewcontroller
node_reviewcontroller -->|"checks order"| node_ordermodel
node_reviewcontroller -->|"reads and writes"| node_reviewmodel
node_reviewcontroller -->|"references service"| node_servicemodel

click node_webapp "https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/frontend/src/main.jsx"
click node_servicebrowse "https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/frontend/src/Pages/Services/Services.jsx"
click node_serviceform "https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/frontend/src/Pages/Services/ServiceForm.jsx"
click node_serviceapi "https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/frontend/src/api/serviceApi.js"
click node_uploadapi "https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/frontend/src/api/uploadApi.js"
click node_bookingui "https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/frontend/src/Components/Shared/BookingModal.jsx"
click node_orderapi "https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/frontend/src/api/orderApi.js"
click node_paymentui "https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/frontend/src/Components/Shared/PaymentModal.jsx"
click node_paymentapi "https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/frontend/src/api/paymentApi.js"
click node_vendorportal "https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/frontend/src/Pages/Dashboard/VendorDashboard.jsx"
click node_adminportal "https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/frontend/src/Pages/Dashboard/AdminDashboard.jsx"
click node_couponui "https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/frontend/src/Components/Shared/AdminCouponManager.jsx"
click node_backend "https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/backend/server.ts"
click node_serviceroutes "https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/backend/routes/serviceRoutes.ts"
click node_servicecontroller "https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/backend/controllers/serviceController.ts"
click node_servicemodel "https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/backend/models/Service.ts"
click node_uploadcontroller "https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/backend/controllers/uploadController.ts"
click node_ordercontroller "https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/backend/controllers/orderController.ts"
click node_ordermodel "https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/backend/models/Order.ts"
click node_paymentroutes "https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/backend/routes/paymentRoutes.ts"
click node_paymentcontroller "https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/backend/controllers/paymentController.ts"
click node_transactionmodel "https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/backend/models/Transaction.ts"
click node_reviewcontroller "https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/backend/controllers/reviewController.ts"
click node_reviewmodel "https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/backend/models/Review.ts"
click node_email "https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/backend/utils/emailService.ts"

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_servicebrowse,node_serviceform,node_serviceapi,node_uploadapi toneBlue
class node_bookingui,node_orderapi,node_paymentui,node_paymentapi toneAmber
class node_vendorportal,node_adminportal,node_couponui toneMint
class node_backend,node_serviceroutes,node_servicecontroller,node_servicemodel,node_uploadcontroller,node_ordercontroller,node_ordermodel,node_paymentroutes,node_paymentcontroller,node_transactionmodel,node_reviewcontroller,node_reviewmodel,node_email toneRose
class node_customer,node_gateway toneIndigo
```

## Components

### Marketplace frontend

- [Web application](https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/frontend/src/main.jsx): `frontend/src/main.jsx`
- [Service discovery](https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/frontend/src/Pages/Services/Services.jsx): `frontend/src/Pages/Services/Services.jsx`
- [Service editor](https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/frontend/src/Pages/Services/ServiceForm.jsx): `frontend/src/Pages/Services/ServiceForm.jsx`
- [Service API client](https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/frontend/src/api/serviceApi.js): `frontend/src/api/serviceApi.js`
- [Image upload client](https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/frontend/src/api/uploadApi.js): `frontend/src/api/uploadApi.js`

### Bookings and payments

- [Booking interface](https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/frontend/src/Components/Shared/BookingModal.jsx): `frontend/src/Components/Shared/BookingModal.jsx`
- [Order API client](https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/frontend/src/api/orderApi.js): `frontend/src/api/orderApi.js`
- [Payment interface](https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/frontend/src/Components/Shared/PaymentModal.jsx): `frontend/src/Components/Shared/PaymentModal.jsx`
- [Payment API client](https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/frontend/src/api/paymentApi.js): `frontend/src/api/paymentApi.js`

### Marketplace operations

- [Vendor dashboard](https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/frontend/src/Pages/Dashboard/VendorDashboard.jsx): `frontend/src/Pages/Dashboard/VendorDashboard.jsx`
- [Admin dashboards](https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/frontend/src/Pages/Dashboard/AdminDashboard.jsx): `frontend/src/Pages/Dashboard/AdminDashboard.jsx`
- [Coupon management](https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/frontend/src/Components/Shared/AdminCouponManager.jsx): `frontend/src/Components/Shared/AdminCouponManager.jsx`

### API and persistence

- [Express API](https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/backend/server.ts): `backend/server.ts`
- [Service routes](https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/backend/routes/serviceRoutes.ts): `backend/routes/serviceRoutes.ts`
- [Service operations](https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/backend/controllers/serviceController.ts): `backend/controllers/serviceController.ts`
- [Service records](https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/backend/models/Service.ts): `backend/models/Service.ts`
- [Upload operations](https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/backend/controllers/uploadController.ts): `backend/controllers/uploadController.ts`
- [Order operations](https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/backend/controllers/orderController.ts): `backend/controllers/orderController.ts`
- [Order records](https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/backend/models/Order.ts): `backend/models/Order.ts`
- [Payment routes](https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/backend/routes/paymentRoutes.ts): `backend/routes/paymentRoutes.ts`
- [Payment operations](https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/backend/controllers/paymentController.ts): `backend/controllers/paymentController.ts`
- [Transactions](https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/backend/models/Transaction.ts): `backend/models/Transaction.ts`
- [Review operations](https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/backend/controllers/reviewController.ts): `backend/controllers/reviewController.ts`
- [Review records](https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/backend/models/Review.ts): `backend/models/Review.ts`
- [Email service](https://github.com/acideshan/full-stack-mern-project-multi-vendor-service-platform/blob/main/backend/utils/emailService.ts): `backend/utils/emailService.ts`

### Other components

- **Customer**
- **Payment gateways**

## Connections

- Customer → Web application: uses
- Web application → Service discovery: routes to
- Service discovery → Service API client: requests listings
- Service API client → Express API: calls API
- Express API → Service routes: mounts routes
- Service routes → Service operations: dispatches
- Service operations → Service records: reads and writes
- Vendor dashboard → Service editor: opens editor
- Service editor → Service API client: submits service
- Service editor → Image upload client: uploads images
- Image upload client → Express API: calls API
- Express API → Upload operations: dispatches upload
- Customer → Booking interface: books service
- Booking interface → Order API client: submits booking
- Order API client → Express API: calls API
- Express API → Order operations: dispatches orders
- Order operations → Order records: reads and writes
- Order operations → Email service: sends notices
- Customer → Payment interface: pays order
- Payment interface → Payment API client: starts payment
- Payment API client → Express API: calls API
- Express API → Payment routes: mounts routes
- Payment routes → Payment operations: dispatches
- Payment operations → Transactions: records transactions
- Payment operations → Order records: updates payment status
- Payment operations → Payment gateways: processes payment
- Admin dashboards → Coupon management: manages coupons
- Customer → Review operations: submits review
- Review operations → Order records: checks order
- Review operations → Review records: reads and writes
- Review operations → Service records: references service