# leets-official/job-is-fe architecture

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

- Interactive diagram: https://gitdiagram.com/leets-official/job-is-fe
- Repository: https://github.com/leets-official/job-is-fe

## Overview

Job-is-FE is the React frontend for a Korean job-information service. Its user-facing routes cover sign-in and onboarding, aptitude quizzes, job discovery and detail, personalized recommendations, saved-job history, profile documents, and account settings. The main flow is route selection into feature screens, with feature hooks using API modules and shared request infrastructure; authentication state supports session handling. The README establishes the product scope, while route and source-index evidence supports only some internal links, so unsampled feature relationships are not inferred.

Main entry points: [`src/routes/router.tsx`](https://github.com/leets-official/job-is-fe/blob/dev/src/routes/router.tsx) (Route map), [`src/App.tsx`](https://github.com/leets-official/job-is-fe/blob/dev/src/App.tsx) (App shell), [`src/features/login`](https://github.com/leets-official/job-is-fe/tree/dev/src/features/login) (Sign-in and recovery), [`src/pages/QuizPage/QuizPage.tsx`](https://github.com/leets-official/job-is-fe/blob/dev/src/pages/QuizPage/QuizPage.tsx) (Aptitude quiz)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_app["App shell<br/>[App.tsx]"]
  node_router["Route map<br/>[router.tsx]"]
  node_query["Query provider<br/>[QueryProvider.tsx]"]
end

subgraph group_identity["Identity and onboarding"]
  node_login["Sign-in and recovery"]
  node_authstate[("Auth session state<br/>[useAuthStore.ts]")]
  node_onboarding["Profile onboarding"]
  node_quiz["Aptitude quiz<br/>[QuizPage.tsx]"]
end

subgraph group_discovery["Job discovery"]
  node_explore["Job exploration<br/>[ExplorePage.tsx]"]
  node_explorefilters["Search and filters"]
  node_jobdetail["Job detail<br/>[JobDetailPage.tsx]"]
end

subgraph group_personalized["Recommendations and profile"]
  node_recommendations["Recommendations"]
  node_saved["Saved jobs"]
  node_profile["Profile documents"]
  node_docmanager["Document actions"]
  node_settings["Account settings"]
end

subgraph group_platform["Data and services"]
  node_authapi["Authentication API<br/>[auth.ts]"]
  node_jobsapi["Jobs API<br/>[jobs.ts]"]
  node_profileapi["Profile API<br/>[profile.ts]"]
  node_quizapi["Quiz API<br/>[quiz.ts]"]
  node_transport["HTTP transport<br/>[client.ts]"]
  node_request["Request helpers<br/>[request.ts]"]
  node_querykeys["Query key catalog<br/>[queryKey.ts]"]
end

node_user(("Job seeker"))

node_user -->|"uses"| node_app
node_app -->|"mounts routes"| node_router
node_app -->|"provides queries"| node_query
node_router -->|"routes to"| node_login
node_router -.->|"routes to"| node_onboarding
node_router -->|"routes to"| node_quiz
node_router -->|"routes to"| node_explore
node_router -->|"routes to"| node_jobdetail
node_router -->|"routes to"| node_recommendations
node_router -->|"routes to"| node_saved
node_router -->|"routes to"| node_profile
node_router -->|"routes to"| node_settings
node_login -->|"uses"| node_authapi
node_login -->|"updates session"| node_authstate
node_onboarding -->|"uses"| node_profileapi
node_quiz -->|"uses"| node_quizapi
node_quiz -->|"uses keys"| node_querykeys
node_explore -.->|"uses filters"| node_explorefilters
node_explorefilters -->|"queries jobs"| node_jobsapi
node_authapi -->|"posts with CSRF"| node_transport
node_authapi -->|"sends requests"| node_request
node_jobsapi -->|"sends requests"| node_request
node_profileapi -->|"sends requests"| node_request
node_transport -->|"reads tokens"| node_authstate
node_profile -->|"uses actions"| node_docmanager
node_docmanager -.->|"loads files"| node_profileapi

click node_app "https://github.com/leets-official/job-is-fe/blob/dev/src/App.tsx"
click node_router "https://github.com/leets-official/job-is-fe/blob/dev/src/routes/router.tsx"
click node_query "https://github.com/leets-official/job-is-fe/blob/dev/src/providers/QueryProvider.tsx"
click node_login "https://github.com/leets-official/job-is-fe/tree/dev/src/features/login"
click node_authstate "https://github.com/leets-official/job-is-fe/blob/dev/src/store/useAuthStore.ts"
click node_onboarding "https://github.com/leets-official/job-is-fe/tree/dev/src/features/onboarding"
click node_quiz "https://github.com/leets-official/job-is-fe/blob/dev/src/pages/QuizPage/QuizPage.tsx"
click node_explore "https://github.com/leets-official/job-is-fe/blob/dev/src/pages/ExplorePage/ExplorePage.tsx"
click node_explorefilters "https://github.com/leets-official/job-is-fe/blob/dev/src/features/jobs/hooks/useExploreFilters.ts"
click node_jobdetail "https://github.com/leets-official/job-is-fe/blob/dev/src/pages/JobDetailPage/JobDetailPage.tsx"
click node_recommendations "https://github.com/leets-official/job-is-fe/tree/dev/src/features/recommendations"
click node_saved "https://github.com/leets-official/job-is-fe/tree/dev/src/features/savedJobs"
click node_profile "https://github.com/leets-official/job-is-fe/blob/dev/src/features/profile/components/ProfileDocumentsManager.tsx"
click node_docmanager "https://github.com/leets-official/job-is-fe/blob/dev/src/features/profile/hooks/useProfileDocumentsManager.ts"
click node_settings "https://github.com/leets-official/job-is-fe/tree/dev/src/features/settings"
click node_authapi "https://github.com/leets-official/job-is-fe/blob/dev/src/api/auth.ts"
click node_jobsapi "https://github.com/leets-official/job-is-fe/blob/dev/src/api/jobs.ts"
click node_profileapi "https://github.com/leets-official/job-is-fe/blob/dev/src/api/profile.ts"
click node_quizapi "https://github.com/leets-official/job-is-fe/blob/dev/src/api/quiz.ts"
click node_transport "https://github.com/leets-official/job-is-fe/blob/dev/src/api/base/client.ts"
click node_request "https://github.com/leets-official/job-is-fe/blob/dev/src/api/base/request.ts"
click node_querykeys "https://github.com/leets-official/job-is-fe/blob/dev/src/constants/queryKey.ts"

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_router,node_query toneBlue
class node_login,node_authstate,node_onboarding,node_quiz toneAmber
class node_explore,node_explorefilters,node_jobdetail toneMint
class node_recommendations,node_saved,node_profile,node_docmanager,node_settings toneRose
class node_authapi,node_jobsapi,node_profileapi,node_quizapi,node_transport,node_request,node_querykeys,node_user toneIndigo
```

## Components

### Application shell

- [App shell](https://github.com/leets-official/job-is-fe/blob/dev/src/App.tsx): `src/App.tsx`
- [Route map](https://github.com/leets-official/job-is-fe/blob/dev/src/routes/router.tsx): `src/routes/router.tsx`
- [Query provider](https://github.com/leets-official/job-is-fe/blob/dev/src/providers/QueryProvider.tsx): `src/providers/QueryProvider.tsx`

### Identity and onboarding

- [Sign-in and recovery](https://github.com/leets-official/job-is-fe/tree/dev/src/features/login): `src/features/login`
- [Auth session state](https://github.com/leets-official/job-is-fe/blob/dev/src/store/useAuthStore.ts): `src/store/useAuthStore.ts`
- [Profile onboarding](https://github.com/leets-official/job-is-fe/tree/dev/src/features/onboarding): `src/features/onboarding`
- [Aptitude quiz](https://github.com/leets-official/job-is-fe/blob/dev/src/pages/QuizPage/QuizPage.tsx): `src/pages/QuizPage/QuizPage.tsx`

### Job discovery

- [Job exploration](https://github.com/leets-official/job-is-fe/blob/dev/src/pages/ExplorePage/ExplorePage.tsx): `src/pages/ExplorePage/ExplorePage.tsx`
- [Search and filters](https://github.com/leets-official/job-is-fe/blob/dev/src/features/jobs/hooks/useExploreFilters.ts): `src/features/jobs/hooks/useExploreFilters.ts`
- [Job detail](https://github.com/leets-official/job-is-fe/blob/dev/src/pages/JobDetailPage/JobDetailPage.tsx): `src/pages/JobDetailPage/JobDetailPage.tsx`

### Recommendations and profile

- [Recommendations](https://github.com/leets-official/job-is-fe/tree/dev/src/features/recommendations): `src/features/recommendations`
- [Saved jobs](https://github.com/leets-official/job-is-fe/tree/dev/src/features/savedJobs): `src/features/savedJobs`
- [Profile documents](https://github.com/leets-official/job-is-fe/blob/dev/src/features/profile/components/ProfileDocumentsManager.tsx): `src/features/profile/components/ProfileDocumentsManager.tsx`
- [Document actions](https://github.com/leets-official/job-is-fe/blob/dev/src/features/profile/hooks/useProfileDocumentsManager.ts): `src/features/profile/hooks/useProfileDocumentsManager.ts`
- [Account settings](https://github.com/leets-official/job-is-fe/tree/dev/src/features/settings): `src/features/settings`

### Data and services

- [Authentication API](https://github.com/leets-official/job-is-fe/blob/dev/src/api/auth.ts): `src/api/auth.ts`
- [Jobs API](https://github.com/leets-official/job-is-fe/blob/dev/src/api/jobs.ts): `src/api/jobs.ts`
- [Profile API](https://github.com/leets-official/job-is-fe/blob/dev/src/api/profile.ts): `src/api/profile.ts`
- [Quiz API](https://github.com/leets-official/job-is-fe/blob/dev/src/api/quiz.ts): `src/api/quiz.ts`
- [HTTP transport](https://github.com/leets-official/job-is-fe/blob/dev/src/api/base/client.ts): `src/api/base/client.ts`
- [Request helpers](https://github.com/leets-official/job-is-fe/blob/dev/src/api/base/request.ts): `src/api/base/request.ts`
- [Query key catalog](https://github.com/leets-official/job-is-fe/blob/dev/src/constants/queryKey.ts): `src/constants/queryKey.ts`

### Other components

- **Job seeker**

## Connections

- Job seeker → App shell: uses (evidence: `README.md`)
- App shell → Route map: mounts routes (evidence: `src/App.tsx`)
- App shell → Query provider: provides queries (evidence: `src/App.tsx`)
- Route map → Sign-in and recovery: routes to (evidence: `src/routes/router.tsx`)
- Route map → Profile onboarding: routes to
- Route map → Aptitude quiz: routes to (evidence: `src/routes/router.tsx`)
- Route map → Job exploration: routes to (evidence: `src/routes/router.tsx`)
- Route map → Job detail: routes to (evidence: `src/routes/router.tsx`)
- Route map → Recommendations: routes to (evidence: `src/routes/router.tsx`)
- Route map → Saved jobs: routes to (evidence: `src/routes/router.tsx`)
- Route map → Profile documents: routes to (evidence: `src/routes/router.tsx`)
- Route map → Account settings: routes to (evidence: `src/routes/router.tsx`)
- Sign-in and recovery → Authentication API: uses (evidence: `src/features/login/hooks/useAuthSession.ts`)
- Sign-in and recovery → Auth session state: updates session (evidence: `src/features/login/hooks/useOAuthCallback.ts`)
- Profile onboarding → Profile API: uses (evidence: `src/features/onboarding/hooks/useOnboardingFlow.ts`)
- Aptitude quiz → Quiz API: uses (evidence: `src/pages/QuizPage/QuizPage.tsx`)
- Aptitude quiz → Query key catalog: uses keys
- Job exploration → Search and filters: uses filters
- Search and filters → Jobs API: queries jobs (evidence: `src/features/jobs/hooks/useExploreFilters.ts`)
- Authentication API → HTTP transport: posts with CSRF (evidence: `src/api/auth.ts`)
- Authentication API → Request helpers: sends requests (evidence: `src/api/auth.ts`)
- Jobs API → Request helpers: sends requests (evidence: `src/api/jobs.ts`)
- Profile API → Request helpers: sends requests (evidence: `src/api/profile.ts`)
- HTTP transport → Auth session state: reads tokens (evidence: `src/api/base/client.ts`)
- Profile documents → Document actions: uses actions (evidence: `src/features/profile/components/ProfileDocumentsManager.tsx`)
- Document actions → Profile API: loads files