511e207762
Overhaul design constants for OLED-first dark mode: - Colors: brand palette, phase colors, glass/shadow tokens, gradients - Typography: Inter font scale matching iOS type system - Spacing: 4px base unit with layout constants - Border radius: liquid glass card radii - Animations: spring/timing presets for UI transitions Add v2 product docs (PRD, PDD, BDSD) and update CLAUDE.md. Install expo-video, expo-sharing, @expo-google-fonts/inter. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
214 lines
5.0 KiB
Markdown
214 lines
5.0 KiB
Markdown
# TabataFit — CLAUDE.md
|
|
> "Apple Fitness+ for Tabata" — Lis ce fichier EN ENTIER avant chaque session.
|
|
|
|
---
|
|
|
|
## 🎯 Vision
|
|
|
|
**TabataFit est l'Apple Fitness+ du Tabata.**
|
|
|
|
Une expérience premium, video-first, guidée par des coachs, qui transforme 4 minutes d'exercice en une expérience de fitness immersive.
|
|
|
|
*"Workouts that work. Beautifully."*
|
|
|
|
---
|
|
|
|
## 📱 Produit
|
|
|
|
### Positionnement
|
|
- **Analogy** : "If Apple made a Tabata app"
|
|
- **Focus** : Tabata/HIIT uniquement (pas multi-activité)
|
|
- **Durée** : 4-20 min (format Tabata)
|
|
- **Différenciateur** : Video-led + Coaching audio + Timer intelligent
|
|
|
|
### Stack Technique
|
|
| Domaine | Solution |
|
|
|---------|----------|
|
|
| Framework | Expo SDK 52 (managed) |
|
|
| Navigation | Expo Router v3 |
|
|
| State | Zustand + AsyncStorage |
|
|
| Video | expo-av → HLS streaming |
|
|
| Audio | expo-av (coaching + music) |
|
|
| Animations | React Native Animated |
|
|
| Payments | RevenueCat |
|
|
| Analytics | PostHog |
|
|
|
|
---
|
|
|
|
## 📚 Documentation
|
|
|
|
| Document | Description |
|
|
|----------|-------------|
|
|
| `TabataFit_PRD_v2.0.md` | Product Requirements — features, roadmap |
|
|
| `TabataFit_PDD_v2.0.md` | Product Design — screens, UX, flows |
|
|
| `TabataFit_BDSD_v2.0.md` | Brand Design — colors, typography, style |
|
|
|
|
**TOUJOURS lire ces documents avant de développer.**
|
|
|
|
---
|
|
|
|
## 🏗️ Architecture
|
|
|
|
```
|
|
src/
|
|
features/
|
|
home/ # Home tab - For You, Continue, Collections
|
|
workouts/ # Workouts tab - Categories, workout list
|
|
player/ # Active workout - Video, timer, stats
|
|
activity/ # Activity tab - Stats, trends, calendar
|
|
browse/ # Browse tab - Filters, trainers
|
|
profile/ # Profile tab - Settings, achievements
|
|
shared/
|
|
components/ # Button, Card, VideoPlayer, etc.
|
|
hooks/ # useTimer, useVideo, useHaptics
|
|
utils/ # formatTime, etc.
|
|
constants/ # colors, typography, spacing
|
|
app/ # Expo Router routes
|
|
(tabs)/
|
|
index.tsx # Home
|
|
workouts.tsx # Workouts
|
|
activity.tsx # Activity
|
|
browse.tsx # Browse
|
|
profile.tsx # Profile
|
|
player/
|
|
[id].tsx # Workout player
|
|
```
|
|
|
|
---
|
|
|
|
## 🎨 Design System
|
|
|
|
### Couleurs Principales
|
|
```typescript
|
|
BACKGROUND: '#000000' // Pure black
|
|
SURFACE: '#1C1C1E' // Charcoal
|
|
BRAND: '#FF6B35' // Flame orange
|
|
REST: '#5AC8FA' // Ice blue
|
|
SUCCESS: '#30D158' // Energy green
|
|
```
|
|
|
|
### Phase Colors (Critique)
|
|
```typescript
|
|
PREP: '#FF9500' // Orange-yellow
|
|
WORK: '#FF6B35' // Flame orange
|
|
REST: '#5AC8FA' // Ice blue
|
|
COMPLETE: '#30D158' // Green
|
|
```
|
|
|
|
### Typography
|
|
- **Font**: Inter (Google Fonts)
|
|
- **Timer**: 96px, Black weight
|
|
- **Titles**: 34px/28px/22px
|
|
- **Body**: 17px
|
|
|
|
---
|
|
|
|
## 📋 Priorités Développement
|
|
|
|
### Phase 1 — MVP (Semaines 1-4)
|
|
1. ✅ Design system setup
|
|
2. 🔲 Home tab (Featured, Continue Watching)
|
|
3. 🔲 Workouts tab (Categories)
|
|
4. 🔲 Pre-workout detail screen
|
|
5. 🔲 Video player avec timer overlay
|
|
6. 🔲 Workout complete screen
|
|
7. 🔲 20 workouts (mock data)
|
|
|
|
### Phase 2 — Core (Semaines 5-8)
|
|
1. 🔲 Activity tab (Stats, Calendar)
|
|
2. 🔲 Browse tab (Filters, Trainers)
|
|
3. 🔲 Profile tab (Settings)
|
|
4. 🔲 Apple Watch integration
|
|
5. 🔲 50 workouts total
|
|
|
|
### Phase 3 — Premium (Semaines 9-12)
|
|
1. 🔲 Offline downloads
|
|
2. 🔲 Burn Bar
|
|
3. 🔲 Subscription system
|
|
4. 🔲 Achievements
|
|
5. 🔲 100+ workouts
|
|
|
|
---
|
|
|
|
## 🧪 Test Environment
|
|
|
|
**Expo Go sur device physique** — pas de simulateur.
|
|
|
|
1. `npx expo start`
|
|
2. Scanner le QR code avec Expo Go
|
|
3. Même réseau Wi-Fi requis
|
|
|
|
---
|
|
|
|
## 📝 Règles de Code
|
|
|
|
1. **Un fichier = une responsabilité**
|
|
2. **Toute logique métier dans les hooks**
|
|
3. **Components = JSX uniquement**
|
|
4. **TypeScript strict** — pas de `any`
|
|
5. **Styles avec StyleSheet.create()**
|
|
6. **Dark mode only** — pas de light mode
|
|
|
|
---
|
|
|
|
## 🎬 Contenu Video
|
|
|
|
### Format Workout Video
|
|
- **Resolution**: 1080p minimum
|
|
- **Duration**: Match workout duration
|
|
- **Structure**:
|
|
- Intro (5s): Trainer greeting
|
|
- Prep (3s): 3-2-1 countdown
|
|
- Work (20s): Exercise demonstration
|
|
- Rest (10s): Recovery, next exercise preview
|
|
- Repeat for each round
|
|
- Outro (5s): Celebration, trainer sign-off
|
|
|
|
### Trainers (5 au launch)
|
|
1. **Emma** — Energy queen, beginner-friendly
|
|
2. **Jake** — Strength focus
|
|
3. **Mia** — Form perfectionist
|
|
4. **Alex** — Cardio beast
|
|
5. **Sofia** — Chill but effective
|
|
|
|
---
|
|
|
|
## 💰 Monetization
|
|
|
|
### Free Tier
|
|
- 3 workouts free forever
|
|
- Basic stats
|
|
- Ads between workouts
|
|
|
|
### Premium ($6.99/mo or $49.99/yr)
|
|
- Unlimited workouts
|
|
- Offline downloads
|
|
- Apple Watch integration
|
|
- Advanced stats
|
|
- No ads
|
|
- Family Sharing
|
|
|
|
---
|
|
|
|
## 🚀 Commands
|
|
|
|
```bash
|
|
npx expo start # Development
|
|
npx expo start --tunnel # If network issues
|
|
npx expo start --clear # Clear cache
|
|
npx tsc --noEmit # Type check
|
|
eas build --profile dev # Dev build
|
|
```
|
|
|
|
---
|
|
|
|
## 📖 Comment Utiliser les Skills
|
|
|
|
Voir `.claude/skills/` pour les guides spécialisés.
|
|
|
|
---
|
|
|
|
*Document updated: February 18, 2026*
|
|
*Version: 2.0*
|
|
*Project: TabataFit — Apple Fitness+ for Tabata*
|