How mpoulshock1121/code4football works
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: GameClient.tsx Game experience · LearnClient.tsx Lesson experience · progress.ts Progress records · client.ts Browser client
Components 23
Entry & identity
- Home
src/app/page.tsx - Team selection
src/app/choose-team/page.tsx - Login & signup
src/app/(auth) - Auth callback
src/app/auth/callback/page.tsx - Auth state
src/hooks/useAuth.ts - Dashboard
src/app/(app)/dashboard/page.tsx - Profile
src/app/(app)/profile/page.tsx
Courses & practice
- Course content
src/lib/courses.ts - Lesson experience
src/app/(app)/learn/[courseId]/LearnClient.tsx - Code editor
src/components/learning/CodeEditor.tsx - Lesson renderer
src/components/learning/Markdown.tsx - Code runner
src/lib/code-runner.ts
Interactive games
- Game catalog
src/lib/games.ts - Game experience
src/app/(app)/play/[gameId]/GameClient.tsx - Play caller
src/components/games/PlayCaller.tsx - Formation builder
src/components/games/FormationBuilder.tsx
Progress & rewards
- Progress records
src/lib/progress.ts - Badge awards
src/lib/badges.ts
Supabase platform
- Supabase
- Application schema
database/schema.sql - Browser client
src/lib/supabase/client.ts - Server client
src/lib/supabase/server.ts
Other components
- Learner
Connections 33
- 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