# shuvrotokumar/halalhire-frontend architecture

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

- Interactive diagram: https://gitdiagram.com/shuvrotokumar/halalhire-frontend
- Repository: https://github.com/shuvrotokumar/halalhire-frontend

## Overview

1. **Overall shape**
   - This is a **Next.js App Router frontend** for HalalHire, not a backend service.
   - The repository is organized primarily by **route folders under `app/`**, with each route owning its page entrypoint, local components, and CSS Modules.

2. **Composition root**
   - `app/layout.tsx` is the app shell where the major cross-cutting providers are mounted.
   - The important global layers are:
     - **Redux provider**
     - **i18n provider**
     - global styling via `app/globals.css`
   - This is the boundary where app-wide state, localization, and styling become available to all routes.

3. **Main product domains**
   - The UI splits into a few large domains:
     - **Marketing/content pages**: home, about, industries, resources, FAQ, contact, legal pages
     - **Jobs marketplace**: job listings and job detail pages
     - **Companies marketplace**: company listing and company detail pages
     - **User/company account flows**: auth, onboarding, profiles, verification, settings, subscriptions
   - These domains are mostly isolated as route-level feature trees.

4. **Public marketing and information pages**
   - Routes like `app/page.tsx`, `about`, `industries`, `resources`, `contact`, `faq`, `privacy`, `terms`, `imprint`, `cookies`, and `accessibility` are mostly informational.
   - They are composed from reusable section components under the same route subtree, which suggests a **content-driven frontend** with strong page composition rather than a monolithic CMS layer.

5. **Job marketplace subsystem**
   - `app/jobs` and `app/jobs/[id]` implement the job browsing and job detail experience.
   - Shared building blocks live in `app/components/Job*`:
     - search and filtering
     - job cards and detail sections
     - sidebar, match, and feature panels
     - modals for edit/delete/application actions
   - User-facing job actions also connect to saved/applied jobs pages, indicating a workflow from **browse → inspect → act → track**.

6. **Company marketplace subsystem**
   - `app/companies` and `app/companies/[id]` cover company discovery and company profile detail pages.
   - The company detail page is split into focused sections like hero, stats, about, sidebar, and CTA blocks.
   - Related company lifecycle pages exist separately: onboarding, verification, subscription, team management, active subscriptions, profile, and requirements.

7. **Authenticated user and onboarding flows**
   - Routes such as `auth`, `completed_auth`, `forgot_pass`, `reset_pass`, `forgot_code`, `create_user_verify`, `identity_doc`, `personal_info`, `professional_info`, and `photos_finalize` form a staged account setup and recovery flow.
   - `user_profile`, `user_settings`, `user_saved_jobs`, and `user_applied_jobs` represent the post-auth user account area.
   - This suggests the frontend supports **multi-step identity and profile completion**, not just simple login/logout.

8. **Company admin/workflow flows**
   - Routes like `company_profile`, `company_team`, `company_ver`, `company_req`, `company_subscription`, `company_active_subscriptions`, and `company_on` indicate a parallel company-side administration area.
   - These screens are likely tied to subscription, verification, team membership, and job request/approval workflows.
   - The presence of request detail routes and decision modals points to a **review/approval process** for employer-side actions.

9. **Shared interaction layer**
   - `app/components/` contains reusable UI primitives and cross-route interaction components such as:
     - navbar, footer, hero/feature blocks
     - job and company cards
     - modal dialogs for apply/chat/confirm/edit/delete/accept/reject
     - forms and side panels
   - `app/context/ModalContext.tsx`, `AuthContext.tsx`, and `RegistrationContext.tsx` provide local UI/workflow state that sits above individual pages but below the Redux data layer.

10. **State management and backend boundary**
   - The persistent application state is handled with **Redux Toolkit**, with slices in `redux/Slice/` for auth and registration.
   - Server data is fetched through **RTK Query** endpoint modules in `redux/api/`.
   - `redux/api/baseApi.js` is the key integration boundary: it reads the API base URL from `config/envConfig.js`, so the frontend is configured to talk to an external backend rather than hosting business logic itself.
   - `services/auth.service.js`, `Utils/decode-access-token.js`, `Utils/local-storage.js`, and `redux/TokenCleanup.jsx` handle token/storage concerns around authentication.

11. **Localization subsystem**
   - Internationalization is a first-class architectural concern.
   - `i18n.ts` and `i18next.config.ts` define the locale setup, while translation files live in `public/locales/<lang>/translation.json`.
   - Supported languages include **Arabic, German, English, and Turkish**.
   - The selected language is persisted via the **`i18next` cookie**, making localization state part of the client-side session experience.

