Habitrack

             

Habitrack is a simple and intuitive web app designed for logging habits and visualizing them on a calendar view.

This app showcases the use of the following tools and technologies:

• React with TypeScript, bundled with Vite
• Zustand for global state management
• Tailwind CSS for styling
• NextUI for the UI components
• React Aria calendar hooks to generate the calendar view
• Supabase for Authentication, Database and Storage
• Jest and React Testing Library for unit-testing
• ESLint, Prettier, and Husky 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

• Dark Mode: Switch between light and dark themes.
• Export: Export your habits and entries.
• Environments: Associate habits with environments where they occur.
• Categories: Group habits into categories.
• Weekly View: View your habits on a weekly calendar.
• Daily View: Dive into your habits on a daily calendar.
• Sharing: Share your calendar with trusted people.
• Statistics: Track your progress with insightful statistics.
• Notifications: Get reminders to log your habits.
• Local Storage: Save your habits and entries locally.

Local development

Prerequisites

• Git
• Node.js (LTS)
• Yarn (latest Classic Stable release or higher)
• Docker (optional, for running a local Supabase instance)

Installation

Follow these steps to get the project up and running on your local machine.

1. Clone the repository:

   git clone https://github.com/domhhv/habitrack.git

2. Navigate to the project directory:

   cd habitrack

3. Install dependencies:

   yarn install

4. Run the application:

   yarn dev

   This command starts the development server and opens the app in your default browser.

Database setup (optional)

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).

1. 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.toml and 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.

2. Environment variables

   Create a .env.development file in the root directory of the project and add the following environment variables:

   SUPABASE_URL=<API URL>
   SUPABASE_ANON_KEY=<anon key>
   

3. Apply migrations and seed the database:

   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.

4. Check status of the local Supabase instance:

   yarn db:status
   # the same output as when starting the local Supabase instance

5. Stop the local Supabase instance:

    yarn db:stop

6. Restart the local Supabase instance:

    yarn db:restart

Migrations

There are a few ways to create and run migrations in the project.

• Diffing the database schema 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:

yarn db:diff -f <your-migration-name>

• Creating a new migration file manually:

To create a new migration file manually, run the following command:

yarn db:migration:new <your-migration-name>

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:

yarn db:migration:up

After applying the migration, you also need to regenerate Supabase types by running:

yarn db:gen-types

Once the migration ends up in the main branch, it will be automatically applied to the production database.

Testing

The project uses Jest for unit testing. To run the tests, use the following command:

yarn test

Other 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 cache

Linting

The project uses ESLint for linting. To run ESLint, use the following command:

yarn eslint:check # Check for linting errors
yarn eslint:fix # Fix linting errors

Formatting

The project uses Prettier for formatting. To run Prettier, use the following command:

yarn prettier:check # Check for formatting errors
yarn prettier:fix # Fix formatting errors

Building

To create a local production-like build of the app, run the following command:

yarn build

You can run the production build locally using the following command:

yarn preview

Contributing

Contributions are welcome! Feel free to open issues or pull requests for any improvements, bug fixes, or new features.