“Not all metrics matter. Sometimes, the best data is the simplest.” To visit the deployed version of the Activity Tracker click here.

The Activity Tracker saves the key details of a training or recreational activity in the simplest, straightforward way. It is useful for anyone who wants to record their sport or recreational activities and wants to monitor their progress over time. Because of its simplicity, it doesn't create an overwhelming feeling in the user caused by too much and complicated data, instead bringing back the focus on the key thing, the training itself. There are far more advanced applications/ platforms out there, which provide a lot more details, which eventually become the problem. The users will focus much more on certain metrics, and when some targets are not met, it will have a negative impact on the users' behaviour, motivation. Certainly, when one is competing for their country or participating in competitive sports for a living, all the data is needed to make improvements. But for the majority few key details are enough to be healthy and create good habits. The Activity Tracker is a full-stack web application and was built using Django, Python, Bootstrap, PostgreSQL, and React.

• Navbar Clean, consistent navbar across the pages. Clicking on the icon/logo directs the user back to the main page.

• About Field The About (Us) page provides a brief description to visitors of what the application does.

• Registration Validation The registration form uses standard validations to highlight any errors for the user in case of wrong or missing details.

  • Existing User: Registration will not proceed when a new user selects a previously saved user name.

  

  • Missing Password The registration will not proceed if one of the passwords is missing.

  

  • Mismatched Passwords The registration will not proceed if the two passwords that the user puts in do not match fully.

  

  • Missing Username The registration will not go ahead if the username is missing.

  

  • Missing Email The registration will not go ahead if the email is missing.

  

• Password Visibility Toggle In case the user is not sure about the password input or wants to check it, the password toggle feature makes the hidden characters visible. The feature is available both on the Registration and on the Login form.

• Login Validation

  • Missing Password A previously registered user won't be able to log in if the password is missing.

  

  • Missing Username A previously registered user won't be able to log in if the username is missing.

  

  • Invalid Details A previously registered user won't be able to log in if the username and/or password is not correct.

  

• Dashboard The Dashboard is where the main functionalities can be found, the dashboard itself is the activity tracker. Simple design both for desktop and for mobile.

Mobile version (Redmi Note 13)

• Dashboard Functions

• Activity Filter by Type
  Users can quickly filter activities by type (e.g., Running, Swimming, Gym).
  

• Activity Filter by Date (Newest First)
  Sorts the activities to display the most recently added entries at the top of the list.
  

• Activity Filter by Duration (Shortest First)
  Allows users to sort activities based on their tracked time, starting with the shortest duration.
  

• Total Time Tracked
  A dynamic field that shows the cumulative duration of all logged activities, helping users see their overall time investment.
  

• Total Activities
  Displays the total number of activities logged, giving users a quick summary of their productivity.
  

• Scrollable List of Saved Activities
  Previously saved activities are displayed in an easy-to-navigate scrollable list for convenient browsing and review.
  

• Add New Activity Button
  A prominent button that allows users to quickly log new activities, including relevant details such as title, duration, and type.
  

• Add New Activity Form The "Add New Activity" form enables users to log new activities with structured input and built-in validation to ensure data quality. Key components include:

  • Activity Type Selector
    A dropdown list allowing users to select a category or type of activity (e.g., Running, Swimming, Hiking).
    Validation: The user must select a valid activity type before submission.
    

  • Activity Name Field (Mandatory)
    A required text input for naming the activity, ensuring all entries are clearly labeled.
    Validation: This field cannot be left blank.
    

  • Activity Duration Picker (Mandatory)
    Allows users to input the time spent on an activity using a time selector.
    Validation: A value of 00:00:00 is not accepted.
    

  • Activity Date Picker (Mandatory)
    Users select the date the activity was completed.
    Validation: Future dates are disabled and cannot be selected.
    

  • Notes Field (Optional)
    A free-text area for users to include additional information or context about the activity.
    Validation: This field is optional and does not require input.
    

• Edit Activity The user has the option to edit, update previously saved activities. The same validations apply to the input fields in the New Activity form.

• Delete Activities The user has the option to delete previously saved activities from the list. To proceed, the user has to confirm the deletion of the activity.

• Profile Page The Profile page allows users to view and update their personal account details in a user-friendly form. Validation: Validation applies to the Username and the Email address fields. Key elements include:

