PoleDanceApp/dancechamp-claude-code/docs/PLAN.md

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)