How mrbrodinha/mrbrodinha.github.io works
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: App.tsx Route App · supabase.ts Supabase Client · melodyService.ts Cloud Melody Service · Brodle.tsx Daily Challenge
Components 25
Site Shell
- Route App
src/App.tsx - Site Layout
src/components/layout/SiteLayout.tsx - Home Page
src/components/home/Home.tsx
Shared Accounts
- Auth Provider
src/auth/AuthProvider.tsx - Sign In and Signup
src/auth/AuthPage.tsx - Auth Return
src/auth/AuthReturn.tsx - Account Page
src/auth/AccountPage.tsx - Auth Context
src/auth/authContext.ts - Supabase Client
src/lib/supabase.ts
Brodle Music Game
- Daily Challenge
src/components/brodle/Brodle.tsx - Music Rules
src/components/brodle/lib/musicGame.ts - Progress Tracking
src/components/brodle/hooks/useBrodleProgress.ts - Daily Challenge Loading
src/components/brodle/hooks/useDailyChallenge.ts - Melody Studio
src/components/brodle/creator/MelodyCreator.tsx - Melody Composer
src/components/brodle/creator/melodyComposer.ts - Melody Library Data
src/components/brodle/lib/melodyLibrary.ts - Cloud Melody Service
src/components/brodle/services/melodyService.ts - Review and Schedule
src/components/brodle/admin/BrodleAdmin.tsx - My Melodies
src/components/brodle/library/MyMelodies.tsx
Other Features
- Red Bull Page
src/components/redbull/Redbull.tsx - Drink Data Service
src/components/redbull/redbullService.ts - Red Bull Access
src/components/redbull/useRedbullAccess.ts - MVG Page
src/components/mvg/Mvg.tsx - Wildlife Player
src/components/wildlife/CrazyWildlife.tsx
Other components
- Visitor
Connections 34
- Visitor → Route App: opens
src/App.tsx - Route App → Auth Provider: wraps
src/App.tsx - Route App → Site Layout: wraps
src/App.tsx - Route App → Home Page: routes to
src/App.tsx - Route App → Sign In and Signup: routes to
src/App.tsx - Route App → Auth Return: routes to
src/App.tsx - Route App → Account Page: routes to
src/App.tsx - Route App → Daily Challenge: routes to
src/App.tsx - Route App → Melody Studio: routes to
src/App.tsx - Route App → Review and Schedule: routes to
src/App.tsx - Route App → My Melodies: routes to
src/App.tsx - Route App → Red Bull Page: routes to
src/App.tsx - Route App → MVG Page: routes to
src/App.tsx - Route App → Wildlife Player: routes to
src/App.tsx - Auth Provider → Auth Context: provides state
src/auth/AuthProvider.tsx - Auth Provider → Supabase Client: uses client
src/auth/AuthProvider.tsx - Sign In and Signup → Supabase Client: uses client
src/auth/AuthPage.tsx - Sign In and Signup → Auth Context: reads state
src/auth/AuthPage.tsx - Auth Return → Supabase Client: uses client
src/auth/AuthReturn.tsx - Account Page → Auth Context: reads state
src/auth/AccountPage.tsx - Daily Challenge → Music Rules: uses rules
src/components/brodle/Brodle.tsx - Daily Challenge → Progress Tracking: loads progress
src/components/brodle/Brodle.tsx - Daily Challenge → Daily Challenge Loading: loads challenge
src/components/brodle/Brodle.tsx - Progress Tracking → Auth Context: reads account
src/components/brodle/hooks/useBrodleProgress.ts - Progress Tracking → Supabase Client: syncs progress
- Melody Studio → Melody Composer: edits drafts
src/components/brodle/creator/MelodyCreator.tsx - Melody Studio → Melody Library Data: uses melody data
src/components/brodle/creator/MelodyCreator.tsx - Melody Studio → Cloud Melody Service: saves and submits
- Cloud Melody Service → Supabase Client: reads and writes
src/components/brodle/services/melodyService.ts - Cloud Melody Service → Melody Library Data: converts payload
src/components/brodle/services/melodyService.ts - Review and Schedule → Cloud Melody Service: manages melodies
src/components/brodle/admin/BrodleAdmin.tsx - My Melodies → Cloud Melody Service: loads melodies
src/components/brodle/library/MyMelodies.tsx - Drink Data Service → Supabase Client: uses client
src/components/redbull/redbullService.ts - Red Bull Access → Supabase Client: uses client
src/components/redbull/useRedbullAccess.ts