Streaks - Habit Tracker

A habit tracking app built with TanStack Start, React 19, and Prisma. It helps users stay consistent with daily habits through streak tracking, completion analytics, and activity visualizations.

Features

• Daily habit completion with quick check interactions
• Habit creation/editing with color, frequency, and optional notes
• Streak tracking (current and longest)
• Activity heatmap and completion history
• Stats dashboard with time-range filters
• Authenticated user data via Supabase
• Responsive layout with desktop sidebar and mobile bottom navigation

Tech Stack

• TanStack Start + TanStack Router (SSR)
• Vite + Nitro
• React 19 + TypeScript
• TanStack Query
• Tailwind CSS + Radix UI
• Supabase Auth
• Prisma + PostgreSQL

Getting Started

Prerequisites

• Node.js 18+
• pnpm (project uses pnpm@10)
• PostgreSQL database (local or Supabase Postgres)

Install

git clone <your-repo-url>
cd habit-tracker
pnpm install

Environment Variables

Create a .env file in the project root.

# Database
DATABASE_URL="postgresql://..."
# Optional but recommended for Prisma CLI/migrations
DIRECT_URL="postgresql://..."

# Supabase (server + browser)
SUPABASE_URL="https://<project-ref>.supabase.co"
SUPABASE_PUBLISHABLE_KEY="<anon-or-publishable-key>"

# Optional aliases supported by current code
# SUPABASE_ANON_KEY="<anon-key>"
# VITE_SUPABASE_URL="https://<project-ref>.supabase.co"
# VITE_SUPABASE_PUBLISHABLE_KEY="<anon-or-publishable-key>"

# Auth redirect URLs used in signup flow
DEV_SUPABASE_REDIRECT_URL="http://localhost:3000"
SUPABASE_REDIRECT_URL="https://your-production-domain.com"

Database Setup

pnpm prisma generate
pnpm prisma db push

The Prisma schema is located at src/prisma/schema.prisma (configured in prisma.config.ts).

Run the App

pnpm dev

App runs at http://localhost:3000.

Scripts

• pnpm dev - Run the TanStack Start dev server (via Vite)
• pnpm build - Build for production
• pnpm start - Run the built server from .output/server/index.mjs
• pnpm postinstall - Generate Prisma client

Routes

• /login - Login screen
• /signup - Signup screen
• /check-email - Email verification prompt
• / - Authenticated home (today's habits)
• /habits - Habit management
• /habits/$habitId - Habit details and history
• /stats - Analytics and progress views
• /profile - User profile and sign out

Data Model

Core Prisma models:

• User
• Habit
• HabitCompletion

Notes

• This project was migrated from Next.js to TanStack Start.
• Some dependencies/config may still reference legacy tooling during cleanup.