Habilify

Habits Calendar Tracker

This app is designed to provide a simple and intuitive way to monitor habits. Track your habits with ease using this customizable and user-friendly React-based habits calendar tracker.

The app is live here. It uses:

• React Aria calendar hooks to generate the calendar view
• Material Joy UI for the UI and styling solution
• Supabase for Authentication, Database and Storage

Features

• Calendar View: Visualize your habits on a monthly calendar.
• Customizable Habits: Add, remove, and customize habits to fit your routine. Associate your habits with traits and icons.
• Daily Tracking: Easily add daily entries of your habits.
• User Authentication: Sign up and log in to your account to save your habits and entries.

Running locally

Data storage and management

The app uses Supabase for data storage and management. In order to run the app locally, you'll need to set up a Supabase project and provide the necessary environment variables.

1. Create a Supabase project:

   • Go to Supabase and create an account.
   • Create a new project and database.

2. Set up the database:

• Create the following tables with appropriate columns in your Supabase project:
  • public.traits:
    • id (type: int8, primary key)
    • created_at (type: timestamp with time zone)
    • updated_at (type: timestamp with time zone)
    • name (type: text)
    • slug (type: text)
    • description (type: text)
    • user_id (type: uuid, foreign key to auth.users.id)
  • public.habits:
    • id (type: int8, primary key)
    • created_at (type: timestamp with time zone)
    • updated_at (type: timestamp with time zone)
    • name (type: text)
    • description (type: text)
    • trait_id (type: int8, foreign key to public.traits)
    • icon_path (type: text)
    • user_id (type: uuid, foreign key to auth.users.id)
  • public.occurrences:
    • id (type: int8, primary key)
    • created_at (type: timestamp with time zone)
    • updated_at (type: timestamp with time zone)
    • timestamp (type: int8)
    • day (type: date)
    • time (type: time with time zone)
    • habit_id (type: int8, foreign key to public.habits)
    • user_id (type: uuid, foreign key to auth.users.id)
  • public.accounts:
    • id (type: uuid, primary key)
    • created_at (type: timestamp with time zone)
    • updated_at (type: timestamp with time zone)
    • name (type: text)
    • email (type: text)
    • phone_number (type: text)

Initially, a designated server application was built to handle the backend and database. The code for the server can be found here.

To use it, make sure to checkout the commit hash below. Then, follow the instructions in the README to get the server up and running.

git checkout 8e8740097cdcdb6502a1ae540c13e33e1707aac0

Also, set up the necessary environment variables in the .env.development file in the client application.

API_BASE_URL=http://localhost:3000
NODE_ENV=development

Alternatively, you can use your own server and database.

Prerequisites

• Node.js (v14.17.0 or higher)
• Yarn (v1.22.10 or higher)
• Git

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/react-habits-calendar-tracker.git

2. Navigate to the project directory:

   cd habilify

3. Install dependencies:

   yarn install

4. Run the application:

   yarn start

5. Open your browser and go to http://localhost:8080.

Environment variables

The following environment variables are used in the project:

• SUPABASE_URL: The URL of the Supabase project.
• SUPABASE_ANON_KEY: The anonymous key of the Supabase project.
• NODE_ENV: The environment the application is running in. Either development (for yarn start) or production (for yarn build).

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

SUPABASE_URL=https://<your-supabase-url>.supabase.co
SUPABASE_ANON_KEY=<your-supabase-anon-key>
NODE_ENV=development

Testing

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

yarn test

To run the tests with coverage, use the following command:

yarn test:coverage

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

Contributing

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