# mrbrodinha/mrbrodinha.github.io architecture

> Architecture diagram of the GitHub repository mrbrodinha/mrbrodinha.github.io, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/mrbrodinha/mrbrodinha.github.io
- Repository: https://github.com/mrbrodinha/mrbrodinha.github.io

## Overview

mrbrodinha.com is a React personal website with shared accounts and several feature pages. Its principal workflow is Brodle: a visitor plays a daily melody challenge, while signed-in users can create melodies, save drafts, submit them for review, and access scheduled puzzles. The site also provides account management, Red Bull catalog and ratings, and separate MVG and Crazy Wildlife pages. The graph follows documented routing and indexed module references; some feature internals were not sampled, so uncertain connections are omitted.

Main entry points: [`src/App.tsx`](https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/App.tsx) (Route App), [`src/lib/supabase.ts`](https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/lib/supabase.ts) (Supabase Client), [`src/components/brodle/services/melodyService.ts`](https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/brodle/services/melodyService.ts) (Cloud Melody Service), [`src/components/brodle/Brodle.tsx`](https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/brodle/Brodle.tsx) (Daily Challenge)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Site Shell"]
  node_app["Route App<br/>[App.tsx]"]
  node_layout["Site Layout<br/>[SiteLayout.tsx]"]
  node_home["Home Page<br/>[Home.tsx]"]
end

subgraph group_accounts["Shared Accounts"]
  node_authprovider["Auth Provider<br/>[AuthProvider.tsx]"]
  node_authpage["Sign In and Signup<br/>[AuthPage.tsx]"]
  node_authreturn["Auth Return<br/>[AuthReturn.tsx]"]
  node_account["Account Page<br/>[AccountPage.tsx]"]
  node_authcontext["Auth Context<br/>[authContext.ts]"]
  node_supabase["Supabase Client<br/>[supabase.ts]"]
end

subgraph group_brodle["Brodle Music Game"]
  node_brodle["Daily Challenge<br/>[Brodle.tsx]"]
  node_musicrules["Music Rules<br/>[musicGame.ts]"]
  node_progress["Progress Tracking"]
  node_dailyload["Daily Challenge Loading"]
  node_melodycreator["Melody Studio<br/>[MelodyCreator.tsx]"]
  node_composer["Melody Composer<br/>[melodyComposer.ts]"]
  node_melodylibrary["Melody Library Data<br/>[melodyLibrary.ts]"]
  node_melodyservice["Cloud Melody Service<br/>[melodyService.ts]"]
  node_admin["Review and Schedule<br/>[BrodleAdmin.tsx]"]
  node_mymelodies["My Melodies<br/>[MyMelodies.tsx]"]
end

