# mitul1927/shipease architecture

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

- Interactive diagram: https://gitdiagram.com/mitul1927/shipease
- Repository: https://github.com/mitul1927/shipease

## Overview

1. ShipEase is split into two top-level applications: a Node.js backend API in `Backend/` and a React single-page frontend in `Frontend/`. The architecture is a classic client–server split, with the frontend consuming backend routes over HTTP.

2. The backend is organized around an API layering pattern: `routes` define endpoints, `controllers` hold request handling logic, `models` define the persisted domain objects, and `middleware.js` centralizes cross-cutting request protection. This keeps routing, business logic, and data access separated.

3. The backend’s core domain objects are `user` and `Shipment`. Those models imply that the application’s main data flow is around authenticated users creating, viewing, and managing shipment records.

4. Authentication is handled as a dedicated subsystem. `authRoutes` and `authController` cover sign-up/login flows, while `config/passport.js` indicates Passport-based auth strategy support. `middleware.js` likely enforces route guards for authenticated or role-restricted requests.

5. Shipment management is its own backend vertical, exposed through `shipmentRoutes` and `shipmentController`. This is where shipment creation, retrieval, and possibly status updates or filtering would be orchestrated before reaching the model layer.

6. There is an explicit admin surface on the backend via `adminRoutes`. Combined with the separate `AdminLogin` page on the frontend, this suggests role-based access boundaries between normal users and administrators.

7. `utils/cloudinaryConfig.js` shows an external media/storage integration. That means some shipment or user workflows likely involve image/file uploads, with Cloudinary acting as the offloaded asset service rather than storing binaries in the app itself.

8. The frontend is a Vite-built React app. `src/main.jsx` bootstraps the app, `App.jsx` provides the top-level shell, and `routers/routes.jsx` defines client-side navigation between pages. This means page transitions are handled in-browser, not by full server renders.

9. Frontend state is managed with Redux in `reduxStore/`, specifically `authSlice2.js` and `store.js`. Authentication state is therefore shared globally across pages like login, signup, dashboard, and shipment creation.

10. The page structure reflects the product flows: public entry points (`Home`, `Login`, `Signup`, `AdminLogin`), shipment actions (`AddShipment`, `AllShipments`), and authenticated user areas under `Dashboard/` (`myShipments`, `userInfo`). The dashboard is a secondary layout with its own navigation component (`Dashboardnav.jsx`).

11. Shared UI is kept in reusable components such as `Header`, `Footer`, and a small `ui/button` primitive. This indicates a componentized frontend where layout chrome is separated from feature pages.

12. Deployment/build tooling is standard for a modern React app: Vite for frontend bundling, and a separate frontend `vercel.json` for deployment configuration. The backend has its own `package.json`, so it is independently runnable and deployable from the frontend.

13. In diagram terms, the main flow is: browser users interact with React routes and Redux state, the frontend calls backend REST endpoints, backend controllers validate/authenticate through middleware and Passport, then read/write shipment and user records, with Cloudinary used for any uploaded assets.

