# vanshcoder99/hireready-ai architecture

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

- Interactive diagram: https://gitdiagram.com/vanshcoder99/hireready-ai
- Repository: https://github.com/vanshcoder99/hireready-ai

## Overview

1. **Top-level shape**
   - This repository is split into two independently packaged applications: a **Node backend** in `Backend/` and a **React/Vite frontend** in `Frontend/`.
   - The product is a single-page interview-prep app, “HireReady AI,” with the backend serving API responsibilities and the frontend handling the user experience.

2. **Backend role**
   - The backend is the system-of-record for **authentication and user data**.
   - Its structure is conventional Express-style: `index.js` bootstraps the server, `routes/` defines HTTP endpoints, `controllers/` holds request handlers, `middlewares/` enforces access control, `models/` defines persisted entities, and `config/` contains infrastructure helpers.

3. **Backend infrastructure and persistence**
   - `config/connectDb.js` indicates a dedicated database connection layer.
   - `models/user.model.js` and the surrounding auth/user controllers strongly suggest a **user persistence layer** backed by a document-style database.
   - `config/token.js` implies token creation/verification, most likely for sessionless auth.

4. **Backend API boundary**
   - The API is split into two route groups:
     - `routes/auth.route.js` for login/signup/auth-related actions
     - `routes/user.route.js` for user-specific or protected operations
   - This separation is important for diagramming because auth flows and authenticated user flows are distinct entry points.

5. **Backend security boundary**
   - `middlewares/isAuth.js` is the main protection layer between public routes and protected user endpoints.
   - The architecture likely uses token-based authorization: client requests carry a token, middleware validates it, and controllers operate only after identity is established.

6. **Frontend application shell**
   - The frontend is a Vite-built React SPA with `src/main.jsx` as the entry point and `src/App.jsx` as the top-level composition layer.
   - Global styling is split between `src/index.css` and `src/App.css`, suggesting a lightweight UI architecture rather than a heavy component framework.

7. **Frontend state management**
   - `src/redux/store.js` and `src/redux/userSlice.js` show that the app uses **Redux** for shared client state.
   - The user slice likely stores authentication/user profile state, which is the key cross-page dependency in the UI.

8. **Frontend page/component structure**
   - The app is organized into pages in `src/pages/`:
     - `Home.jsx` for the main landing experience
     - `Auth.jsx` for sign-in/sign-up or auth entry
   - Reusable UI lives in `src/components/`:
     - `Navbar.jsx` and `Footer.jsx` for app-wide chrome
     - `AuthModel.jsx` for a modal-based auth interaction

9. **Frontend external integration**
   - `src/utils/firebase.js` indicates a client-side Firebase integration point.
   - In architecture diagrams, this should be shown as a separate external service boundary on the frontend side, even if the exact Firebase features are not fully visible from the file tree.

10. **Media and presentation assets**
   - The frontend includes video assets in `src/assets/Videos/` (`male-ai.mp4`, `female-ai.mp4`), which likely power the hero or onboarding presentation layer.
   - This suggests the UI is presentation-heavy, but these assets do not affect backend data flow.

11. **Primary data flow**
   - Typical flow is: user interacts with React pages/components → Redux tracks client auth/user state → frontend calls backend auth/user routes → backend controller validates/creates user data and issues/uses tokens → protected routes are gated by `isAuth`.
   - The backend then returns user/auth results that update Redux and drive conditional rendering in the SPA.

12. **Architecture boundaries to draw**
   - Draw a hard boundary between **frontend client** and **backend API**.
   - Inside the backend, separate **routes → controllers → middleware → model/database**.
   - Inside the frontend, separate **pages → reusable components → Redux state → external Firebase utility**.

