Overview

The purpose of the Habit Tracker web application is to help you with maintaining good habits to reach your goals through gamification (turning goals into a game). This software retrieves information saved in a cloud database and shows a calendar with daily goals achieved per each habit you are building. Also, the program allows you to report completed goals for the current day through a minimalistic interface.

How it works

The Habit Tracker web app relies on Django and React for the backend and frontend parts, respectively. By using the Boto3 Python package, the backend connects to a AWS DynamoDB table to retrieve information and sends the processed data to the frontend for visualization and interaction purposes. The frontend will capture new entries from the user and will ask the backend to send that information back to the cloud database. The interface has been designed to show on the screen updated information from the cloud service using a progress bar for the current day and calendars to have overall visuals of the accomplishements.

A demonstration of the software running and a walkthrough of the code can be found here.

Web Pages

React frontend

• http://localhost:3000/: The main web page can be oppened using the default React URL address. It has the following sections:
  • Header overall information
  • A progress circle showing the percentage of the today's accomplishements. It will automatically update whenever the user reports a completed task.
  • A group of buttons to update today's goals. For example, pressing the button Journal writing will indicate that this task has been finished and the app will save that information in the cloud database. The last button See my stats will pop up a React modal displaying the current-year achievements calendar for each habit.
  • Small calendars for each habit for the last couple of months

Django backend

• http://localhost:8000/: The default Django URL address hosts a web page showing a simple header.
• http://localhost:8000/api/: A communication channel between the backend and the frontend. Used for sending cloud database information as a JSON object to the frontend.
• http://localhost:8000/api/updateDB/: Used for sending completed task information from the frontend to the backend. The Django rest_framework package was used for the implementation of this API endpoint.

Communication

The Django backend URLs were defined in atomic/urls.py which calls functions from the atomic/views.py. Django looks for paths for this atomic application in habit_tracker/urls.py (parent directory is backend/).

To allow communication between the backend and frontend for this project, the package corsheaders needed to be installed, and the following information was required in the habit_tracker/settings.py file:

CORS_ORIGIN_WHITELIST = [
     "http://localhost:3000", # default URL for React frontend
]

INSTALLED_APPS = [
    ...,
    "corsheaders",
]

MIDDLEWARE = [
    ...,
    "corsheaders.middleware.CorsMiddleware",
]

How to use it

Clone this repository

$ git clone https://github.com/chinchay/habit-tracker.git

Assuming Python, Django and npm (a JavaScript package manager) are installed in your system:

Run Django

$ cd habit-tracker/backend/
$ python manage.py runserver

Install the required React modules for this project

$ cd habit-tracker/frontend/
$ npm install

Run React

$ cd habit-tracker/frontend/
$ npm start

The web app will be displayed in the React default URL http://localhost:3000

Development Environment

• Editor: Visual Studio Code
• Languages: Python 3.10.5 and JavaScript
• Version control system: Git
• Cloud repository: GitHub
• Frameworks: Django (as backend) and React (as frontend)
• Python packages: Boto3
• Django packages: corsheaders and rest_framework (as defined in backend/habit_tracker/settings.py)
• JavaScript package manager: npm
• React packages: react-apexcharts, react-bootstrap, bootstrap, axios, and @uiw/react-heat-map (as defined in frontend/package.json).

Useful Websites

Required reading for building this project:

• How To Build a To-Do application Using Django and React
• Build a Django Front End With Bulma
• Build and Submit HTML Forms With Django
• Get Started With Django
• Django JsonResponse
• Axios vs. fetch()
• Calendar heatmap react component
• React modal and React button
• Amazon DynamoDB database
• DynamoDB operations performed locally

Nice to watch:

• Deploy Django into Production with Kubernetes, Docker, & Github Actions.
• Upload your Django project to GitHub - The Easy Way
• Streaming com Python e Django

Future Work

This project was built using ideas from a previous work.

The following tasks will be completed in a next phase:

• Modify the program so that the user can define other goals different from the three provided in the current version (see figure above)
• Use an authentication process. Kerberos is a possible choice
• Include other features. Example: Earning points whenever five goals were achieved
• Implement a script in the DynamoDB database to send notifications
• Load this code into a server to receive such notifications and perform other tasks
• Improve the mobile version using ideas of this project

Copyright and license

Code released under the MIT License