Skip to content

tedrenliv/habit-tracker

BranchesTags

Repository files navigation

Habit Tracker

A beautiful, responsive habit tracking application with analytics and achievement system. Built with React, TypeScript, Tailwind CSS, and Vite.

Features

  • User Authentication: Sign up / sign in / sign out via Supabase Auth
  • Today's Tracking: Daily habit check-in with progress visualization
  • Add & Delete Habits: Create new habits and remove ones you no longer need
  • Analytics Dashboard: Detailed statistics including:
    • Longest streak tracking
    • Average completion rate
    • Active habits count
    • Habit completion rankings
    • Heatmap of check-ins (last 90 days)
    • Completion trends chart
  • Achievement System: Unlock achievements as you build consistency
  • Responsive Design: Works seamlessly on mobile and desktop
  • Real-time Updates: Instant feedback on habit completion
  • Data Persistence: Supabase backend with graceful fallback to local state

Project Structure

habit-tracker/
├── src/
│   ├── main.tsx              # React entry point
│   ├── App.tsx               # Main application component (auth, habits, analytics, achievements)
│   ├── index.css             # Global styles with Tailwind
│   └── lib/
│       ├── supabase.ts       # Supabase client, auth & data helper functions
│       ├── haptics.ts        # Native haptic feedback (Capacitor)
│       └── notifications.ts  # Native push notifications (Capacitor)
├── api/                      # Vercel serverless functions
│   ├── habits.ts             # GET/POST/PUT/DELETE habits
│   ├── achievements.ts       # GET achievements
│   └── daily-data.ts         # GET/POST daily check-ins
├── index.html                # HTML template
├── package.json              # Dependencies and scripts
├── vite.config.ts            # Vite configuration
├── tsconfig.json             # TypeScript configuration
├── tailwind.config.js        # Tailwind CSS configuration
├── postcss.config.js         # PostCSS configuration
└── standalone.html           # Single-file version for quick demos

Installation

  1. Clone or download the project
  2. Install dependencies: 
    npm install

Development

Start the development server with hot reload:

npm run dev

The app will open automatically at http://localhost:5173

Build

Create a production-optimized build:

npm run build

The optimized files will be in the dist/ directory.

Preview Build

Preview the production build locally:

npm run preview

Standalone Version

For quick demos or sharing without Node.js:

  1. Open standalone.html directly in your browser
  2. No build step or installation required
  3. All functionality works identically to the React version

Technologies Used

  • React 18 - UI framework
  • TypeScript - Type safety
  • Tailwind CSS - Utility-first styling
  • Lucide React - Icon library
  • Vite - Build tool with hot reload
  • PostCSS - CSS processing
  • Supabase - Authentication & PostgreSQL database
  • Capacitor - Native mobile features (haptics, notifications)

Backend Integration

Quick Start

Ready to add persistent data storage? Follow the 15-minute setup:

👉 Backend Quick Start Guide

Deployment Status

  • ✅ Frontend: Live on Vercel with Custom Domain

  • ✅ Serverless API: Ready (with example functions in api/)

    • GET/POST/PUT/DELETE habits
    • GET achievements
    • GET/POST daily check-ins

  • ⭐ Supabase Database: Recommended for data persistence

    • PostgreSQL-based
    • Real-time subscriptions
    • Row-level security
    • Free tier available

Custom Domain Configuration

The application is accessible via custom domain https://aithinking.uk with the following DNS setup:

DNS Records (Squarespace):

  • Type: A
  • Host: @ (root domain)
  • Value: 216.198.79.1
  • TTL: 3600

To set up a custom domain for your own deployment:

  1. Add your domain to Vercel project settings
  2. Update your DNS provider with the A record provided by Vercel
  3. Wait 5-30 minutes for DNS propagation
  4. Verify domain is active in Vercel dashboard

Guides

Guide Purpose
Backend Quick Start 15-minute setup with Supabase
Backend Integration Complete API & database guide
Supabase Setup Detailed Supabase configuration

