# cheplop/hireflow architecture

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

- Interactive diagram: https://gitdiagram.com/cheplop/hireflow
- Repository: https://github.com/cheplop/hireflow

## Overview

HireFlow is an Expo mobile job-seeking app. Its principal user flow is sign-in or account setup, browsing local sample listings, and opening a listing’s details; the details screen currently presents an application action without submitting or persisting an application. A separate posts area uses a context provider for remote CRUD against DummyJSON. The map includes the documented onboarding stages and application/profile tabs, but their unsampled behavior is not inferred beyond the available route structure and references.

Main entry points: [`components/PrimaryButton.js`](https://github.com/cheplop/hireflow/blob/main/components/PrimaryButton.js) (Primary button), [`screens/HomeScreen.js`](https://github.com/cheplop/hireflow/blob/main/screens/HomeScreen.js) (Job listing feed), [`app/index.js`](https://github.com/cheplop/hireflow/blob/main/app/index.js) (Sign-in), [`screens/JobDetailsScreen.js`](https://github.com/cheplop/hireflow/blob/main/screens/JobDetailsScreen.js) (Job details)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_account["Account setup"]
  node_login["Sign-in<br/>[index.js]"]
  node_registration["Account registration<br/>[index.js]"]
  node_basic_info["Basic information"]
  node_birth_date["Birth date<br/>[birthDate.js]"]
  node_education["Education"]
  node_work_history["Work experience<br/>[workExperience.js]"]
  node_profile_setup["Profile setup<br/>[setupProfile.js]"]
end

subgraph group_jobs["Job discovery"]
  node_home["Job listing feed<br/>[HomeScreen.js]"]
  node_job_data["Sample job data<br/>[jobs.js]"]
  node_job_card["Listing card<br/>[ApplyCard.js]"]
  node_job_details["Job details"]
  node_details_card["Details card<br/>[JobDetailsCard.js]"]
end

subgraph group_engagement["Applications and profile"]
  node_applications["Applications tab"]
  node_application_card["Application card"]
  node_profile["Profile tab<br/>[profile.js]"]
end

subgraph group_posts["Posts feature"]
  node_posts_feed["Posts feed<br/>[index.js]"]
  node_post_detail["Post detail<br/>[index.js]"]
  node_posts_state["Posts state and CRUD<br/>[PostsContext.js]"]
end

subgraph group_ui["Shared UI"]
  node_auth_input["Input control<br/>[AuthInput.js]"]
  node_primary_button["Primary button<br/>[PrimaryButton.js]"]
  node_theme["Theme tokens<br/>[theme.js]"]
end

node_job_seeker(("Job seeker"))
node_dummyjson{{"DummyJSON API"}}

node_job_seeker -->|"opens app"| node_login
node_login -->|"routes on success"| node_home
node_login -->|"links to"| node_registration
node_registration -->|"continues to"| node_basic_info
node_job_seeker -->|"creates account"| node_registration
node_basic_info -->|"renders"| node_auth_input
node_basic_info -->|"renders"| node_primary_button
node_birth_date -->|"renders"| node_auth_input
node_birth_date -->|"renders"| node_primary_button
node_education -->|"renders"| node_primary_button
node_work_history -->|"renders"| node_primary_button
node_job_seeker -->|"browses jobs"| node_home
node_home -->|"reads listings"| node_job_data
node_home -->|"renders cards"| node_job_card
node_job_card -->|"renders"| node_primary_button
node_job_card -->|"opens selected listing"| node_job_details
node_job_details -->|"finds selected job"| node_job_data
node_job_details -->|"renders summary"| node_details_card
node_job_details -->|"renders action"| node_primary_button
node_job_seeker -->|"views tab"| node_applications
node_applications -->|"reads listings"| node_job_data
node_applications -->|"renders cards"| node_application_card
node_job_seeker -.->|"opens profile tab"| node_profile
node_posts_feed -->|"uses context"| node_posts_state
node_post_detail -->|"uses context"| node_posts_state
node_posts_state -->|"fetches and mutates"| node_dummyjson
node_login -->|"renders"| node_auth_input
node_login -->|"renders"| node_primary_button
node_registration -->|"renders"| node_auth_input
node_registration -->|"renders"| node_primary_button
node_home -->|"renders search"| node_auth_input
node_home -->|"renders filters"| node_primary_button
node_job_details -->|"uses styling"| node_theme
node_home -->|"uses styling"| node_theme
node_applications -->|"uses styling"| node_theme
node_posts_state -->|"provides state"| node_posts_feed

click node_login "https://github.com/cheplop/hireflow/blob/main/app/index.js"
click node_registration "https://github.com/cheplop/hireflow/blob/main/app/registration/index.js"
click node_basic_info "https://github.com/cheplop/hireflow/blob/main/app/registration/basicInformation.js"
click node_birth_date "https://github.com/cheplop/hireflow/blob/main/app/registration/birthDate.js"
click node_education "https://github.com/cheplop/hireflow/blob/main/app/registration/educationalBackground.js"
click node_work_history "https://github.com/cheplop/hireflow/blob/main/app/registration/workExperience.js"
click node_profile_setup "https://github.com/cheplop/hireflow/blob/main/app/registration/setupProfile.js"
click node_home "https://github.com/cheplop/hireflow/blob/main/screens/HomeScreen.js"
click node_job_data "https://github.com/cheplop/hireflow/blob/main/data/jobs.js"
click node_job_card "https://github.com/cheplop/hireflow/blob/main/components/ApplyCard.js"
click node_job_details "https://github.com/cheplop/hireflow/blob/main/screens/JobDetailsScreen.js"
click node_details_card "https://github.com/cheplop/hireflow/blob/main/components/JobDetailsCard.js"
click node_applications "https://github.com/cheplop/hireflow/blob/main/screens/ApplicationScreen.js"
click node_application_card "https://github.com/cheplop/hireflow/blob/main/components/ApplicationsCard.js"
click node_profile "https://github.com/cheplop/hireflow/blob/main/app/(tabs)/profile.js"
click node_posts_feed "https://github.com/cheplop/hireflow/blob/main/app/(tabs)/posts/index.js"
click node_post_detail "https://github.com/cheplop/hireflow/blob/main/app/(tabs)/posts/%5Bid%5D/index.js"
click node_posts_state "https://github.com/cheplop/hireflow/blob/main/contexts/PostsContext.js"
click node_auth_input "https://github.com/cheplop/hireflow/blob/main/components/AuthInput.js"
click node_primary_button "https://github.com/cheplop/hireflow/blob/main/components/PrimaryButton.js"
click node_theme "https://github.com/cheplop/hireflow/blob/main/styles/theme.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_login,node_registration,node_basic_info,node_birth_date,node_education,node_work_history,node_profile_setup toneBlue
class node_home,node_job_data,node_job_card,node_job_details,node_details_card toneAmber
class node_applications,node_application_card,node_profile,node_dummyjson toneMint
class node_posts_feed,node_post_detail,node_posts_state toneRose
class node_auth_input,node_primary_button,node_theme,node_job_seeker toneIndigo
```

## Components

### Account setup

- [Sign-in](https://github.com/cheplop/hireflow/blob/main/app/index.js): `app/index.js`
- [Account registration](https://github.com/cheplop/hireflow/blob/main/app/registration/index.js): `app/registration/index.js`
- [Basic information](https://github.com/cheplop/hireflow/blob/main/app/registration/basicInformation.js): `app/registration/basicInformation.js`
- [Birth date](https://github.com/cheplop/hireflow/blob/main/app/registration/birthDate.js): `app/registration/birthDate.js`
- [Education](https://github.com/cheplop/hireflow/blob/main/app/registration/educationalBackground.js): `app/registration/educationalBackground.js`
- [Work experience](https://github.com/cheplop/hireflow/blob/main/app/registration/workExperience.js): `app/registration/workExperience.js`
- [Profile setup](https://github.com/cheplop/hireflow/blob/main/app/registration/setupProfile.js): `app/registration/setupProfile.js`

### Job discovery

- [Job listing feed](https://github.com/cheplop/hireflow/blob/main/screens/HomeScreen.js): `screens/HomeScreen.js`
- [Sample job data](https://github.com/cheplop/hireflow/blob/main/data/jobs.js): `data/jobs.js`
- [Listing card](https://github.com/cheplop/hireflow/blob/main/components/ApplyCard.js): `components/ApplyCard.js`
- [Job details](https://github.com/cheplop/hireflow/blob/main/screens/JobDetailsScreen.js): `screens/JobDetailsScreen.js`
- [Details card](https://github.com/cheplop/hireflow/blob/main/components/JobDetailsCard.js): `components/JobDetailsCard.js`

### Applications and profile

- [Applications tab](https://github.com/cheplop/hireflow/blob/main/screens/ApplicationScreen.js): `screens/ApplicationScreen.js`
- [Application card](https://github.com/cheplop/hireflow/blob/main/components/ApplicationsCard.js): `components/ApplicationsCard.js`
- [Profile tab](https://github.com/cheplop/hireflow/blob/main/app/(tabs)/profile.js): `app/(tabs)/profile.js`

### Posts feature

- [Posts feed](https://github.com/cheplop/hireflow/blob/main/app/(tabs)/posts/index.js): `app/(tabs)/posts/index.js`
- [Post detail](https://github.com/cheplop/hireflow/blob/main/app/(tabs)/posts/%5Bid%5D/index.js): `app/(tabs)/posts/[id]/index.js`
- [Posts state and CRUD](https://github.com/cheplop/hireflow/blob/main/contexts/PostsContext.js): `contexts/PostsContext.js`

### Shared UI

- [Input control](https://github.com/cheplop/hireflow/blob/main/components/AuthInput.js): `components/AuthInput.js`
- [Primary button](https://github.com/cheplop/hireflow/blob/main/components/PrimaryButton.js): `components/PrimaryButton.js`
- [Theme tokens](https://github.com/cheplop/hireflow/blob/main/styles/theme.js): `styles/theme.js`

### Other components

- **Job seeker**
- **DummyJSON API**

## Connections

- Job seeker → Sign-in: opens app (evidence: `README.md`)
- Sign-in → Job listing feed: routes on success (evidence: `app/index.js`)
- Sign-in → Account registration: links to (evidence: `app/index.js`)
- Account registration → Basic information: continues to (evidence: `app/registration/index.js`)
- Job seeker → Account registration: creates account (evidence: `README.md`)
- Basic information → Input control: renders (evidence: `app/registration/basicInformation.js`)
- Basic information → Primary button: renders (evidence: `app/registration/basicInformation.js`)
- Birth date → Input control: renders (evidence: `app/registration/birthDate.js`)
- Birth date → Primary button: renders (evidence: `app/registration/birthDate.js`)
- Education → Primary button: renders (evidence: `app/registration/educationalBackground.js`)
- Work experience → Primary button: renders (evidence: `app/registration/workExperience.js`)
- Job seeker → Job listing feed: browses jobs (evidence: `README.md`)
- Job listing feed → Sample job data: reads listings (evidence: `screens/HomeScreen.js`)
- Job listing feed → Listing card: renders cards (evidence: `screens/HomeScreen.js`)
- Listing card → Primary button: renders (evidence: `components/ApplyCard.js`)
- Listing card → Job details: opens selected listing
- Job details → Sample job data: finds selected job (evidence: `screens/JobDetailsScreen.js`)
- Job details → Details card: renders summary (evidence: `screens/JobDetailsScreen.js`)
- Job details → Primary button: renders action (evidence: `screens/JobDetailsScreen.js`)
- Job seeker → Applications tab: views tab (evidence: `README.md`)
- Applications tab → Sample job data: reads listings (evidence: `screens/ApplicationScreen.js`)
- Applications tab → Application card: renders cards (evidence: `screens/ApplicationScreen.js`)
- Job seeker → Profile tab: opens profile tab
- Posts feed → Posts state and CRUD: uses context (evidence: `app/(tabs)/posts/index.js`)
- Post detail → Posts state and CRUD: uses context (evidence: `app/(tabs)/posts/[id]/index.js`)
- Posts state and CRUD → DummyJSON API: fetches and mutates (evidence: `contexts/PostsContext.js`)
- Sign-in → Input control: renders (evidence: `app/index.js`)
- Sign-in → Primary button: renders (evidence: `app/index.js`)
- Account registration → Input control: renders (evidence: `app/registration/index.js`)
- Account registration → Primary button: renders (evidence: `app/registration/index.js`)
- Job listing feed → Input control: renders search (evidence: `screens/HomeScreen.js`)
- Job listing feed → Primary button: renders filters (evidence: `screens/HomeScreen.js`)
- Job details → Theme tokens: uses styling (evidence: `screens/JobDetailsScreen.js`)
- Job listing feed → Theme tokens: uses styling (evidence: `screens/HomeScreen.js`)
- Applications tab → Theme tokens: uses styling (evidence: `screens/ApplicationScreen.js`)
- Posts state and CRUD → Posts feed: provides state (evidence: `app/(tabs)/posts/index.js`)