# athus27/linketinder-frontend architecture

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

- Interactive diagram: https://gitdiagram.com/athus27/linketinder-frontend
- Repository: https://github.com/athus27/linketinder-frontend

## Overview

Linketinder is a browser-based recruiting front end: candidates and companies register, companies create jobs, both sides browse and like candidate–job relationships, and reciprocal likes produce a match. The app layer owns domain operations and localStorage persistence; pages and reusable forms/cards provide the UI. The README documents the main architecture and capabilities, while sampled code confirms app persistence, navigation, registration, and both like flows; some feed and edit wiring is not shown in the excerpts.

Main entry points: [`src/renderAll.ts`](https://github.com/athus27/linketinder-frontend/blob/main/src/renderAll.ts) (Page navigation), [`src/app/LinketinderApp.ts`](https://github.com/athus27/linketinder-frontend/blob/main/src/app/LinketinderApp.ts) (Business and storage), [`src/components/Header.ts`](https://github.com/athus27/linketinder-frontend/blob/main/src/components/Header.ts) (Menu header), [`src/main.ts`](https://github.com/athus27/linketinder-frontend/blob/main/src/main.ts) (App entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Interface and navigation"]
  node_boot["App entry<br/>[main.ts]"]
  node_navigation["Page navigation<br/>[renderAll.ts]"]
  node_header["Menu header<br/>[Header.ts]"]
  node_info["Info section<br/>[InfoSection.ts]"]
end

subgraph group_profiles["Profiles and jobs"]
  node_registration["Registration page<br/>[RegisterPage.ts]"]
  node_userform["Profile form<br/>[UserForm.ts]"]
  node_candidatefeed["Candidate feed"]
  node_candidatecard["Candidate card"]
  node_companyfeed["Company feed<br/>[CompanyFeedPage.ts]"]
  node_companycard["Company card"]
  node_jobregister["Job registration<br/>[JobRegisterPage.ts]"]
  node_jobform["Job form<br/>[JobForm.ts]"]
  node_jobfeed["Job feed<br/>[JobFeedPage.ts]"]
  node_jobcard["Job card<br/>[JobProfileCard.ts]"]
end

subgraph group_matching["Likes and matches"]
  node_candidate_like["Candidate likes"]
  node_company_like["Company likes<br/>[CompanyLikePage.ts]"]
end

subgraph group_domain["Domain and persistence"]
  node_app["Business and storage<br/>[LinketinderApp.ts]"]
  node_models["Domain entities<br/>[Like.ts]"]
end

node_person(("Browser user"))
node_localstorage[("Browser localStorage")]

node_boot -->|"instantiates"| node_app
node_boot -->|"starts rendering"| node_navigation
node_person -->|"uses menu"| node_header
node_header -->|"invokes actions"| node_navigation
node_navigation -->|"creates"| node_header
node_navigation -->|"creates"| node_info
node_navigation -->|"selects page"| node_registration
node_navigation -->|"selects page"| node_candidatefeed
node_navigation -->|"selects page"| node_companyfeed
node_navigation -->|"selects page"| node_jobregister
node_navigation -->|"selects page"| node_jobfeed
node_navigation -->|"selects page"| node_candidate_like
node_navigation -->|"selects page"| node_company_like
node_registration -->|"coordinates"| node_userform
node_jobregister -->|"coordinates"| node_jobform
node_candidatefeed -->|"displays"| node_candidatecard
node_companyfeed -->|"displays"| node_companycard
node_jobfeed -->|"displays"| node_jobcard
node_userform -->|"creates profiles"| node_app
node_jobform -->|"creates jobs"| node_app
node_candidate_like -->|"submits candidate like"| node_app
node_company_like -->|"submits company like"| node_app
node_app -->|"uses entities"| node_models
node_app -->|"loads and saves"| node_localstorage

click node_boot "https://github.com/athus27/linketinder-frontend/blob/main/src/main.ts"
click node_navigation "https://github.com/athus27/linketinder-frontend/blob/main/src/renderAll.ts"
click node_header "https://github.com/athus27/linketinder-frontend/blob/main/src/components/Header.ts"
click node_info "https://github.com/athus27/linketinder-frontend/blob/main/src/components/InfoSection.ts"
click node_registration "https://github.com/athus27/linketinder-frontend/blob/main/src/pages/RegisterPage.ts"
click node_userform "https://github.com/athus27/linketinder-frontend/blob/main/src/components/UserForm.ts"
click node_candidatefeed "https://github.com/athus27/linketinder-frontend/blob/main/src/pages/CandidateFeedPage.ts"
click node_candidatecard "https://github.com/athus27/linketinder-frontend/blob/main/src/components/CandidateProfileCard.ts"
click node_companyfeed "https://github.com/athus27/linketinder-frontend/blob/main/src/pages/CompanyFeedPage.ts"
click node_companycard "https://github.com/athus27/linketinder-frontend/blob/main/src/components/CompanyProfileCard.ts"
click node_jobregister "https://github.com/athus27/linketinder-frontend/blob/main/src/pages/JobRegisterPage.ts"
click node_jobform "https://github.com/athus27/linketinder-frontend/blob/main/src/components/JobForm.ts"
click node_jobfeed "https://github.com/athus27/linketinder-frontend/blob/main/src/pages/JobFeedPage.ts"
click node_jobcard "https://github.com/athus27/linketinder-frontend/blob/main/src/components/JobProfileCard.ts"
click node_candidate_like "https://github.com/athus27/linketinder-frontend/blob/main/src/pages/CandidateLikePage.ts"
click node_company_like "https://github.com/athus27/linketinder-frontend/blob/main/src/pages/CompanyLikePage.ts"
click node_app "https://github.com/athus27/linketinder-frontend/blob/main/src/app/LinketinderApp.ts"
click node_models "https://github.com/athus27/linketinder-frontend/blob/main/src/models/Like.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_boot,node_navigation,node_header,node_info,node_person toneBlue
class node_registration,node_userform,node_candidatefeed,node_candidatecard,node_companyfeed,node_companycard,node_jobregister,node_jobform,node_jobfeed,node_jobcard,node_localstorage toneAmber
class node_candidate_like,node_company_like toneMint
class node_app,node_models toneRose
```

## Components

### Interface and navigation

- [App entry](https://github.com/athus27/linketinder-frontend/blob/main/src/main.ts): `src/main.ts`
- [Page navigation](https://github.com/athus27/linketinder-frontend/blob/main/src/renderAll.ts): `src/renderAll.ts`
- [Menu header](https://github.com/athus27/linketinder-frontend/blob/main/src/components/Header.ts): `src/components/Header.ts`
- [Info section](https://github.com/athus27/linketinder-frontend/blob/main/src/components/InfoSection.ts): `src/components/InfoSection.ts`

### Profiles and jobs

- [Registration page](https://github.com/athus27/linketinder-frontend/blob/main/src/pages/RegisterPage.ts): `src/pages/RegisterPage.ts`
- [Profile form](https://github.com/athus27/linketinder-frontend/blob/main/src/components/UserForm.ts): `src/components/UserForm.ts`
- [Candidate feed](https://github.com/athus27/linketinder-frontend/blob/main/src/pages/CandidateFeedPage.ts): `src/pages/CandidateFeedPage.ts`
- [Candidate card](https://github.com/athus27/linketinder-frontend/blob/main/src/components/CandidateProfileCard.ts): `src/components/CandidateProfileCard.ts`
- [Company feed](https://github.com/athus27/linketinder-frontend/blob/main/src/pages/CompanyFeedPage.ts): `src/pages/CompanyFeedPage.ts`
- [Company card](https://github.com/athus27/linketinder-frontend/blob/main/src/components/CompanyProfileCard.ts): `src/components/CompanyProfileCard.ts`
- [Job registration](https://github.com/athus27/linketinder-frontend/blob/main/src/pages/JobRegisterPage.ts): `src/pages/JobRegisterPage.ts`
- [Job form](https://github.com/athus27/linketinder-frontend/blob/main/src/components/JobForm.ts): `src/components/JobForm.ts`
- [Job feed](https://github.com/athus27/linketinder-frontend/blob/main/src/pages/JobFeedPage.ts): `src/pages/JobFeedPage.ts`
- [Job card](https://github.com/athus27/linketinder-frontend/blob/main/src/components/JobProfileCard.ts): `src/components/JobProfileCard.ts`

### Likes and matches

- [Candidate likes](https://github.com/athus27/linketinder-frontend/blob/main/src/pages/CandidateLikePage.ts): `src/pages/CandidateLikePage.ts`
- [Company likes](https://github.com/athus27/linketinder-frontend/blob/main/src/pages/CompanyLikePage.ts): `src/pages/CompanyLikePage.ts`

### Domain and persistence

- [Business and storage](https://github.com/athus27/linketinder-frontend/blob/main/src/app/LinketinderApp.ts): `src/app/LinketinderApp.ts`
- [Domain entities](https://github.com/athus27/linketinder-frontend/blob/main/src/models/Like.ts): `src/models/Like.ts`

### Other components

- **Browser user**
- **Browser localStorage**

## Connections

- App entry → Business and storage: instantiates
- App entry → Page navigation: starts rendering
- Browser user → Menu header: uses menu
- Menu header → Page navigation: invokes actions
- Page navigation → Menu header: creates
- Page navigation → Info section: creates
- Page navigation → Registration page: selects page
- Page navigation → Candidate feed: selects page
- Page navigation → Company feed: selects page
- Page navigation → Job registration: selects page
- Page navigation → Job feed: selects page
- Page navigation → Candidate likes: selects page
- Page navigation → Company likes: selects page
- Registration page → Profile form: coordinates
- Job registration → Job form: coordinates
- Candidate feed → Candidate card: displays
- Company feed → Company card: displays
- Job feed → Job card: displays
- Profile form → Business and storage: creates profiles
- Job form → Business and storage: creates jobs
- Candidate likes → Business and storage: submits candidate like
- Company likes → Business and storage: submits company like
- Business and storage → Domain entities: uses entities
- Business and storage → Browser localStorage: loads and saves