Architecture

Frontend (React)
    ↓
Vercel Serverless APIs (/api/*)
    ↓
Supabase PostgreSQL

Default Behavior

  • Without Supabase: Uses mock data (resets on page refresh)
  • With Supabase: Data persists and syncs across devices

Mock Data

The application includes pre-configured mock data as fallback:

  • 4 sample habits (Morning Run, Meditation, Reading, Fitness)
  • 6 achievements with unlock progress
  • 90 days of history for analytics

Version History

v0.3.0 - User Authentication & Habit Management (February 2026)

  • ✅ User Authentication: Sign up, sign in, sign out via Supabase Auth
  • ✅ Auth UI: Login/register page with email + password, error handling, Chinese UI
  • ✅ Add Habits: Create custom habits from the Today page
  • ✅ Delete Habits: Remove habits with trash icon button on each card
  • ✅ Default Starter Habits: New users get 4 default habits automatically
  • ✅ Graceful Fallback: App works with local state when Supabase tables don't exist
  • ✅ Logout: Dedicated logout button in navigation
  • ✅ NaN% Fix: Fixed division-by-zero when no habits exist

v0.2.0 - Backend Integration & Custom Domain (February 2026)

  • ✅ Deployed to Vercel with custom domain https://aithinking.uk (Active ✨)
  • ✅ DNS Configuration: A record (216.198.79.1) set up on Squarespace
  • ✅ Default Vercel URL also available at https://habit-tracker-iota-sepia.vercel.app
  • ✅ Supabase Integration: Connected to PostgreSQL database with real-time support
  • ✅ Serverless API Endpoints:
    • /api/habits - Full CRUD operations for habits
    • /api/achievements - Fetch user achievements
    • /api/daily-data - Track and retrieve daily check-ins
  • ✅ Database Tables: 5 PostgreSQL tables with Row-Level Security (RLS) policies
    • users - User profiles
    • habits - Habit definitions
    • daily_habits - Daily check-in history
    • achievements - Achievement definitions (6 pre-loaded)
    • user_achievements - Achievement unlock tracking
  • ✅ Frontend Library: Supabase client with 7 helper functions in src/lib/supabase.ts
  • ✅ Environment Variables: .env.local for development, Vercel dashboard for production
  • ✅ Data Persistence: All user data now persists across devices and page refreshes
  • 📚 Added comprehensive guides:
    • BACKEND_QUICK_START.md - 15-minute setup guide
    • BACKEND_INTEGRATION.md - Complete technical architecture
    • SUPABASE_SETUP.md - Database configuration guide
  • 🔄 Fallback to mock data when Supabase credentials unavailable

v0.1.0 - Initial Release (January 2026)

  • ✅ React Frontend: Built with TypeScript, React 18, Tailwind CSS
  • ✅ Three Core Pages:
    • Today's Tracking - Daily habit check-ins with progress visualization
    • Analytics Dashboard - Stats, heatmap, trends, rankings
    • Achievements - 6 unlockable achievements for consistency milestones
  • ✅ Responsive Design: Mobile-first approach, tested on all screen sizes
  • ✅ Mock Data System: 4 sample habits with 90-day history
  • ✅ Standalone Version: standalone.html for quick demos without build
  • ✅ Build Optimization: Production build ~168KB, fast load times
  • ✅ TypeScript: Full type safety for components and data

Roadmap - Upcoming Features

Phase 4: Enhanced User Experience

  • 📱 Real-time Sync - Cross-device synchronization
  • 🎯 Performance Optimization - Query optimization, caching
  • 📊 Analytics Tracking - User behavior and usage insights
  • 🔔 Push Notifications - Habit reminders via native notifications
  • 🎨 Custom Habit Icons - Choose emoji/icon when creating habits

Browser Support

  • Chrome/Chromium 90+
  • Firefox 88+
  • Safari 14+
  • Edge 90+

License

Open source - free to use and modify.

About

habit-tracker-iota-sepia.vercel.app

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages