# yashz0r0/online_job_portal architecture

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

- Interactive diagram: https://gitdiagram.com/yashz0r0/online_job_portal
- Repository: https://github.com/yashz0r0/online_job_portal

## Overview

1. **High-level shape**
   - This repository is a classic two-tier job portal: a **static frontend** in `frontend/` and a **Node.js/Express backend** in `backend/`.
   - The backend exposes a REST API; the frontend is served separately and consumes that API via `fetch`.

2. **Frontend boundary**
   - The frontend is composed of plain HTML, CSS, and vanilla JavaScript, not a SPA framework.
   - Pages are split by function: landing (`index.html`), auth (`login.html`, `register.html`), jobs browsing (`jobs.html`), and user dashboard (`dashboard.html`).
   - JavaScript files in `frontend/js/` handle page behavior, auth state, API calls, and rendering dynamic data.

3. **Client-side data flow**
   - `auth.js` appears to manage registration/login state and token handling.
   - `config.js` centralizes API base configuration.
   - `jobs.js`, `dashboard.js`, and `main.js` likely orchestrate page-specific requests to the backend and update the DOM.
   - Authentication tokens are stored client-side, with browser-side logic gating access to dashboard-style pages.

4. **Backend application layer**
   - The backend is organized in the standard Express pattern:
     - `routes/` defines URL endpoints.
     - `controllers/` contains request handlers and business logic.
     - `models/` encapsulates database access.
     - `middleware/` contains auth/authorization checks.
   - `server.js` is the composition root: it starts the HTTP server and wires middleware, routes, and CORS/JSON parsing.

5. **Database boundary**
   - The backend connects to **MySQL** through `backend/config/db.js`, using credentials from `backend/.env`.
   - Persistence is relational and normalized around core entities: users, companies, job seekers, employers, job categories, jobs, and applications.
   - The repository’s README includes the schema, which is useful for understanding the object relationships and foreign keys.

6. **Core domain model**
   - **Users** is the central identity table, with a `role` that splits behavior into `JobSeeker` and `Employer`.
   - **JobSeeker** and **Employer** are profile extensions of the base user record.
   - **Company** is linked to employers, while **Jobs** are posted by employers and classified by category.
   - **Applications** connect job seekers to jobs and store application status plus cover letter/resume metadata.

7. **Authentication and authorization**
   - Authentication is JWT-based, with passwords hashed using bcrypt.
   - `authMiddleware.js` enforces protected routes and likely checks role-specific access, especially for employer-only actions like posting jobs or updating applications.
   - The architecture is therefore role-aware, not just login-protected.

8. **Main backend route groups**
   - `userRoutes.js` handles registration and login.
   - `jobRoutes.js` serves job discovery and job creation.
   - `jobSeekerRoutes.js` and `employerRoutes.js` manage role-specific profiles.
   - `applicationRoutes.js` handles applying, listing applications, listing applicants, and status updates.
   - `categoryRoutes.js` exposes job categories used for filtering and posting.

9. **Write paths vs read paths**
   - Read-heavy flows include browsing open jobs, viewing categories, loading profiles, and fetching applications.
   - Write-heavy flows include account creation, profile upserts, job posting, applying to jobs, and employer status updates.
   - The unique application constraint in the schema indicates the system prevents duplicate applications for the same job/user pair.

10. **Important external/runtime dependencies**
   - Backend runtime: **Node.js** with **Express**.
   - Database: **MySQL** with `mysql2`.
   - Security: **jsonwebtoken** for sessions/tokens and **bcryptjs** for password hashing.
   - Frontend runtime: browser-only, with no bundler or frontend framework required.

11. **Operational layout**
   - Backend runs on port **5000**; frontend is typically opened directly or served on **8080**.
   - Because the frontend is static and separate, deployment can be split: API service plus static file hosting.
   - CORS is enabled in the backend so the browser client can call the API across origins.

12. **Architecture diagram emphasis**
   - The key diagram should show:
     - Browser UI pages and JS modules
     - REST API boundary in Express
     - Controller/model separation inside backend
     - Auth middleware on protected routes
     - MySQL database with the user/job/application schema
   - The most important flows are: **register/login → JWT/token use → protected profile/job/application actions → MySQL persistence**.

