# rohit7030/job-portal-web-application architecture

> Architecture diagram of the GitHub repository rohit7030/job-portal-web-application, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-04). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/rohit7030/job-portal-web-application
- Repository: https://github.com/rohit7030/job-portal-web-application

## Overview

#### Purpose and Runtime
This is a Vite-served React job portal for two roles: job seekers browse/save/apply to jobs, while recruiters create companies, post jobs, and review applications. The frontend uses Tailwind/Shadcn UI, Clerk authentication, and Supabase/PostgreSQL as its backend service. Bootstrap begins at `src/main.jsx`, with the top-level application in `src/App.jsx`.

#### Application Shell and Routing
`src/App.jsx` defines the page-level application flow, while `src/layouts/app-layout.jsx` provides the authenticated/shared layout and `src/components/Header.jsx` exposes primary navigation and user controls. Public-facing landing and job discovery views are in `src/pages/landing.jsx`, `src/pages/job-listing.jsx`, and `src/pages/job.jsx`.

#### Authentication and Access Boundary
Clerk supplies registration/sign-in and user identity; its publishable key is injected through Vite environment configuration. `src/components/protected-route.jsx` is the main authorization boundary for restricted workflows, and `src/pages/onboarding.jsx` captures initial role/profile setup needed before role-specific actions. Client code should treat Clerk identity as the actor identity passed to database operations.

#### Supabase Data Access
Supabase is initialized in `src/utils/supabase.js` using `VITE_SUPABASE_URL` and `VITE_SUPABASE_ANON_KEY`. Domain-specific API modules isolate database operations:
- Jobs: `src/api/apiJobs.js`
- Companies: `src/api/apiCompanies.js`
- Applications: `src/api/apiApplication.js`

This creates a clear boundary between page/component interaction code and Supabase queries, including PostgreSQL-backed and potentially realtime data behavior.

#### Job Discovery and Candidate Workflow
Candidates load listings through `src/pages/job-listing.jsx`, inspect a selected posting in `src/pages/job.jsx`, and submit an application through `src/components/apply-job.jsx`. Job presentation is encapsulated by `src/components/job-card.jsx`; saved-job behavior is represented by `src/pages/saved-job.jsx`. The primary flow is: job API fetch → listing/card UI → job-detail page → application API write → application status display.

#### Recruiter and Company Workflow
Recruiters create/select company context through `src/components/add-company-drawer.jsx`, then create job records from `src/pages/post-job.jsx`. Recruiter-owned postings are surfaced in `src/pages/my-jobs.jsx` and `src/components/created-jobs.jsx`. This flow establishes company ownership before job creation, then uses the job/application APIs to retrieve postings and associated candidates.

#### Application Management and Shared UI
Application records are rendered for recruiter review via `src/components/created-applications.jsx` and `src/components/application-card.jsx`; these are the core UI stage for tracking candidate status. Shared asynchronous request state is centralized in `src/hooks/use-fetch.js`. Reusable visual primitives under `src/components/ui` are Shadcn-style components, with global styling in `src/index.css` and `src/App.css`.

