A modern, grid-based habit tracker app inspired by GitHub contribution graphs. Track your daily habits, visualize progress, and build streaks with a beautiful, responsive UI.

Source code:

Features

GitHub-style habit grid (calendar view)
Streak tracking and personal bests
Custom habit colors
Dark mode and light mode
Data export/import (JSON backup)
Responsive design (desktop & mobile)
Cross-device sync with Supabase (cloud save)
Offline-first: works fully without login, syncs local habits to cloud on login
Built with React, Vite, Tailwind CSS, Radix UI, and Framer Motion

How Sync Works

By default, all habits are stored locally and work offline.
When you log in (via the call to action button), your local habits are synced to Supabase and available on all devices.
Any changes (including categories, order, completions) are automatically pushed to the cloud when logged in.

Getting Started

Prerequisites

Node.js (v18 or newer recommended)
npm

Installation

# Clone the repository
git clone https://github.com/nagaoo0/habitgrid.git
cd habitgrid

# Install dependencies
npm install

Development

npm run dev

Visit http://localhost:3000 in your browser.

Build for Production

npm run build

The production build will be in the dist folder.

Project Structure

src/
  App.jsx
  main.jsx
  index.css
  components/
  lib/
  pages/

Cloud Sync Setup

To enable cross-device sync, you need a free Supabase account:

Create a Supabase project and set up a habits table with the following schema:

create table habits (
  id uuid primary key default gen_random_uuid(),
  user_id uuid not null,
  name text not null,
  color text,
  category text,
  completions jsonb default '[]'::jsonb,
  current_streak int default 0,
  longest_streak int default 0,
  sort_order int default 0,
  created_at timestamptz default now(),
  updated_at timestamptz default now()
);

Add your Supabase project URL and anon key to the app's environment/config.
Deploy as usual (see below).

You can easily deploy your own instance of HabitGrid using Cloudflare Pages:

Fork or clone this repository to your GitHub account.
Go to Cloudflare Pages and create a new project, connecting your GitHub repo.
Use the Vite preset when prompted for the build configuration.
Set the build command to:
```
npm run build
```
and the output directory to:
```
dist
```
Deploy and enjoy your own habit tracker online!

Offline-First Guarantee

You can use HabitGrid without ever logging in everything works locally.
If you decide to log in later, all your local habits (including categories and order) will be synced to the cloud and available on all devices.

Project Links:

Built with ❤️ by Mihajlo Ciric