Habitrack is a simple and intuitive app designed to help users build better habits by visualizing their progress on a calendar. With Habitrack, you can easily log daily habits, track your consistency, and see your streaks at a glance. This tool is perfect for anyone looking to stay motivated and committed to personal goals, whether it’s fitness, learning, or self-improvement. By providing a clear overview of your habit performance over time, Habitrack helps you stay on course and maintain accountability.
The app is live here. It uses:
- React Aria calendar hooks to generate the calendar view
- NextUI for the UI components
- Tailwind CSS for styling
- Supabase for Authentication, Database and Storage
This app is under active development. Many more features coming soon!
- 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.
- Git
- Node.js (LTS)
- Yarn (latest Classic Stable release or higher)
- Docker (optional, for running a local Supabase instance)
Follow these steps to get the project up and running on your local machine.
-
Clone the repository:
git clone https://github.com/domhhv/habitrack.git
-
Navigate to the project directory:
cd habitrack -
Install dependencies:
yarn install
-
Run the application:
yarn dev
This command starts the development server and opens the app in your default browser.
The project uses Supabase for database operations.
Habitrack UI is still runnable without a local Supabase instance, but you won't be able to sign in/up or retain your habits and entries.
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).
-
Start the local Supabase instance:
yarn db:start # API URL: http://127.0.0.1:54321 # DB URL: postgresql://postgres:[email protected]:54322/postgres # Studio URL: http://127.0.0.1:54323 # anon key: <your-anon-key> # ...
This command starts Supabase Docker containers based on
supabase/config.tomland creates a local Postgres database and services.It should output the API URL, DB URL, Studio URL, and an anonymous key, among other info. Use the Studio URL to access the local Supabase dashboard in the browser, and DB URL to connect to the local database directly.
API URL and anon key are needed in the next step to set up the local environment variables.
-
Environment variables
Create a
.env.developmentfile in the root directory of the project and add the following environment variables:SUPABASE_URL=<API URL> SUPABASE_ANON_KEY=<anon key> -
Apply migrations and seed the database:
yarn db:reset
This command resets the local database to a clean state, applies migrations from
supabase/migrationsand seeds the db with essential initial data based onsupabase/seed.sql. -
Check status of the local Supabase instance:
yarn db:status # the same output as when starting the local Supabase instance -
Stop the local Supabase instance:
yarn db:stop
The project uses Jest for unit testing. To run the tests, use the following command:
yarn testOther test related commands include:
yarn test:coverage # Run all tests and generate coverage report
yarn test:watch # Run all tests in watch mode
yarn test:clear-cache # Clear Jest cacheThe project uses ESLint for linting. To run ESLint, use the following command:
yarn eslint:check # Check for linting errors
yarn eslint:fix # Fix linting errorsThe project uses Prettier for formatting. To run Prettier, use the following command:
yarn prettier:check # Check for formatting errors
yarn prettier:fix # Fix formatting errorsContributions are welcome! Feel free to open issues or pull requests for any improvements, bug fixes, or new features.