subgraph group_features["Other Features"]
  node_redbull["Red Bull Page<br/>[Redbull.tsx]"]
  node_redbullservice["Drink Data Service<br/>[redbullService.ts]"]
  node_redbullaccess["Red Bull Access"]
  node_mvg["MVG Page<br/>[Mvg.tsx]"]
  node_wildlife["Wildlife Player<br/>[CrazyWildlife.tsx]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_app
node_app -->|"wraps"| node_authprovider
node_app -->|"wraps"| node_layout
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_authpage
node_app -->|"routes to"| node_authreturn
node_app -->|"routes to"| node_account
node_app -->|"routes to"| node_brodle
node_app -->|"routes to"| node_melodycreator
node_app -->|"routes to"| node_admin
node_app -->|"routes to"| node_mymelodies
node_app -->|"routes to"| node_redbull
node_app -->|"routes to"| node_mvg
node_app -->|"routes to"| node_wildlife
node_authprovider -->|"provides state"| node_authcontext
node_authprovider -->|"uses client"| node_supabase
node_authpage -->|"uses client"| node_supabase
node_authpage -->|"reads state"| node_authcontext
node_authreturn -->|"uses client"| node_supabase
node_account -->|"reads state"| node_authcontext
node_brodle -->|"uses rules"| node_musicrules
node_brodle -->|"loads progress"| node_progress
node_brodle -->|"loads challenge"| node_dailyload
node_progress -->|"reads account"| node_authcontext
node_progress -->|"syncs progress"| node_supabase
node_melodycreator -->|"edits drafts"| node_composer
node_melodycreator -->|"uses melody data"| node_melodylibrary
node_melodycreator -->|"saves and submits"| node_melodyservice
node_melodyservice -->|"reads and writes"| node_supabase
node_melodyservice -->|"converts payload"| node_melodylibrary
node_admin -->|"manages melodies"| node_melodyservice
node_mymelodies -->|"loads melodies"| node_melodyservice
node_redbullservice -->|"uses client"| node_supabase
node_redbullaccess -->|"uses client"| node_supabase

click node_app "https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/App.tsx"
click node_layout "https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/layout/SiteLayout.tsx"
click node_home "https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/home/Home.tsx"
click node_authprovider "https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/auth/AuthProvider.tsx"
click node_authpage "https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/auth/AuthPage.tsx"
click node_authreturn "https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/auth/AuthReturn.tsx"
click node_account "https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/auth/AccountPage.tsx"
click node_authcontext "https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/auth/authContext.ts"
click node_supabase "https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/lib/supabase.ts"
click node_brodle "https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/brodle/Brodle.tsx"
click node_musicrules "https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/brodle/lib/musicGame.ts"
click node_progress "https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/brodle/hooks/useBrodleProgress.ts"
click node_dailyload "https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/brodle/hooks/useDailyChallenge.ts"
click node_melodycreator "https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/brodle/creator/MelodyCreator.tsx"
click node_composer "https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/brodle/creator/melodyComposer.ts"
click node_melodylibrary "https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/brodle/lib/melodyLibrary.ts"
click node_melodyservice "https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/brodle/services/melodyService.ts"
click node_admin "https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/brodle/admin/BrodleAdmin.tsx"
click node_mymelodies "https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/brodle/library/MyMelodies.tsx"
click node_redbull "https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/redbull/Redbull.tsx"
click node_redbullservice "https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/redbull/redbullService.ts"
click node_redbullaccess "https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/redbull/useRedbullAccess.ts"
click node_mvg "https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/mvg/Mvg.tsx"
click node_wildlife "https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/wildlife/CrazyWildlife.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_layout,node_home toneBlue
class node_authprovider,node_authpage,node_authreturn,node_account,node_authcontext,node_supabase toneAmber
class node_brodle,node_musicrules,node_progress,node_dailyload,node_melodycreator,node_composer,node_melodylibrary,node_melodyservice,node_admin,node_mymelodies toneMint
class node_redbull,node_redbullservice,node_redbullaccess,node_mvg,node_wildlife toneRose
class node_visitor toneIndigo
```

## Components

### Site Shell

- [Route App](https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/App.tsx): `src/App.tsx`
- [Site Layout](https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/layout/SiteLayout.tsx): `src/components/layout/SiteLayout.tsx`
- [Home Page](https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/home/Home.tsx): `src/components/home/Home.tsx`

### Shared Accounts

- [Auth Provider](https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/auth/AuthProvider.tsx): `src/auth/AuthProvider.tsx`
- [Sign In and Signup](https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/auth/AuthPage.tsx): `src/auth/AuthPage.tsx`
- [Auth Return](https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/auth/AuthReturn.tsx): `src/auth/AuthReturn.tsx`
- [Account Page](https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/auth/AccountPage.tsx): `src/auth/AccountPage.tsx`
- [Auth Context](https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/auth/authContext.ts): `src/auth/authContext.ts`
- [Supabase Client](https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/lib/supabase.ts): `src/lib/supabase.ts`

### Brodle Music Game

- [Daily Challenge](https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/brodle/Brodle.tsx): `src/components/brodle/Brodle.tsx`
- [Music Rules](https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/brodle/lib/musicGame.ts): `src/components/brodle/lib/musicGame.ts`
- [Progress Tracking](https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/brodle/hooks/useBrodleProgress.ts): `src/components/brodle/hooks/useBrodleProgress.ts`
- [Daily Challenge Loading](https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/brodle/hooks/useDailyChallenge.ts): `src/components/brodle/hooks/useDailyChallenge.ts`
- [Melody Studio](https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/brodle/creator/MelodyCreator.tsx): `src/components/brodle/creator/MelodyCreator.tsx`
- [Melody Composer](https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/brodle/creator/melodyComposer.ts): `src/components/brodle/creator/melodyComposer.ts`
- [Melody Library Data](https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/brodle/lib/melodyLibrary.ts): `src/components/brodle/lib/melodyLibrary.ts`
- [Cloud Melody Service](https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/brodle/services/melodyService.ts): `src/components/brodle/services/melodyService.ts`
- [Review and Schedule](https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/brodle/admin/BrodleAdmin.tsx): `src/components/brodle/admin/BrodleAdmin.tsx`
- [My Melodies](https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/brodle/library/MyMelodies.tsx): `src/components/brodle/library/MyMelodies.tsx`

### Other Features

- [Red Bull Page](https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/redbull/Redbull.tsx): `src/components/redbull/Redbull.tsx`
- [Drink Data Service](https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/redbull/redbullService.ts): `src/components/redbull/redbullService.ts`
- [Red Bull Access](https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/redbull/useRedbullAccess.ts): `src/components/redbull/useRedbullAccess.ts`
- [MVG Page](https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/mvg/Mvg.tsx): `src/components/mvg/Mvg.tsx`
- [Wildlife Player](https://github.com/mrbrodinha/mrbrodinha.github.io/blob/main/src/components/wildlife/CrazyWildlife.tsx): `src/components/wildlife/CrazyWildlife.tsx`

### Other components

- **Visitor**

## Connections

- Visitor → Route App: opens (evidence: `src/App.tsx`)
- Route App → Auth Provider: wraps (evidence: `src/App.tsx`)
- Route App → Site Layout: wraps (evidence: `src/App.tsx`)
- Route App → Home Page: routes to (evidence: `src/App.tsx`)
- Route App → Sign In and Signup: routes to (evidence: `src/App.tsx`)
- Route App → Auth Return: routes to (evidence: `src/App.tsx`)
- Route App → Account Page: routes to (evidence: `src/App.tsx`)
- Route App → Daily Challenge: routes to (evidence: `src/App.tsx`)
- Route App → Melody Studio: routes to (evidence: `src/App.tsx`)
- Route App → Review and Schedule: routes to (evidence: `src/App.tsx`)
- Route App → My Melodies: routes to (evidence: `src/App.tsx`)
- Route App → Red Bull Page: routes to (evidence: `src/App.tsx`)
- Route App → MVG Page: routes to (evidence: `src/App.tsx`)
- Route App → Wildlife Player: routes to (evidence: `src/App.tsx`)
- Auth Provider → Auth Context: provides state (evidence: `src/auth/AuthProvider.tsx`)
- Auth Provider → Supabase Client: uses client (evidence: `src/auth/AuthProvider.tsx`)
- Sign In and Signup → Supabase Client: uses client (evidence: `src/auth/AuthPage.tsx`)
- Sign In and Signup → Auth Context: reads state (evidence: `src/auth/AuthPage.tsx`)
- Auth Return → Supabase Client: uses client (evidence: `src/auth/AuthReturn.tsx`)
- Account Page → Auth Context: reads state (evidence: `src/auth/AccountPage.tsx`)
- Daily Challenge → Music Rules: uses rules (evidence: `src/components/brodle/Brodle.tsx`)
- Daily Challenge → Progress Tracking: loads progress (evidence: `src/components/brodle/Brodle.tsx`)
- Daily Challenge → Daily Challenge Loading: loads challenge (evidence: `src/components/brodle/Brodle.tsx`)
- Progress Tracking → Auth Context: reads account (evidence: `src/components/brodle/hooks/useBrodleProgress.ts`)
- Progress Tracking → Supabase Client: syncs progress
- Melody Studio → Melody Composer: edits drafts (evidence: `src/components/brodle/creator/MelodyCreator.tsx`)
- Melody Studio → Melody Library Data: uses melody data (evidence: `src/components/brodle/creator/MelodyCreator.tsx`)
- Melody Studio → Cloud Melody Service: saves and submits
- Cloud Melody Service → Supabase Client: reads and writes (evidence: `src/components/brodle/services/melodyService.ts`)
- Cloud Melody Service → Melody Library Data: converts payload (evidence: `src/components/brodle/services/melodyService.ts`)
- Review and Schedule → Cloud Melody Service: manages melodies (evidence: `src/components/brodle/admin/BrodleAdmin.tsx`)
- My Melodies → Cloud Melody Service: loads melodies (evidence: `src/components/brodle/library/MyMelodies.tsx`)
- Drink Data Service → Supabase Client: uses client (evidence: `src/components/redbull/redbullService.ts`)
- Red Bull Access → Supabase Client: uses client (evidence: `src/components/redbull/useRedbullAccess.ts`)