12. **Static assets and delivery**
   - `public/` holds static assets, including locale JSON and a demo video.
   - Styling is primarily through **CSS Modules** colocated with each component, with global styles reserved for app-wide defaults.
   - The repo also includes standard frontend tooling: TypeScript, ESLint, PostCSS/Tailwind support, and Next.js build/runtime configuration.

13. **Architecture in one sentence**
   - The app is a **localized, Redux-powered Next.js frontend** that routes users through public content, job/company browsing, and authenticated employer/candidate workflows, while all remote data comes from an external API layer behind RTK Query.

Main entry points: [`app/components/Navbar/Navbar.tsx`](https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/components/Navbar/Navbar.tsx) (Shared UI), [`app/layout.tsx`](https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/layout.tsx) (App shell), [`redux/Slice/authSlice.js`](https://github.com/shuvrotokumar/halalhire-frontend/blob/main/redux/Slice/authSlice.js) (Redux slices), [`redux/api/baseApi.js`](https://github.com/shuvrotokumar/halalhire-frontend/blob/main/redux/api/baseApi.js) (RTK Query APIs)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_platform["Platform shell"]
  node_app_layout["App shell<br/>Next layout<br/>[layout.tsx]"]
  node_redux_provider["Redux provider<br/>Store provider<br/>[ReduxProvider.jsx]"]
  node_i18n_provider["I18n provider<br/>Locale provider<br/>[I18nProvider.tsx]"]
  node_globals_css["Global styles<br/>CSS globals<br/>[globals.css]"]
  node_shared_ui["Shared UI<br/>Reusable components<br/>[Navbar.tsx]"]
  node_localization_files["Translations<br/>Locale assets<br/>[translation.json]"]
end

subgraph group_marketing["Public content"]
  node_home_marketing["Home page<br/>Marketing page<br/>[page.tsx]"]
  node_about_page["About page<br/>Content page<br/>[page.tsx]"]
  node_industries_page["Industries page<br/>Content page<br/>[page.tsx]"]
  node_resources_page["Resources page<br/>Content page<br/>[page.tsx]"]
  node_contact_page["Contact page<br/>[page.tsx]"]
  node_legal_pages["Legal pages<br/>Policy pages<br/>[page.tsx]"]
end

subgraph group_marketplace["Marketplaces"]
  node_jobs_page["Jobs browse<br/>Job listing<br/>[page.tsx]"]
  node_job_details_page["Job details<br/>[page.tsx]"]
  node_companies_page["Companies browse<br/>Company listing<br/>[page.tsx]"]
  node_company_details_page["Company details<br/>Company profile<br/>[page.tsx]"]
end

subgraph group_account["Accounts and workflows"]
  node_auth_flows["Auth flow<br/>Auth and recovery<br/>[page.tsx]"]
  node_user_onboarding["Onboarding flow<br/>Identity setup<br/>[page.tsx]"]
  node_user_account["User account<br/>Profile area<br/>[page.tsx]"]
  node_company_admin["Company admin<br/>Employer area<br/>[page.tsx]"]
end

subgraph group_state["State and API"]
  node_context_state["UI context<br/>Client contexts<br/>[AuthContext.tsx]"]
  node_redux_slices["Redux slices<br/>App state<br/>[authSlice.js]"]
  node_rtk_query_api["RTK Query APIs<br/>API layer<br/>[baseApi.js]"]
  node_backend_config["API config<br/>Env boundary<br/>[envConfig.js]"]
  node_auth_service["Auth service<br/>Token utils<br/>[auth.service.js]"]
end

node_app_layout -->|"mounts"| node_redux_provider
node_app_layout -->|"mounts"| node_i18n_provider
node_app_layout -->|"loads"| node_globals_css
node_app_layout -->|"uses"| node_shared_ui
node_i18n_provider -->|"reads"| node_localization_files
node_shared_ui -->|"composes"| node_home_marketing
node_shared_ui -->|"composes"| node_jobs_page
node_shared_ui -->|"composes"| node_companies_page
node_shared_ui -->|"composes"| node_company_details_page
node_shared_ui -->|"composes"| node_job_details_page
node_jobs_page -->|"navigates"| node_job_details_page
node_companies_page -->|"navigates"| node_company_details_page
node_auth_flows -->|"feeds"| node_user_onboarding
node_user_onboarding -->|"completes"| node_user_account
node_company_admin -->|"supports"| node_company_details_page
node_context_state -->|"coordinates"| node_shared_ui
node_context_state -->|"augments"| node_redux_slices
node_redux_slices -->|"consumes"| node_rtk_query_api
node_rtk_query_api -->|"configured by"| node_backend_config
node_auth_service -->|"supports"| node_redux_slices
node_auth_service -->|"supports"| node_rtk_query_api
node_legal_pages -->|"extends"| node_resources_page
node_about_page -->|"uses"| node_shared_ui
node_industries_page -->|"uses"| node_shared_ui
node_resources_page -->|"uses"| node_shared_ui
node_contact_page -->|"uses"| node_shared_ui

click node_app_layout "https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/layout.tsx"
click node_redux_provider "https://github.com/shuvrotokumar/halalhire-frontend/blob/main/redux/ReduxProvider.jsx"
click node_i18n_provider "https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/components/I18nProvider.tsx"
click node_globals_css "https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/globals.css"
click node_home_marketing "https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/page.tsx"
click node_about_page "https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/about/page.tsx"
click node_industries_page "https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/industries/page.tsx"
click node_resources_page "https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/resources/page.tsx"
click node_contact_page "https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/contact/page.tsx"
click node_legal_pages "https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/privacy/page.tsx"
click node_jobs_page "https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/jobs/page.tsx"
click node_job_details_page "https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/jobs/[id]/page.tsx"
click node_companies_page "https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/companies/page.tsx"
click node_company_details_page "https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/companies/[id]/page.tsx"
click node_auth_flows "https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/auth/page.tsx"
click node_user_onboarding "https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/create_user_verify/page.tsx"
click node_user_account "https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/user_profile/page.tsx"
click node_company_admin "https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/company_profile/page.tsx"
click node_shared_ui "https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/components/Navbar/Navbar.tsx"
click node_context_state "https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/context/AuthContext.tsx"
click node_redux_slices "https://github.com/shuvrotokumar/halalhire-frontend/blob/main/redux/Slice/authSlice.js"
click node_rtk_query_api "https://github.com/shuvrotokumar/halalhire-frontend/blob/main/redux/api/baseApi.js"
click node_backend_config "https://github.com/shuvrotokumar/halalhire-frontend/blob/main/config/envConfig.js"
click node_auth_service "https://github.com/shuvrotokumar/halalhire-frontend/blob/main/services/auth.service.js"
click node_localization_files "https://github.com/shuvrotokumar/halalhire-frontend/blob/main/public/locales/en/translation.json"

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_layout,node_redux_provider,node_i18n_provider,node_globals_css,node_shared_ui,node_localization_files toneBlue
class node_home_marketing,node_about_page,node_industries_page,node_resources_page,node_contact_page,node_legal_pages toneAmber
class node_jobs_page,node_job_details_page,node_companies_page,node_company_details_page toneMint
class node_auth_flows,node_user_onboarding,node_user_account,node_company_admin toneRose
class node_context_state,node_redux_slices,node_rtk_query_api,node_backend_config,node_auth_service toneIndigo
```

## Components

### Platform shell

App-wide composition root, providers, localization, and shared infrastructure

- [App shell](https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/layout.tsx): Next layout · Root layout that mounts the global providers and styles · `app/layout.tsx`
- [Redux provider](https://github.com/shuvrotokumar/halalhire-frontend/blob/main/redux/ReduxProvider.jsx): Store provider · Global Redux wiring for app state · `redux/ReduxProvider.jsx`
- [I18n provider](https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/components/I18nProvider.tsx): Locale provider · Client-side localization provider used across routes · `app/components/I18nProvider.tsx`
- [Global styles](https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/globals.css): CSS globals · App-wide baseline styling · `app/globals.css`
- [Shared UI](https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/components/Navbar/Navbar.tsx): Reusable components · Cross-route navigation, cards, sections, forms, and modals · `app/components/Navbar/Navbar.tsx`
- [Translations](https://github.com/shuvrotokumar/halalhire-frontend/blob/main/public/locales/en/translation.json): Locale assets · Language JSON files for Arabic, German, English, and Turkish · `public/locales/en/translation.json`

### Public content

Informational and promotional routes composed from local section components

- [Home page](https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/page.tsx): Marketing page · Primary landing page and top-level entry route · `app/page.tsx`
- [About page](https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/about/page.tsx): Content page · Company story and mission content · `app/about/page.tsx`
- [Industries page](https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/industries/page.tsx): Content page · Industry-focused marketing content · `app/industries/page.tsx`
- [Resources page](https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/resources/page.tsx): Content page · Guides and supporting information for users · `app/resources/page.tsx`
- [Contact page](https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/contact/page.tsx): Contact page · Contact form, map, and support routes · `app/contact/page.tsx`
- [Legal pages](https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/privacy/page.tsx): Policy pages · Privacy, terms, imprint, cookies, and accessibility routes · `app/privacy/page.tsx`

### Marketplaces

Job and company discovery experiences

- [Jobs browse](https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/jobs/page.tsx): Job listing · Job search, filtering, and listing experience · `app/jobs/page.tsx`
- [Job details](https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/jobs/[id]/page.tsx): Job detail · Single-job detail route with action panels and modals · `app/jobs/[id]/page.tsx`
- [Companies browse](https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/companies/page.tsx): Company listing · Company discovery and featured company browsing · `app/companies/page.tsx`
- [Company details](https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/companies/[id]/page.tsx): Company profile · Single-company profile route with stats, sidebar, and CTA · `app/companies/[id]/page.tsx`

### Accounts and workflows

Authentication, onboarding, profile, verification, and admin flows

- [Auth flow](https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/auth/page.tsx): Auth and recovery · Login, password recovery, and auth completion routes · `app/auth/page.tsx`
- [Onboarding flow](https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/create_user_verify/page.tsx): Identity setup · Multi-step identity, personal, professional, and photo completion routes · `app/create_user_verify/page.tsx`
- [User account](https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/user_profile/page.tsx): Profile area · Saved jobs, applied jobs, profile, and settings routes · `app/user_profile/page.tsx`
- [Company admin](https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/company_profile/page.tsx): Employer area · Company profile, team, verification, subscription, and request routes · `app/company_profile/page.tsx`

### State and API

Redux state, RTK Query boundary, and external backend integration

- [UI context](https://github.com/shuvrotokumar/halalhire-frontend/blob/main/app/context/AuthContext.tsx): Client contexts · Modal, auth, and registration workflow state · `app/context/AuthContext.tsx`
- [Redux slices](https://github.com/shuvrotokumar/halalhire-frontend/blob/main/redux/Slice/authSlice.js): App state · Auth and registration slices for persistent client state · `redux/Slice/authSlice.js`
- [RTK Query APIs](https://github.com/shuvrotokumar/halalhire-frontend/blob/main/redux/api/baseApi.js): API layer · Feature endpoint modules that fetch remote data · `redux/api/baseApi.js`
- [API config](https://github.com/shuvrotokumar/halalhire-frontend/blob/main/config/envConfig.js): Env boundary · External API base URL configuration · `config/envConfig.js`
- [Auth service](https://github.com/shuvrotokumar/halalhire-frontend/blob/main/services/auth.service.js): Token utils · Token decoding, local storage, and auth service helpers · `services/auth.service.js`

## Connections

- App shell → Redux provider: mounts · Root layout wraps the app in Redux
- App shell → I18n provider: mounts · Root layout enables localization
- App shell → Global styles: loads · Global CSS is applied application-wide
- App shell → Shared UI: uses · Layout composes shared navigation and shell UI
- I18n provider → Translations: reads · Provider resolves translations from locale files
- Shared UI → Home page: composes · Shared components assemble marketing pages
- Shared UI → Jobs browse: composes · Shared components power job browsing UI
- Shared UI → Companies browse: composes · Shared components power company browsing UI
- Shared UI → Company details: composes · Shared components support company detail sections
- Shared UI → Job details: composes · Shared components support job detail panels
- Jobs browse → Job details: navigates · Listing leads into job detail flow
- Companies browse → Company details: navigates · Listing leads into company detail flow
- Auth flow → Onboarding flow: feeds · Authentication hands off into staged onboarding
- Onboarding flow → User account: completes · Completed profiles enter the user account area
- Company admin → Company details: supports · Employer admin state aligns with company profile data
- UI context → Shared UI: coordinates · Modals and workflow state drive shared interactions
- UI context → Redux slices: augments · Local workflow state sits above persisted Redux state
- Redux slices → RTK Query APIs: consumes · Slices are paired with server data fetched through RTK Query
- RTK Query APIs → API config: configured by · Base API uses external backend configuration
- Auth service → Redux slices: supports · Token and storage helpers support auth state
- Auth service → RTK Query APIs: supports · Auth helpers integrate with API calls and session handling
- Legal pages → Resources page: extends · Policy and compliance pages complement informational content
- About page → Shared UI: uses · About route composes local section components
- Industries page → Shared UI: uses · Industries route composes local section components
- Resources page → Shared UI: uses · Resources route composes local section components
- Contact page → Shared UI: uses · Contact route composes local sections and form UI