# optic-scan/optic-scan-fe architecture

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

- Interactive diagram: https://gitdiagram.com/optic-scan/optic-scan-fe
- Repository: https://github.com/optic-scan/optic-scan-fe

## Overview

IntelliSight is a web frontend for patient and healthcare-provider eye-health workflows. Visitors can explore product information, register or log in, and enter protected dashboard areas for scans, results, and profile management. The sampled results and profile pages make authenticated API requests; the scan page’s implementation is not shown, so its backend interaction is left unverified. The repository excerpts show frontend behavior only, not the backend or the underlying eye-analysis process.

Main entry points: [`src/App.jsx`](https://github.com/optic-scan/optic-scan-fe/blob/main/src/App.jsx) (Route dispatcher), [`src/pages/landing-page/HomePage.jsx`](https://github.com/optic-scan/optic-scan-fe/blob/main/src/pages/landing-page/HomePage.jsx) (Home page), [`src/pages/dashboard/DashboardProfilePage.jsx`](https://github.com/optic-scan/optic-scan-fe/blob/main/src/pages/dashboard/DashboardProfilePage.jsx) (Profile management), [`src/pages/dashboard/DashboardResultsPage.jsx`](https://github.com/optic-scan/optic-scan-fe/blob/main/src/pages/dashboard/DashboardResultsPage.jsx) (Examination results)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["App and navigation"]
  node_app["Route dispatcher<br/>[App.jsx]"]
  node_guards["Route guards"]
  node_navbar["Site navigation<br/>[Navbar.jsx]"]
end

subgraph group_public["Public information"]
  node_home["Home page<br/>[HomePage.jsx]"]
  node_about["About page<br/>[AboutUsPage.jsx]"]
  node_how["How it works<br/>[HowItWorksPage.jsx]"]
  node_landing_sections["Landing sections"]
  node_about_section["About section<br/>[AboutUsSection.jsx]"]
  node_footer["Site footer<br/>[Footer.jsx]"]
end

subgraph group_identity["Account access"]
  node_login["Login page<br/>[LoginPage.jsx]"]
  node_register["Registration page<br/>[RegisterPage.jsx]"]
  node_auth_fields["Auth fields and tabs<br/>[Tabs.jsx]"]
end

subgraph group_dashboard["Health dashboard"]
  node_dashboard_home["Dashboard home"]
  node_scan["Eye scan"]
  node_results["Examination results"]
  node_profile["Profile management"]
  node_sidebar["Dashboard sidebar<br/>[Sidebar.jsx]"]
  node_dashboard_form["Dashboard forms<br/>[Form.jsx]"]
end

node_visitor(("Visitor or user"))
node_api{{"IntelliSight API"}}
node_ui_primitives["Shared UI primitives"]
node_request_helper["Authenticated requests<br/>[utils.js]"]

node_visitor -->|"opens routes"| node_app
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_about
node_app -->|"routes to"| node_how
node_app -->|"routes to"| node_login
node_app -->|"routes to"| node_register
node_app -->|"wraps routes"| node_guards
node_app -->|"routes to"| node_dashboard_home
node_app -->|"routes to"| node_scan
node_app -->|"routes to"| node_results
node_app -->|"routes to"| node_profile
node_home -->|"renders sections"| node_landing_sections
node_home -->|"renders section"| node_about_section
node_home -->|"renders navigation"| node_navbar
node_home -->|"renders footer"| node_footer
node_about -->|"renders navigation"| node_navbar
node_about -->|"renders footer"| node_footer
node_how -->|"renders navigation"| node_navbar
node_how -->|"renders footer"| node_footer
node_register -->|"renders tabs"| node_auth_fields
node_register -.->|"submits account data"| node_api
node_login -->|"uses shared fields"| node_auth_fields
node_dashboard_home -->|"renders sidebar"| node_sidebar
node_scan -->|"renders sidebar"| node_sidebar
node_results -->|"renders sidebar"| node_sidebar
node_profile -->|"renders sidebar"| node_sidebar
node_profile -->|"renders forms"| node_dashboard_form
node_profile -->|"requests profile updates"| node_request_helper
node_results -->|"requests exam data"| node_request_helper
node_request_helper -->|"sends authenticated requests"| node_api
node_scan -.->|"scan processing"| node_api
node_dashboard_home -.->|"uses shared UI"| node_ui_primitives
node_results -->|"uses dialogs and controls"| node_ui_primitives
node_profile -->|"uses dialogs and controls"| node_ui_primitives

click node_app "https://github.com/optic-scan/optic-scan-fe/blob/main/src/App.jsx"
click node_guards "https://github.com/optic-scan/optic-scan-fe/tree/main/src/components/middleware"
click node_navbar "https://github.com/optic-scan/optic-scan-fe/blob/main/src/components/navbar-components/Navbar.jsx"
click node_home "https://github.com/optic-scan/optic-scan-fe/blob/main/src/pages/landing-page/HomePage.jsx"
click node_about "https://github.com/optic-scan/optic-scan-fe/blob/main/src/pages/landing-page/AboutUsPage.jsx"
click node_how "https://github.com/optic-scan/optic-scan-fe/blob/main/src/pages/landing-page/HowItWorksPage.jsx"
click node_landing_sections "https://github.com/optic-scan/optic-scan-fe/tree/main/src/components/landing-page-components"
click node_about_section "https://github.com/optic-scan/optic-scan-fe/blob/main/src/components/about-us-components/AboutUsSection.jsx"
click node_footer "https://github.com/optic-scan/optic-scan-fe/blob/main/src/components/footer-components/Footer.jsx"
click node_login "https://github.com/optic-scan/optic-scan-fe/blob/main/src/pages/auth-page/LoginPage.jsx"
click node_register "https://github.com/optic-scan/optic-scan-fe/blob/main/src/pages/auth-page/RegisterPage.jsx"
click node_auth_fields "https://github.com/optic-scan/optic-scan-fe/blob/main/src/components/auth-components/Tabs.jsx"
click node_dashboard_home "https://github.com/optic-scan/optic-scan-fe/blob/main/src/pages/dashboard/DashboardHomePage.jsx"
click node_scan "https://github.com/optic-scan/optic-scan-fe/blob/main/src/pages/dashboard/DashboardScanEyePage.jsx"
click node_results "https://github.com/optic-scan/optic-scan-fe/blob/main/src/pages/dashboard/DashboardResultsPage.jsx"
click node_profile "https://github.com/optic-scan/optic-scan-fe/blob/main/src/pages/dashboard/DashboardProfilePage.jsx"
click node_sidebar "https://github.com/optic-scan/optic-scan-fe/blob/main/src/components/dashboard-components/Sidebar.jsx"
click node_dashboard_form "https://github.com/optic-scan/optic-scan-fe/blob/main/src/components/dashboard-components/Form.jsx"
click node_ui_primitives "https://github.com/optic-scan/optic-scan-fe/tree/main/src/components"
click node_request_helper "https://github.com/optic-scan/optic-scan-fe/blob/main/lib/utils.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_app,node_guards,node_navbar,node_visitor,node_ui_primitives toneBlue
class node_home,node_about,node_how,node_landing_sections,node_about_section,node_footer toneAmber
class node_login,node_register,node_auth_fields,node_api,node_request_helper toneMint
class node_dashboard_home,node_scan,node_results,node_profile,node_sidebar,node_dashboard_form toneRose
```

## Components

### App and navigation

- [Route dispatcher](https://github.com/optic-scan/optic-scan-fe/blob/main/src/App.jsx): `src/App.jsx`
- [Route guards](https://github.com/optic-scan/optic-scan-fe/tree/main/src/components/middleware): `src/components/middleware`
- [Site navigation](https://github.com/optic-scan/optic-scan-fe/blob/main/src/components/navbar-components/Navbar.jsx): `src/components/navbar-components/Navbar.jsx`

### Public information

- [Home page](https://github.com/optic-scan/optic-scan-fe/blob/main/src/pages/landing-page/HomePage.jsx): `src/pages/landing-page/HomePage.jsx`
- [About page](https://github.com/optic-scan/optic-scan-fe/blob/main/src/pages/landing-page/AboutUsPage.jsx): `src/pages/landing-page/AboutUsPage.jsx`
- [How it works](https://github.com/optic-scan/optic-scan-fe/blob/main/src/pages/landing-page/HowItWorksPage.jsx): `src/pages/landing-page/HowItWorksPage.jsx`
- [Landing sections](https://github.com/optic-scan/optic-scan-fe/tree/main/src/components/landing-page-components): `src/components/landing-page-components`
- [About section](https://github.com/optic-scan/optic-scan-fe/blob/main/src/components/about-us-components/AboutUsSection.jsx): `src/components/about-us-components/AboutUsSection.jsx`
- [Site footer](https://github.com/optic-scan/optic-scan-fe/blob/main/src/components/footer-components/Footer.jsx): `src/components/footer-components/Footer.jsx`

### Account access

- [Login page](https://github.com/optic-scan/optic-scan-fe/blob/main/src/pages/auth-page/LoginPage.jsx): `src/pages/auth-page/LoginPage.jsx`
- [Registration page](https://github.com/optic-scan/optic-scan-fe/blob/main/src/pages/auth-page/RegisterPage.jsx): `src/pages/auth-page/RegisterPage.jsx`
- [Auth fields and tabs](https://github.com/optic-scan/optic-scan-fe/blob/main/src/components/auth-components/Tabs.jsx): `src/components/auth-components/Tabs.jsx`

### Health dashboard

- [Dashboard home](https://github.com/optic-scan/optic-scan-fe/blob/main/src/pages/dashboard/DashboardHomePage.jsx): `src/pages/dashboard/DashboardHomePage.jsx`
- [Eye scan](https://github.com/optic-scan/optic-scan-fe/blob/main/src/pages/dashboard/DashboardScanEyePage.jsx): `src/pages/dashboard/DashboardScanEyePage.jsx`
- [Examination results](https://github.com/optic-scan/optic-scan-fe/blob/main/src/pages/dashboard/DashboardResultsPage.jsx): `src/pages/dashboard/DashboardResultsPage.jsx`
- [Profile management](https://github.com/optic-scan/optic-scan-fe/blob/main/src/pages/dashboard/DashboardProfilePage.jsx): `src/pages/dashboard/DashboardProfilePage.jsx`
- [Dashboard sidebar](https://github.com/optic-scan/optic-scan-fe/blob/main/src/components/dashboard-components/Sidebar.jsx): `src/components/dashboard-components/Sidebar.jsx`
- [Dashboard forms](https://github.com/optic-scan/optic-scan-fe/blob/main/src/components/dashboard-components/Form.jsx): `src/components/dashboard-components/Form.jsx`

### Other components

- **Visitor or user**
- **IntelliSight API**
- [Shared UI primitives](https://github.com/optic-scan/optic-scan-fe/tree/main/src/components): `src/components`
- [Authenticated requests](https://github.com/optic-scan/optic-scan-fe/blob/main/lib/utils.js): `lib/utils.js`

## Connections

- Visitor or user → Route dispatcher: opens routes (evidence: `src/App.jsx`)
- Route dispatcher → Home page: routes to (evidence: `src/App.jsx`)
- Route dispatcher → About page: routes to (evidence: `src/App.jsx`)
- Route dispatcher → How it works: routes to (evidence: `src/App.jsx`)
- Route dispatcher → Login page: routes to (evidence: `src/App.jsx`)
- Route dispatcher → Registration page: routes to (evidence: `src/App.jsx`)
- Route dispatcher → Route guards: wraps routes (evidence: `src/App.jsx`)
- Route dispatcher → Dashboard home: routes to (evidence: `src/App.jsx`)
- Route dispatcher → Eye scan: routes to (evidence: `src/App.jsx`)
- Route dispatcher → Examination results: routes to (evidence: `src/App.jsx`)
- Route dispatcher → Profile management: routes to (evidence: `src/App.jsx`)
- Home page → Landing sections: renders sections (evidence: `src/pages/landing-page/HomePage.jsx`)
- Home page → About section: renders section (evidence: `src/pages/landing-page/HomePage.jsx`)
- Home page → Site navigation: renders navigation (evidence: `src/pages/landing-page/HomePage.jsx`)
- Home page → Site footer: renders footer (evidence: `src/pages/landing-page/HomePage.jsx`)
- About page → Site navigation: renders navigation (evidence: `src/pages/landing-page/AboutUsPage.jsx`)
- About page → Site footer: renders footer (evidence: `src/pages/landing-page/AboutUsPage.jsx`)
- How it works → Site navigation: renders navigation (evidence: `src/pages/landing-page/HowItWorksPage.jsx`)
- How it works → Site footer: renders footer (evidence: `src/pages/landing-page/HowItWorksPage.jsx`)
- Registration page → Auth fields and tabs: renders tabs (evidence: `src/pages/auth-page/RegisterPage.jsx`)
- Registration page → IntelliSight API: submits account data
- Login page → Auth fields and tabs: uses shared fields (evidence: `src/pages/auth-page/LoginPage.jsx`)
- Dashboard home → Dashboard sidebar: renders sidebar (evidence: `src/pages/dashboard/DashboardHomePage.jsx`)
- Eye scan → Dashboard sidebar: renders sidebar (evidence: `src/pages/dashboard/DashboardScanEyePage.jsx`)
- Examination results → Dashboard sidebar: renders sidebar (evidence: `src/pages/dashboard/DashboardResultsPage.jsx`)
- Profile management → Dashboard sidebar: renders sidebar (evidence: `src/pages/dashboard/DashboardProfilePage.jsx`)
- Profile management → Dashboard forms: renders forms (evidence: `src/pages/dashboard/DashboardProfilePage.jsx`)
- Profile management → Authenticated requests: requests profile updates (evidence: `src/pages/dashboard/DashboardProfilePage.jsx`)
- Examination results → Authenticated requests: requests exam data (evidence: `src/pages/dashboard/DashboardResultsPage.jsx`)
- Authenticated requests → IntelliSight API: sends authenticated requests (evidence: `lib/utils.js`)
- Eye scan → IntelliSight API: scan processing
- Dashboard home → Shared UI primitives: uses shared UI (evidence: `src/pages/dashboard/DashboardHomePage.jsx`)
- Examination results → Shared UI primitives: uses dialogs and controls (evidence: `src/pages/dashboard/DashboardResultsPage.jsx`)
- Profile management → Shared UI primitives: uses dialogs and controls (evidence: `src/pages/dashboard/DashboardProfilePage.jsx`)