Online Fitness Tracking App

Abstract

1. Introduction

The Online Fitness Tracking App is a web application designed to help users track their fitness activities, monitor progress, and achieve their health goals. This application is built with a Flask backend and a Vue.js frontend, offering a responsive and user-friendly experience.

2. Objective

Beautiful and Simple Online Fitness Tracking App using Flask, Vue.js, Bootstrap and MongoDB.

This project demonstrates how Vue can be applied to a real-world Mobile App Development problem.

3. Key Features / Modules

• User Authentication: Secure login and registration to manage user-specific data with JWT-based authentication.
• Fitness Tracking: Log various types of activities (e.g., running, weightlifting), track workout details, and monitor progress.
• Custom Activities: Create and manage custom activities with dynamic labels and values, including start time, end time, and automatic duration calculation.
• Goal Management: Set and track fitness goals with progress updates and target dates.
• Daily Meal Logging: Log daily meals and track calories and monitor macronutrients (protein, carbs, fats).
• Active Minutes Tracking: Track and display the total number of active minutes or time spent on activities to motivate users.
• Dashboard Overview: View summarized fitness data including:
• Total workouts completed
• Calories burned
• Upcoming workouts

4. Technology Stack

• Backend: Flask, Flask-PyMongo, Flask-Migrate
• Frontend: Vue.js, Bootstrap
• Database: MongoDB
• APIs: Flask API endpoints for frontend-backend communication

5. System Requirements

General requirements for this technology stack — check the README for exact versions.

• Node.js (LTS) and npm
• Git (to clone the repository)

6. Installation & Setup

git clone https://github.com/Oussama1403/Online-Fitness-Tracking-App.git
cd Online-Fitness-Tracking-App

1. Install MongoDB Server:
2. Follow the MongoDB installation guide to install MongoDB on your system.
3. Ensure MongoDB is running on the default port (27017).
4. Navigate to the Backend Directory:
5. Create and Activate a Virtual Environment:
6. Install Required Python Packages:
7. Run the Flask Server:
8. Navigate to the Frontend Directory:

cd Backend

python -m venv venv
    venv\Scripts\activate  # For Command Prompt
    # .\venv\Scripts\Activate  # For PowerShell

pip install -r requirements.txt

flask run

Full setup instructions are in the project README.

7. Future Enhancements

Suggested extensions you can add to make this your own project.

• Add push notifications with Firebase Cloud Messaging
• Add offline support with local caching
• Publish an internal test build on the Play Store

8. Viva / Review Questions

Common questions examiners ask for projects in this domain.

1. Which framework is used and why (native vs cross-platform)?
2. How is app state managed across screens?
3. Where is the data stored — locally, Firebase or a REST backend?
4. How are permissions (camera, location, storage) handled?
5. How would you publish this app to the Play Store / App Store?

9. Source Code & License

This project is developed by Oussama1403 and published on GitHub under the MIT License. Please follow the license terms and credit the original author when you use or modify this code.