• Username (Pre-Populated)
  Displays the user’s unique username, which is pre-filled.

• Email (Pre-Populated)
  Shows the registered email address of the user, pre-filled in the form for reference.

• First Name (Editable)
  Allows users to enter or update their first name. This field is optional but enhances personalization.

• Last Name (Editable)
  Allows users to enter or update their last name. Optional, but contributes to a more complete profile.

• Update Button
  Submits the updated profile information and provides feedback on success or validation errors.
  

The activity tracker app was designed to help users record and monitor how they spend their time through a simple and user-friendly interface. The goal of this project was to build an intuitive activity tracker app that allows users to log, manage, and review their daily/weekly activities. Planning focused on user needs such as accessibility, ease of use, and data accuracy.” Platforms like Strava and Garmin are the giants. I drew inspiration from them but opted to avoid the complexities of their APIs and licenses. Both of those well-known platforms, at their cor,e have the same functionality that I wanted to have for the users.

Strava

Garmin

The main difference is that while they treat this feature as an add-on or extra, I want this feature to be the core of an activity tracker. In case of future development, other functionalities would be added to this and not the other way round.

To keep it simple, I designed a simplified user interface to support key use cases:

• Log activities with type, name, date, and duration
• View records in a clean dashboard
• Edit or delete records anytime

• Primary Users: Individuals who want to track time spent with physical activities, training. Individuals who need a simple tool to keep up their healthy habits regardless of age, fitness level, or sports background
• Stakeholders: Product owner, development team, end users.

• Users can log new activities with name, type, duration, and date.
• Users can edit or delete saved activities.
• Filtering and sorting options are available on the dashboard.
• Secure login and registration are required to access personal data.

• Application must respond in under 2 seconds.
• Fully responsive UI.
• Secure user authentication.
• Validation on both the frontend and backend.

• ERD (Entity Relationship Diagram):
  

• Github Projects:
  Link to Planning Board

• User Flow:

  1. Registration

  

  2. Login

  

  3. Profile Update

  

  4. Add Activity

  

  5. Edit Activity

  

  6. Delete Activity

  

• User Interface Design

  • Computer Wireframes: The wireframes I created illustrate the core user interface and functionality of Activity Tracker from both a desktop/laptop perspective and a mobile perspective. These visual guides serve as a blueprint for the design and structure of the application, ensuring a cohesive and intuitive user experience. The aim was to provide a better understanding of the initial layout and illustrate the user-facing fields and structure.

Registration

Login

Dashboard, Add Activity

Edit Activity

• Mobile Wireframes: Mobile wireframes were created to ensure responsive design across devices, focusing on a clean and simplified layout for optimal usability on smaller screens.

Login

Activity List

New Activity

• Colour Scheme Specification: This document outlines the main color palette and typography settings used in the Activity Tracker frontend application. Below are the most frequently used colors in the app's stylesheets:

Color Usage and Purpose

RGB Breakdown

To promote scalability, maintainability, and consistency across the frontend, the application was developed using modular and reusable React components. These components are divided by responsibility and reusability within the application interface.

These components correspond to specific routes or views in the application:

• HomePage
• LoginPage
• Register
• AboutPage
• DashboardPage
• ProfilePage
• NotFoundPage

Each of these handles user-specific views, logic, and layout for a dedicated part of the application.

These components manage the persistent UI structure and navigation:

• Navbar: Main navigation bar visible across authenticated views
• Layout: Shared page layout wrapper for protected routes
• App: The root-level component used for routing and app shell

These are standalone components reused across multiple pages and forms:

• ActivityForm: Reusable form used for creating and editing activities
• ActivityList: Component that renders filtered or sorted lists of saved activities
• ConfirmModal: A generic confirmation modal used for delete actions

These are composable and used in different views like Dashboard, Edit, and Delete workflows.

These components manage authentication state and user context globally via React Context API:

• AuthContext / AuthProvider: Handles login state, token storage, and protected routing
• UserContext / UserProvider: Manages user profile data across the app

These ensure a consistent user experience and allow state sharing across components.

These support specific operations but aren't tied to a single view:

• DeleteActivity: Component for confirming and performing delete actions
• UpdateActivity: Component used to handle updates to previously logged activities

