Back to projects

HabitKit

Habit Tracking Platform

GitHubGitHub
Demo

Habitkit is a modern, full-stack habit tracking app built to help you build better habits one day at a time — a focused dashboard, rich analytics, and a clean UI to see your progress, stay accountable, and tweak your routines quickly.

  • Eliminated tracking errors across 30+ timezones with timezone-aware date mapping and atomic transactions, removing duplicate check-ins from streak race conditions.
  • Reduced analytics dashboard load time from 900 ms to under 150 ms (6x faster) by introducing pre-aggregated statistics models and indexed queries in place of on-demand aggregation over full history.
  • Shipped 8 feature modules including streaks, categorised habits, drag-and-drop prioritisation, multi-frequency scheduling and reminders, deployed on Vercel with CI/CD.

What It Does

  • Dashboard overview showing key habits, current streaks, longest streaks and total completions at a glance, with timezone-aware stats so "today" always matches your local day.
  • Create, organize and categorize habits (Health, Learning, Productivity, etc.) with color-coding and icons for quick visual scanning.
  • Daily completion tracking with streaks and completion counts, backed by a deterministic seed dataset for demos and testing.
  • Historical analytics over the last 90 days, built to integrate with charts and advanced analytics views.
  • App-wide sidebar (Dashboard, Habits, Analytics, Calendar, Reminders, Community, Settings) with breadcrumb navigation and a responsive, collapsible layout.
  • Email/session authentication via NextAuth, with a dark-mode-first interface using next-themes.

Architecture

A single Next.js App Router application: app/ holds route entrypoints and layouts, including an auth-aware app layout with sidebar and header; components/ holds the design-system and layout components; prisma/ holds the schema plus a seed script that generates a deterministic dataset of habits, categories, daily stats and completions for local development.

Tech Stack

Framework

Next.js 16 (App Router)

Language

TypeScript
React 19

Styling & UI

Tailwind CSS v4
shadcn/ui
Radix UI
Lucide React

State & Forms

React Hook Form
Zod

Data & Backend

PostgreSQL
Prisma ORM
date-fns
date-fns-tz

Auth

NextAuth (Prisma adapter)

UX

@dnd-kit
@tanstack/react-table
Recharts
Sonner

Languages

TypeScript98%
CSS2%

Getting Started

  1. 1Clone the repository
    git clone https://github.com/SajalDBansal/habitkit.git
cd habitkit
  2. 2Install dependencies
    npm install
  3. 3Set up environment variables
    DATABASE_URL="postgresql://user:password@localhost:5432/habitkit"
NEXTAUTH_SECRET="your-nextauth-secret"
NEXTAUTH_URL="http://localhost:3000"
  4. 4Push the Prisma schema
    npx prisma db push
  5. 5Seed sample data (optional)
    npx prisma db seed
  6. 6Run the development server
    npm run dev
GitHub
LinkedIn