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)
Built with React, Vite, Tailwind CSS, Radix UI, and Framer Motion

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/

Deployment Tip

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!

License

MIT

Project Links:

Built with ❤️ by Mihajlo Ciric