CARROT

README.md

← Zurück zu Knowledge

CARROT

README.md · 10.1K

# CARROT

> Set goals. Build habits. Level up.

**Carrot** helps people reach their goals through daily habits — with gamification, community, and a lifestyle brand. Set a goal, build the habits to get there, and level up along the way.

---

## Tech Stack

| Layer | Technology |
|-------|-----------|
| Consumer App | Expo SDK 54 / React Native 0.81 (iOS + Android + Web) |
| Landing Page | Astro 5 (Static, zero JS by default) — [carrot-landing.pages.dev](https://carrot-landing.pages.dev) |
| Admin Portal | Astro 5 static / Tailwind 4 / React island for charts — Cloudflare Pages auto-deploy — `carrot-admin.pages.dev` |
| Backend | Supabase (PostgreSQL, Auth, Storage, Edge Functions) — EU/Frankfurt — migrations ready |
| Payments | RevenueCat (In-App Subscriptions) |
| Notifications | Expo Notifications |
| Admin Auth | Cloudflare Access (Email-OTP) |
| Language | TypeScript (strict, no JS) |
| Monorepo | npm workspaces + Turborepo |

---

## Project Structure

```
carrot/
├── apps/
│   ├── mobile/                 # Expo consumer app (iOS + Android)
│   │   ├── app/                # File-based routing (expo-router)
│   │   │   ├── (tabs)/         # Tab navigation (Home, Progress, Squad, Profile)
│   │   │   └── _layout.tsx     # Root layout
│   │   ├── components/         # Reusable UI components
│   │   ├── hooks/              # Custom React hooks
│   │   ├── lib/                # Supabase client, utilities
│   │   ├── providers/          # Context providers
│   │   ├── theme/              # App-specific theme extensions
│   │   └── types/              # App-specific type definitions
│   ├── web/                    # Astro landing page (zero JS, i18n, 8 sections)
│   │   └── src/
│   │       ├── components/     # LandingPage.astro + sections/* (Hero, Manifesto, LiveDemo, Squad, Bento, Founders, Pricing, Waitlist, SiteFooter)
│   │       ├── i18n/           # translations.ts (EN + DE)
│   │       ├── layouts/        # Base HTML layout (fonts, OG, view-transitions)
│   │       ├── styles/         # global.css + animations.css
│   │       ├── scripts/        # reveal.ts + live-demo.ts (only JS islands)
│   │       └── pages/          # / (EN) and /de (DE)
│   └── admin/                  # Astro 5 admin portal (Tailwind 4, React island for charts)
│       └── src/
│           ├── pages/          # 9 sections (Dashboard, Users, Waitlist, Squads, Content, Knowledge, Infra, Design System, Settings)
│           ├── components/     # Sidebar, Topbar, StatCard, ActivityChart
│           └── lib/            # nav.ts, mock-data.ts, content-presets.ts, docs.ts (reads .md from repo)
├── packages/
│   └── shared/                 # Shared across all apps
│       └── src/
│           ├── constants/      # Design tokens (colors, spacing, typography, etc.)
│           └── database.types.ts  # Auto-generated Supabase types
├── supabase/
│   ├── migrations/             # SQL migration files
│   ├── functions/              # Deno Edge Functions
│   └── seed.sql                # Test/dev seed data
├── docs/
│   ├── ARCHITECTURE.md         # Technical patterns, offline-first, gamification, auth
│   ├── DEPENDENCIES.md         # Library decisions, alternatives, phase plan
│   └── LANDING_PAGE_DESIGN.md  # UX/UI concept, typography, sections, copy guidelines
├── CLAUDE.md                   # AI development guidelines & project context
├── MARKET_RESEARCH.md          # DACH market analysis (April 2026)
├── Carrot Ideas.pdf            # Brand vision: colors, merch, collabs, content strategy
├── package.json                # Root workspace config
├── turbo.json                  # Turborepo task configuration
└── tsconfig.json               # Root TypeScript config (project references)
```

---

## Getting Started

### Prerequisites

- Node.js 20+ (see `.nvmrc`)
- npm 10+
- Supabase CLI (`npx supabase`) — for database work
- Expo CLI (`npx expo`) — for mobile app
- Xcode (for iOS builds) — optional, only for native builds
- Android Studio (for Android builds) — optional, only for native builds

### Setup

```bash
git clone https://github.com/tim-peartech/carrot.git
cd carrot
npm install
```

### Development

```bash
# Start dev servers
npm run dev:mobile        # Expo consumer app
npm run dev:web           # Landing page → http://localhost:4321

# Quality checks
npm run typecheck         # TypeScript check all packages
npm run lint              # Lint all packages
npm run build             # Build all packages
```

### Mobile App

```bash
npm run dev:mobile        # Start Expo via root workspace script
# or directly:
cd apps/mobile && npx expo start
```

Local builds (no EAS account needed):

```bash
cd apps/mobile

# Android
npm run build:apk         # Release APK signed w/ debug key (for sideloading) → ~/Downloads/Carrot-v{version}.apk
npm run build:aab         # Release AAB (Play Store) → ~/Downloads/Carrot-release.aab

# iOS
# Requires: expo prebuild, Xcode, Apple Developer account
npx expo prebuild         # Generate native iOS project
# Then build via Xcode: ios/Carrot.xcworkspace
```

### Supabase

```bash
# Generate TypeScript types from remote schema
npm run db:types

# Reset database with seed data
npm run db:reset
```

---

## Vision

Carrot ist mehr als eine App — es ist eine Brand, eine Community, ein Lifestyle.

| Pillar | Description |
|--------|-------------|
| **App** | Set goals, build daily habits to reach them — with gamification, Squads (group subscriptions for friends) & rewards |
| **Merch** | Minimalistisches Streetwear-Design in Orange (#FA7000) + White |
| **Community** | Coffee Shop Meetups, Creator-Collabs, limitierte Event-Editionen |
| **Content** | TikTok/Reels, YouTube Vlogs, "Build in Public" / "Zero to Hero" |

## Branding

| Element | Value |
|---------|-------|
| Primary Color | **Hot Orange** `#FA7000` / RGB(250, 112, 0) |
| Secondary Color | **Pure White** `#FFFFFF` |
| Positioning | Goal-oriented: "Set goals. Build habits. Level up." |
| Name | From "carrot on a stick" — motivation through reward, not punishment. Every small step forward gets celebrated. |
| Tone | Fun & relatable, but also serious |
| Design Tokens | `packages/shared/src/constants/colors.ts` |

---

## Documentation

- **[CLAUDE.md](CLAUDE.md)** — AI Development Guidelines, Tech Stack Details, Conventions
- **[Cloudflare Setup](docs/CLOUDFLARE_SETUP.md)** — Step-by-step deploy walkthrough for all 3 projects (Pages + Workers + Access)
- **[Market Research](MARKET_RESEARCH.md)** — Marktgröße, Konkurrenz, Monetarisierung, Prognosen, Risiken
- **[Architecture & Patterns](docs/ARCHITECTURE.md)** — Offline-first, Auth Flow, Gamification, Push Notifications, Supabase Patterns
- **[Dependency Decisions](docs/DEPENDENCIES.md)** — Warum welche Libraries, Alternativen, Phasen-Plan
- **[Landing Page Design](docs/LANDING_PAGE_DESIGN.md)** — UX/UI Konzept, Farbpalette, Typografie, Sektionen, Copy-Richtlinien
- **[Carrot Ideas](Carrot%20Ideas.pdf)** — Brand-Vision PDF: Farben, Merch-Designs, Collab-Konzepte, Content-Strategie

## Markt-Highlights

- Globaler Wellness-App-Markt: **$7-8 Mrd.** (2024), wachsend auf **$20+ Mrd.** bis 2030
- DACH-Region: **5-8 Mio.** Habit/Wellness-App-User
- Pricing: **Solo €50/Jahr**, **Squad €80/Jahr** (5 Personen = €16/Person)
- Vorbild: **Runtastic** (Linz, AT) — für €220M an Adidas verkauft

> Vollständige Analyse: [MARKET_RESEARCH.md](MARKET_RESEARCH.md)

---

## Status

**Phase: Foundation+** — 3 Apps stehen (Mobile Dummy + Landing redesigned + Admin Portal), 9 Supabase-Migrations + Seed sind ready, Mobile Plans 2-7 dokumentiert.

**Erledigt:**
- [x] Monorepo Setup (Turborepo + npm workspaces) — 3 Workspaces: `@carrot/mobile`, `@carrot/web`, `@carrot/admin`
- [x] Mobile App Dummy (Home Tab + Goals/Habits + Check-in + XP/Streaks + Light/Dark) — läuft auf Device mit Mock-Daten via AsyncStorage
- [x] **Landing Page komplett redesigned** (Astro 5, 8 Sektionen, EN+DE, Live Demo Insel, View Transitions, asymmetrische Layouts, Editorial Magazin Style) — [EN](https://carrot-landing.pages.dev) · [DE](https://carrot-landing.pages.dev/de)
- [x] **Admin Portal `apps/admin`** (Astro 5 + Tailwind 4 + React island für recharts, deployed als CF Pages auto-on-push) — 9 Sektionen: Dashboard, Users, Waitlist, Squads, Content Library, Knowledge Base, Infrastructure, Design System, Settings — Build grün, 31 statische Pages in 1.8s
- [x] **9 Supabase Migrations** (`supabase/migrations/0001-0009.sql`) — Profiles, Goals, Habits, XP-System, Badges, Squads, Squad-Features, Waitlist, pg_cron — strict RLS, idempotent, ready zu apply
- [x] **Manuelle DB Type Stubs** (`packages/shared/src/database.types.ts`) — alle Enums, Tabellen, Functions getypt
- [x] **Mobile Plan-Specs 2-7** (`docs/superpowers/plans/`) — Onboarding, Goal-Detail, Progress, Squad, Profile, Polish+Web-Export
- [x] **Web Export Setup** (`apps/mobile/build:web`) — Mobile App als statische SPA für CF Pages, kein Expo Account
- [x] Master Plan Doc (`docs/superpowers/plans/2026-05-03-master-overhaul.md`)
- [x] Design Tokens (`@carrot/shared`)
- [x] Market Research, Architecture & Dependency Docs
- [x] Cloudflare Pages Deployment (auto-deploy on push to main)

**Nächste Schritte:**
1. Mobile Plan 2 (Onboarding) → 3 (Goal-Detail) → 4 (Progress) → 5 (Squad) → 6 (Profile) → 7 (Polish + Web Export) implementieren
2. Supabase-Projekt erstellen (Frankfurt) → Migrations applyen → Types regenerieren
3. CF Pages Projekte einrichten: `carrot-app` (Mobile Web Export), `carrot-admin` (Admin Portal)
4. Cloudflare Access für Admin Portal (Email-OTP, 3 Admin-Whitelist)
5. Waitlist Edge Function (Double Opt-In)
6. Auth-Flow Mobile (Email + Apple + Google)
7. Impressum + Datenschutz Seiten
8. Custom Domains: carrot.at · app.carrot.at · admin.carrot.at

## Team

Tim + Co-Founder | Standort: Austria

---

*"Create the things you wish existed."*