https://github.com/domhhv/habitrack
A simple calendar app for tracking habits, built with React and Supabase
https://github.com/domhhv/habitrack
calendar framer-motion habits heroui phosphor-icons react react-aria sql sqlfluff supabase supabase-auth supabase-storage tailwind testing-library-react typescript vercel vite vitest yarn zustand
Last synced: about 2 hours ago
JSON representation
A simple calendar app for tracking habits, built with React and Supabase
- Host: GitHub
- URL: https://github.com/domhhv/habitrack
- Owner: domhhv
- License: mit
- Created: 2024-01-05T21:06:55.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2026-04-06T21:57:39.000Z (7 days ago)
- Last Synced: 2026-04-13T14:44:18.189Z (about 2 hours ago)
- Topics: calendar, framer-motion, habits, heroui, phosphor-icons, react, react-aria, sql, sqlfluff, supabase, supabase-auth, supabase-storage, tailwind, testing-library-react, typescript, vercel, vite, vitest, yarn, zustand
- Language: TypeScript
- Homepage: https://www.habitrack.io
- Size: 6.42 MB
- Stars: 8
- Watchers: 1
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Contributing: docs/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: docs/CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
Habitrack
[](https://app.relative-ci.com/projects/ZMp2Jc2sGq2jCm6ArH0A)
Habitrack is a simple and intuitive web app designed for logging habits and v isualizing them on a calendar view.
This app showcases the use of the following tools and technologies:
- React 19 with TypeScript 5.9, bundled with [Vite 7](https://vite.dev/)
- [React Router](https://reactrouter.com) v7 for routing (declarative mode)
- [Zustand](https://zustand.docs.pmnd.rs/) v5 for global state management
- [Tailwind CSS](https://tailwindcss.com) v4 for styling
- [HeroUI](https://www.heroui.com/) for the UI components
- React Aria [calendar hooks](https://react-spectrum.adobe.com/react-aria/useCalendar.html) to generate the calendar view
- [Supabase](https://supabase.io) for Authentication, Database and Storage
- [Vitest](https://vitest.dev/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) for unit-testing
- ESLint, Prettier, Husky, and SQLFluff for linting and formatting
- Docker for running a local Supabase instance
- GitHub Actions for CI/CD and Vercel for deployment
## Features
- **Customizable Habits**: Add, remove, and customize habits to fit your routine. Associate your habits with traits and icons.
- **Calendar View**: Visualize your habits on a monthly calendar.
- **Daily Tracking**: Easily add daily entries of your habits.
- **User Authentication**: Sign up and log in to your account to retain your habits and entries.'
- **Responsive Design**: Enjoy a seamless experience on any device.
- **PWA**: Install the app on your device for quick access.
## Roadmap
- [x] **Dark Mode**: Switch between light and dark themes.
- [x] **Weekly View**: View your habits on a weekly calendar.
- [x] **Daily View**: Dive into your habits on a daily calendar.
- [ ] **Export**: Export your habits and entries.
- [ ] **Categories**: Group habits into categories.
- [ ] **Environments**: Associate habits with environments where they occur.
- [x] **Habit Stocks**: Maintain a stock count for habits that require consumable resources.
- [x] **Habit Spending**: Track spending related to habits.
- [ ] **Habit Presets**: Use predefined habit templates for quick setup.
- [ ] **Log Presets**: Create and use log entry presets for faster logging.
- [ ] **Statistics**: Track your progress with insightful statistics.
- [ ] **Enriched Habit Streaks**: Extended options to visualize and track habit streaks (basic one-off streaks are displayed under /habits).
- [ ] **Sharing**: Share your calendar with trusted people.
- [ ] **Group Calendars**: Form or break habits together with friends or under a supervision of a coach.
- [ ] **Group Challenges**: Participate in habit challenges within groups.
- [ ] **Notifications**: Get reminders to log your habits via PWA notifications and later via email.
- [ ] **Offline Support**: Use the app without an internet connection.
There's also a public roadmap on Featurebase where you can upvote and suggest new features: [Habitrack Public Roadmap](https://habitrack.featurebase.app/roadmap).
### Tech Debt
- [x] **Migrate to Vitest**: Replace Jest with Vitest.
- [x] **Migrate to ESLint v9**: Update to ESLint v9 and use flat config.
- [ ] **Migrate to HeroUI 3**: Update to [HeroUI v3](https://v3.heroui.com/) (currently in beta) once it reaches stable release.
## Local development
### Prerequisites
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en/) (22.22.2)
- [Docker](https://docs.docker.com/get-started/get-docker/)
- Yarn is used as a package manager and is automatically available via Corepack (bundled with Node.js)
### Initial Setup
Follow these steps to get the project up and running on your local machine.
1. **Clone the repository:**
```bash
git clone https://github.com/domhhv/habitrack.git
```
2. **Navigate to the project directory:**
```bash
cd habitrack
```
3. **Install dependencies:**
```bash
yarn install
```
### Local Database Setup
The project uses Supabase for database operations.
The Supabase project configuration, seeds, and migrations live under the `supabase` directory.
To set up a local Supabase instance, run the following commands (Docker required).
1. **Start the local Supabase instance:**
```bash
yarn db:start
```
This command starts Supabase Docker containers based on `supabase/config.toml` and creates a local Postgres database and services.
It should output the Studio URL, Database URL, and Project URL, among other info. Use the Studio URL to access the local Supabase dashboard in the browser, and the Database URL to connect to the local database directly if needed.
2. **Retrieve API URL and anon key:**
Run the following command to retrieve the API URL and anon key for the local Supabase instance:
```bash
yarn db:status -o env
```
This command outputs the environment variables needed to connect to the local Supabase instance, including `API_URL` and `ANON_KEY`.
3. **Environment variables**
Create a `.env.development` file in the root directory of the project and add the following environment variables:
```env
SUPABASE_URL=
SUPABASE_ANON_KEY=
```
4. **Apply migrations and seed the database:**
```bash
yarn db:reset
```
This command resets the local database to a clean state, applies migrations from `supabase/migrations`, and seeds the db with essential initial data based on `supabase/seed.sql`.
### Run the app
Once the dependencies are installed and the local Supabase instance is running, you can run the app locally:
```bash
yarn dev
```
This command starts the development server and opens the app in your default browser.
### Database Migrations
There are a few ways to create and run migrations in the project.
- **[Recommended] Change or create [declarative database schema](https://supabase.com/docs/guides/local-development/declarative-database-schemas) SQL files under `supabase/schemas` directory as needed**
This project uses declarative database schema management, so the preferred way to make changes to the database schema is to modify the SQL files under `supabase/schemas` directory.
If you need to modify an existing table, add a new table/type/function, or make any other schema changes, do so by editing or adding SQL files in the `supabase/schemas` directory, then run:
```bash
yarn db:diff -f
```
- **Diffing the Supabase Studio database schema changes to automatically generate a new migration file**
Do the necessary changes in the local Supabase studio and then run the following to automatically generate a new migration file:
```bash
yarn db:diff -f
```
- **Creating a new migration file manually**
To create a new migration file manually, run the following command:
```bash
yarn db:migration:new
```
---
Either way, the new migration file will be created in the `supabase/migrations` directory. Write/change the SQL queries in the migration file to reflect the changes you want to make to the database schema. Then, apply the migration by running:
```bash
yarn db:migration:up # or
yarn db:reset # to reset the local DB and apply all migrations
```
After applying the migration, you also need to regenerate Supabase types by running:
```bash
yarn db:gen-types
```
Once the migration ends up in the `main` branch, it will be automatically applied to the production database.
> Important step: After applying any new migrations, always remember to regenerate Supabase types by running `yarn db:gen-types` to keep the types in sync with the database schema.
### Testing
The project uses [Vitest](https://vitest.dev/) as the test runner and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) for unit testing of React components.
To run the tests, use the following command:
```bash
yarn test
```
Other test-related commands include:
```bash
yarn test:coverage # Run all tests and generate coverage report
yarn test:watch # Run all tests in watch mode
yarn test:no-cache # Run all tests without cache
```
### Linting
There are two types of linting in the project: JavaScript/TypeScript linting and SQL linting.
#### JS/TS
The project uses [ESLint](https://eslint.org/) v9 with a custom flat config for linting. To run ESLint, use the following command:
```bash
yarn eslint:check # Check for linting errors
yarn eslint:fix # Fix linting errors
```
#### SQL
In addition to ESLint, the project uses [SQLFluff](https://docs.sqlfluff.com/en/stable/) for linting SQL queries under `supabase` directory. To run SQLFluff (Docker required), use the following command:
```bash
yarn lint:sql # Lint SQL queries
yarn fix:sql # Find fixable linting violations in SQL queries and apply fixes
```
### Formatting
The project uses [Prettier](https://prettier.io/) for formatting. To run Prettier, use the following command:
```bash
yarn prettier:check # Check for formatting errors
yarn prettier:write # Fix formatting errors
```
### Building
To create a local production-like build of the app, run the following command:
```bash
yarn build
```
You can run the production build locally using the following command:
```bash
yarn preview
```
## CI/CD
The project uses GitHub Actions for CI/CD.
### Pull Requests
When you open a pull request, the following checks are run:
- **Setup**: Install and cache Yarn dependencies.
- **Typecheck**: Run TypeScript type checks.
- **ESLint**: Run ESLint checks for JS/TS lint issues.
- **SQLFluff**: Run SQLFluff checks for SQL lint issues.
- **Prettier**: Run Prettier checks for formatting issues.
- **Unit tests**: Run unit tests with Vitest (currently not required to pass as tests are incomplete).
- **RelativeCI**: Visual regression tests powered by RelativeCI.
- **Deploy preview**: Build and deploy the app to Vercel for preview.
- **Coderabbit PR Review**: Automated code review powered by CodeRabbit.
All checks but the last one must pass before merging a pull request.
### Merging to Main
When a pull request is merged to the `main` branch, the following checks are run:
- **Deploy app**: Build and deploy the app to Vercel.
- **Migrate database**: Apply Supabase migrations to the production database, if any.
## Contributing
Contributions are welcome! Feel free to open issues or pull requests for any improvements, bug fixes, or new features.