Role Model Habit Tracking App

App Description & Requirements

Concept: Habit tracker where completing work sessions earns coins to unlock role model cards (blurred when locked, clear when unlocked).

Core Features:

  • Work Sessions: Three durations (20min, 50min, 90min). Timer with pause capability. Must complete full session to earn coins. Closing app = session not logged. Quitting early = no coins.
  • Coin System: Fixed coins per session completion. Balance = earned – spent. Non-editable directly, only recalculates from session history.
  • Role Models: Upload via form (name, excellence field, mini-bio, vertical image). Three pricing tiers (Tier 1/2/3). Cards show blurred placeholder when locked, clear image when purchased.
  • Session History: View and fully edit past sessions (date, duration, add/delete entries). After edits, coin balance auto-recalculates from scratch.
  • Images: Vertical format, stored as files, default placeholder for missing images, basic blur effect.

User: Single local user, no multi-user or authentication needed.

Building Blocks

Framework: SvelteKit

Database: SQLite with better-sqlite3

Styling: Tailwind CSS

Image Processing: Sharp (for blur effects)

Key Tables:

  • work_sessions (id, category_id, start_time, end_time, planned_duration, actual_duration, coins_earned, completed, manually_edited, notes)
  • role_models (id, name, excellence_field, mini_bio, image_filename, tier, price_coins)
  • unlocked_role_models (id, role_model_id, unlocked_at)
  • user_stats (total_coins_earned, current_coins, total_sessions, total_minutes)
  • categories (id, name, color)

App Structure:

  • / – Dashboard
  • /timer – Start/run sessions with pause
  • /history – View/edit session history
  • /role-models – Gallery + purchase
  • /admin/add-role-model – Upload form
  • /api/* – Server routes for DB operations

Learning & Development

Learning Path (Week 1):

  • Svelte interactive tutorial: 3 hours
  • SvelteKit docs + routing: 2 hours
  • Better-sqlite3 basics: 1 hour
  • Tailwind setup: 30 minutes

Development (Weeks 2-4):

  • Week 2: Database schema, timer page, coin tracking
  • Week 3: Role model gallery, purchase flow, upload form
  • Week 4: History editing with recalculation, blur effects, polish

Total Time: ~40 hours (learning + building)

Result: Fully functional local web app, run with npm run dev