# elfadiliaymen/fil-rouge-hirehub-frontend architecture

> Architecture diagram of the GitHub repository elfadiliaymen/fil-rouge-hirehub-frontend, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/elfadiliaymen/fil-rouge-hirehub-frontend
- Repository: https://github.com/elfadiliaymen/fil-rouge-hirehub-frontend

## Overview

HireHub is a React recruiting frontend for candidates and hiring staff. Users enter through registration or login, then role-protected routes lead to dashboards and domain pages. The application presents public job listings and supports recruiting workflows for offers, CVs, applications, interviews, users, and profiles; these pages exchange data with the HireHub backend through the API client. Authentication stores and reads JWT session claims in browser storage, while route guards enforce client-side access. The excerpts show concrete API calls for authentication, dashboards, offers, applications, users, and interviews; links for other domain pages reflect documented capabilities, not inspected call sites.

Main entry points: [`src/App.jsx`](https://github.com/elfadiliaymen/fil-rouge-hirehub-frontend/blob/main/src/App.jsx) (Route application), [`src/api/api.jsx`](https://github.com/elfadiliaymen/fil-rouge-hirehub-frontend/blob/main/src/api/api.jsx) (HTTP API client), [`src/auth/Auth.jsx`](https://github.com/elfadiliaymen/fil-rouge-hirehub-frontend/blob/main/src/auth/Auth.jsx) (Sign in and register), [`src/pages/Offres`](https://github.com/elfadiliaymen/fil-rouge-hirehub-frontend/tree/main/src/pages/Offres) (Job offers)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["App entry and access"]
  node_app["Route application<br/>[App.jsx]"]
  node_publiclayout["Public pages<br/>[PublicLayout.jsx]"]
  node_protectedlayout["Protected pages"]
  node_roleguard["Role guard<br/>[RoleGuard.jsx]"]
  node_auth["Sign in and register<br/>[Auth.jsx]"]
end

subgraph group_recruiting["Recruiting workflows"]
  node_offers["Job offers"]
  node_cvs["Candidate CVs"]
  node_applications["Applications"]
  node_interviews["Interviews"]
end

subgraph group_account["Accounts and overview"]
  node_dashboard["Dashboard<br/>[Dashboard.jsx]"]
  node_users["User administration"]
  node_profile["User profile<br/>[Profile.jsx]"]
end

subgraph group_services["Session and API"]
  node_token["JWT session<br/>[token.jsx]"]
  node_api["HTTP API client<br/>[api.jsx]"]
end

node_visitor(("Candidate or staff"))
node_storage[("Browser local storage")]
node_backend["HireHub backend API"]

node_visitor -->|"opens"| node_app
node_app -->|"routes"| node_auth
node_app -->|"routes"| node_publiclayout
node_app -->|"routes"| node_protectedlayout
node_app -->|"checks roles"| node_roleguard
node_app -->|"routes"| node_offers
node_app -->|"routes"| node_applications
node_app -->|"routes"| node_cvs
node_app -->|"routes"| node_interviews
node_app -->|"routes"| node_users
node_app -->|"routes"| node_dashboard
node_app -->|"routes"| node_profile
node_auth -->|"sends auth requests"| node_api
node_auth -->|"saves session"| node_token
node_token -->|"reads and writes"| node_storage
node_dashboard -->|"loads summaries"| node_api
node_offers -->|"manages offers"| node_api
node_offers -->|"loads CVs to apply"| node_api
node_cvs -.->|"manages CVs"| node_api
node_applications -->|"manages applications"| node_api
node_interviews -->|"manages interviews"| node_api
node_users -->|"manages users"| node_api
node_profile -.->|"updates profile"| node_api
node_api -->|"sends HTTP requests"| node_backend

click node_app "https://github.com/elfadiliaymen/fil-rouge-hirehub-frontend/blob/main/src/App.jsx"
click node_publiclayout "https://github.com/elfadiliaymen/fil-rouge-hirehub-frontend/blob/main/src/component/PublicLayout.jsx"
click node_protectedlayout "https://github.com/elfadiliaymen/fil-rouge-hirehub-frontend/blob/main/src/component/ProtectedLayout.jsx"
click node_roleguard "https://github.com/elfadiliaymen/fil-rouge-hirehub-frontend/blob/main/src/component/RoleGuard.jsx"
click node_auth "https://github.com/elfadiliaymen/fil-rouge-hirehub-frontend/blob/main/src/auth/Auth.jsx"
click node_dashboard "https://github.com/elfadiliaymen/fil-rouge-hirehub-frontend/blob/main/src/pages/Dashboard.jsx"
click node_offers "https://github.com/elfadiliaymen/fil-rouge-hirehub-frontend/tree/main/src/pages/Offres"
click node_cvs "https://github.com/elfadiliaymen/fil-rouge-hirehub-frontend/tree/main/src/pages/Cvs"
click node_applications "https://github.com/elfadiliaymen/fil-rouge-hirehub-frontend/tree/main/src/pages/Candidatures"
click node_interviews "https://github.com/elfadiliaymen/fil-rouge-hirehub-frontend/tree/main/src/pages/Entretiens"
click node_users "https://github.com/elfadiliaymen/fil-rouge-hirehub-frontend/tree/main/src/pages/Users"
click node_profile "https://github.com/elfadiliaymen/fil-rouge-hirehub-frontend/blob/main/src/pages/Profile.jsx"
click node_token "https://github.com/elfadiliaymen/fil-rouge-hirehub-frontend/blob/main/src/component/token.jsx"
click node_api "https://github.com/elfadiliaymen/fil-rouge-hirehub-frontend/blob/main/src/api/api.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_app,node_publiclayout,node_protectedlayout,node_roleguard,node_auth toneBlue
class node_offers,node_cvs,node_applications,node_interviews,node_storage toneAmber
class node_dashboard,node_users,node_profile,node_backend toneMint
class node_token,node_api toneRose
class node_visitor toneIndigo
```

## Components

### App entry and access

- [Route application](https://github.com/elfadiliaymen/fil-rouge-hirehub-frontend/blob/main/src/App.jsx): `src/App.jsx`
- [Public pages](https://github.com/elfadiliaymen/fil-rouge-hirehub-frontend/blob/main/src/component/PublicLayout.jsx): `src/component/PublicLayout.jsx`
- [Protected pages](https://github.com/elfadiliaymen/fil-rouge-hirehub-frontend/blob/main/src/component/ProtectedLayout.jsx): `src/component/ProtectedLayout.jsx`
- [Role guard](https://github.com/elfadiliaymen/fil-rouge-hirehub-frontend/blob/main/src/component/RoleGuard.jsx): `src/component/RoleGuard.jsx`
- [Sign in and register](https://github.com/elfadiliaymen/fil-rouge-hirehub-frontend/blob/main/src/auth/Auth.jsx): `src/auth/Auth.jsx`

### Recruiting workflows

- [Job offers](https://github.com/elfadiliaymen/fil-rouge-hirehub-frontend/tree/main/src/pages/Offres): `src/pages/Offres`
- [Candidate CVs](https://github.com/elfadiliaymen/fil-rouge-hirehub-frontend/tree/main/src/pages/Cvs): `src/pages/Cvs`
- [Applications](https://github.com/elfadiliaymen/fil-rouge-hirehub-frontend/tree/main/src/pages/Candidatures): `src/pages/Candidatures`
- [Interviews](https://github.com/elfadiliaymen/fil-rouge-hirehub-frontend/tree/main/src/pages/Entretiens): `src/pages/Entretiens`

### Accounts and overview

- [Dashboard](https://github.com/elfadiliaymen/fil-rouge-hirehub-frontend/blob/main/src/pages/Dashboard.jsx): `src/pages/Dashboard.jsx`
- [User administration](https://github.com/elfadiliaymen/fil-rouge-hirehub-frontend/tree/main/src/pages/Users): `src/pages/Users`
- [User profile](https://github.com/elfadiliaymen/fil-rouge-hirehub-frontend/blob/main/src/pages/Profile.jsx): `src/pages/Profile.jsx`

### Session and API

- [JWT session](https://github.com/elfadiliaymen/fil-rouge-hirehub-frontend/blob/main/src/component/token.jsx): `src/component/token.jsx`
- [HTTP API client](https://github.com/elfadiliaymen/fil-rouge-hirehub-frontend/blob/main/src/api/api.jsx): `src/api/api.jsx`

### Other components

- **Candidate or staff**
- **Browser local storage**
- **HireHub backend API**

## Connections

- Candidate or staff → Route application: opens
- Route application → Sign in and register: routes
- Route application → Public pages: routes
- Route application → Protected pages: routes
- Route application → Role guard: checks roles
- Route application → Job offers: routes
- Route application → Applications: routes
- Route application → Candidate CVs: routes
- Route application → Interviews: routes
- Route application → User administration: routes
- Route application → Dashboard: routes
- Route application → User profile: routes
- Sign in and register → HTTP API client: sends auth requests
- Sign in and register → JWT session: saves session
- JWT session → Browser local storage: reads and writes
- Dashboard → HTTP API client: loads summaries
- Job offers → HTTP API client: manages offers
- Job offers → HTTP API client: loads CVs to apply
- Candidate CVs → HTTP API client: manages CVs
- Applications → HTTP API client: manages applications
- Interviews → HTTP API client: manages interviews
- User administration → HTTP API client: manages users
- User profile → HTTP API client: updates profile
- HTTP API client → HireHub backend API: sends HTTP requests