# ay3097an-art/the-experimental-app architecture

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

- Interactive diagram: https://gitdiagram.com/ay3097an-art/the-experimental-app
- Repository: https://github.com/ay3097an-art/the-experimental-app

## Overview

The repository is a React duty-roster application: visitors can start a guest roster or sign in, create and confirm a roster, save it to Supabase, and later view or edit saved rosters and export PDFs. App.tsx coordinates page transitions; AuthContext manages session state, while the pages own authentication, roster workflows, and dashboard access. The README describes only a Vite template, so product capabilities are inferred from the sampled source and file tree; the roster-generation and persistence implementation is only partially sampled.

Main entry points: [`src/App.tsx`](https://github.com/ay3097an-art/the-experimental-app/blob/main/src/App.tsx) (Page coordinator), [`src/context/AuthContext.tsx`](https://github.com/ay3097an-art/the-experimental-app/blob/main/src/context/AuthContext.tsx) (Session management), [`src/lib/supabase.ts`](https://github.com/ay3097an-art/the-experimental-app/blob/main/src/lib/supabase.ts) (Supabase client), [`src/pages/Dashboard.tsx`](https://github.com/ay3097an-art/the-experimental-app/blob/main/src/pages/Dashboard.tsx) (Roster dashboard)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["App navigation"]
  node_app["Page coordinator<br/>[App.tsx]"]
  node_landing["Landing page<br/>[LandingPage.tsx]"]
end

subgraph group_identity["Identity"]
  node_authpage["Sign in / sign up<br/>[AuthPage.tsx]"]
  node_authcontext["Session management<br/>[AuthContext.tsx]"]
end

subgraph group_rosters["Roster workflows"]
  node_dashboard["Roster dashboard<br/>[Dashboard.tsx]"]
  node_workspace["Roster workspace"]
  node_savedview["Saved roster view<br/>[RosterViewPage.tsx]"]
end

subgraph group_services["External services"]
  node_supabaseclient["Supabase client<br/>[supabase.ts]"]
  node_supabase["Supabase service"]
  node_pdf["PDF libraries"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens app"| node_app
node_app -->|"shows"| node_landing
node_app -->|"shows"| node_authpage
node_app -->|"shows"| node_dashboard
node_app -->|"shows"| node_workspace
node_app -->|"shows"| node_savedview
node_landing -->|"selects route"| node_app
node_authpage -->|"signals success"| node_app
node_dashboard -->|"selects roster"| node_app
node_workspace -->|"returns home"| node_app
node_savedview -->|"returns dashboard"| node_app
node_app -->|"reads session"| node_authcontext
node_authpage -->|"signs in/up"| node_authcontext
node_dashboard -->|"reads user"| node_authcontext
node_dashboard -->|"signs out"| node_authcontext
node_workspace -->|"reads user"| node_authcontext
node_savedview -->|"reads user"| node_authcontext
node_authcontext -->|"uses client"| node_supabaseclient
node_authpage -->|"upserts profile"| node_supabaseclient
node_dashboard -->|"fetches profile"| node_supabaseclient
node_dashboard -->|"fetches rosters"| node_supabaseclient
node_workspace -->|"saves roster"| node_supabaseclient
node_authcontext -->|"auth requests"| node_supabaseclient
node_supabaseclient -->|"sends requests"| node_supabase
node_workspace -->|"generates PDF"| node_pdf
node_savedview -->|"generates PDF"| node_pdf

click node_app "https://github.com/ay3097an-art/the-experimental-app/blob/main/src/App.tsx"
click node_landing "https://github.com/ay3097an-art/the-experimental-app/blob/main/src/pages/LandingPage.tsx"
click node_dashboard "https://github.com/ay3097an-art/the-experimental-app/blob/main/src/pages/Dashboard.tsx"
click node_authpage "https://github.com/ay3097an-art/the-experimental-app/blob/main/src/pages/AuthPage.tsx"
click node_authcontext "https://github.com/ay3097an-art/the-experimental-app/blob/main/src/context/AuthContext.tsx"
click node_workspace "https://github.com/ay3097an-art/the-experimental-app/blob/main/src/pages/RosterWorkspace.tsx"
click node_savedview "https://github.com/ay3097an-art/the-experimental-app/blob/main/src/pages/RosterViewPage.tsx"
click node_supabaseclient "https://github.com/ay3097an-art/the-experimental-app/blob/main/src/lib/supabase.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_landing toneBlue
class node_authpage,node_authcontext toneAmber
class node_dashboard,node_workspace,node_savedview toneMint
class node_supabaseclient,node_supabase,node_pdf toneRose
class node_visitor toneIndigo
```

## Components

### App navigation

- [Page coordinator](https://github.com/ay3097an-art/the-experimental-app/blob/main/src/App.tsx): `src/App.tsx`
- [Landing page](https://github.com/ay3097an-art/the-experimental-app/blob/main/src/pages/LandingPage.tsx): `src/pages/LandingPage.tsx`

### Identity

- [Sign in / sign up](https://github.com/ay3097an-art/the-experimental-app/blob/main/src/pages/AuthPage.tsx): `src/pages/AuthPage.tsx`
- [Session management](https://github.com/ay3097an-art/the-experimental-app/blob/main/src/context/AuthContext.tsx): `src/context/AuthContext.tsx`

### Roster workflows

- [Roster dashboard](https://github.com/ay3097an-art/the-experimental-app/blob/main/src/pages/Dashboard.tsx): `src/pages/Dashboard.tsx`
- [Roster workspace](https://github.com/ay3097an-art/the-experimental-app/blob/main/src/pages/RosterWorkspace.tsx): `src/pages/RosterWorkspace.tsx`
- [Saved roster view](https://github.com/ay3097an-art/the-experimental-app/blob/main/src/pages/RosterViewPage.tsx): `src/pages/RosterViewPage.tsx`

### External services

- [Supabase client](https://github.com/ay3097an-art/the-experimental-app/blob/main/src/lib/supabase.ts): `src/lib/supabase.ts`
- **Supabase service**
- **PDF libraries**

### Other components

- **Visitor**

## Connections

- Visitor → Page coordinator: opens app
- Page coordinator → Landing page: shows
- Page coordinator → Sign in / sign up: shows
- Page coordinator → Roster dashboard: shows
- Page coordinator → Roster workspace: shows
- Page coordinator → Saved roster view: shows
- Landing page → Page coordinator: selects route
- Sign in / sign up → Page coordinator: signals success
- Roster dashboard → Page coordinator: selects roster
- Roster workspace → Page coordinator: returns home
- Saved roster view → Page coordinator: returns dashboard
- Page coordinator → Session management: reads session
- Sign in / sign up → Session management: signs in/up
- Roster dashboard → Session management: reads user
- Roster dashboard → Session management: signs out
- Roster workspace → Session management: reads user
- Saved roster view → Session management: reads user
- Session management → Supabase client: uses client
- Sign in / sign up → Supabase client: upserts profile
- Roster dashboard → Supabase client: fetches profile
- Roster dashboard → Supabase client: fetches rosters
- Roster workspace → Supabase client: saves roster
- Session management → Supabase client: auth requests
- Supabase client → Supabase service: sends requests
- Roster workspace → PDF libraries: generates PDF
- Saved roster view → PDF libraries: generates PDF