# DanceChamp — Vibe Coding Plan ## How to use this plan - Work phase by phase, top to bottom - Check off tasks as you go: `[ ]` → `[x]` - Each phase has a **"Done when"** — don't move on until it's met - 🔴 = blocker (must do), 🟡 = important, 🟢 = nice to have for MVP - Estimated time is for vibe coding with AI (Claude Code / Cursor) --- ## Phase 0: Project Setup **Time: ~1 hour** - [ ] 🔴 Init Expo project (React Native): `npx create-expo-app DanceChamp --template blank-typescript` - [ ] 🔴 Init Web admin panel: `npm create vite@latest admin-panel -- --template react-ts` - [ ] 🔴 Setup Supabase project (or Firebase): create account, new project - [ ] 🔴 Setup database tables (see Phase 1) - [ ] 🔴 Install core deps: `react-navigation`, `zustand`, `supabase-js` - [ ] 🟡 Setup Git repo + `.gitignore` - [ ] 🟡 Create `/apps/mobile`, `/apps/admin`, `/packages/shared` monorepo structure - [ ] 🟢 Add ESLint + Prettier **Done when:** Both apps run locally, Supabase dashboard is accessible --- ## Phase 1: Database & Auth **Time: ~2-3 hours** ### 1.1 Database Tables - [ ] 🔴 `users` — id, email, name, role (admin | organization | member), city, instagram_handle, experience_years, disciplines[], auth_provider, status, created_at - [ ] 🔴 `organizations` — id, user_id (FK), name, instagram_handle, email, city, logo_url, verified (bool), status (active | pending | blocked), block_reason, created_at - [ ] 🔴 `championships` — id, org_id (FK), name, subtitle, event_date, reg_start, reg_end, location, venue, status (draft | pending_approval | live | completed | blocked), accent_color, created_at - [ ] 🔴 `disciplines` — id, championship_id (FK), name, levels[], styles[] - [ ] 🔴 `fees` — id, championship_id (FK), video_selection, solo, duet, group, refund_note - [ ] 🔴 `rules` — id, championship_id (FK), section (general | costume | scoring | penalty), text, value (for penalties) - [ ] 🔴 `judges` — id, championship_id (FK), name, instagram, bio, photo_url - [ ] 🔴 `registrations` — id, user_id (FK), championship_id (FK), discipline_id, level, style, type (solo | duet | group), current_step, video_url, fee_paid, receipt_uploaded, insurance_uploaded, passed (null | true | false), created_at - [ ] 🔴 `notifications` — id, user_id (FK), championship_id, type, title, message, read (bool), created_at - [ ] 🟡 `activity_logs` — id, actor_id, action, target_type, target_id, details, created_at ### 1.2 Auth - [ ] 🔴 Supabase Auth: enable Email + Google OAuth - [ ] 🔴 Role-based access: Row Level Security (RLS) policies - Members see only their own registrations - Orgs see only their own championships & members - Admin sees everything - [ ] 🔴 Sign up / Sign in screens (mobile) - [ ] 🔴 Admin login (web panel) - [ ] 🟡 Instagram OAuth (for member profiles) - [ ] 🟡 Onboarding flow: name → city → discipline → experience → done **Done when:** Can sign up as member, org, and admin. RLS blocks cross-access. --- ## Phase 2: Member App — Core Screens **Time: ~4-5 hours** ### 2.1 Navigation - [ ] 🔴 Bottom tab nav: Home, My Champs, Search, Profile - [ ] 🔴 Stack navigation: screens → detail → sub-screens ### 2.2 Home Screen - [ ] 🔴 "Upcoming championships" feed — cards with name, date, location, status badge - [ ] 🔴 "My active registrations" section with progress bars - [ ] 🟡 Bell icon → notifications feed - [ ] 🟡 Deadline urgency banners ("Registration closes in 3 days!") ### 2.3 Championship Detail - [ ] 🔴 Header: name, dates, location, venue, registration period - [ ] 🔴 Tab: Overview (info + registration funnel) - [ ] 🔴 Tab: Categories (disciplines, levels, styles + eligibility) - [ ] 🔴 Tab: Rules (general, costume, scoring criteria, penalties) - [ ] 🔴 Tab: Fees (video selection + championship fees) - [ ] 🔴 Tab: Judges (judge profiles with photo, instagram, bio) - [ ] 🔴 "Register" button → starts onboarding ### 2.4 Search & Discover - [ ] 🔴 Search by championship name - [ ] 🔴 Filter by: discipline, location, status (open/upcoming/past) - [ ] 🟡 Sort by: date, popularity ### 2.5 Profile - [ ] 🔴 View/edit: name, city, instagram, disciplines, experience - [ ] 🔴 "My Championships" list (past + active) - [ ] 🟢 Competition history **Done when:** Can browse championships, view full details across all tabs, search/filter, see profile. --- ## Phase 3: Member App — Registration & Progress Tracker **Time: ~4-5 hours** ### 3.1 Registration Flow - [ ] 🔴 Choose discipline → level → style → solo/duet/group - [ ] 🔴 Create `registration` record in DB - [ ] 🔴 Show 10-step progress checklist ### 3.2 Progress Steps (per championship) - [ ] 🔴 Step 1: Review rules — mark done when user opens Rules tab - [ ] 🔴 Step 2: Select category — saved from registration - [ ] 🔴 Step 3: Record video — manual toggle ("I've recorded my video") - [ ] 🔴 Step 4: Submit video form — manual toggle or link to Google Form - [ ] 🔴 Step 5: Pay video fee — upload receipt screenshot - [ ] 🔴 Step 6: Wait for results — shows "pending" until org decides - [ ] 🔴 Step 7: Results — auto-updates when org passes/fails - [ ] 🔴 Step 8: Pay championship fee — upload receipt (only if passed) - [ ] 🔴 Step 9: Submit "About Me" — manual toggle or link - [ ] 🔴 Step 10: Confirm insurance — upload document ### 3.3 Receipt & Document Upload - [ ] 🔴 Camera / gallery picker for receipt photos - [ ] 🔴 Upload to Supabase Storage - [ ] 🔴 Show upload status (pending org confirmation) ### 3.4 Notifications - [ ] 🔴 In-app notification feed (bell icon + unread count) - [ ] 🔴 Notification types: category changed, payment confirmed, results, deadline reminder, announcement - [ ] 🟡 Push notifications via Expo Notifications - [ ] 🟢 Notification preferences (toggle on/off) **Done when:** Can register for a championship, track all 10 steps, upload receipts, receive notifications. --- ## Phase 4: Org App — Dashboard & Championship Management **Time: ~5-6 hours** ### 4.1 Org Dashboard - [ ] 🔴 Championship cards: name, dates, status badge, member count, progress bar (if draft) - [ ] 🔴 "+" button → Quick Create (name, date, location → creates draft) - [ ] 🔴 Tap card → championship detail ### 4.2 Championship Detail (tabbed, configurable) - [ ] 🔴 Overview tab: setup progress checklist, event info (editable), stats (if live) - [ ] 🔴 Categories tab: add/remove levels, add/remove styles → "Mark as Done" - [ ] 🔴 Fees tab: video selection + solo/duet/group fees → "Mark as Done" - [ ] 🔴 Rules tab: general rules + costume rules + scoring criteria + penalties → "Mark as Done" - [ ] 🔴 Judges tab: add judge profiles (name, instagram, bio) → "Mark as Done" - [ ] 🔴 "Go Live" button — appears when all sections are done - [ ] 🔴 If org is verified → status = `live` (auto-approved) - [ ] 🔴 If org is unverified → status = `pending_approval` (needs admin) ### 4.3 Members Tab (only for live championships) - [ ] 🔴 Member list with search + filters (All, Receipts, Videos, Passed) - [ ] 🔴 Member card: name, instagram, level, style, status badge, progress - [ ] 🔴 Tap member → member detail ### 4.4 Member Detail - [ ] 🔴 Profile info, registration details - [ ] 🔴 Edit level (picker + "member will be notified" warning) - [ ] 🔴 Edit style (picker + notification) - [ ] 🔴 Video section: view link + Pass/Fail buttons - [ ] 🔴 Payment section: view receipt + Confirm button - [ ] 🔴 "Send Notification" button ### 4.5 Results Tab - [ ] 🔴 Pending review list with Pass/Fail buttons per member - [ ] 🔴 Decided list (passed/failed) - [ ] 🔴 "Publish Results" button → notifies all members ### 4.6 Org Settings - [ ] 🔴 Edit org profile (name, instagram) - [ ] 🔴 Notification preferences (toggles) - [ ] 🟡 Connected accounts (Instagram, Gmail, Telegram) **Done when:** Org can create championship, configure all tabs, go live, manage members, pass/fail videos, publish results. --- ## Phase 5: Admin Panel (Web) **Time: ~3-4 hours** ### 5.1 Dashboard - [ ] 🔴 Platform stats: orgs count, live champs, total users - [ ] 🔴 "Needs Attention" section: pending orgs, pending champs (from unverified orgs) - [ ] 🔴 Platform health: revenue, blocked users - [ ] 🔴 Recent activity log ### 5.2 Organizations Management - [ ] 🔴 List with search + filters (Active, Pending, Blocked) - [ ] 🔴 Org detail: profile, championships list, approval policy - [ ] 🔴 Actions: Approve / Reject, Block / Unblock, Verify, Delete ### 5.3 Championships Management - [ ] 🔴 List with search + filters (Live, Awaiting Review, Draft, Blocked) - [ ] 🔴 Champ detail: stats, approval policy indicator - [ ] 🔴 Actions: Approve / Reject (for unverified orgs), Suspend, Reinstate, Delete ### 5.4 Users Management - [ ] 🔴 List with search + filters (Active, Warned, Blocked, Org Admins) - [ ] 🔴 User detail: profile, role, championships joined - [ ] 🔴 Actions: Warn, Block / Unblock, Delete **Done when:** Admin can approve/reject orgs, review championships from unverified orgs, manage users. --- ## Phase 6: Connecting It All **Time: ~3-4 hours** ### 6.1 Real-Time Sync - [ ] 🔴 Supabase Realtime: members see status updates instantly (pass/fail, payment confirmed) - [ ] 🔴 Org dashboard updates when new member registers - [ ] 🟡 Admin panel live counters ### 6.2 Notification Triggers - [ ] 🔴 Org passes/fails video → member gets notification - [ ] 🔴 Org confirms receipt → member gets notification - [ ] 🔴 Org changes member's level/style → member gets notification - [ ] 🔴 Org publishes results → all members get notification - [ ] 🟡 Auto deadline reminders (cron job: 7 days, 3 days, 1 day before) ### 6.3 Approval Flow - [ ] 🔴 Unverified org clicks "Go Live" → status = pending_approval - [ ] 🔴 Admin sees it in "Needs Attention" - [ ] 🔴 Admin approves → status = live, org gets notification - [ ] 🔴 Admin rejects → status = blocked, org gets notification with reason ### 6.4 File Uploads - [ ] 🔴 Receipt photo upload → Supabase Storage → org sees thumbnail in member detail - [ ] 🔴 Insurance doc upload → same flow - [ ] 🟢 Judge profile photos **Done when:** All three apps talk to the same DB. Actions in one app reflect in others in real time. --- ## Phase 7: Polish & UX **Time: ~2-3 hours** - [ ] 🟡 Loading states (skeletons, spinners) - [ ] 🟡 Empty states ("No championships yet", "No members match") - [ ] 🟡 Error handling (network errors, failed uploads, toast messages) - [ ] 🟡 Pull-to-refresh on lists - [ ] 🟡 Haptic feedback on key actions (pass/fail, payment confirm) - [ ] 🟡 Dark theme consistency across all screens - [ ] 🟡 Animations: tab transitions, card press, progress bar fill - [ ] 🟢 Onboarding walkthrough (first-time user tips) - [ ] 🟢 Swipe gestures on member cards (swipe right = pass, left = fail) **Done when:** App feels smooth and professional. No raw errors shown to users. --- ## Phase 8: Integrations (Post-MVP) **Time: varies** ### 8.1 Instagram Parsing - [ ] 🟢 Apify Instagram scraper setup - [ ] 🟢 Claude API: extract structured data from post captions - [ ] 🟢 OCR (Google Vision): parse results from photo posts - [ ] 🟢 "Import from Instagram" button in org's championship creation ### 8.2 Gmail Integration - [ ] 🟢 Google OAuth for members - [ ] 🟢 Detect Google Forms confirmation emails → auto-mark steps ### 8.3 Payments - [ ] 🟢 In-app payment tracking - [ ] 🟢 Replace receipt uploads with direct payment ### 8.4 Multi-Language - [ ] 🟢 i18n setup (Russian + English) --- ## Phase 9: Testing & Launch **Time: ~2-3 hours** - [ ] 🔴 Test full flow: member registers → org reviews → admin monitors - [ ] 🔴 Test approval flow: unverified org → pending → admin approves → live - [ ] 🔴 Test notifications: level change, payment confirm, results - [ ] 🔴 Test on real device (iOS + Android via Expo Go) - [ ] 🟡 Test edge cases: empty championships, blocked orgs, duplicate registrations - [ ] 🟡 Performance check: list with 50+ members, 10+ championships - [ ] 🟡 Expo build: `eas build` for iOS/Android - [ ] 🟢 TestFlight / Google Play internal testing - [ ] 🟢 Admin panel deploy (Vercel / Netlify) **Done when:** All three roles can complete their full flow without bugs. --- ## Quick Reference: What Goes Where | Feature | Member App | Org App | Admin Panel | |---|:---:|:---:|:---:| | Browse championships | ✅ | — | ✅ (view all) | | Register for championship | ✅ | — | — | | Progress tracker | ✅ | — | — | | Create/edit championship | — | ✅ | ✅ (edit/delete) | | Review members | — | ✅ | ✅ (view) | | Pass/Fail videos | — | ✅ | — | | Confirm payments | — | ✅ | — | | Approve orgs & champs | — | — | ✅ | | Block/warn users | — | — | ✅ | | Notifications | ✅ (receive) | ✅ (send) | — | --- ## Priority Order (if short on time) If you need to ship fast, do these phases in order and stop when you have enough: 1. **Phase 0 + 1** — Foundation (can't skip) 2. **Phase 2** — Member app core (users need to see something) 3. **Phase 4** — Org app (orgs need to create championships) 4. **Phase 3** — Registration flow (connects member ↔ org) 5. **Phase 6** — Wire it together 6. **Phase 5** — Admin panel (can manage via Supabase dashboard temporarily) 7. **Phase 7** — Polish 8. **Phase 8** — Integrations (post-launch)