Main entry points: [`Frontend/src/App.jsx`](https://github.com/vanshcoder99/hireready-ai/blob/main/Frontend/src/App.jsx) (App shell), [`Backend/routes/user.route.js`](https://github.com/vanshcoder99/hireready-ai/blob/main/Backend/routes/user.route.js) (User routes), [`Frontend/src/redux/userSlice.js`](https://github.com/vanshcoder99/hireready-ai/blob/main/Frontend/src/redux/userSlice.js) (User slice), [`Backend/controllers/auth.controller.js`](https://github.com/vanshcoder99/hireready-ai/blob/main/Backend/controllers/auth.controller.js) (Auth controller)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Frontend SPA"]
  node_fe_main(("main<br/>entry<br/>[main.jsx]"))
  node_fe_app["App shell<br/>composition<br/>[App.jsx]"]
  node_fe_home["Home<br/>page<br/>[Home.jsx]"]
  node_fe_auth["Auth page<br/>[Auth.jsx]"]
  node_fe_nav["Navbar<br/>[Navbar.jsx]"]
  node_fe_footer["Footer<br/>[Footer.jsx]"]
  node_fe_modal["Auth modal<br/>[AuthModel.jsx]"]
  node_fe_store[("Redux store<br/>state<br/>[store.js]")]
  node_fe_user_slice["User slice<br/>state<br/>[userSlice.js]"]
  node_fe_firebase{{"Firebase util<br/>integration<br/>[firebase.js]"}}
  node_fe_assets["Video assets<br/>media<br/>[male-ai.mp4]"]
end

subgraph group_backend["Backend API"]
  node_be_index(("Server entry<br/>[index.js]"))
  node_be_routes_auth["Auth routes<br/>api routes<br/>[auth.route.js]"]
  node_be_routes_user["User routes<br/>api routes<br/>[user.route.js]"]
  node_be_auth_ctrl["Auth controller<br/>handler<br/>[auth.controller.js]"]
  node_be_user_ctrl["User controller<br/>handler<br/>[user.controller.js]"]
  node_be_isauth{{"Auth guard<br/>middleware<br/>[isAuth.js]"}}
  node_be_token["Token helper<br/>security<br/>[token.js]"]
  node_be_db[("DB connector<br/>infrastructure<br/>[connectDb.js]")]
  node_be_user_model["User model<br/>[user.model.js]"]
end

subgraph group_external["External Services"]
  node_ext_firebase{{"Firebase<br/>external service"}}
end

node_fe_main -->|"bootstraps"| node_fe_app
node_fe_app -->|"renders"| node_fe_home
node_fe_app -->|"renders"| node_fe_auth
node_fe_app -->|"uses"| node_fe_nav
node_fe_app -->|"uses"| node_fe_footer
node_fe_auth -->|"opens"| node_fe_modal
node_fe_app -->|"connects"| node_fe_store
node_fe_store -->|"includes"| node_fe_user_slice
node_fe_user_slice -->|"calls"| node_be_routes_auth
node_fe_user_slice -->|"calls"| node_be_routes_user
node_be_index -->|"mounts"| node_be_routes_auth
node_be_index -->|"mounts"| node_be_routes_user
node_be_routes_auth -->|"dispatches"| node_be_auth_ctrl
node_be_routes_user -->|"protects"| node_be_isauth
node_be_routes_user -->|"dispatches"| node_be_user_ctrl
node_be_auth_ctrl -->|"issues"| node_be_token
node_be_auth_ctrl -->|"reads/writes"| node_be_user_model
node_be_user_ctrl -->|"reads/writes"| node_be_user_model
node_be_user_model -->|"connects"| node_be_db
node_be_isauth -->|"verifies"| node_be_token
node_fe_firebase -->|"integrates"| node_ext_firebase
node_fe_home -->|"uses"| node_fe_assets

click node_fe_main "https://github.com/vanshcoder99/hireready-ai/blob/main/Frontend/src/main.jsx"
click node_fe_app "https://github.com/vanshcoder99/hireready-ai/blob/main/Frontend/src/App.jsx"
click node_fe_home "https://github.com/vanshcoder99/hireready-ai/blob/main/Frontend/src/pages/Home.jsx"
click node_fe_auth "https://github.com/vanshcoder99/hireready-ai/blob/main/Frontend/src/pages/Auth.jsx"
click node_fe_nav "https://github.com/vanshcoder99/hireready-ai/blob/main/Frontend/src/components/Navbar.jsx"
click node_fe_footer "https://github.com/vanshcoder99/hireready-ai/blob/main/Frontend/src/components/Footer.jsx"
click node_fe_modal "https://github.com/vanshcoder99/hireready-ai/blob/main/Frontend/src/components/AuthModel.jsx"
click node_fe_store "https://github.com/vanshcoder99/hireready-ai/blob/main/Frontend/src/redux/store.js"
click node_fe_user_slice "https://github.com/vanshcoder99/hireready-ai/blob/main/Frontend/src/redux/userSlice.js"
click node_fe_firebase "https://github.com/vanshcoder99/hireready-ai/blob/main/Frontend/src/utils/firebase.js"
click node_fe_assets "https://github.com/vanshcoder99/hireready-ai/blob/main/Frontend/src/assets/Videos/male-ai.mp4"
click node_be_index "https://github.com/vanshcoder99/hireready-ai/blob/main/Backend/index.js"
click node_be_routes_auth "https://github.com/vanshcoder99/hireready-ai/blob/main/Backend/routes/auth.route.js"
click node_be_routes_user "https://github.com/vanshcoder99/hireready-ai/blob/main/Backend/routes/user.route.js"
click node_be_auth_ctrl "https://github.com/vanshcoder99/hireready-ai/blob/main/Backend/controllers/auth.controller.js"
click node_be_user_ctrl "https://github.com/vanshcoder99/hireready-ai/blob/main/Backend/controllers/user.controller.js"
click node_be_isauth "https://github.com/vanshcoder99/hireready-ai/blob/main/Backend/middlewares/isAuth.js"
click node_be_token "https://github.com/vanshcoder99/hireready-ai/blob/main/Backend/config/token.js"
click node_be_db "https://github.com/vanshcoder99/hireready-ai/blob/main/Backend/config/connectDb.js"
click node_be_user_model "https://github.com/vanshcoder99/hireready-ai/blob/main/Backend/models/user.model.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_fe_main,node_fe_app,node_fe_home,node_fe_auth,node_fe_nav,node_fe_footer,node_fe_modal,node_fe_store,node_fe_user_slice,node_fe_firebase,node_fe_assets toneBlue
class node_be_index,node_be_routes_auth,node_be_routes_user,node_be_auth_ctrl,node_be_user_ctrl,node_be_isauth,node_be_token,node_be_db,node_be_user_model toneAmber
class node_ext_firebase toneMint
```

## Components

### Frontend SPA

React/Vite client application and UI state

- [main](https://github.com/vanshcoder99/hireready-ai/blob/main/Frontend/src/main.jsx): entry · Vite entrypoint that mounts the app · `Frontend/src/main.jsx`
- [App shell](https://github.com/vanshcoder99/hireready-ai/blob/main/Frontend/src/App.jsx): composition · Top-level React composition and routing/container layer · `Frontend/src/App.jsx`
- [Home](https://github.com/vanshcoder99/hireready-ai/blob/main/Frontend/src/pages/Home.jsx): page · Primary landing and presentation page · `Frontend/src/pages/Home.jsx`
- [Auth page](https://github.com/vanshcoder99/hireready-ai/blob/main/Frontend/src/pages/Auth.jsx): page · Authentication entry page for sign-in/sign-up · `Frontend/src/pages/Auth.jsx`
- [Navbar](https://github.com/vanshcoder99/hireready-ai/blob/main/Frontend/src/components/Navbar.jsx): Shared top-level navigation chrome · `Frontend/src/components/Navbar.jsx`
- [Footer](https://github.com/vanshcoder99/hireready-ai/blob/main/Frontend/src/components/Footer.jsx): Shared page footer · `Frontend/src/components/Footer.jsx`
- [Auth modal](https://github.com/vanshcoder99/hireready-ai/blob/main/Frontend/src/components/AuthModel.jsx): Modal-based auth interaction UI · `Frontend/src/components/AuthModel.jsx`
- [Redux store](https://github.com/vanshcoder99/hireready-ai/blob/main/Frontend/src/redux/store.js): state · Client state container for shared app state · `Frontend/src/redux/store.js`
- [User slice](https://github.com/vanshcoder99/hireready-ai/blob/main/Frontend/src/redux/userSlice.js): state · Redux user/auth state and actions · `Frontend/src/redux/userSlice.js`
- [Firebase util](https://github.com/vanshcoder99/hireready-ai/blob/main/Frontend/src/utils/firebase.js): integration · Client-side Firebase integration helper · `Frontend/src/utils/firebase.js`
- [Video assets](https://github.com/vanshcoder99/hireready-ai/blob/main/Frontend/src/assets/Videos/male-ai.mp4): media · Presentation media used by the UI · `Frontend/src/assets/Videos/male-ai.mp4`

### Backend API

Express server, auth, and user persistence

- [Server entry](https://github.com/vanshcoder99/hireready-ai/blob/main/Backend/index.js): entry · Node/Express bootstrap and server startup · `Backend/index.js`
- [Auth routes](https://github.com/vanshcoder99/hireready-ai/blob/main/Backend/routes/auth.route.js): api routes · HTTP endpoints for login and signup · `Backend/routes/auth.route.js`
- [User routes](https://github.com/vanshcoder99/hireready-ai/blob/main/Backend/routes/user.route.js): api routes · Protected user-specific HTTP endpoints · `Backend/routes/user.route.js`
- [Auth controller](https://github.com/vanshcoder99/hireready-ai/blob/main/Backend/controllers/auth.controller.js): handler · Request handlers for authentication flows · `Backend/controllers/auth.controller.js`
- [User controller](https://github.com/vanshcoder99/hireready-ai/blob/main/Backend/controllers/user.controller.js): handler · Request handlers for user operations · `Backend/controllers/user.controller.js`
- [Auth guard](https://github.com/vanshcoder99/hireready-ai/blob/main/Backend/middlewares/isAuth.js): middleware · Token-based access control for protected routes · `Backend/middlewares/isAuth.js`
- [Token helper](https://github.com/vanshcoder99/hireready-ai/blob/main/Backend/config/token.js): security · Token creation and verification utilities · `Backend/config/token.js`
- [DB connector](https://github.com/vanshcoder99/hireready-ai/blob/main/Backend/config/connectDb.js): infrastructure · Database connection setup · `Backend/config/connectDb.js`
- [User model](https://github.com/vanshcoder99/hireready-ai/blob/main/Backend/models/user.model.js): model · Persisted user entity definition · `Backend/models/user.model.js`

### External Services

Third-party or non-repo integrations

- **Firebase**: external service · Third-party client integration boundary

## Connections

- main → App shell: bootstraps · Vite entry mounts the app shell
- App shell → Home: renders · App composes the home experience
- App shell → Auth page: renders · App composes auth entry points
- App shell → Navbar: uses · Shared navigation across pages
- App shell → Footer: uses · Shared footer across pages
- Auth page → Auth modal: opens · Auth page delegates modal interaction
- App shell → Redux store: connects · App integrates Redux state
- Redux store → User slice: includes · Store composes the user slice
- User slice → Auth routes: calls · Client auth state depends on backend auth APIs
- User slice → User routes: calls · Client user state may hydrate from protected APIs
- Server entry → Auth routes: mounts · Server registers auth route group
- Server entry → User routes: mounts · Server registers user route group
- Auth routes → Auth controller: dispatches · Auth endpoints forward to controller logic
- User routes → Auth guard: protects · User routes are gated by auth middleware
- User routes → User controller: dispatches · Protected endpoints forward to user controller logic
- Auth controller → Token helper: issues · Auth flow creates or verifies session tokens
- Auth controller → User model: reads/writes · Auth controller persists and loads user records
- User controller → User model: reads/writes · User controller operates on persisted user data
- User model → DB connector: connects · Model relies on configured database connection
- Auth guard → Token helper: verifies · Middleware validates presented tokens
- Firebase util → Firebase: integrates · Frontend client uses Firebase boundary
- Home → Video assets: uses · Presentation page uses media assets