These components extend the functionality of core screens like Dashboard and Profile, and promote the separation of concerns.

Together, these reusable components helped keep the codebase modular and DRY (Don't Repeat Yourself), simplifying development and making future updates easier to implement.

This project followed a practical testing strategy combining both automated and manual testing. The goal was to ensure the core functionalities of the activity tracker remained reliable and user-friendly throughout development. Testing was applied to both frontend and backend components, with a focus on user-facing features like form validation and activity management.

I employed a continuous testing approach by running validation steps on each commit. ESLint and Prettier were integrated locally to enforce code standards, and GitHub Actions were configured to run basic checks automatically during pull requests, helping catch syntax and logic issues early.

Automated tests were written to cover reusable frontend components and backend routes.

• Frontend: Jest and React Testing Library were used to test UI rendering, input validation, and component logic.
• Backend: Unit tests for models and route handlers were written using unittest (or pytest, if using Python).
• Example: npm test or pytest to execute tests.
• The test file is located in /activitytracker/test.py.

Manual testing covered user flows such as registration, login/logout, adding/editing activities, and profile updates. Each major feature was tested on multiple browsers and devices to simulate real-world usage. Common edge cases (e.g., empty form fields, invalid dates, short passwords) were manually triggered to validate error handling.

The application was manually tested for responsiveness and layout accuracy on the following environments:

• Browsers: Chrome, Firefox, Safari, Edge
• Devices: Redmi Note 13, MacBook Pro, 13" Laptop, 27" Monitor Media queries and flexible units were used to ensure consistent behavior across screen sizes.

The codebase adheres to modern standards through regular linting and formatting tools:

• HTML validated with W3C Validator
• CSS formatted using Prettier
• JavaScript checked using ESLint (Airbnb style guide)

Accessibility best practices were applied using:

• Lighthouse Audits to check color contrast and semantic HTML usage. I have recorded the final results for each page below:

Page	Result
Register
Login
Home
About
Dashboard
Mobile Register
Mobile Login
Mobile About
Mobile Dashboard

• • Keyboard navigation tested manually

During testing, several minor bugs were identified and resolved:

• Prevented saving activities with duration 00:00:00
• Fixed broken image paths in README.md
• Corrected input validation logic on registration form All fixes were committed with descriptive messages and, where applicable, linked to specific issues or pull requests.

The application was deployed using Heroku, with the frontend and backend hosted as separate apps to maintain modularity and flexibility.

The Django API server is deployed independently, with proper environment variables and Heroku configurations for production.

• Environment variables were set on Heroku:

  • DJANGO_SECRET_KEY
  • DJANGO_DEBUG=False
  • ALLOWED_HOSTS, CORS_ALLOWED_ORIGINS, CSRF_TRUSTED_ORIGINS
  • DATABASE_URL and any storage service credentials (e.g., Cloudinary)

• Project was prepared using:

  pip freeze > requirements.txt
  python manage.py collectstatic --noinput
  python manage.py migrate

• Deployed using:

  git push heroku-backend main
  heroku run python manage.py migrate 

The React frontend was built and deployed separately to a dedicated Heroku app.

• Built using:

  npm run build

• .env.production configured with:

  REACT_APP_API_URL=https://activitytracking-bf7924cd3676.herokuapp.com/
  

• Deployed with:

  git push heroku-frontend main

After both apps were deployed, the following checks were performed:

• Verified login, registration, and form submissions
• Tested links and page navigation
• Checked browser console for JS errors
• Verified API requests and CORS handling in the network tab
• Inspected live styling, image paths, and media responsiveness

• Used heroku logs --tail -activity-tracker to monitor production logs
• Disable DEBUG mode and ensure no development tools are exposed

This project followed a simplified Agile methodology to support iterative development and continuous improvement throughout the application's lifecycle. Development was managed using GitHub Projects, Issues, and a custom roadmap to organize tasks and track progress over time.

A Kanban-style board was used to track tasks through the following stages:

• Backlog: Initial ideas or planned features
• In Progress: Tasks being actively developed
• Done: Completed features or fixes
• Won’t Have This Time: Items intentionally deferred or de-scoped

Each issue represented a single task or user story, and many were linked to GitHub Milestones for sprint tracking.

Tasks were organized using MoSCoW-style labels:

• Must Have: Critical to MVP (e.g., registration, login)
• Should Have: Valuable features but not core (e.g., delete/edit activity)
• Could Have: Optional improvements (e.g., activity search)
• Won’t Have This Time: Features to postpone (e.g., distance tracking)

This approach ensured clarity around scope and helped keep development focused and realistic.

The roadmap view showed a chronological rollout of tasks across May and June. Tasks like form validation, filtering, and core CRUD operations were distributed across the weeks and tracked by ID.

Notable features completed:

• Registration & Login flow
• Activity logging with type, date, and duration
• Activity list display with filters and search
• UI/UX improvements like password visibility toggle

• GitHub Projects for board-based issue tracking
• GitHub Issues to represent features and bugs
• GitHub Roadmap to visualize delivery timeline
• Manual sprint retrospectives to assess progress and re-prioritize

Adopting Agile principles helped structure the solo development effort by:

• Breaking down the application into manageable chunks
• Prioritizing the most impactful features first
• Iterating and improving based on testing and feedback

Sprint Duration: June 2–6, 2025
Focus: Project setup, user registration and authentication, and basic frontend architecture.

• Set up the backend and frontend environments
• Implement user registration and login functionality
• Establish the activity tracker’s basic UI layout
• Handle initial form and input validation

• #1 Registration
• #2 Login
• #3 Choosing activity type
• #10 List view of activities
• #17 Password visibility toggle

Sprint Duration: June 09–13, 2025
Focus: Core activity tracking functionality and dashboard UI integration.

• Enable users to log activities with required metadata
• Implement activity form with duration and date selection
• Display logged activities in a scrollable dashboard view
• Establish a base for filtering and updating activities

• #4 Title of activity
• #5 Record Date of activity
• #6 Adding duration of recorded activity
• #8 Description field/box
• #15 Current date display in activity form

• Dynamic activity form with validation for duration, date, and required fields
• Scrollable dashboard showing previously saved entries
• Component structure created for ActivityForm and ActivityList
• Responsive layout for mobile and desktop views

While the current version of the Activity Tracker fulfills its core purpose, I thought of several enhancements for future releases to improve functionality, usability, and user engagement.

• Search Functionality
  Add a keyword-based search bar to allow users to quickly find past activities by name or note content.

• Activity Categories Customization
  Allow users to create and manage their activity types, rather than selecting from a fixed list.

• Activity Charts & Analytics
  Visual summaries (e.g., bar or pie charts) showing time spent per activity type or week to help users understand their habits better.

• Pagination or Infinite Scroll
  Improve performance and navigation for users with many saved activities.

• Password Reset via Email
  Enable users to recover their accounts through secure email verification.

• Multi-Device Session Management
  Allow users to see and manage logged-in sessions across devices.

• Dark Mode Toggle
  Add theme-switching for accessibility and user comfort.

• Accessibility Improvements
  Improve screen reader support and keyboard navigation across forms and buttons.

• PWA (Progressive Web App) Support
  Enable offline use and add-to-home functionality to boost mobile engagement.

• Touch Gestures
  Improve mobile interaction with swipe-to-delete or edit gestures on the activity list.

• End-to-End Testing with Cypress
  Automate full user journey tests to ensure consistent performance across features.

• Improved Error Handling
  Provide more informative feedback for failed API calls or form issues.

These improvements aim to increase user engagement, reliability, and scalability of the app over time.

• Username: Biker2 Password: Green30!
• Username: Biker4 Password: Purple30!

• Favicons were taken from Favicon.io.

• For the responsiveness test and adjusting smaller design flaws, Google Chrome Developer Tools was used.

• The initial structure is based on CI's boilerplate code. https://github.com/Code-Institute-Org/ci-full-template

• Code snippets, ideas were taken from the following repositories:

• https://docs.fittrackee.org/en/features.html

• https://github.com/ebrithiljonas/fittrackee-uploader/tree/main

• https://github.com/cyberjunky/python-garminconnect

• https://github.com/Vlinking/django-rest-calendar

• https://github.com/eoinlarkin/trax/tree/main

• Images for illustration and design were taken from open open-source site Pixabay.com.

Grateful for the help and the input from my mentor Iuliia Konovalova. She always gave a different perspective on the issues, and with her experience and eye for detail, I was guided in the right direction to make this project happen.