https://github.com/nagaoo0/habitgrid
Grid based habbit tracker app
https://github.com/nagaoo0/habitgrid
gridview habbit-tracker self-hosted vitejs
Last synced: 2 months ago
JSON representation
Grid based habbit tracker app
- Host: GitHub
- URL: https://github.com/nagaoo0/habitgrid
- Owner: nagaoo0
- License: mit
- Created: 2025-10-13T14:18:37.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-10-15T18:01:14.000Z (3 months ago)
- Last Synced: 2025-10-16T06:59:35.095Z (3 months ago)
- Topics: gridview, habbit-tracker, self-hosted, vitejs
- Language: JavaScript
- Homepage: https://habits.mihajlociric.com/
- Size: 823 KB
- Stars: 5
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://github.com/nagaoo0/HabitGrid)
- [Self-hosted Mirror (Gitea)](https://git.mihajlociric.com/count0/HabitGrid)
## 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
```powershell
# Clone the repository
git clone https://github.com/nagaoo0/habitgrid.git
cd habitgrid
# Install dependencies
npm install
```
### Development
```powershell
npm run dev
```
Visit [http://localhost:3000](http://localhost:3000) in your browser.
### Build for Production
```powershell
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](https://supabase.com/) account:
1. Create a Supabase project and set up a `habits` table with the following schema:
```sql
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](https://pages.cloudflare.com/):
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:
```sh
npm run build
```
and the output directory to:
```sh
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](https://myhabitgrid.com/)
- [GitHub](https://github.com/nagaoo0/HabitGrid)
- [Mirror (Gitea)](https://git.mihajlociric.com/count0/HabitGrid)
---
*Built with ❤️ by [Mihajlo Ciric](https://mihajlociric.com/)*