# kurziokode/kurziokode.github.io architecture

> Architecture diagram of the GitHub repository kurziokode/kurziokode.github.io, 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/kurziokode/kurziokode.github.io
- Repository: https://github.com/kurziokode/kurziokode.github.io

## Overview

FitClass is a physical-education class management app for teachers. Teachers navigate a dashboard, manage students and activities, review reports, and use classroom tools; app-level state is persisted in browser storage. AI supports activity ideas, reports, chat, and speech, while tools include a timer, team generator, and music playlist. Edges reflect calls and imports shown in excerpts or the source index; unsampled implementation details are left out.

Main entry points: [`fitclass-–-physical-education-smart-manager/App.tsx`](https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/App.tsx) (App Router), [`fitclass-–-physical-education-smart-manager/components/views/ActivitiesView.tsx`](https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/components/views/ActivitiesView.tsx) (Activity Management), [`fitclass-–-physical-education-smart-manager/components/views/ClassesView.tsx`](https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/components/views/ClassesView.tsx) (Class Management), [`fitclass-–-physical-education-smart-manager/components/views/ReportsView.tsx`](https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/components/views/ReportsView.tsx) (Reports and Exports)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App Shell"]
  node_app["App Router<br/>[App.tsx]"]
  node_navigation["Navigation<br/>[Sidebar.tsx]"]
  node_header["Page Header<br/>[Header.tsx]"]
  node_storage["Local Storage Hook<br/>[useLocalStorage.ts]"]
  node_button["Button<br/>[Button.tsx]"]
  node_card["Card<br/>[Card.tsx]"]
  node_icon["Icon<br/>[Icon.tsx]"]
  node_modal["Modal<br/>[Modal.tsx]"]
  node_spinner["Spinner<br/>[Spinner.tsx]"]
end

subgraph group_records["Class Records"]
  node_dashboard["Dashboard<br/>[DashboardView.tsx]"]
  node_classes["Class Management<br/>[ClassesView.tsx]"]
  node_activities["Activity Management<br/>[ActivitiesView.tsx]"]
  node_helpers["Shared Helpers<br/>[helpers.ts]"]
end

subgraph group_insights["Insights and AI"]
  node_reports["Reports and Exports<br/>[ReportsView.tsx]"]
  node_ai["Gemini Service<br/>[geminiService.ts]"]
  node_chatbot["AI Chatbot<br/>[Chatbot.tsx]"]
end

subgraph group_tools["Classroom Tools"]
  node_toolsview["Classroom Tools<br/>[ToolsView.tsx]"]
  node_audio["Audio Utilities<br/>[audioUtils.ts]"]
end

node_teacher(("Teacher"))
node_browserstore[("Browser Storage")]
node_gemini{{"Google Gemini"}}

node_teacher -->|"uses"| node_app
node_app -->|"renders"| node_navigation
node_app -->|"renders"| node_header
node_app -->|"routes to"| node_dashboard
node_app -->|"routes to"| node_classes
node_app -->|"routes to"| node_activities
node_app -->|"routes to"| node_reports
node_app -->|"routes to"| node_toolsview
node_app -->|"renders"| node_chatbot
node_app -->|"loads and saves"| node_storage
node_storage -->|"reads and writes"| node_browserstore
node_activities -->|"requests ideas"| node_ai
node_activities -->|"requests speech"| node_ai
node_activities -->|"decodes audio"| node_audio
node_reports -->|"requests report"| node_ai
node_chatbot -->|"creates chat"| node_ai
node_ai -->|"calls API"| node_gemini
node_classes -->|"generates IDs"| node_helpers
node_reports -->|"exports CSV"| node_helpers
node_toolsview -->|"generates IDs"| node_helpers
node_toolsview -.->|"embeds music"| node_teacher
node_navigation -->|"renders"| node_icon
node_chatbot -->|"uses"| node_button
node_chatbot -->|"uses"| node_icon
node_chatbot -->|"uses"| node_spinner
node_activities -->|"uses"| node_button
node_activities -->|"uses"| node_card
node_activities -->|"uses"| node_icon
node_activities -->|"uses"| node_spinner
node_classes -->|"uses"| node_button
node_classes -->|"uses"| node_card
node_classes -->|"uses"| node_icon
node_classes -->|"uses"| node_modal
node_dashboard -->|"uses"| node_card
node_dashboard -->|"uses"| node_icon
node_reports -->|"uses"| node_button
node_reports -->|"uses"| node_card
node_reports -->|"uses"| node_spinner
node_toolsview -->|"uses"| node_button
node_toolsview -->|"uses"| node_card
node_toolsview -->|"uses"| node_icon

