Trackbit: Gamified Habit Tracking

Trackbit – Modern Habit & Workout Tracker (2025–2026)

Personal full-stack project – complete frontend refactor + backend modernization (2025–early 2026)

Trackbit is a visually-driven single-page application designed to help users build and maintain habits while also supporting detailed strength training and workout logging.
The core philosophy combines motivational visualization (GitHub-style heatmaps + dynamic gradient progress) with practical, structured tracking of both simple daily routines and complex exercise sessions.

In 2025 I undertook a nearly complete rewrite of the original frontend. During late 2025 and early 2026 the backend was progressively migrated from the previous stack to a modern, lightweight TypeScript-based API.

Current Technology Stack (January 2026)

Frontend

• React 18 + TypeScript
• Vite
• Tailwind CSS + shadcn/ui
• TanStack Query (data fetching & optimistic updates)
• Zustand (lightweight client state)
• react-hook-form + zod
• date-fns, custom gradient/color interpolation utilities

Backend (current production version)

• Hono (ultra-lightweight & fast web framework)
• Drizzle ORM (type-safe SQL toolkit)
• PostgreSQL
• Better Auth (modern authentication & session management)
• JWT-based tokens with ongoing improvements in refresh/session handling

Key Features Currently Implemented

• Full-year GitHub-style contribution heatmap with multiple intensity levels
• Customizable gradient progress visualization that dynamically evolves with daily progress
• Three distinct tracking modes: • Simple quantitative habits (counter-based: pages read, glasses of water…) • Structured workout sessions (exercises with sets, reps, weight, distance, duration…) • Basic negative/avoidance habit tracking
• Built-in exercise library + user-created custom movements
• Optimistic UI with rollback on failure (especially during workout logging)
• Responsive design (desktop experience is solid; mobile still needs refinement)

My Main Contributions During the 2025–2026 Rewrite

• Complete architectural migration of the frontend to modern React patterns (hooks, functional components, TypeScript end-to-end)
• Design & implementation of a flexible custom gradient interpolation system for motivational progress visualization
• Full optimistic CRUD system for workout sessions, sets and performances
• Category-adaptive exercise input forms (different fields shown for strength, cardio, timed holds…)
• Comprehensive migration to TanStack Query + proper query invalidation patterns
• Creation of a consistent component & styling system based on shadcn/ui + Tailwind
• Gradual backend replacement: old Flask-based API → type-safe Hono + Drizzle + Better Auth

Current Limitations & Honest Assessment

• Mobile UX/responsiveness still needs significant polish
• Authentication refresh & long-lived session handling is basic (improvements in progress)
• No social features, public sharing, leaderboards or community aspects
• No native mobile app or progressive web app push notifications
• Test coverage remains low (mostly manual testing during development)
• Documentation and onboarding flow are minimal

Key Learnings & Professional Growth

The 2025–2026 refactor provided deep hands-on experience with:

• Building large-scale, type-safe React applications using current best practices
• Implementing sophisticated visual feedback systems (custom gradient mapping, dynamic color interpolation)
• Managing complex domain logic (nested workout sessions → exercises → performances) with optimistic updates
• Performing incremental legacy migration (old sync Python backend → modern TS stack) while keeping the product usable
• Designing flexible yet strongly-typed data models capable of handling very different activity types