← Work Samples
Domain LLM

Mirra AI

AI Fitness Avatar Video Generator

Click any component to explore how Mirra works — from the marketing landing page and Supabase auth through avatar customization, the credit economy, AI workout video generation, and achievements.

System Components

Step 1 — Authentication

Supabase Auth handles the full authentication lifecycle — email/password sign-up with email confirmation, sign-in, password reset via email link, and session persistence across page reloads. An onAuthStateChange listener in the ProgressContext keeps the session state in sync globally, so any component can reactively respond to sign-in and sign-out without prop drilling. New users are provisioned with a starting credit balance on first sign-up.

Supabase Auth@supabase/supabase-jsEmail confirmationPassword resetonAuthStateChangeSession persistenceProgressContext
AUTH FLOWS · authServicesignUp(email, pw)→ email confirmationsignIn(email, pw)→ session + user objectresetPassword(email)→ reset link via emailsignOut()→ session clearedSupabase Auth@supabase/supabase-jssupabase.auth.*JWT session tokensemail confirmation flowProgressContextonAuthStateChange → global sessionNew users provisioned with starting credit balance on first sign-up · session persists across page reloads
1 / 5