Main entry points: [`src/api/apiJobs.js`](https://github.com/rohit7030/job-portal-web-application/blob/main/src/api/apiJobs.js) (Jobs API), [`src/utils/supabase.js`](https://github.com/rohit7030/job-portal-web-application/blob/main/src/utils/supabase.js) (Supabase client), [`src/pages/job-listing.jsx`](https://github.com/rohit7030/job-portal-web-application/blob/main/src/pages/job-listing.jsx) (Job discovery), [`src/App.jsx`](https://github.com/rohit7030/job-portal-web-application/blob/main/src/App.jsx) (App routing)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["React frontend"]
  node_bootstrap{{"Vite bootstrap<br/>entrypoint<br/>[main.jsx]"}}
  node_app["App routing<br/>application shell<br/>[App.jsx]"]
  node_layout["Shared app layout<br/>[app-layout.jsx]"]
  node_header["Header navigation<br/>[Header.jsx]"]
  node_protected{{"Protected route<br/>access boundary"}}
  node_onboarding["Role onboarding<br/>page<br/>[onboarding.jsx]"]
  node_usefetch["Request state hook<br/>data hook<br/>[use-fetch.js]"]
end

subgraph group_candidate["Candidate workflow"]
  node_discovery["Job discovery<br/>pages<br/>[job-listing.jsx]"]
  node_jobcard["Job card<br/>[job-card.jsx]"]
  node_apply["Apply to job<br/>[apply-job.jsx]"]
  node_saved["Saved jobs<br/>page<br/>[saved-job.jsx]"]
end

subgraph group_recruiter["Recruiter workflow"]
  node_company["Company context"]
  node_postjob["Post job<br/>page<br/>[post-job.jsx]"]
  node_myjobs["Recruiter postings<br/>page and component<br/>[my-jobs.jsx]"]
  node_reviews["Application review<br/>components"]
end

subgraph group_backend["Identity and data services"]
  node_jobapi["Jobs API<br/>data module<br/>[apiJobs.js]"]
  node_companyapi["Companies API<br/>data module<br/>[apiCompanies.js]"]
  node_applicationapi["Applications API<br/>data module<br/>[apiApplication.js]"]
  node_supabase[("Supabase client<br/>backend client<br/>[supabase.js]")]
  node_clerk{{"Clerk identity<br/>authentication service"}}
  node_postgres[("Supabase PostgreSQL<br/>database")]
end

node_bootstrap -->|"mounts"| node_app
node_app -->|"routes through"| node_layout
node_layout -->|"renders"| node_header
node_app -->|"guards workflows"| node_protected
node_protected -->|"requires setup"| node_onboarding
node_protected -->|"checks identity"| node_clerk
node_discovery -->|"renders"| node_jobcard
node_discovery -->|"loads jobs"| node_jobapi
node_discovery -->|"uses"| node_usefetch
node_apply -->|"creates application"| node_applicationapi
node_saved -->|"loads saved jobs"| node_jobapi
node_company -->|"creates/selects company"| node_companyapi
node_postjob -->|"requires ownership"| node_company
node_postjob -->|"creates job"| node_jobapi
node_myjobs -->|"loads postings"| node_jobapi
node_reviews -->|"loads applications"| node_applicationapi
node_jobapi -->|"queries"| node_supabase
node_companyapi -->|"queries"| node_supabase
node_applicationapi -->|"queries"| node_supabase
node_supabase -->|"persists data"| node_postgres
node_clerk -.->|"identity acts on data"| node_supabase

click node_bootstrap "https://github.com/rohit7030/job-portal-web-application/blob/main/src/main.jsx"
click node_app "https://github.com/rohit7030/job-portal-web-application/blob/main/src/App.jsx"
click node_layout "https://github.com/rohit7030/job-portal-web-application/blob/main/src/layouts/app-layout.jsx"
click node_header "https://github.com/rohit7030/job-portal-web-application/blob/main/src/components/Header.jsx"
click node_protected "https://github.com/rohit7030/job-portal-web-application/blob/main/src/components/protected-route.jsx"
click node_onboarding "https://github.com/rohit7030/job-portal-web-application/blob/main/src/pages/onboarding.jsx"
click node_usefetch "https://github.com/rohit7030/job-portal-web-application/blob/main/src/hooks/use-fetch.js"
click node_discovery "https://github.com/rohit7030/job-portal-web-application/blob/main/src/pages/job-listing.jsx"
click node_jobcard "https://github.com/rohit7030/job-portal-web-application/blob/main/src/components/job-card.jsx"
click node_apply "https://github.com/rohit7030/job-portal-web-application/blob/main/src/components/apply-job.jsx"
click node_saved "https://github.com/rohit7030/job-portal-web-application/blob/main/src/pages/saved-job.jsx"
click node_company "https://github.com/rohit7030/job-portal-web-application/blob/main/src/components/add-company-drawer.jsx"
click node_postjob "https://github.com/rohit7030/job-portal-web-application/blob/main/src/pages/post-job.jsx"
click node_myjobs "https://github.com/rohit7030/job-portal-web-application/blob/main/src/pages/my-jobs.jsx"
click node_reviews "https://github.com/rohit7030/job-portal-web-application/blob/main/src/components/created-applications.jsx"
click node_jobapi "https://github.com/rohit7030/job-portal-web-application/blob/main/src/api/apiJobs.js"
click node_companyapi "https://github.com/rohit7030/job-portal-web-application/blob/main/src/api/apiCompanies.js"
click node_applicationapi "https://github.com/rohit7030/job-portal-web-application/blob/main/src/api/apiApplication.js"
click node_supabase "https://github.com/rohit7030/job-portal-web-application/blob/main/src/utils/supabase.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_bootstrap,node_app,node_layout,node_header,node_protected,node_onboarding,node_usefetch toneBlue
class node_discovery,node_jobcard,node_apply,node_saved toneAmber
class node_company,node_postjob,node_myjobs,node_reviews toneMint
class node_jobapi,node_companyapi,node_applicationapi,node_supabase,node_clerk,node_postgres toneRose
```

## Components

### React frontend

- [Vite bootstrap](https://github.com/rohit7030/job-portal-web-application/blob/main/src/main.jsx): entrypoint · `src/main.jsx`
- [App routing](https://github.com/rohit7030/job-portal-web-application/blob/main/src/App.jsx): application shell · Defines page-level flow. · `src/App.jsx`
- [Shared app layout](https://github.com/rohit7030/job-portal-web-application/blob/main/src/layouts/app-layout.jsx): layout · Authenticated shared shell. · `src/layouts/app-layout.jsx`
- [Header navigation](https://github.com/rohit7030/job-portal-web-application/blob/main/src/components/Header.jsx): `src/components/Header.jsx`
- [Protected route](https://github.com/rohit7030/job-portal-web-application/blob/main/src/components/protected-route.jsx): access boundary · Guards restricted workflows. · `src/components/protected-route.jsx`
- [Role onboarding](https://github.com/rohit7030/job-portal-web-application/blob/main/src/pages/onboarding.jsx): page · Captures initial role and profile setup. · `src/pages/onboarding.jsx`
- [Request state hook](https://github.com/rohit7030/job-portal-web-application/blob/main/src/hooks/use-fetch.js): data hook · Centralizes asynchronous request state. · `src/hooks/use-fetch.js`

### Candidate workflow

- [Job discovery](https://github.com/rohit7030/job-portal-web-application/blob/main/src/pages/job-listing.jsx): pages · Listing and job-detail views. · `src/pages/job-listing.jsx`
- [Job card](https://github.com/rohit7030/job-portal-web-application/blob/main/src/components/job-card.jsx): Presents jobs in discovery results. · `src/components/job-card.jsx`
- [Apply to job](https://github.com/rohit7030/job-portal-web-application/blob/main/src/components/apply-job.jsx): Submits candidate applications. · `src/components/apply-job.jsx`
- [Saved jobs](https://github.com/rohit7030/job-portal-web-application/blob/main/src/pages/saved-job.jsx): page · `src/pages/saved-job.jsx`

### Recruiter workflow

- [Company context](https://github.com/rohit7030/job-portal-web-application/blob/main/src/components/add-company-drawer.jsx): Creates or selects recruiter company ownership. · `src/components/add-company-drawer.jsx`
- [Post job](https://github.com/rohit7030/job-portal-web-application/blob/main/src/pages/post-job.jsx): page · Creates company-owned job records. · `src/pages/post-job.jsx`
- [Recruiter postings](https://github.com/rohit7030/job-portal-web-application/blob/main/src/pages/my-jobs.jsx): page and component · Shows recruiter-owned jobs. · `src/pages/my-jobs.jsx`
- [Application review](https://github.com/rohit7030/job-portal-web-application/blob/main/src/components/created-applications.jsx): components · Renders candidates and application status. · `src/components/created-applications.jsx`

### Identity and data services

- [Jobs API](https://github.com/rohit7030/job-portal-web-application/blob/main/src/api/apiJobs.js): data module · `src/api/apiJobs.js`
- [Companies API](https://github.com/rohit7030/job-portal-web-application/blob/main/src/api/apiCompanies.js): data module · `src/api/apiCompanies.js`
- [Applications API](https://github.com/rohit7030/job-portal-web-application/blob/main/src/api/apiApplication.js): data module · `src/api/apiApplication.js`
- [Supabase client](https://github.com/rohit7030/job-portal-web-application/blob/main/src/utils/supabase.js): backend client · Uses Vite Supabase URL and anonymous key. · `src/utils/supabase.js`
- **Clerk identity**: authentication service · Provides sign-in and actor identity.
- **Supabase PostgreSQL**: database · Stores jobs, companies, and applications.

## Connections

- Vite bootstrap → App routing: mounts
- App routing → Shared app layout: routes through
- Shared app layout → Header navigation: renders
- App routing → Protected route: guards workflows
- Protected route → Role onboarding: requires setup
- Protected route → Clerk identity: checks identity
- Job discovery → Job card: renders
- Job discovery → Jobs API: loads jobs
- Job discovery → Request state hook: uses
- Apply to job → Applications API: creates application
- Saved jobs → Jobs API: loads saved jobs
- Company context → Companies API: creates/selects company
- Post job → Company context: requires ownership
- Post job → Jobs API: creates job
- Recruiter postings → Jobs API: loads postings
- Application review → Applications API: loads applications
- Jobs API → Supabase client: queries
- Companies API → Supabase client: queries
- Applications API → Supabase client: queries
- Supabase client → Supabase PostgreSQL: persists data
- Clerk identity → Supabase client: identity acts on data