KOMPAS

bySeppe Delva

Build a mobile-first app called Kompass. This is a social compass app for people who go out together — festivals, pub nights, city trips. Visual style: Background: #1a1a1a (dark grey) Cards and modals: #222222 Accent color: #e8620a (orange) Text: #ffffff Secondary text: #888888 Font: bold sans-serif Minimal, clean UI — large touch targets, native mobile feel Only build auth in this step. Nothing else. Screen 1 — Splash: Centered compass icon with slow rotation animation. App name "Kompass" in white bold below. Two buttons: "Maak account aan" (orange filled) and "Inloggen" (white outlined). Screen 2 — Register: Username input (unique, min 3 characters, only letters/numbers/underscores) Email input Password input (min 8 characters) Confirm password input Email verification: after registration, send a verification email — user must verify before accessing the app. Show message: "Check je email om je account te bevestigen." Live username availability check: green checkmark = available, red cross = taken Submit button: "Start je avontuur" Screen 3 — Avatar setup (after email verification): After first login, show a one-time setup screen before entering the app. Title: "Kies je avatar" Show a grid of 12 colored avatar options — each is a solid color circle with the user's first initial. Colors: #e8620a · #3b82f6 · #22c55e · #a855f7 · #f59e0b · #ec4899 · #ef4444 · #14b8a6 · #f97316 · #8b5cf6 · #06b6d4 · #84cc16 User taps one to select it (shown with white border) Button "Verder" saves the choice and goes to the home screen This screen only appears once — skip it on subsequent logins Screen 4 — Login: Email and password inputs Button "Inloggen" Link "Wachtwoord vergeten?" — sends a password reset email via Supabase auth Link to register screen Auth behavior: Use Supabase for auth and database onAuthStateChange as single source of truth for navigation SIGNED_IN → check if avatar is set → avatar setup or home screen SIGNED_OUT → splash screen Session persistence: "local" Database tables: profiles: id, username (unique), email, avatar_color, created_at Row Level Security enabled. Users can only read/write their own profile. Home screen (placeholder): After full setup, show a simple dark screen with "Kompass" as title and 5 empty tabs in the bottom navigation: Trips · Vrienden · Kompas · Pins · SOS. Each tab shows the tab name centered as placeholder. The middle tab (Kompas) is active by default. Do not build any tab content yet — only auth, avatar setup, and the empty tab structure.