# flowsensus-dev/flowsensus-frontend architecture

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

- Interactive diagram: https://gitdiagram.com/flowsensus-dev/flowsensus-frontend
- Repository: https://github.com/flowsensus-dev/flowsensus-frontend

## Overview

FlowSensus is a React portal frontend with a sign-in screen and a routed deployment-management shell. The visible workflow is user sign-in through Supabase, then navigation among dashboard, applicants, agencies, finance, and forecasting routes; those route bodies are placeholders in the sampled source. The frontend also provides an Axios client that attaches a Supabase session token to backend requests, though no caller of that client was present in the sampled files. The README gives only a high-level product description, so deeper domain behavior is not evidenced.

Main entry points: [`src/App.jsx`](https://github.com/flowsensus-dev/flowsensus-frontend/blob/main/src/App.jsx) (Route registry), [`src/pages/LoginPage.jsx`](https://github.com/flowsensus-dev/flowsensus-frontend/blob/main/src/pages/LoginPage.jsx) (Sign-in page), [`src/lib/supabase.js`](https://github.com/flowsensus-dev/flowsensus-frontend/blob/main/src/lib/supabase.js) (Supabase client), [`src/lib/api.js`](https://github.com/flowsensus-dev/flowsensus-frontend/blob/main/src/lib/api.js) (Authenticated API client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["Portal Routing"]
  node_bootstrap["React bootstrap<br/>[main.jsx]"]
  node_app["Route registry<br/>[App.jsx]"]
  node_layout["Portal layout<br/>[AppLayout.jsx]"]
  node_domain_pages["Portal pages<br/>[App.jsx]"]
end

subgraph group_auth["Authentication"]
  node_login["Sign-in page<br/>[LoginPage.jsx]"]
  node_supabase_client["Supabase client<br/>[supabase.js]"]
end

subgraph group_services["Service Clients"]
  node_api_client["Authenticated API client<br/>[api.js]"]
end

node_user(("Portal user"))
node_supabase["Supabase Auth"]
node_backend["FlowSensus backend"]

node_user -->|"opens portal"| node_bootstrap
node_bootstrap -->|"renders"| node_app
node_user -->|"submits credentials"| node_login
node_app -->|"routes to"| node_login
node_login -->|"requests sign-in"| node_supabase_client
node_supabase_client -->|"authenticates"| node_supabase
node_login -->|"navigates on success"| node_app
node_app -->|"renders portal shell"| node_layout
node_app -->|"routes to"| node_domain_pages
node_layout -->|"presents navigation"| node_user
node_api_client -->|"reads session"| node_supabase_client
node_api_client -.->|"sends authenticated requests"| node_backend

click node_bootstrap "https://github.com/flowsensus-dev/flowsensus-frontend/blob/main/src/main.jsx"
click node_app "https://github.com/flowsensus-dev/flowsensus-frontend/blob/main/src/App.jsx"
click node_login "https://github.com/flowsensus-dev/flowsensus-frontend/blob/main/src/pages/LoginPage.jsx"
click node_layout "https://github.com/flowsensus-dev/flowsensus-frontend/blob/main/src/layouts/AppLayout.jsx"
click node_domain_pages "https://github.com/flowsensus-dev/flowsensus-frontend/blob/main/src/App.jsx"
click node_supabase_client "https://github.com/flowsensus-dev/flowsensus-frontend/blob/main/src/lib/supabase.js"
click node_api_client "https://github.com/flowsensus-dev/flowsensus-frontend/blob/main/src/lib/api.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_bootstrap,node_app,node_layout,node_domain_pages,node_user toneBlue
class node_login,node_supabase_client toneAmber
class node_api_client toneMint
class node_supabase,node_backend toneIndigo
```

## Components

### Portal Routing

- [React bootstrap](https://github.com/flowsensus-dev/flowsensus-frontend/blob/main/src/main.jsx): `src/main.jsx`
- [Route registry](https://github.com/flowsensus-dev/flowsensus-frontend/blob/main/src/App.jsx): `src/App.jsx`
- [Portal layout](https://github.com/flowsensus-dev/flowsensus-frontend/blob/main/src/layouts/AppLayout.jsx): `src/layouts/AppLayout.jsx`
- [Portal pages](https://github.com/flowsensus-dev/flowsensus-frontend/blob/main/src/App.jsx): `src/App.jsx`

### Authentication

- [Sign-in page](https://github.com/flowsensus-dev/flowsensus-frontend/blob/main/src/pages/LoginPage.jsx): `src/pages/LoginPage.jsx`
- [Supabase client](https://github.com/flowsensus-dev/flowsensus-frontend/blob/main/src/lib/supabase.js): `src/lib/supabase.js`

### Service Clients

- [Authenticated API client](https://github.com/flowsensus-dev/flowsensus-frontend/blob/main/src/lib/api.js): `src/lib/api.js`

### Other components

- **Portal user**
- **Supabase Auth**
- **FlowSensus backend**

## Connections

- Portal user → React bootstrap: opens portal
- React bootstrap → Route registry: renders
- Portal user → Sign-in page: submits credentials
- Route registry → Sign-in page: routes to
- Sign-in page → Supabase client: requests sign-in
- Supabase client → Supabase Auth: authenticates
- Sign-in page → Route registry: navigates on success
- Route registry → Portal layout: renders portal shell
- Route registry → Portal pages: routes to
- Portal layout → Portal user: presents navigation
- Authenticated API client → Supabase client: reads session
- Authenticated API client → FlowSensus backend: sends authenticated requests