Main entry points: [`Frontend/src/routers/routes.jsx`](https://github.com/mitul1927/shipease/blob/main/Frontend/src/routers/routes.jsx) (Routes), [`Frontend/src/App.jsx`](https://github.com/mitul1927/shipease/blob/main/Frontend/src/App.jsx) (App shell), [`Frontend/src/pages/Dashboard/Dashboard.jsx`](https://github.com/mitul1927/shipease/blob/main/Frontend/src/pages/Dashboard/Dashboard.jsx) (Dashboard), [`Backend/routes/shipmentRoutes.js`](https://github.com/mitul1927/shipease/blob/main/Backend/routes/shipmentRoutes.js) (Shipment routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_backend["Backend"]
  node_backend_server["Server<br/>entrypoint<br/>[server.js]"]
  node_backend_routes_auth["Auth routes<br/>http routes<br/>[authRoutes.js]"]
  node_backend_routes_shipments["Shipment routes<br/>http routes<br/>[shipmentRoutes.js]"]
  node_backend_routes_admin["Admin routes<br/>http routes<br/>[adminRoutes.js]"]
  node_backend_routes_users["User routes<br/>http routes<br/>[userRoutes.js]"]
  node_backend_auth_controller["Auth controller<br/>[authController.js]"]
  node_backend_shipment_controller["Shipment controller"]
  node_backend_user_controller["User controller<br/>[userController.js]"]
  node_backend_middleware{{"Middleware<br/>security<br/>[middleware.js]"}}
  node_backend_passport["Passport config<br/>auth strategy<br/>[passport.js]"]
  node_backend_user_model[("User model<br/>data model<br/>[user.js]")]
  node_backend_shipment_model[("Shipment model<br/>data model<br/>[Shipment.js]")]
  node_backend_cloudinary["Cloudinary<br/>external storage"]
end

subgraph group_frontend["Frontend"]
  node_frontend_main["Main<br/>entrypoint<br/>[main.jsx]"]
  node_frontend_app["App shell<br/>[App.jsx]"]
  node_frontend_routes["Routes<br/>client router<br/>[routes.jsx]"]
  node_frontend_store[("Redux store<br/>state<br/>[store.js]")]
  node_frontend_auth_slice[("Auth state<br/>state slice<br/>[authSlice2.js]")]
  node_frontend_home["Home<br/>page<br/>[Home.jsx]"]
  node_frontend_login["Login<br/>page<br/>[login.jsx]"]
  node_frontend_signup["Signup<br/>page<br/>[Signup.jsx]"]
  node_frontend_admin_login["Admin login<br/>page<br/>[AdminLogin.jsx]"]
  node_frontend_dashboard["Dashboard<br/>page<br/>[Dashboard.jsx]"]
  node_frontend_dashboard_nav["Dashboard nav<br/>[Dashboardnav.jsx]"]
  node_frontend_my_shipments["My shipments<br/>page<br/>[MyShipments.jsx]"]
  node_frontend_user_info["User info<br/>page<br/>[UserInfo.jsx]"]
  node_frontend_add_shipment["Add shipment<br/>page<br/>[AddShipment2.jsx]"]
  node_frontend_all_shipments["All shipments<br/>page<br/>[AllShipments.jsx]"]
  node_frontend_header["Header<br/>shared ui<br/>[Header.jsx]"]
  node_frontend_footer["Footer<br/>shared ui<br/>[Footer.jsx]"]
  node_frontend_button["Button<br/>ui primitive<br/>[button.jsx]"]
end

node_frontend_main -->|"boots"| node_frontend_app
node_frontend_app -->|"uses"| node_frontend_routes
node_frontend_routes -->|"routes to"| node_frontend_home
node_frontend_routes -->|"routes to"| node_frontend_login
node_frontend_routes -->|"routes to"| node_frontend_signup
node_frontend_routes -->|"routes to"| node_frontend_admin_login
node_frontend_routes -->|"routes to"| node_frontend_dashboard
node_frontend_routes -->|"routes to"| node_frontend_add_shipment
node_frontend_routes -->|"routes to"| node_frontend_all_shipments
node_frontend_dashboard -->|"contains"| node_frontend_dashboard_nav
node_frontend_dashboard -->|"contains"| node_frontend_my_shipments
node_frontend_dashboard -->|"contains"| node_frontend_user_info
node_frontend_app -->|"uses"| node_frontend_header
node_frontend_app -->|"uses"| node_frontend_footer
node_frontend_app -->|"uses"| node_frontend_button
node_frontend_app -->|"connects"| node_frontend_store
node_frontend_store -->|"includes"| node_frontend_auth_slice
node_frontend_login -->|"reads/writes"| node_frontend_store
node_frontend_signup -->|"reads/writes"| node_frontend_store
node_frontend_dashboard -->|"reads"| node_frontend_store
node_frontend_add_shipment -->|"calls"| node_backend_routes_shipments
node_frontend_login -->|"calls"| node_backend_routes_auth
node_frontend_signup -->|"calls"| node_backend_routes_auth
node_frontend_admin_login -->|"calls"| node_backend_routes_admin
node_frontend_all_shipments -->|"calls"| node_backend_routes_shipments
node_frontend_dashboard -->|"calls"| node_backend_routes_users
node_backend_server -->|"mounts"| node_backend_routes_auth
node_backend_server -->|"mounts"| node_backend_routes_shipments
node_backend_server -->|"mounts"| node_backend_routes_admin
node_backend_server -->|"mounts"| node_backend_routes_users
node_backend_routes_auth -->|"delegates"| node_backend_auth_controller
node_backend_routes_shipments -->|"delegates"| node_backend_shipment_controller
node_backend_routes_users -->|"delegates"| node_backend_user_controller
node_backend_routes_admin -->|"guards"| node_backend_middleware
node_backend_auth_controller -->|"uses"| node_backend_passport
node_backend_auth_controller -->|"reads/writes"| node_backend_user_model
node_backend_user_controller -->|"reads/writes"| node_backend_user_model
node_backend_shipment_controller -->|"reads/writes"| node_backend_shipment_model
node_backend_shipment_controller -->|"uses"| node_backend_cloudinary
node_backend_routes_shipments -->|"guards"| node_backend_middleware
node_backend_routes_users -->|"guards"| node_backend_middleware

click node_backend_server "https://github.com/mitul1927/shipease/blob/main/Backend/server.js"
click node_backend_routes_auth "https://github.com/mitul1927/shipease/blob/main/Backend/routes/authRoutes.js"
click node_backend_routes_shipments "https://github.com/mitul1927/shipease/blob/main/Backend/routes/shipmentRoutes.js"
click node_backend_routes_admin "https://github.com/mitul1927/shipease/blob/main/Backend/routes/adminRoutes.js"
click node_backend_routes_users "https://github.com/mitul1927/shipease/blob/main/Backend/routes/userRoutes.js"
click node_backend_auth_controller "https://github.com/mitul1927/shipease/blob/main/Backend/controllers/authController.js"
click node_backend_shipment_controller "https://github.com/mitul1927/shipease/blob/main/Backend/controllers/shipmentController.js"
click node_backend_user_controller "https://github.com/mitul1927/shipease/blob/main/Backend/controllers/userController.js"
click node_backend_middleware "https://github.com/mitul1927/shipease/blob/main/Backend/middleware.js"
click node_backend_passport "https://github.com/mitul1927/shipease/blob/main/Backend/config/passport.js"
click node_backend_user_model "https://github.com/mitul1927/shipease/blob/main/Backend/models/user.js"
click node_backend_shipment_model "https://github.com/mitul1927/shipease/blob/main/Backend/models/Shipment.js"
click node_backend_cloudinary "https://github.com/mitul1927/shipease/blob/main/Backend/utils/cloudinaryConfig.js"
click node_frontend_main "https://github.com/mitul1927/shipease/blob/main/Frontend/src/main.jsx"
click node_frontend_app "https://github.com/mitul1927/shipease/blob/main/Frontend/src/App.jsx"
click node_frontend_routes "https://github.com/mitul1927/shipease/blob/main/Frontend/src/routers/routes.jsx"
click node_frontend_store "https://github.com/mitul1927/shipease/blob/main/Frontend/src/reduxStore/store.js"
click node_frontend_auth_slice "https://github.com/mitul1927/shipease/blob/main/Frontend/src/reduxStore/authSlice2.js"
click node_frontend_home "https://github.com/mitul1927/shipease/blob/main/Frontend/src/pages/Home/Home.jsx"
click node_frontend_login "https://github.com/mitul1927/shipease/blob/main/Frontend/src/pages/Login/login.jsx"
click node_frontend_signup "https://github.com/mitul1927/shipease/blob/main/Frontend/src/pages/Signup/Signup.jsx"
click node_frontend_admin_login "https://github.com/mitul1927/shipease/blob/main/Frontend/src/pages/AdminLogin/AdminLogin.jsx"
click node_frontend_dashboard "https://github.com/mitul1927/shipease/blob/main/Frontend/src/pages/Dashboard/Dashboard.jsx"
click node_frontend_dashboard_nav "https://github.com/mitul1927/shipease/blob/main/Frontend/src/pages/Dashboard/Dashboardnav.jsx"
click node_frontend_my_shipments "https://github.com/mitul1927/shipease/blob/main/Frontend/src/pages/Dashboard/myShipments/MyShipments.jsx"
click node_frontend_user_info "https://github.com/mitul1927/shipease/blob/main/Frontend/src/pages/Dashboard/userInfo/UserInfo.jsx"
click node_frontend_add_shipment "https://github.com/mitul1927/shipease/blob/main/Frontend/src/pages/AddShipment/AddShipment2.jsx"
click node_frontend_all_shipments "https://github.com/mitul1927/shipease/blob/main/Frontend/src/pages/AllShipments/AllShipments.jsx"
click node_frontend_header "https://github.com/mitul1927/shipease/blob/main/Frontend/src/components/Header.jsx"
click node_frontend_footer "https://github.com/mitul1927/shipease/blob/main/Frontend/src/components/Footer.jsx"
click node_frontend_button "https://github.com/mitul1927/shipease/blob/main/Frontend/src/components/ui/button.jsx"

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_backend_server,node_backend_routes_auth,node_backend_routes_shipments,node_backend_routes_admin,node_backend_routes_users,node_backend_auth_controller,node_backend_shipment_controller,node_backend_user_controller,node_backend_middleware,node_backend_passport,node_backend_user_model,node_backend_shipment_model,node_backend_cloudinary toneBlue
class node_frontend_main,node_frontend_app,node_frontend_routes,node_frontend_store,node_frontend_auth_slice,node_frontend_home,node_frontend_login,node_frontend_signup,node_frontend_admin_login,node_frontend_dashboard,node_frontend_dashboard_nav,node_frontend_my_shipments,node_frontend_user_info,node_frontend_add_shipment,node_frontend_all_shipments,node_frontend_header,node_frontend_footer,node_frontend_button toneAmber
```

## Components

### Backend

Node.js API and domain logic

- [Server](https://github.com/mitul1927/shipease/blob/main/Backend/server.js): entrypoint · Bootstraps the API process · `Backend/server.js`
- [Auth routes](https://github.com/mitul1927/shipease/blob/main/Backend/routes/authRoutes.js): http routes · Sign-up and login endpoints · `Backend/routes/authRoutes.js`
- [Shipment routes](https://github.com/mitul1927/shipease/blob/main/Backend/routes/shipmentRoutes.js): http routes · Shipment CRUD endpoints · `Backend/routes/shipmentRoutes.js`
- [Admin routes](https://github.com/mitul1927/shipease/blob/main/Backend/routes/adminRoutes.js): http routes · Administrator-facing endpoints · `Backend/routes/adminRoutes.js`
- [User routes](https://github.com/mitul1927/shipease/blob/main/Backend/routes/userRoutes.js): http routes · User-facing endpoints · `Backend/routes/userRoutes.js`
- [Auth controller](https://github.com/mitul1927/shipease/blob/main/Backend/controllers/authController.js): controller · Handles authentication request logic · `Backend/controllers/authController.js`
- [Shipment controller](https://github.com/mitul1927/shipease/blob/main/Backend/controllers/shipmentController.js): controller · Coordinates shipment workflows · `Backend/controllers/shipmentController.js`
- [User controller](https://github.com/mitul1927/shipease/blob/main/Backend/controllers/userController.js): controller · Handles user-related requests · `Backend/controllers/userController.js`
- [Middleware](https://github.com/mitul1927/shipease/blob/main/Backend/middleware.js): security · Cross-cutting request protection · `Backend/middleware.js`
- [Passport config](https://github.com/mitul1927/shipease/blob/main/Backend/config/passport.js): auth strategy · Passport-based authentication setup · `Backend/config/passport.js`
- [User model](https://github.com/mitul1927/shipease/blob/main/Backend/models/user.js): data model · Persisted user domain object · `Backend/models/user.js`
- [Shipment model](https://github.com/mitul1927/shipease/blob/main/Backend/models/Shipment.js): data model · Persisted shipment domain object · `Backend/models/Shipment.js`
- [Cloudinary](https://github.com/mitul1927/shipease/blob/main/Backend/utils/cloudinaryConfig.js): external storage · Offloaded asset storage integration · `Backend/utils/cloudinaryConfig.js`

### Frontend

React single-page app

- [Main](https://github.com/mitul1927/shipease/blob/main/Frontend/src/main.jsx): entrypoint · React app bootstrap · `Frontend/src/main.jsx`
- [App shell](https://github.com/mitul1927/shipease/blob/main/Frontend/src/App.jsx): shell · Top-level frontend layout · `Frontend/src/App.jsx`
- [Routes](https://github.com/mitul1927/shipease/blob/main/Frontend/src/routers/routes.jsx): client router · Browser-side page navigation · `Frontend/src/routers/routes.jsx`
- [Redux store](https://github.com/mitul1927/shipease/blob/main/Frontend/src/reduxStore/store.js): state · Global application state · `Frontend/src/reduxStore/store.js`
- [Auth state](https://github.com/mitul1927/shipease/blob/main/Frontend/src/reduxStore/authSlice2.js): state slice · Shared authentication state · `Frontend/src/reduxStore/authSlice2.js`
- [Home](https://github.com/mitul1927/shipease/blob/main/Frontend/src/pages/Home/Home.jsx): page · Public landing page · `Frontend/src/pages/Home/Home.jsx`
- [Login](https://github.com/mitul1927/shipease/blob/main/Frontend/src/pages/Login/login.jsx): page · User sign-in page · `Frontend/src/pages/Login/login.jsx`
- [Signup](https://github.com/mitul1927/shipease/blob/main/Frontend/src/pages/Signup/Signup.jsx): page · User registration page · `Frontend/src/pages/Signup/Signup.jsx`
- [Admin login](https://github.com/mitul1927/shipease/blob/main/Frontend/src/pages/AdminLogin/AdminLogin.jsx): page · Administrator sign-in page · `Frontend/src/pages/AdminLogin/AdminLogin.jsx`
- [Dashboard](https://github.com/mitul1927/shipease/blob/main/Frontend/src/pages/Dashboard/Dashboard.jsx): page · Authenticated user area · `Frontend/src/pages/Dashboard/Dashboard.jsx`
- [Dashboard nav](https://github.com/mitul1927/shipease/blob/main/Frontend/src/pages/Dashboard/Dashboardnav.jsx): nav · Dashboard-specific navigation · `Frontend/src/pages/Dashboard/Dashboardnav.jsx`
- [My shipments](https://github.com/mitul1927/shipease/blob/main/Frontend/src/pages/Dashboard/myShipments/MyShipments.jsx): page · User shipment list view · `Frontend/src/pages/Dashboard/myShipments/MyShipments.jsx`
- [User info](https://github.com/mitul1927/shipease/blob/main/Frontend/src/pages/Dashboard/userInfo/UserInfo.jsx): page · Profile and account view · `Frontend/src/pages/Dashboard/userInfo/UserInfo.jsx`
- [Add shipment](https://github.com/mitul1927/shipease/blob/main/Frontend/src/pages/AddShipment/AddShipment2.jsx): page · Shipment creation flow · `Frontend/src/pages/AddShipment/AddShipment2.jsx`
- [All shipments](https://github.com/mitul1927/shipease/blob/main/Frontend/src/pages/AllShipments/AllShipments.jsx): page · Shipment listing page · `Frontend/src/pages/AllShipments/AllShipments.jsx`
- [Header](https://github.com/mitul1927/shipease/blob/main/Frontend/src/components/Header.jsx): shared ui · Global page header · `Frontend/src/components/Header.jsx`
- [Footer](https://github.com/mitul1927/shipease/blob/main/Frontend/src/components/Footer.jsx): shared ui · Global page footer · `Frontend/src/components/Footer.jsx`
- [Button](https://github.com/mitul1927/shipease/blob/main/Frontend/src/components/ui/button.jsx): ui primitive · Reusable button component · `Frontend/src/components/ui/button.jsx`

## Connections

- Main → App shell: boots · Entry point renders the app shell
- App shell → Routes: uses · Shell delegates navigation to client routes
- Routes → Home: routes to · Public landing route
- Routes → Login: routes to · Login route
- Routes → Signup: routes to · Signup route
- Routes → Admin login: routes to · Admin login route
- Routes → Dashboard: routes to · Authenticated area
- Routes → Add shipment: routes to · Shipment creation route
- Routes → All shipments: routes to · Shipment listing route
- Dashboard → Dashboard nav: contains · Dashboard layout includes its own navigation
- Dashboard → My shipments: contains · Dashboard shows user shipments
- Dashboard → User info: contains · Dashboard shows account details
- App shell → Header: uses · Shared chrome
- App shell → Footer: uses · Shared chrome
- App shell → Button: uses · Shared UI primitive
- App shell → Redux store: connects · App is wired to global state
- Redux store → Auth state: includes · Auth state is centralized in Redux
- Login → Redux store: reads/writes · Login updates shared auth state
- Signup → Redux store: reads/writes · Signup updates shared auth state
- Dashboard → Redux store: reads · Authenticated views consume auth state
- Add shipment → Shipment routes: calls · Frontend submits shipment requests to the API
- Login → Auth routes: calls · User login talks to auth endpoints
- Signup → Auth routes: calls · User registration talks to auth endpoints
- Admin login → Admin routes: calls · Admin login talks to admin surface
- All shipments → Shipment routes: calls · Listing view consumes shipment endpoints
- Dashboard → User routes: calls · Dashboard requests user data
- Server → Auth routes: mounts · Server wires in auth routes
- Server → Shipment routes: mounts · Server wires in shipment routes
- Server → Admin routes: mounts · Server wires in admin routes
- Server → User routes: mounts · Server wires in user routes
- Auth routes → Auth controller: delegates · Route handlers forward to controller logic
- Shipment routes → Shipment controller: delegates · Route handlers forward to shipment logic
- User routes → User controller: delegates · Route handlers forward to user logic
- Admin routes → Middleware: guards · Admin access is protected by shared middleware
- Auth controller → Passport config: uses · Authentication relies on Passport configuration
- Auth controller → User model: reads/writes · Auth flow persists user records
- User controller → User model: reads/writes · User endpoints operate on users
- Shipment controller → Shipment model: reads/writes · Shipment workflows persist shipment records
- Shipment controller → Cloudinary: uses · Uploads are offloaded to Cloudinary
- Shipment routes → Middleware: guards · Shipment endpoints are protected
- User routes → Middleware: guards · User endpoints are protected