Quick Install (docker) | About | Features | Authors | Live Demo
A fully featured, full-stack web app that helps users build atomic habits.
Habitly is a full-stack web app that helps users keep track of their daily habits, build healthy atomic habits and get rid of unhealthy ones. This project was inspired by the famous book Atomic Habits by James Clear. The primary ideas that are behind this app are the followings;
- Habits: Keeping a track of your healthy and unhealthy habits daily helps you maintain healthy atomic habits and get rid of bad ones.
- Implementation Intentions: Intending to do a task (or repeat a habit) at a specific time/location and writing the intention down increases your chances of completing it.
- Habit Stacking: Stacking a new habit with an existing habit helps you turn the new habit into an atomic habit easily.
- Habit Repetitions: Keeping a track of your habit repetitions gives you evidence in the past which helps in maintaining healthy habits and getting rid of unhealthy ones.
- Habit Streaks: Seeing that streak number increment is quite motivating and gives you chills.
This repository consists of a SPA frontend powered by VueJS 3 and a RESTful backend powered by Django 3.2 and Django Rest Framework.
Everything that you need to maintain healthy habits and get rid of bad ones is what habitly is all about. It has a beautiful frontend user interface built using Bootstrap 5.0 and SCSS. The RESTful API that the frontend SPA consumes is built using Django Rest Serializers.
Authentication and authorization is done using jwt tokens and handled using Auth0. Auth0 SPA JS was used in the frontend authentication service.
The jwt tokens aren't stored in local storage or cookies but rather auth0 server sessions are used to persist user logins. Tokens are silently refreshed by Auth0-SPA-JS (a redirect is required when running in localhost). The frontend Single Page APP consists of the following main views and components;
- Home
- Today's intentions.
- Check intention (Set it to done)
- Top five streaked habits.
- Top five repeated habits.
- Habits
- Create habit
- Good habits
- Bad habits
- Checkbox (Add today's habit repetition)
- HabitDetail
- Edit habit
- Delete habit
- Habit model details
- Repetition
- Stacks
- Create stack
- Delete stack
- Paragraph view
- Table view
- Intentions
- Create/edit intention
- Delete intention
- Check intention (Set it to done)
- Paragraph view
- Table view
- Completed intentions view
Also, there are tooltips to help the user understand the concept.
And that's about it. Hope this convinces you to give it a try (have added docker-compose for you!) 😉.
These instructions will get you a copy of this project running on your local machine in dev mode.
Note: For demo purpose I have places frontend/auth_config.json
and backend/auth_config.py
which uses my auth0 tenant that I created for demo purposes. Consider changing these files if you ever end up deploying this web app.
Prerequisites:
- Git
- Docker
- Docker-Compose
- A command line interface (use git-bash in windows please)
Cloning repository:
Start by cloning the repository on your local machine using git:
git clone https://github.com/0xaliraza/habitly
Change directory to the project folder:
cd habitly
Build and run using docker-compose in detached mode
docker-compose up -d
Running the above commands will give you the following instances;
- Backend Django app running at http://localhost:8000/
- Frontend Vue 3 app served (hot-reload enabled 😌) at http://localhost:8080/
- PHPMyAdmin(just for your convenience 😉) running at http://localhost:8081/
The database is persisted using a docker volume so you won't ever lose your databases.
Also, by now, a database user with the username habitly
and password password
is already created in django. Visit http://localhost:8000/admin and interact with all the models.
Note: Ports used by above instances might already be busy in your machine so make sure you stop already running services or change docker-compose.yml
according to your needs.
Prerequisites:
- Git
- Python3
- Pip3
- Node.js
- Venv
- A database management system such as SQLite or MySQL
- A command line interface (use git-bash in windows please)
Cloning repository
Start by cloning the repository on your local machine using git
git clone https://github.com/0xaliraza/habitly
Change directory to the project folder
cd habitly
Serving django backend
Change directory to backend
cd backend
Now create a virtual environment
python3 -m venv venv
Activate the virtual environment
source venv/bin/activate
Install requirements
pip3 -r requirements.txt
Run the django migrations
Now, open settings.py
file in your favorite text editor and customize the following defaults according to your needs
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'habitly',
'USER': 'root',
'PASSWORD': 'password', # Default password in `docker-compose.yml` is 'password'
'HOST': 'db', # Docker container's name is 'db'
'PORT': '3306',
}
}
Run the migrations
./manage.py migrate
Finally, serve the django backend
./manage.py runserver
Congo, the backend is live at http://localhost:8000, but wait, let's serve the frontend now...
Serving Vue JS frontend
Now change directory to frontend
cd ../frontend
Install dependencies and serve
Using yarn
yarn install && yarn serve
Using npm
npm install && npm run serve
Cheers, your frontend is live at http://localhost:8080, go visit and login using demo-user
as both username and password.
Ali Raza (me) 🙃
Feel free to contact me for any kind of help or information. Let's get connected! :)
See the LICENSE file for license rights and limitations (MIT).