click node_app "https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/App.tsx"
click node_navigation "https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/components/layout/Sidebar.tsx"
click node_header "https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/components/layout/Header.tsx"
click node_storage "https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/hooks/useLocalStorage.ts"
click node_dashboard "https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/components/views/DashboardView.tsx"
click node_classes "https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/components/views/ClassesView.tsx"
click node_activities "https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/components/views/ActivitiesView.tsx"
click node_reports "https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/components/views/ReportsView.tsx"
click node_ai "https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/services/geminiService.ts"
click node_chatbot "https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/components/Chatbot.tsx"
click node_toolsview "https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/components/views/ToolsView.tsx"
click node_audio "https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/utils/audioUtils.ts"
click node_helpers "https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/utils/helpers.ts"
click node_button "https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/components/ui/Button.tsx"
click node_card "https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/components/ui/Card.tsx"
click node_icon "https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/components/ui/Icon.tsx"
click node_modal "https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/components/ui/Modal.tsx"
click node_spinner "https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/components/ui/Spinner.tsx"

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_navigation,node_header,node_storage,node_button,node_card,node_icon,node_modal,node_spinner toneBlue
class node_dashboard,node_classes,node_activities,node_helpers,node_browserstore toneAmber
class node_reports,node_ai,node_chatbot toneMint
class node_toolsview,node_audio toneRose
class node_teacher,node_gemini toneIndigo
```

## Components

### App Shell

- [App Router](https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/App.tsx): `fitclass-–-physical-education-smart-manager/App.tsx`
- [Navigation](https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/components/layout/Sidebar.tsx): `fitclass-–-physical-education-smart-manager/components/layout/Sidebar.tsx`
- [Page Header](https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/components/layout/Header.tsx): `fitclass-–-physical-education-smart-manager/components/layout/Header.tsx`
- [Local Storage Hook](https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/hooks/useLocalStorage.ts): `fitclass-–-physical-education-smart-manager/hooks/useLocalStorage.ts`
- [Button](https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/components/ui/Button.tsx): `fitclass-–-physical-education-smart-manager/components/ui/Button.tsx`
- [Card](https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/components/ui/Card.tsx): `fitclass-–-physical-education-smart-manager/components/ui/Card.tsx`
- [Icon](https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/components/ui/Icon.tsx): `fitclass-–-physical-education-smart-manager/components/ui/Icon.tsx`
- [Modal](https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/components/ui/Modal.tsx): `fitclass-–-physical-education-smart-manager/components/ui/Modal.tsx`
- [Spinner](https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/components/ui/Spinner.tsx): `fitclass-–-physical-education-smart-manager/components/ui/Spinner.tsx`

### Class Records

- [Dashboard](https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/components/views/DashboardView.tsx): `fitclass-–-physical-education-smart-manager/components/views/DashboardView.tsx`
- [Class Management](https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/components/views/ClassesView.tsx): `fitclass-–-physical-education-smart-manager/components/views/ClassesView.tsx`
- [Activity Management](https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/components/views/ActivitiesView.tsx): `fitclass-–-physical-education-smart-manager/components/views/ActivitiesView.tsx`
- [Shared Helpers](https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/utils/helpers.ts): `fitclass-–-physical-education-smart-manager/utils/helpers.ts`

### Insights and AI

- [Reports and Exports](https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/components/views/ReportsView.tsx): `fitclass-–-physical-education-smart-manager/components/views/ReportsView.tsx`
- [Gemini Service](https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/services/geminiService.ts): `fitclass-–-physical-education-smart-manager/services/geminiService.ts`
- [AI Chatbot](https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/components/Chatbot.tsx): `fitclass-–-physical-education-smart-manager/components/Chatbot.tsx`

### Classroom Tools

- [Classroom Tools](https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/components/views/ToolsView.tsx): `fitclass-–-physical-education-smart-manager/components/views/ToolsView.tsx`
- [Audio Utilities](https://github.com/kurziokode/kurziokode.github.io/blob/main/fitclass-%E2%80%93-physical-education-smart-manager/utils/audioUtils.ts): `fitclass-–-physical-education-smart-manager/utils/audioUtils.ts`

### Other components

- **Teacher**
- **Browser Storage**
- **Google Gemini**

## Connections

- Teacher → App Router: uses
- App Router → Navigation: renders (evidence: `fitclass-–-physical-education-smart-manager/App.tsx`)
- App Router → Page Header: renders (evidence: `fitclass-–-physical-education-smart-manager/App.tsx`)
- App Router → Dashboard: routes to (evidence: `fitclass-–-physical-education-smart-manager/App.tsx`)
- App Router → Class Management: routes to (evidence: `fitclass-–-physical-education-smart-manager/App.tsx`)
- App Router → Activity Management: routes to (evidence: `fitclass-–-physical-education-smart-manager/App.tsx`)
- App Router → Reports and Exports: routes to (evidence: `fitclass-–-physical-education-smart-manager/App.tsx`)
- App Router → Classroom Tools: routes to (evidence: `fitclass-–-physical-education-smart-manager/App.tsx`)
- App Router → AI Chatbot: renders (evidence: `fitclass-–-physical-education-smart-manager/App.tsx`)
- App Router → Local Storage Hook: loads and saves (evidence: `fitclass-–-physical-education-smart-manager/App.tsx`)
- Local Storage Hook → Browser Storage: reads and writes (evidence: `fitclass-–-physical-education-smart-manager/hooks/useLocalStorage.ts`)
- Activity Management → Gemini Service: requests ideas (evidence: `fitclass-–-physical-education-smart-manager/components/views/ActivitiesView.tsx`)
- Activity Management → Gemini Service: requests speech (evidence: `fitclass-–-physical-education-smart-manager/components/views/ActivitiesView.tsx`)
- Activity Management → Audio Utilities: decodes audio (evidence: `fitclass-–-physical-education-smart-manager/components/views/ActivitiesView.tsx`)
- Reports and Exports → Gemini Service: requests report (evidence: `fitclass-–-physical-education-smart-manager/components/views/ReportsView.tsx`)
- AI Chatbot → Gemini Service: creates chat (evidence: `fitclass-–-physical-education-smart-manager/components/Chatbot.tsx`)
- Gemini Service → Google Gemini: calls API (evidence: `fitclass-–-physical-education-smart-manager/services/geminiService.ts`)
- Class Management → Shared Helpers: generates IDs (evidence: `fitclass-–-physical-education-smart-manager/components/views/ClassesView.tsx`)
- Reports and Exports → Shared Helpers: exports CSV (evidence: `fitclass-–-physical-education-smart-manager/components/views/ReportsView.tsx`)
- Classroom Tools → Shared Helpers: generates IDs (evidence: `fitclass-–-physical-education-smart-manager/components/views/ToolsView.tsx`)
- Classroom Tools → Teacher: embeds music
- Navigation → Icon: renders (evidence: `fitclass-–-physical-education-smart-manager/components/layout/Sidebar.tsx`)
- AI Chatbot → Button: uses (evidence: `fitclass-–-physical-education-smart-manager/components/Chatbot.tsx`)
- AI Chatbot → Icon: uses (evidence: `fitclass-–-physical-education-smart-manager/components/Chatbot.tsx`)
- AI Chatbot → Spinner: uses (evidence: `fitclass-–-physical-education-smart-manager/components/Chatbot.tsx`)
- Activity Management → Button: uses (evidence: `fitclass-–-physical-education-smart-manager/components/views/ActivitiesView.tsx`)
- Activity Management → Card: uses (evidence: `fitclass-–-physical-education-smart-manager/components/views/ActivitiesView.tsx`)
- Activity Management → Icon: uses (evidence: `fitclass-–-physical-education-smart-manager/components/views/ActivitiesView.tsx`)
- Activity Management → Spinner: uses (evidence: `fitclass-–-physical-education-smart-manager/components/views/ActivitiesView.tsx`)
- Class Management → Button: uses (evidence: `fitclass-–-physical-education-smart-manager/components/views/ClassesView.tsx`)
- Class Management → Card: uses (evidence: `fitclass-–-physical-education-smart-manager/components/views/ClassesView.tsx`)
- Class Management → Icon: uses (evidence: `fitclass-–-physical-education-smart-manager/components/views/ClassesView.tsx`)
- Class Management → Modal: uses (evidence: `fitclass-–-physical-education-smart-manager/components/views/ClassesView.tsx`)
- Dashboard → Card: uses (evidence: `fitclass-–-physical-education-smart-manager/components/views/DashboardView.tsx`)
- Dashboard → Icon: uses (evidence: `fitclass-–-physical-education-smart-manager/components/views/DashboardView.tsx`)
- Reports and Exports → Button: uses (evidence: `fitclass-–-physical-education-smart-manager/components/views/ReportsView.tsx`)
- Reports and Exports → Card: uses (evidence: `fitclass-–-physical-education-smart-manager/components/views/ReportsView.tsx`)
- Reports and Exports → Spinner: uses (evidence: `fitclass-–-physical-education-smart-manager/components/views/ReportsView.tsx`)
- Classroom Tools → Button: uses (evidence: `fitclass-–-physical-education-smart-manager/components/views/ToolsView.tsx`)
- Classroom Tools → Card: uses (evidence: `fitclass-–-physical-education-smart-manager/components/views/ToolsView.tsx`)
- Classroom Tools → Icon: uses (evidence: `fitclass-–-physical-education-smart-manager/components/views/ToolsView.tsx`)