Main entry points: [`backend/server.js`](https://github.com/yashz0r0/online_job_portal/blob/main/backend/server.js) (Express server), [`backend/config/db.js`](https://github.com/yashz0r0/online_job_portal/blob/main/backend/config/db.js) (DB config), [`frontend/index.html`](https://github.com/yashz0r0/online_job_portal/blob/main/frontend/index.html) (Browser), [`backend/middleware/authMiddleware.js`](https://github.com/yashz0r0/online_job_portal/blob/main/backend/middleware/authMiddleware.js) (Auth middleware)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Frontend"]
  node_browser(("Browser<br/>runtime<br/>[index.html]"))
  node_landing["Landing<br/>page<br/>[index.html]"]
  node_auth_pages["Auth pages<br/>[login.html]"]
  node_jobs_page["Jobs page<br/>[jobs.html]"]
  node_dashboard_page["Dashboard<br/>page<br/>[dashboard.html]"]
  node_client_state["Client auth<br/>js module<br/>[auth.js]"]
  node_client_config["API config<br/>js module<br/>[config.js]"]
  node_client_main["Main UI<br/>js module<br/>[main.js]"]
  node_client_jobs["Jobs UI<br/>js module<br/>[jobs.js]"]
  node_client_dashboard["Dashboard UI<br/>js module<br/>[dashboard.js]"]
end

subgraph group_backend["Backend"]
  node_api_server(("Express server<br/>runtime<br/>[server.js]"))
  node_auth_mw["Auth middleware<br/>[authMiddleware.js]"]
  node_user_routes["User routes<br/>[userRoutes.js]"]
  node_job_routes["Job routes<br/>[jobRoutes.js]"]
  node_app_routes["App routes"]
  node_profile_routes["Profile routes<br/>[jobSeekerRoutes.js]"]
  node_category_routes["Category routes<br/>[categoryRoutes.js]"]
  node_user_ctrl["User controller<br/>[userController.js]"]
  node_job_ctrl["Job controller<br/>[jobController.js]"]
  node_app_ctrl["Application controller"]
  node_profile_ctrl["Profile controller"]
  node_category_ctrl["Category controller"]
  node_db_config["DB config<br/>connector<br/>[db.js]"]
  node_user_model[("Users<br/>model<br/>[userModel.js]")]
  node_profile_model[("Profiles<br/>model<br/>[jobSeekerModel.js]")]
  node_job_model[("Jobs<br/>model<br/>[jobModel.js]")]
  node_app_model[("Applications<br/>model")]
  node_category_model[("Categories<br/>model<br/>[categoryModel.js]")]
end

subgraph group_db["Database"]
  node_mysql[("MySQL<br/>database")]
end

node_browser -->|"opens"| node_landing
node_browser -->|"navigates"| node_auth_pages
node_browser -->|"opens"| node_jobs_page
node_browser -->|"opens"| node_dashboard_page
node_landing -->|"uses"| node_client_main
node_auth_pages -->|"uses"| node_client_state
node_jobs_page -->|"uses"| node_client_jobs
node_dashboard_page -->|"uses"| node_client_dashboard
node_client_state -->|"reads"| node_client_config
node_client_jobs -->|"reads"| node_client_config
node_client_dashboard -->|"reads"| node_client_config
node_browser -->|"fetches REST"| node_api_server
node_api_server -->|"mounts"| node_user_routes
node_api_server -->|"mounts"| node_job_routes
node_api_server -->|"mounts"| node_app_routes
node_api_server -->|"mounts"| node_profile_routes
node_api_server -->|"mounts"| node_category_routes
node_user_routes -->|"delegates to"| node_user_ctrl
node_job_routes -->|"delegates to"| node_job_ctrl
node_app_routes -->|"delegates to"| node_app_ctrl
node_profile_routes -->|"delegates to"| node_profile_ctrl
node_category_routes -->|"delegates to"| node_category_ctrl
node_job_routes -.->|"protects"| node_auth_mw
node_app_routes -.->|"protects"| node_auth_mw
node_profile_routes -.->|"protects"| node_auth_mw
node_user_ctrl -->|"queries"| node_db_config
node_job_ctrl -->|"queries"| node_db_config
node_app_ctrl -->|"queries"| node_db_config
node_profile_ctrl -->|"queries"| node_db_config
node_category_ctrl -->|"queries"| node_db_config
node_db_config -->|"connects to"| node_mysql
node_user_model -->|"stores"| node_mysql
node_profile_model -->|"stores"| node_mysql
node_job_model -->|"stores"| node_mysql
node_app_model -->|"stores"| node_mysql
node_category_model -->|"stores"| node_mysql
node_user_ctrl -->|"uses"| node_user_model
node_job_ctrl -->|"uses"| node_job_model
node_app_ctrl -->|"uses"| node_app_model
node_profile_ctrl -->|"uses"| node_profile_model
node_category_ctrl -->|"uses"| node_category_model
node_auth_mw -.->|"verifies"| node_user_model

click node_browser "https://github.com/yashz0r0/online_job_portal/blob/main/frontend/index.html"
click node_landing "https://github.com/yashz0r0/online_job_portal/blob/main/frontend/index.html"
click node_auth_pages "https://github.com/yashz0r0/online_job_portal/blob/main/frontend/login.html"
click node_jobs_page "https://github.com/yashz0r0/online_job_portal/blob/main/frontend/jobs.html"
click node_dashboard_page "https://github.com/yashz0r0/online_job_portal/blob/main/frontend/dashboard.html"
click node_client_state "https://github.com/yashz0r0/online_job_portal/blob/main/frontend/js/auth.js"
click node_client_config "https://github.com/yashz0r0/online_job_portal/blob/main/frontend/js/config.js"
click node_client_main "https://github.com/yashz0r0/online_job_portal/blob/main/frontend/js/main.js"
click node_client_jobs "https://github.com/yashz0r0/online_job_portal/blob/main/frontend/js/jobs.js"
click node_client_dashboard "https://github.com/yashz0r0/online_job_portal/blob/main/frontend/js/dashboard.js"
click node_api_server "https://github.com/yashz0r0/online_job_portal/blob/main/backend/server.js"
click node_auth_mw "https://github.com/yashz0r0/online_job_portal/blob/main/backend/middleware/authMiddleware.js"
click node_user_routes "https://github.com/yashz0r0/online_job_portal/blob/main/backend/routes/userRoutes.js"
click node_job_routes "https://github.com/yashz0r0/online_job_portal/blob/main/backend/routes/jobRoutes.js"
click node_app_routes "https://github.com/yashz0r0/online_job_portal/blob/main/backend/routes/applicationRoutes.js"
click node_profile_routes "https://github.com/yashz0r0/online_job_portal/blob/main/backend/routes/jobSeekerRoutes.js"
click node_category_routes "https://github.com/yashz0r0/online_job_portal/blob/main/backend/routes/categoryRoutes.js"
click node_user_ctrl "https://github.com/yashz0r0/online_job_portal/blob/main/backend/controllers/userController.js"
click node_job_ctrl "https://github.com/yashz0r0/online_job_portal/blob/main/backend/controllers/jobController.js"
click node_app_ctrl "https://github.com/yashz0r0/online_job_portal/blob/main/backend/controllers/applicationController.js"
click node_profile_ctrl "https://github.com/yashz0r0/online_job_portal/blob/main/backend/controllers/jobSeekerController.js"
click node_category_ctrl "https://github.com/yashz0r0/online_job_portal/blob/main/backend/controllers/categoryController.js"
click node_db_config "https://github.com/yashz0r0/online_job_portal/blob/main/backend/config/db.js"
click node_user_model "https://github.com/yashz0r0/online_job_portal/blob/main/backend/models/userModel.js"
click node_profile_model "https://github.com/yashz0r0/online_job_portal/blob/main/backend/models/jobSeekerModel.js"
click node_job_model "https://github.com/yashz0r0/online_job_portal/blob/main/backend/models/jobModel.js"
click node_app_model "https://github.com/yashz0r0/online_job_portal/blob/main/backend/models/applicationModel.js"
click node_category_model "https://github.com/yashz0r0/online_job_portal/blob/main/backend/models/categoryModel.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_browser,node_landing,node_auth_pages,node_jobs_page,node_dashboard_page,node_client_state,node_client_config,node_client_main,node_client_jobs,node_client_dashboard toneBlue
class node_api_server,node_auth_mw,node_user_routes,node_job_routes,node_app_routes,node_profile_routes,node_category_routes,node_user_ctrl,node_job_ctrl,node_app_ctrl,node_profile_ctrl,node_category_ctrl,node_db_config,node_user_model,node_profile_model,node_job_model,node_app_model,node_category_model toneAmber
class node_mysql toneMint
```

## Components

### Frontend

Static browser UI and client-side page logic.

- [Browser](https://github.com/yashz0r0/online_job_portal/blob/main/frontend/index.html): runtime · Opens the static site, stores auth state, and calls the API. · `frontend/index.html`
- [Landing](https://github.com/yashz0r0/online_job_portal/blob/main/frontend/index.html): page · Public entry page for the portal. · `frontend/index.html`
- [Auth pages](https://github.com/yashz0r0/online_job_portal/blob/main/frontend/login.html): pages · Login and registration screens. · `frontend/login.html`
- [Jobs page](https://github.com/yashz0r0/online_job_portal/blob/main/frontend/jobs.html): page · Browse and filter job listings. · `frontend/jobs.html`
- [Dashboard](https://github.com/yashz0r0/online_job_portal/blob/main/frontend/dashboard.html): page · Authenticated user dashboard for profile and application activity. · `frontend/dashboard.html`
- [Client auth](https://github.com/yashz0r0/online_job_portal/blob/main/frontend/js/auth.js): js module · Handles login state, token storage, and protected-page gating. · `frontend/js/auth.js`
- [API config](https://github.com/yashz0r0/online_job_portal/blob/main/frontend/js/config.js): js module · Central API base configuration for browser requests. · `frontend/js/config.js`
- [Main UI](https://github.com/yashz0r0/online_job_portal/blob/main/frontend/js/main.js): js module · Landing-page behavior and shared frontend interactions. · `frontend/js/main.js`
- [Jobs UI](https://github.com/yashz0r0/online_job_portal/blob/main/frontend/js/jobs.js): js module · Fetches and renders job browsing data. · `frontend/js/jobs.js`
- [Dashboard UI](https://github.com/yashz0r0/online_job_portal/blob/main/frontend/js/dashboard.js): js module · Loads authenticated user data and updates dashboard views. · `frontend/js/dashboard.js`

### Backend

Express API, middleware, controllers, and data models.

- [Express server](https://github.com/yashz0r0/online_job_portal/blob/main/backend/server.js): runtime · Composition root that starts the HTTP API and wires middleware and routes. · `backend/server.js`
- [Auth middleware](https://github.com/yashz0r0/online_job_portal/blob/main/backend/middleware/authMiddleware.js): middleware · Protects authenticated and role-aware backend routes. · `backend/middleware/authMiddleware.js`
- [User routes](https://github.com/yashz0r0/online_job_portal/blob/main/backend/routes/userRoutes.js): route · Registration and login endpoints. · `backend/routes/userRoutes.js`
- [Job routes](https://github.com/yashz0r0/online_job_portal/blob/main/backend/routes/jobRoutes.js): route · Job discovery and job creation endpoints. · `backend/routes/jobRoutes.js`
- [App routes](https://github.com/yashz0r0/online_job_portal/blob/main/backend/routes/applicationRoutes.js): route · Job application submission, listing, and status updates. · `backend/routes/applicationRoutes.js`
- [Profile routes](https://github.com/yashz0r0/online_job_portal/blob/main/backend/routes/jobSeekerRoutes.js): route · Role-specific job seeker and employer profile endpoints. · `backend/routes/jobSeekerRoutes.js`
- [Category routes](https://github.com/yashz0r0/online_job_portal/blob/main/backend/routes/categoryRoutes.js): route · Job category endpoints for filtering and posting. · `backend/routes/categoryRoutes.js`
- [User controller](https://github.com/yashz0r0/online_job_portal/blob/main/backend/controllers/userController.js): controller · Handles auth-related request logic. · `backend/controllers/userController.js`
- [Job controller](https://github.com/yashz0r0/online_job_portal/blob/main/backend/controllers/jobController.js): controller · Coordinates job listing and posting logic. · `backend/controllers/jobController.js`
- [Application controller](https://github.com/yashz0r0/online_job_portal/blob/main/backend/controllers/applicationController.js): controller · Processes applications, applicant lists, and status changes. · `backend/controllers/applicationController.js`
- [Profile controller](https://github.com/yashz0r0/online_job_portal/blob/main/backend/controllers/jobSeekerController.js): controller · Manages job seeker and employer profile operations. · `backend/controllers/jobSeekerController.js`
- [Category controller](https://github.com/yashz0r0/online_job_portal/blob/main/backend/controllers/categoryController.js): controller · Serves job category data. · `backend/controllers/categoryController.js`
- [DB config](https://github.com/yashz0r0/online_job_portal/blob/main/backend/config/db.js): connector · MySQL connection setup and credentials loading. · `backend/config/db.js`
- [Users](https://github.com/yashz0r0/online_job_portal/blob/main/backend/models/userModel.js): model · Identity and role records. · `backend/models/userModel.js`
- [Profiles](https://github.com/yashz0r0/online_job_portal/blob/main/backend/models/jobSeekerModel.js): model · Job seeker, employer, and company domain data. · `backend/models/jobSeekerModel.js`
- [Jobs](https://github.com/yashz0r0/online_job_portal/blob/main/backend/models/jobModel.js): model · Job posting and employer linkage data. · `backend/models/jobModel.js`
- [Applications](https://github.com/yashz0r0/online_job_portal/blob/main/backend/models/applicationModel.js): model · Applications and their status metadata. · `backend/models/applicationModel.js`
- [Categories](https://github.com/yashz0r0/online_job_portal/blob/main/backend/models/categoryModel.js): model · Job category lookup data. · `backend/models/categoryModel.js`

### Database

MySQL persistence and relational domain data.

- **MySQL**: database · Relational persistence for users, profiles, jobs, categories, and applications.

## Connections

- Browser → Landing: opens · The browser loads the public entry page.
- Browser → Auth pages: navigates · Users move between login and registration screens.
- Browser → Jobs page: opens · Browsers view job listings.
- Browser → Dashboard: opens · Authenticated users access the dashboard.
- Landing → Main UI: uses · Landing page behavior is driven by shared JS.
- Auth pages → Client auth: uses · Login and registration logic updates auth state.
- Jobs page → Jobs UI: uses · Jobs page logic fetches and renders listings.
- Dashboard → Dashboard UI: uses · Dashboard page logic loads protected data.
- Client auth → API config: reads · Auth flows use the shared API base configuration.
- Jobs UI → API config: reads · Jobs UI uses the shared API base configuration.
- Dashboard UI → API config: reads · Dashboard UI uses the shared API base configuration.
- Browser → Express server: fetches REST · The static client calls the backend API across origins.
- Express server → User routes: mounts · Express mounts auth-related endpoints.
- Express server → Job routes: mounts · Express mounts job endpoints.
- Express server → App routes: mounts · Express mounts application endpoints.
- Express server → Profile routes: mounts · Express mounts role/profile endpoints.
- Express server → Category routes: mounts · Express mounts category endpoints.
- User routes → User controller: delegates to · Route handlers forward to auth controllers.
- Job routes → Job controller: delegates to · Route handlers forward to job controllers.
- App routes → Application controller: delegates to · Route handlers forward to application controllers.
- Profile routes → Profile controller: delegates to · Route handlers forward to profile controllers.
- Category routes → Category controller: delegates to · Route handlers forward to category controllers.
- Job routes → Auth middleware: protects · Job creation and other protected actions pass through auth checks.
- App routes → Auth middleware: protects · Application and employer actions require authorization.
- Profile routes → Auth middleware: protects · Profile routes are guarded by role-aware auth.
- User controller → DB config: queries · Controllers use the database connection layer.
- Job controller → DB config: queries · Job logic persists and reads via the DB connection.
- Application controller → DB config: queries · Application logic persists and reads via the DB connection.
- Profile controller → DB config: queries · Profile logic persists and reads via the DB connection.
- Category controller → DB config: queries · Category data is loaded through the DB connection.
- DB config → MySQL: connects to · MySQL is the persistence backend.
- Users → MySQL: stores · Users are stored in MySQL tables.
- Profiles → MySQL: stores · Profiles and company data are stored in MySQL tables.
- Jobs → MySQL: stores · Job records are stored in MySQL tables.
- Applications → MySQL: stores · Application records are stored in MySQL tables.
- Categories → MySQL: stores · Category records are stored in MySQL tables.
- User controller → Users: uses · Auth logic reads and writes user records.
- Job controller → Jobs: uses · Job logic reads and writes job records.
- Application controller → Applications: uses · Application logic reads and writes application records.
- Profile controller → Profiles: uses · Profile logic reads and writes profile records.
- Category controller → Categories: uses · Category logic reads and writes category records.
- Auth middleware → Users: verifies · Middleware checks user identity and roles against persisted data.