HabitGrid

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:

• GitHub Repository
• Self-hosted Mirror (Gitea)

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:

1. 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()
   );
   

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

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

1. Fork or clone this repository to your GitHub account.
2. Go to Cloudflare Pages and create a new project, connecting your GitHub repo.
3. Use the Vite preset when prompted for the build configuration.
4. Set the build command to:

   npm run build
   

   and the output directory to:

   dist
   

5. 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:

• Live Demo
• GitHub
• Mirror (Gitea)

---

Built with ❤️ by Mihajlo Ciric