mirror of
https://github.com/nagaoo0/HabbitGrid.git
synced 2026-01-11 23:44:55 +00:00
107 lines
2.5 KiB
Markdown
107 lines
2.5 KiB
Markdown
# 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.
|
|
|
|
---
|
|
|
|
<p align="center">
|
|
<a href="https://github.com/nagaoo0/HabitGrid" target="_blank"><img src="https://img.shields.io/github/stars/nagaoo0/HabitGrid?style=social" alt="GitHub stars"></a>
|
|
<a href="https://github.com/nagaoo0/HabitGrid" target="_blank"><img src="https://img.shields.io/github/license/nagaoo0/HabitGrid?color=blue" alt="MIT License"></a>
|
|
<a href="https://git.mihajlociric.com/count0/HabitGrid" target="_blank"><img src="https://img.shields.io/badge/Mirror-git.mihajlociric.com-orange?logo=gitea" alt="Gitea Mirror"></a>
|
|
</p>
|
|
|
|
---
|
|
|
|
**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)
|
|
- Built with React, Vite, Tailwind CSS, Radix UI, and Framer Motion
|
|
|
|
---
|
|
|
|
## 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/
|
|
```
|
|
|
|
## Deployment Tip
|
|
|
|
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!
|
|
|
|
## License
|
|
|
|
MIT
|
|
|
|
---
|
|
|
|
**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*
|
|
````
|