# mpoulshock1121/code4football architecture

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

## Overview

Code4Football is a football- and soccer-themed coding-learning app: learners choose a sport/team, study tutorials or guided projects, run code and games, then earn XP and badges. The graph emphasizes the sampled lesson and game completion flows; the README documents additional team, profile, and dashboard capabilities whose detailed wiring was not sampled.

Main entry points: [`src/app/(app)/play/[gameId]/GameClient.tsx`](https://github.com/mpoulshock1121/code4football/blob/main/src/app/(app)/play/%5BgameId%5D/GameClient.tsx) (Game experience), [`src/app/(app)/learn/[courseId]/LearnClient.tsx`](https://github.com/mpoulshock1121/code4football/blob/main/src/app/(app)/learn/%5BcourseId%5D/LearnClient.tsx) (Lesson experience), [`src/lib/progress.ts`](https://github.com/mpoulshock1121/code4football/blob/main/src/lib/progress.ts) (Progress records), [`src/lib/supabase/client.ts`](https://github.com/mpoulshock1121/code4football/blob/main/src/lib/supabase/client.ts) (Browser client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Entry & identity"]
  node_home["Home<br/>[page.tsx]"]
  node_team["Team selection<br/>[page.tsx]"]
  node_authpages["Login &amp; signup"]
  node_callback["Auth callback<br/>[page.tsx]"]
  node_authhook["Auth state<br/>[useAuth.ts]"]
  node_dashboard["Dashboard<br/>[page.tsx]"]
  node_profile["Profile<br/>[page.tsx]"]
end

subgraph group_learning["Courses &amp; practice"]
  node_coursecontent["Course content<br/>[courses.ts]"]
  node_lesson["Lesson experience<br/>[LearnClient.tsx]"]
  node_editor["Code editor<br/>[CodeEditor.tsx]"]
  node_markdown["Lesson renderer<br/>[Markdown.tsx]"]
  node_runner["Code runner<br/>[code-runner.ts]"]
end

subgraph group_games["Interactive games"]
  node_gamecatalog["Game catalog<br/>[games.ts]"]
  node_gameexperience["Game experience<br/>[GameClient.tsx]"]
  node_playcaller["Play caller<br/>[PlayCaller.tsx]"]
  node_formation["Formation builder"]
end

subgraph group_progress["Progress &amp; rewards"]
  node_progress["Progress records<br/>[progress.ts]"]
  node_badges["Badge awards<br/>[badges.ts]"]
end

subgraph group_platform["Supabase platform"]
  node_supabase[("Supabase")]
  node_schema["Application schema<br/>[schema.sql]"]
  node_client["Browser client<br/>[client.ts]"]
  node_server["Server client<br/>[server.ts]"]
end

node_learner(("Learner"))

node_learner -->|"visits"| node_home
node_home -->|"chooses sport"| node_team
node_learner -->|"signs in"| node_authpages
node_authhook -->|"creates client"| node_client
node_authhook -->|"reads auth"| node_supabase
node_authpages -.->|"authenticates"| node_supabase
node_callback -.->|"handles callback"| node_supabase
node_learner -->|"opens learning"| node_dashboard
node_dashboard -->|"lists courses"| node_coursecontent
node_learner -->|"opens lesson"| node_lesson
node_lesson -->|"loads course"| node_coursecontent
node_lesson -->|"renders lesson"| node_markdown
node_lesson -->|"shows editor"| node_editor
node_lesson -->|"runs code"| node_runner
node_lesson -->|"saves code and completion"| node_progress
node_lesson -->|"fetches summary"| node_progress
node_lesson -->|"syncs awards"| node_badges
node_learner -->|"opens game"| node_gameexperience
node_gameexperience -->|"loads game"| node_gamecatalog
node_gameexperience -->|"renders play caller"| node_playcaller
node_gameexperience -->|"renders formation"| node_formation
node_playcaller -->|"shows editor"| node_editor
node_playcaller -->|"reports score"| node_gameexperience
node_formation -->|"reports score"| node_gameexperience
node_gameexperience -->|"records XP"| node_progress
node_gameexperience -->|"fetches summary"| node_progress
node_gameexperience -->|"syncs awards"| node_badges
node_progress -->|"creates client"| node_client
node_badges -->|"creates client"| node_client
node_client -->|"reads and writes"| node_supabase
node_server -->|"accesses server data"| node_supabase
node_schema -->|"defines tables"| node_supabase
node_learner -->|"views profile"| node_profile

click node_home "https://github.com/mpoulshock1121/code4football/blob/main/src/app/page.tsx"
click node_team "https://github.com/mpoulshock1121/code4football/blob/main/src/app/choose-team/page.tsx"
click node_authpages "https://github.com/mpoulshock1121/code4football/tree/main/src/app/(auth)"
click node_callback "https://github.com/mpoulshock1121/code4football/blob/main/src/app/auth/callback/page.tsx"
click node_authhook "https://github.com/mpoulshock1121/code4football/blob/main/src/hooks/useAuth.ts"
click node_dashboard "https://github.com/mpoulshock1121/code4football/blob/main/src/app/(app)/dashboard/page.tsx"
click node_profile "https://github.com/mpoulshock1121/code4football/blob/main/src/app/(app)/profile/page.tsx"
click node_coursecontent "https://github.com/mpoulshock1121/code4football/blob/main/src/lib/courses.ts"
click node_lesson "https://github.com/mpoulshock1121/code4football/blob/main/src/app/(app)/learn/%5BcourseId%5D/LearnClient.tsx"
click node_editor "https://github.com/mpoulshock1121/code4football/blob/main/src/components/learning/CodeEditor.tsx"
click node_markdown "https://github.com/mpoulshock1121/code4football/blob/main/src/components/learning/Markdown.tsx"
click node_runner "https://github.com/mpoulshock1121/code4football/blob/main/src/lib/code-runner.ts"
click node_gamecatalog "https://github.com/mpoulshock1121/code4football/blob/main/src/lib/games.ts"
click node_gameexperience "https://github.com/mpoulshock1121/code4football/blob/main/src/app/(app)/play/%5BgameId%5D/GameClient.tsx"
click node_playcaller "https://github.com/mpoulshock1121/code4football/blob/main/src/components/games/PlayCaller.tsx"
click node_formation "https://github.com/mpoulshock1121/code4football/blob/main/src/components/games/FormationBuilder.tsx"
click node_progress "https://github.com/mpoulshock1121/code4football/blob/main/src/lib/progress.ts"
click node_badges "https://github.com/mpoulshock1121/code4football/blob/main/src/lib/badges.ts"
click node_schema "https://github.com/mpoulshock1121/code4football/blob/main/database/schema.sql"
click node_client "https://github.com/mpoulshock1121/code4football/blob/main/src/lib/supabase/client.ts"
click node_server "https://github.com/mpoulshock1121/code4football/blob/main/src/lib/supabase/server.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_home,node_team,node_authpages,node_callback,node_authhook,node_dashboard,node_profile toneBlue
class node_coursecontent,node_lesson,node_editor,node_markdown,node_runner toneAmber
class node_gamecatalog,node_gameexperience,node_playcaller,node_formation toneMint
class node_progress,node_badges toneRose
class node_supabase,node_schema,node_client,node_server,node_learner toneIndigo
```

## Components

### Entry & identity

- [Home](https://github.com/mpoulshock1121/code4football/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [Team selection](https://github.com/mpoulshock1121/code4football/blob/main/src/app/choose-team/page.tsx): `src/app/choose-team/page.tsx`
- [Login & signup](https://github.com/mpoulshock1121/code4football/tree/main/src/app/(auth)): `src/app/(auth)`
- [Auth callback](https://github.com/mpoulshock1121/code4football/blob/main/src/app/auth/callback/page.tsx): `src/app/auth/callback/page.tsx`
- [Auth state](https://github.com/mpoulshock1121/code4football/blob/main/src/hooks/useAuth.ts): `src/hooks/useAuth.ts`
- [Dashboard](https://github.com/mpoulshock1121/code4football/blob/main/src/app/(app)/dashboard/page.tsx): `src/app/(app)/dashboard/page.tsx`
- [Profile](https://github.com/mpoulshock1121/code4football/blob/main/src/app/(app)/profile/page.tsx): `src/app/(app)/profile/page.tsx`

### Courses & practice

- [Course content](https://github.com/mpoulshock1121/code4football/blob/main/src/lib/courses.ts): `src/lib/courses.ts`
- [Lesson experience](https://github.com/mpoulshock1121/code4football/blob/main/src/app/(app)/learn/%5BcourseId%5D/LearnClient.tsx): `src/app/(app)/learn/[courseId]/LearnClient.tsx`
- [Code editor](https://github.com/mpoulshock1121/code4football/blob/main/src/components/learning/CodeEditor.tsx): `src/components/learning/CodeEditor.tsx`
- [Lesson renderer](https://github.com/mpoulshock1121/code4football/blob/main/src/components/learning/Markdown.tsx): `src/components/learning/Markdown.tsx`
- [Code runner](https://github.com/mpoulshock1121/code4football/blob/main/src/lib/code-runner.ts): `src/lib/code-runner.ts`

### Interactive games

- [Game catalog](https://github.com/mpoulshock1121/code4football/blob/main/src/lib/games.ts): `src/lib/games.ts`
- [Game experience](https://github.com/mpoulshock1121/code4football/blob/main/src/app/(app)/play/%5BgameId%5D/GameClient.tsx): `src/app/(app)/play/[gameId]/GameClient.tsx`
- [Play caller](https://github.com/mpoulshock1121/code4football/blob/main/src/components/games/PlayCaller.tsx): `src/components/games/PlayCaller.tsx`
- [Formation builder](https://github.com/mpoulshock1121/code4football/blob/main/src/components/games/FormationBuilder.tsx): `src/components/games/FormationBuilder.tsx`

### Progress & rewards

- [Progress records](https://github.com/mpoulshock1121/code4football/blob/main/src/lib/progress.ts): `src/lib/progress.ts`
- [Badge awards](https://github.com/mpoulshock1121/code4football/blob/main/src/lib/badges.ts): `src/lib/badges.ts`

### Supabase platform

- **Supabase**
- [Application schema](https://github.com/mpoulshock1121/code4football/blob/main/database/schema.sql): `database/schema.sql`
- [Browser client](https://github.com/mpoulshock1121/code4football/blob/main/src/lib/supabase/client.ts): `src/lib/supabase/client.ts`
- [Server client](https://github.com/mpoulshock1121/code4football/blob/main/src/lib/supabase/server.ts): `src/lib/supabase/server.ts`

### Other components

- **Learner**

## Connections

- Learner → Home: visits
- Home → Team selection: chooses sport
- Learner → Login & signup: signs in
- Auth state → Browser client: creates client
- Auth state → Supabase: reads auth
- Login & signup → Supabase: authenticates
- Auth callback → Supabase: handles callback
- Learner → Dashboard: opens learning
- Dashboard → Course content: lists courses
- Learner → Lesson experience: opens lesson
- Lesson experience → Course content: loads course
- Lesson experience → Lesson renderer: renders lesson
- Lesson experience → Code editor: shows editor
- Lesson experience → Code runner: runs code
- Lesson experience → Progress records: saves code and completion
- Lesson experience → Progress records: fetches summary
- Lesson experience → Badge awards: syncs awards
- Learner → Game experience: opens game
- Game experience → Game catalog: loads game
- Game experience → Play caller: renders play caller
- Game experience → Formation builder: renders formation
- Play caller → Code editor: shows editor
- Play caller → Game experience: reports score
- Formation builder → Game experience: reports score
- Game experience → Progress records: records XP
- Game experience → Progress records: fetches summary
- Game experience → Badge awards: syncs awards
- Progress records → Browser client: creates client
- Badge awards → Browser client: creates client
- Browser client → Supabase: reads and writes
- Server client → Supabase: accesses server data
- Application schema → Supabase: defines tables
- Learner → Profile: views profile