Groundwork

A mission-based, self-guided web app for teenagers that supports development of identity, purpose, connection, and meaning.

---

What's built

This repo contains the full MVP foundation:

• ✅ Complete Supabase schema with RLS policies
• ✅ Auth (email + Google OAuth) with onboarding redirect
• ✅ 3-step onboarding flow
• ✅ Dashboard with mission map, active challenge, recent entries, support circle
• ✅ Mission 1 — all 5 activities (journal, values picker, mask check, milestone letter, weekly challenge)
• ✅ Missions 2–4 (first activity each, additional activities locked)
• ✅ Journal view — filterable, expandable, read-only after 24h
• ✅ AI reflection layer (Anthropic Claude) — fails silently if unavailable
• ✅ The Standard — three recurring outward-facing questions, answered again and again, with full history
• ✅ Longitudinal revisits — reopen a milestone months later and read the whole arc; repeatable, spaced, self-comparison only
• ✅ Quick / Extended / Open scaffolding on every open prompt — sentence-starters and a "stuck? try this" affordance throughout
• ✅ 10-Week Character Program — a weekly cadence with lived challenges, non-streak trackers, the weekly five, and the Character Code capstone
• ✅ Stories library (8 seeded stories, 2 per mission)
• ✅ Support Circle page with conversation scaffolds
• ✅ Settings page
• ✅ Route-level auth middleware
• ✅ Mobile-first responsive design throughout

---

Setup guide

Prerequisites

• Node.js 18+
• A Supabase account (free tier works)
• An Anthropic API key
• A Vercel account (for deployment, optional for local dev)

---

Step 1 — Create a Supabase project

1. Go to app.supabase.com and click New project
2. Choose a name (e.g. groundwork), set a database password, choose a region
3. Wait ~2 minutes for provisioning

---

Step 2 — Run the database schema

1. In your Supabase project, go to SQL Editor → New query
2. Open the file supabase/schema.sql from this repo
3. Paste the entire contents into the SQL editor
4. Click Run

This creates all tables, sets up Row Level Security, creates the user auto-creation trigger, and seeds the 8 stories.

Verify: After running, go to Table Editor and check that stories has 8 rows.

Already have a database from an earlier version? schema.sql is kept current, but an existing project also needs the files in supabase/migrations/ run in order (002, 003, 004, 005, 006, …). Each one is idempotent, so running them again is safe. Features whose migration hasn't been run show a "being switched on shortly" note rather than erroring — so if a section of the Me page says that, a migration is outstanding.

---

Step 3 — Enable Google OAuth (optional)

1. In Supabase: Authentication → Providers → Google
2. Follow the Google OAuth setup guide
3. Add your Google Client ID and Secret

If you skip this, email/password auth will still work.

---

Step 4 — Get your environment variables

In Supabase: Settings → API

Copy:

• Project URL → NEXT_PUBLIC_SUPABASE_URL
• anon public key → NEXT_PUBLIC_SUPABASE_ANON_KEY
• service_role key → SUPABASE_SERVICE_ROLE_KEY (keep this secret)

In Anthropic Console: API Keys → create a new key → ANTHROPIC_API_KEY

---

Step 5 — Configure local environment

cp .env.local.example .env.local

Fill in your values:

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
ANTHROPIC_API_KEY=sk-ant-...
NEXT_PUBLIC_APP_URL=http://localhost:3000

---

Step 6 — Install dependencies and run

npm install
npm run dev

Open http://localhost:3000.

---

Step 7 — Configure auth redirect URLs

In Supabase: Authentication → URL Configuration

Add to Redirect URLs:

http://localhost:3000/auth/callback

For production, also add:

https://your-domain.vercel.app/auth/callback

---

Deploying to Vercel

1. Push the repo to GitHub
2. Go to vercel.com → New Project → import your repo
3. Add all environment variables from .env.local
4. Change NEXT_PUBLIC_APP_URL to your Vercel URL
5. Deploy

---

Project structure

src/
├── app/
│   ├── page.tsx                    # Landing page
│   ├── auth/
│   │   ├── page.tsx                # Sign in / sign up
│   │   └── callback/route.ts       # OAuth callback handler
│   ├── onboarding/
│   │   └── page.tsx                # 3-step onboarding
│   ├── dashboard/
│   │   ├── page.tsx                # Server component (data fetching)
│   │   └── DashboardClient.tsx     # Client component (UI)
│   ├── missions/[id]/
│   │   ├── page.tsx
│   │   ├── MissionDetailClient.tsx
│   │   └── activities/[activityId]/
│   │       ├── page.tsx
│   │       └── ActivityClient.tsx  # Handles all activity types
│   ├── journal/
│   ├── stories/
│   ├── support/
│   ├── settings/
│   └── api/
│       └── reflect/route.ts        # AI reflection endpoint
├── components/
│   └── layout/
│       └── AppShell.tsx            # Nav + page wrapper
├── lib/
│   ├── supabase.ts                 # Client + server Supabase instances
│   ├── missions.ts                 # Mission/activity data (content layer)
│   └── utils.ts                   # Utility functions
├── types/
│   └── database.ts                 # Full TypeScript types for Supabase schema
└── middleware.ts                   # Route protection

---

Design system

Typography

• Display: Fraunces (serif, used for headings, mission questions, emotional moments)
• Body: DM Sans (clean, legible for small text)

This is the beginning of the README. Read the rest at the original. Read the full README ↗