Carrot Dummy App — Design Spec
docs/superpowers/specs/2026-04-10-dummy-app-design.md · 13.4K
# Carrot Dummy App — Design Spec
**Date:** 2026-04-10
**Status:** Approved
**Scope:** Full-featured dummy app with mock data (no Supabase), demonstrating all core functionality.
---
## 1. Architecture
### Data Layer
- **AsyncStorage** for persistent state (habits, goals, XP, streak, settings, challenges)
- **React Context** providers for app-wide state (ThemeContext, UserContext, GamificationContext, SquadContext)
- **Pre-seeded mock data** on first launch (goal + habits + squad members + active challenge)
- **Interface-first design** — all data access through typed interfaces, later swappable to Supabase
### Navigation
- **4 bottom tabs:** Home · Progress · Squad · Profile
- **expo-router** file-based routing
- **Modal routes** for: create goal, create habit, create challenge, create bet, 1v1 duel
### Theming
- Light + Dark mode via React Context
- Toggle in Profile settings
- Follows system preference by default
- All colors from `@carrot/shared/constants`, dark variants derived programmatically
---
## 2. Onboarding Flow (Hybrid)
**Screen 1: Welcome + Name**
- Carrot logo + tagline "Setze Ziele. Baue Habits. Level up."
- Name input field ("Wie heißt du?") — stored in user profile
- Goal selection: preset categories (Fitter werden, Mehr lesen, Weniger Stress, Eigenes Ziel)
- "Eigenes Ziel" opens text input + emoji picker
- Presets have mapped emoji: 🏃 Fitter werden, 📚 Mehr lesen, 🧘 Weniger Stress
**Screen 2: Habit Suggestions**
- Based on selected goal, show 3-4 suggested daily habits with XP values
- Preset goals → curated habit sets (see below)
- "Eigenes Ziel" → 3 generic starter habits (Morgenroutine, Abendreflexion, 30 Min fokussiert arbeiten)
- Each habit toggleable (pre-selected)
- "+ Eigenen Habit hinzufügen" option
- "Los geht's!" CTA → navigates to Home tab
**Preset Habit Sets:**
| Goal | Suggested Habits |
|------|-----------------|
| Fitter werden | 30 Min Bewegung (50 XP), 2L Wasser (25 XP), 10 Min Stretching (25 XP), Ernährungsplan (30 XP) |
| Mehr lesen | 30 Min lesen (40 XP), Leseliste pflegen (15 XP), Notizen schreiben (25 XP) |
| Weniger Stress | 10 Min Meditation (40 XP), Dankbarkeits-Tagebuch (25 XP), Digital Detox 1h (30 XP), 7h+ Schlaf (25 XP) |
**Data created after onboarding:**
- 1 Goal with title, emoji, target date (auto-set 6 months out)
- 3-4 Milestones for the goal (preset per goal category, see Section 3)
- 3-4 Habits linked to that goal
- User profile with name from input
- Mock squad with 3 AI members pre-populated
---
## 3. Goal & Milestone Structure
Goals are the top-level container. Each goal has:
### Goal
- Title + emoji
- Target date
- Description (optional)
- Status: active / completed / paused
- Progress: calculated from milestones + habits
### Milestones
Intermediate checkpoints toward the goal. Example for "Marathon laufen":
- ☐ Erste 5km ohne Pause laufen
- ☐ 10km in unter 60 Min
- ☐ Halbmarathon finishen
- ☐ Marathon finishen
Each milestone:
- Title + optional description
- Status: open / completed
- Target date (optional)
- XP reward on completion (100-500 XP)
- Can have sub-todos
### Todos
One-off tasks that help reach a milestone or goal:
- "Laufschuhe kaufen"
- "Trainingsplan recherchieren"
- "Beim Halbmarathon anmelden"
Each todo:
- Title
- Status: open / done
- Due date (optional)
- Linked to a milestone or directly to a goal
- XP reward (10-50 XP)
### Habits (daily recurring)
- Title + emoji
- Frequency: daily (default), weekdays, custom days
- XP per completion
- Current streak
- Linked to a goal
### Preset Milestones (created at onboarding)
| Goal | Milestones |
|------|-----------|
| Fitter werden | 1. Erste 5km laufen (200 XP), 2. 30 Tage Streak (300 XP), 3. 10km in 60 Min (400 XP), 4. Halbmarathon (500 XP) |
| Mehr lesen | 1. Erstes Buch fertig (200 XP), 2. 10 Bücher (300 XP), 3. 30 Tage Streak (300 XP), 4. 25 Bücher (500 XP) |
| Weniger Stress | 1. 7 Tage meditiert (200 XP), 2. Morgenroutine etabliert (300 XP), 3. 30 Tage Streak (300 XP), 4. Work-Life-Balance (500 XP) |
| Eigenes Ziel | 1. Erste Woche geschafft (200 XP), 2. 30 Tage Streak (300 XP), 3. Halbzeit (400 XP) |
### Hierarchy
```
Goal
├── Milestones (ordered checkpoints)
│ ├── Todos (one-off tasks per milestone)
│ └── Progress bar (completed todos / total)
├── Habits (daily recurring actions)
└── Overall Progress = weighted(milestone progress 60% + habit consistency 40%)
```
---
## 4. Home Tab
### Layout (Goal-Focused, Layout A)
Top to bottom:
1. **Goal header** — active goal title + emoji, tap to switch goals
2. **XP progress bar** — current level progress
3. **Stats row** — Streak 🔥 | XP | Today's completion (e.g., "3/5")
4. **Today's habits** — list of daily habits with check-in buttons
5. **Upcoming todos** — next 2-3 todos due soon (collapsed, expandable)
6. **FAB (+)** — floating action button: add habit, add todo, add milestone
### Check-In Flow
1. Tap uncompleted habit → checkmark animation (spring, bouncy)
2. XP popup floats up (+25 XP)
3. Stats row updates immediately
4. When all habits completed → celebration overlay ("Alle Habits erledigt! 🎉 +50 XP Bonus")
5. Streak counter increments at end of day if all habits were completed
### Interactions
- **Long press habit** → edit/delete menu
- **Swipe left** → skip today (no streak break, no XP)
- **Tap goal header** → goal detail with milestones, todos, progress
---
## 5. Progress Tab
### Sections
1. **Streak Calendar** — month view, days colored by completion rate
- Full completion: solid orange
- Partial: light orange
- Missed: empty
- Today: orange border
2. **Stats cards** — Streak days, Completion rate (%), Total XP
3. **Weekly chart** — bar chart showing daily XP earned (last 7 days)
4. **Achievements** — badge grid
- Earned: full color with gradient background
- Locked: grayscale with "?" or lock icon
- Tap for details
### Achievement Examples
- 🔥 7-Day Streak, 30-Day Streak, 100-Day Streak
- ⚡ Perfect Day (100% completion)
- 🏆 Level 5, Level 10, Level 25
- 🎯 First Goal Completed
- 🥕 First Milestone Reached
- 👥 Squad Joined
- ⚔️ First Challenge Won
- 🎲 First Bet Won
---
## 6. Squad Tab
### Default View: Squad Overview (scrollable, segmented)
**Top segment control:** Übersicht · Challenges · Wetten
**Übersicht (default):**
1. **Squad header** — name + emoji, member count, squad level
2. **Squad streak** — banner if all members checked in today
3. **Weekly leaderboard** — ranked by XP this week
4. **Active pact** — if accountability pact is active, show here
5. **"Einladen" button** — share link (mock)
**Challenges segment:**
- Active squad challenges + squad vs squad battles
- "Neue Challenge" button → create challenge modal
- 1v1 Duelle listed here too
**Wetten segment:**
- Active bets list
- "Neue Wette" button → create bet modal
- Completed bets history
### Community Features
#### 6a. XP-Wetten (Bets)
- Create a bet: "Ich schaffe [X Tage Streak / X Check-Ins diese Woche]"
- Set XP stake (50-500 XP)
- Friends can bet FOR or AGAINST you (with their own XP)
- Progress bar showing days completed
- Winner gets all staked XP
- Displayed in Squad tab under "Aktive Wetten"
#### 6b. Squad Challenges
- Time-limited (7 or 14 days)
- All squad members must complete daily habits
- Progress grid showing each member's daily status
- If all complete → shared reward (XP + badge)
- Challenge types: Streak Sprint, Perfect Week, XP Race
#### 6c. 1v1 Duelle
- Challenge a specific friend
- Metric: most check-ins this week
- XP stake from both sides
- VS screen with live score
- Trash talk: pre-populated mock messages (no free-text input in dummy)
- Winner announced after deadline
#### 6d. Squad vs Squad
- Match your squad against another (mock: auto-generated opponent squad)
- Combined weekly XP as metric
- Battle screen with both squads' avatars
- Duration: 1 week
- Winner squad gets bonus XP + bragging badge
#### 6e. Accountability Pacts
- Pair with one friend
- Shared streak counter
- Both get 2x XP multiplier while pact is active
- If one person breaks streak → both lose multiplier
- Visual: linked avatars with chain icon
### Mock Squad Data
Pre-populated squad "Fitness Crew" with 3 AI members:
- Anna K. (consistent, high streak)
- Max L. (competitive, high XP)
- Sarah B. (newer, building momentum)
Each with realistic mock habit completion patterns.
---
## 7. Profile Tab
### Sections
1. **Avatar + Level** — initial letter, level badge, XP bar to next level
2. **My Goals** — list of all goals (active + completed)
- Tap → goal detail view with milestones + todos + habits
- "+ Neues Ziel" card
3. **Settings**
- 🌙 Dark Mode toggle
- 🔔 Reminders toggle (mock)
- 🌍 Language: Deutsch/English (mock)
- 📊 Export Data (mock)
### Goal Detail View (modal/screen)
- Goal title + emoji + target date
- Overall progress bar
- Milestones list (ordered, checkable)
- Each milestone expandable → shows linked todos
- Habits linked to this goal
- Edit/delete goal
---
## 8. Gamification Model
### XP System
| Action | XP |
|--------|-----|
| Complete habit | 20-50 (varies per habit) |
| Complete all daily habits | +50 bonus |
| Complete todo | 10-50 |
| Complete milestone | 100-500 |
| Complete goal | 1000 |
| Win bet | staked amount |
| Win duel | staked amount |
| Squad challenge completion | 500 (shared) |
### Levels
- Level = floor(sqrt(totalXP / 100)) + 1 (everyone starts at Level 1)
- Level 1: 0 XP, Level 2: 100 XP, Level 5: 1,600 XP, Level 10: 8,100 XP, Level 25: 57,600 XP
- Level up triggers celebration animation
### Streaks
- Daily streak: incremented if ALL habits completed that day
- Streak freeze: skip a day without breaking (1 free per week, mock)
- Streak milestones: 7, 14, 30, 60, 100, 365 days → achievement badge
---
## 9. Mock Data Seed
On first launch (after onboarding), seed AsyncStorage with:
- User's chosen goal + milestones + habits from onboarding
- First milestone marked as completed (for progress feel)
- 2 sample todos per first milestone (1 done, 1 open)
- 10 days of historical habit completion data (for progress charts)
- Squad "Fitness Crew" with 3 members + completion history
- 1 active squad challenge (day 4 of 7)
- 1 active bet (day 7 of 14)
- 1 active accountability pact (with Anna K., 12 day streak)
- 3 unlocked achievements (7-Day Streak, Perfect Day, First Milestone)
- Current streak: 10 days
- Level 5, 1,800 XP
---
## 10. File Structure
```
apps/mobile/
app/
_layout.tsx → Root layout, theme provider
onboarding/
index.tsx → Welcome + goal selection
habits.tsx → Habit suggestions
(tabs)/
_layout.tsx → Tab navigator (Home, Progress, Squad, Profile)
index.tsx → Home tab
progress.tsx → Progress tab
squad.tsx → Squad tab
profile.tsx → Profile tab
goal/
[id].tsx → Goal detail (milestones, todos, habits)
challenge/
create.tsx → Create challenge modal
bet/
create.tsx → Create bet modal
[id].tsx → Bet detail
duel/
[id].tsx → 1v1 duel view
components/
HabitCard.tsx → Single habit with check-in
StatsRow.tsx → Streak/XP/Today row
GoalHeader.tsx → Active goal display
StreakCalendar.tsx → Month calendar view
AchievementBadge.tsx → Single badge
LeaderboardRow.tsx → Squad ranking row
XPPopup.tsx → Animated XP gain
CelebrationOverlay.tsx → All-done animation
MilestoneItem.tsx → Milestone with progress
TodoItem.tsx → Single todo checkbox
DuelCard.tsx → VS display
BetCard.tsx → Active bet display
PactCard.tsx → Accountability pact
SquadBattle.tsx → Squad vs Squad display
providers/
ThemeProvider.tsx → Light/dark mode context
UserProvider.tsx → User state + XP + level
HabitProvider.tsx → Habits + check-in logic
GoalProvider.tsx → Goals + milestones + todos
SquadProvider.tsx → Squad + challenges + bets
GamificationProvider.tsx → XP calculations, level ups, achievements
hooks/
useTheme.ts → Theme access hook
useHabits.ts → Habit CRUD + check-in
useGoals.ts → Goal + milestone + todo CRUD
useGamification.ts → XP, level, streak, achievements
useSquad.ts → Squad data + challenges
lib/
storage.ts → AsyncStorage wrapper
mock-data.ts → Seed data generator
xp.ts → XP calculation logic
achievements.ts → Achievement definitions + unlock logic
types/
index.ts → All TypeScript types (Goal, Habit, Todo, Milestone, Squad, Bet, Challenge, Duel, Pact, Achievement, User)
theme/
colors.ts → Light/dark color maps using @carrot/shared
index.ts → Theme export
```
---
## 11. Out of Scope (Dummy App)
- Real authentication / Supabase
- Push notifications (toggle exists but mock)
- Real squad matching / invite links
- Data export
- RevenueCat / payments
- i18n (German only for dummy, bilingual later)
- Animations beyond basic spring transitions