Activity Tracker

A simple activity tracker that can be used to track simple attendance-based / recurring tasks. It provides a dashboard for one to perform daily, weekly or fortnightly analysis of activity trends.

See Live Demo

Demo Account Credentials

username: demo-account

password: demo1403!

Features

• Manage activity updates (Add, change, remove)
• Manage members (Add, update, remove)
• View Daily, Weekly, Fortnightly activity trends
• User authenticaion (JWT token-based)
• Responsive UI

This is a project that was created to help establish a digital, centralized activity tracking system for a community-based social development orgnisation, working with a set group of people. Hence a lot of the current functionality is structured around the needs of the organisation at the currrent stage of the project.

For example, the main users of the system would be people that are not quite tech-savvy and would like to be able to simply login, update activity, view trends/updates and would rather have the more technical aspects such as user sign up, user password management handled from the backend. Fortunately Django provides a convenient built-in admin dashboard to allow for this.

However, further work is in progress to cater for different system user-roles where more technical users can have more features available in the front-end

Built With

• Django
• React
• Tailwind CSS
• Docker

Getting Started

Prerequisites

• Python 3.8 or higher which you can obtain here
• Node.js V18 or higher which you can obtain here

Installation

Clone the repo to where you will be running the system

Back-end

---

1. Set the current directory in your terminal to the backend folder
2. Get all dependencies
   python -m pip install -r requirements.txt
3. Create the necessary migrations
   python manage.py makemigrations
4. Run the migrations
   python manage.py migrate
5. Create an admin superuser
   python manage.py createsuperuser
6. Start local web server python manage.py runserver
7. View back-end admin interface by navigating to http://127.0.0.1:8000/admin

Front-end

---

1. Set the current directory in your terminal to the frontend folder
2. Get all dependencies
   npm install
3. Start the React server
   npm start
4. View front-end by navigating to http://127.0.0.1:3000 although it should open automatically after running the previous step
5. Login using the username and password of the superuser that had been created

(back to top)

Usage

Dashboard page

---

View specific activity trends

---

Subgroups page

---

Members Page

---

Filter Members list

---

Add Member

---

Edit Member

---

Remove Member

---

Update Activity

---

(back to top)

Customization

Customization is quite limited currently (work in progress to enable color customization), one can however change the name, color assigned and icon presenting each activity by changing the associated values in the frontend/src/Config.jsx file.

Example

---

import { BuildingOfficeIcon } from '@heroicons/react/24/outline'
...
const LESSON = 'lesson'
...
const GREEN = 'green'
...
export const REPORTS = {
    ...
    [`${LESSON}`]: {
        title: 'Lesson Attendance',
        color: GREEN,
        name: LESSON,
        icon: <BuildingOfficeIcon fill={fillColor} className={iconClasses} />
    }
    ...
}

Activity types

---

You can also add more activities in REPORTS {} in the frontend/src/Config.jsx file, however you would also need to add the corresponding activity report names in the backend

backend/reports/constants.py

# Report names
LESSON = 'lesson'
ACTIVITY = 'activity'
WEEKLY_MEETING = 'weekly_meeting'
HOMEWORK = 'homework'

REPORT_NAMES = [ACTIVITY, LESSON, HOMEWORK, WEEKLY_MEETING]

Work in progress

• Add front-end user sign up and account management functionality
• Add dark mode
• Add text-based activity updates
• Add front-end Subgroup addition functionality
• Add custom theme configuration

(back to top)

Contact

[email protected]

(back to top)

Acknowledgements

A list of resources I found helpful in this project to which I would like to give credit

• Ant Design
• Hero Icons
• Chart JS
• Django Rest Framework

(back to top)