This is a real spec — generated from a rough idea in under 30 seconds. No editing, no cleanup. Click the tabs to see all three outputs.
Input idea used:
A habit tracking app for developers. Users can track coding streaks, daily goals like "commit every day" or "solve one LeetCode problem", get reminders, and see a GitHub-style contribution graph of their progress. Mobile-first but works on desktop too. Solo developer project.
📋 Product Requirements Document
## Problem Statement
Developers who use AI coding tools like Cursor and Claude Code struggle to maintain consistent coding habits without structured accountability. Unlike generic habit apps, they need tracking that maps to real dev workflows — daily commits, problem-solving streaks, and learning goals. Existing habit apps don't understand developer context, so the feedback feels disconnected from actual work.
## Solution
DevStreak is a mobile-first habit tracking app designed specifically for developers. Users define coding goals tied to real activities (commits, LeetCode problems, open source contributions), track streaks with a GitHub-style contribution graph, and receive context-aware reminders during their typical coding hours.
## Target Users
**Primary:** Solo developer or indie hacker, 25–40, uses Cursor/Claude Code/GitHub daily, has tried and abandoned habit apps before because they felt generic. Wants accountability without leaving their workflow. Values streaks and visual progress.
**Secondary:** CS students or bootcamp grads building consistent learning habits.
## Core Features
- **Goal creation** — define habits tied to verifiable actions: "commit to GitHub daily", "solve 1 LeetCode problem", "spend 30min on side project"
- **Streak tracking** — GitHub-style contribution heatmap showing activity over 365 days; current streak and longest streak counters
- **Daily check-in** — single-tap "I did it today" confirmation with optional note; reminders via push notification at user-defined time
- **Progress dashboard** — weekly summary card, completion rate %, active goals list with streak counts
- **Share card** — generate a shareable image of your streak graph (PNG export) for Twitter/X or Discord
## Out of Scope (MVP)
- Social features, following other users, or leaderboards
- Automatic GitHub API integration (manual check-in only for MVP)
- Payments, subscriptions, or Pro tier (launch free)
## Success Metrics
1. **Day-7 retention ≥ 30%** — users who return on day 7 after signup
2. **Average streak length ≥ 5 days** after first week of use
3. **100 active users** (defined as check-in in last 7 days) within 30 days of launch
## Technical Constraints
- Mobile-first PWA (iOS + Android via browser, no app store required)
- Must work offline for check-ins (sync when online)
- Single developer build — no complex infra; target <$10/month hosting cost
🎫 GitHub Issues (10 tickets)
🤖 CLAUDE.md — AI Context File
# DevStreak — AI Coding Context
## Project Overview
DevStreak is a mobile-first Progressive Web App (PWA) for developer habit tracking. Users define coding goals, log daily check-ins, and view GitHub-style contribution graphs of their progress. Single developer project targeting solo devs and indie hackers.
## Tech Stack
- **Frontend:** React + Vite (PWA with service worker), TypeScript
- **Styling:** Tailwind CSS v4
- **Backend:** Supabase (auth + PostgreSQL + realtime)
- **Hosting:** Vercel (frontend) + Supabase (backend)
- **Notifications:** Web Push API via service worker
## Architecture Decisions
- PWA over native app — no app store friction, works on iOS/Android via browser
- Supabase chosen over custom backend — handles auth, DB, and realtime with minimal ops
- All check-ins stored locally first (IndexedDB) then synced — enables offline use
- No server-side rendering — SPA is fine for this use case, SEO not critical
## Key Files
- `src/components/HeatmapGrid.tsx` — GitHub-style contribution graph component
- `src/lib/supabase.ts` — Supabase client config
- `src/hooks/useGoals.ts` — Goals CRUD operations
- `src/hooks/useCheckins.ts` — Check-in logic with offline sync
- `public/sw.js` — Service worker for offline + push notifications
- `src/pages/Dashboard.tsx` — Main view: active goals + heatmaps
## Development Commands
```bash
npm run dev # Start dev server at localhost:5173
npm run build # Build for production
npm run preview # Preview production build
npx supabase start # Start local Supabase (Docker required)
npx supabase db push # Apply migrations to local DB
```
## Database Schema
- `goals` — id, user_id, title, description, reminder_time, created_at, is_active
- `checkins` — id, goal_id, user_id, checked_date (DATE), note, created_at
- `users` — managed by Supabase Auth (profiles table for display_name)
## Important Conventions
- All dates stored as UTC ISO strings; display in user's local timezone
- Goal "streak" calculated client-side from checkins array — not stored in DB
- Component names: PascalCase. Hooks: camelCase with "use" prefix
- No class components — hooks only
- All Supabase calls go through hooks in `src/hooks/`, never directly in components
## Current MVP Scope
Building only: goal creation, daily check-in, streak heatmap, push reminders, share card.
NOT building yet: social features, GitHub API integration, payments.
## What NOT To Do
- Do NOT add OAuth social login until after MVP launch — email/password only
- Do NOT build a REST API — use Supabase's client library directly
- Do NOT add animations that hurt performance on mobile
- Do NOT store sensitive data in localStorage — use Supabase session only
- Do NOT skip the offline sync — it's a core requirement, not optional
- Do NOT refactor the heatmap component until it's working — get it ugly and correct first
Generate your own spec in 30 seconds
No account. No install. Paste your idea, get PRD + tickets + CLAUDE.md back instantly.