ITpt is a fitness tracking website that helps users plan and track their workouts to reach their fitness goals.
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
Table of Contents
ITpt is a fitness tracking website that targets fitness enthusiasts. To prepare NSman and NSFs for their yearly IPPT, ITpt offers users a personalised training experience where they are able to customise their training plan to fit their fitness level and training tempo. It also features an in-built IPPT score calculator for them to calculate their scores to track their progress.
Many of the males in Singapore are required to take the IPPT annually. Failing to pass your IPPT within the given window will condemn you to 10 mandatory seasons of NS Fitness Improvement Training in addition to missing out on monetary awards. While there are many fitness apps and training programmes online, they are often not tailored for the IPPT. In addition, these apps do not come with an IPPT calculator. Therefore users have to find another website to calculate their IPPT score. For ITpt, we have decided to combine the 2 above to create a fitness training website to prepare users for their IPPT. It would recommend exercises to help users improve their score in each station and have an in-build IPPT calculator for greater convenience. Allowing users to seamlessly transition between planning and tracking their workout.
-
As an Nsmen with IPPT coming soon, I want to be able to clear my annual IPPT requirement and get the monetary rewards and not have to go for the NS FIT program.
-
As a student with many commitments, I want a personally curated fitness plan where I can adjust the intensity of my training schedule to be able to keep up with my commitments and still be able to meet my IPPT goals.
-
As a fitness enthusiast, I want to be able to challenge myself to get a better score for ym IPPT. I want to have a training programme that is specially tailored for IPPT.
-
Login Feature. A login feature was included to provide users with a personalised planning experience. Users would sign in using their Gmail account by clicking the “Sign in” button. This login feature was implemented using Firebase authentication.
-
Fully Customizable Training Plan. Users are able to use the calendar in the homepage to plan their workouts. Users can insert a new event by clicking on the desired date and key in the details of the activity. To reschedule the activities, users can simply drag the “event block” to another date. This is implemented using FullCalendar which handles the user interface as well as the creation of event objects.
-
In-built IPPT Calculator. Users are able to calculate their IPPT scores using the calculator whenever they need. It displays the points breakdown for each exercise, together with the total score and the corresponding achievement. Furthermore, the IPPT calculator provides feedback to the users on the number of additional reps needed/ amount of time to cut for them to improve their score for each station by one point.
-
Gamification. Points will be given after the users complete each of the activities that set for themselves, with which they can purchase avatars to customise their profile page. As such, users can be incentivised to work towards their fitness goals as they seek to gather customizable items purchasable by their collected points.
-
User Profile. Stores information related to the user such as the avatars owned, credits, IPPT goal and IPPT scores. It also allows users to set their IPPT goal, and tracks their progress toward achieving their desired IPPT scores and their personal best for each station.
-
Mobile Supported. Users are able to continue using ITpt while on their mobile browsers. This gives users the convenience and flexibility in the usage of the website as they can utilise ITpt while on the phone or on their computer.
- HTML/CSS/JS
- HTML will be used to produce the frontend UI of the website
- Bootstrap
- Provides the design components used in the website
- Javascript Libraries
- JQuery
- Program the interactions between the frontend UI with the user, producing the UX of the website
- FullCalendar/Moment.js
-
FullCalendar library is used to implement the basic features of our fitness planning function. It provides us with the basic UI for the calendar and allows users to easily create and manipulate event objects when inserting their workout plan into the calendar.
- Moment.js library is used to manipulate the formats of the dates in the event objects generated in the FullCalendar library.
-
- JQuery
- Firebase
-
Firebase Authentication will be used to implement the login feature of the website, letting users login to the website using their google accounts.
-
Firebase Cloud Firestore will be used as the database of the website, storing the user data (such as the calendar events). This allows for a customised experience for the users.
-
-
Fitness Calendar. We wanted our Fitness Calendar to be simple to use. Therefore we decided to use descriptive buttons and design the calendar in a way that it gives the user the correct perceived affordance. For example, clicking on the date creates an event on the date. To reschedule an event the user can simply drag and drop the event onto another date.
| Criteria | Approach 1 (FullCalendar) | Approach 2 (MindFusion) |
|---|---|---|
| Complexity | Relatively complex as we need to use the moment.js library to manipulate the event date and time. | Not as complex. It comes with an inbuilt function to create and edit time without using the moment.js library. |
| Extensibility | Wide range of functions that can be used to manipulate the event object and Calendar interface. Allow for custom fields for events and buttons on the calendar. This makes it easy for us to add new functions and gives us more control of calendar. | Not as much functionalities in the free version as FullCalendar. We were also not able to easily manipulate the calendar interface and event objects. |
-
IPPT Calculator. From past experiences with using IPPT calculators online, there is this ambiguity when keying in the IPPT scores. For example, for the 2.4km run most IPPT calculators only allows users to select their time in 10s intervals. Therefore, users might not know if they should take the upper limit or lower limit when inputing their run time. Therefore for ITpt, we decided to allow the user to key in their exact timing to remove this ambiguity. Unfortunately there was not formula to calculate the the IPPT scores of each station. Therefore we could only reference the IPPT scoring tables found on the NS portal, leaving us with 2 approaches.
| Criteria | Approach 1 (Using a 2D array as the score sheet) | Approach 2 (Using if-else statements) |
|---|---|---|
| Complexity | Not complex to replicate the scoring table found on the NS portal. | Slightly more complex to group the different scores together into the same groups and to ensure that all cases are covered. |
| Extensibility | Easy to add functionalities (e.g. number of addtional reps to get the next point) by iterating through the array. | Slightly harder as we would need to loop through the entire if-else statement to get the reps needed to get the next highest point. |
| Performance (Time) | Fast, with the age and reps as inputs we are able to generate the scores in O(1) time. | Slower as we would need to iterate through each case to reach get to the correct score. |
| Performance (Space) | Takes up more spaces to store the 2D array. O(n*m) where n is the number of reps from 0 to 60 and m is the number of age groups. | Takes up less space as we do not need to use additional memory to store the information. |
-
User Profile. Most online IPPT calculator do not allow users to save their results. Therefore we decided to create a user profile to help keep track of our user's IPPT score. This function also compliments our Fitness Calendar. By keeping track of their personal best attempt for each station, users can then identify their weaker station and place more emphasis on them when planning their workout using our fitness calendar. The status bar also gives the user a visual representation of how far they are form achieving their goal and serves as another form of motivation.
-
ITpt Rewards. We wanted to encourage our users to complete their activities diligently. Therefore we made the avatar generation random so that the user would be tempted to keep trying to get their desired avatar. In doing so, they would also be completing more exercies in their fitness plan.
| Criteria | Approach 1 (Store pre-made avatar images on database and pull from it as needed) | Approach 2 (Generate avatar images using avatar parts on the spot in the website as the user gets avatar and push to database) |
|---|---|---|
| Complexity | Approach is not complex as the generation of images is done outside of the website using image drawing tools. | Approach is more complex as code needs to be written to combine pre-made avatar parts (face, eyes, mouth, etc). |
| Extensibility | Easily extensible as the avatar images are all stored in the database. New images only need to be added into the database to allow the users to obtain them in the game. | Generally extensible as new parts for the avatar images can be added into the website for the user to be able to generate other avatar images. |
| Performance (Time) | Fast, as the images url can be pulled from the database and appended into the user's profile. | Slow, as time is needed for the website to generate the avatar and push to the database, before pulling from it again to display in the user's profile. |
| Performance (Space) | Only need to store the avatar image's name and url on the database. | Need to store the varying avatar parts as well as the generated avatar. Since each user can generate different avatars, more space will be needed to store each user's avatars. |
- Version Control
-
Changes to the source code are tracked and managed through the use of Github. Storing the source code in a remote repository allows us to work separately on different features, while maintaining the original version of the source code.
-
New features implemented are pushed into a different branch to be deconflicted before merging into the main branch for the website to update.
-
- Code Organisation
-
Codes are organised by components to reduce complexity and allowing for easier debugging. This also enhances readability of the code.
-
- Coding Standards
-
HTML, JavaScript and CSS codes were written with reference to w3schools. Following proper standards when writing code allows us to ensure code readability and efficiency.
-
- Code Documentation
-
Source code written for the website are documented following the JSDoc 3 Standards to ensure that we will be able to understand the code, thus allowing us to be able to maintain and develop the code efficiently.
-
- Git Issues
-
Problems and updates related to the project were added as an issue in Git Issues. The issues added were labelled based on the type. Assignees were also assigned to each issue to distribute the work needed for greater efficiency.
-
Milestones were also set to contain the issues and provide a deadline for the issues to be resolved in time.
-
- Continuous Integration / Continuous Development (CI/CD) Pipeline
-
Web application is automatically tested and deployed using Github Actions whenever a new commit/merge occurs. This ensures that the web application is running properly whenever a new update is implemented.
-
The following are screenshots of the website.
To access the website, simply go to https://www.itpt.ml (or https://itpt-d53e0.web.app/).
In order to ensure that ITpt is working as intended based on the features proposed, this testing plan is created to ensure that rigorous and structured testing is implemented.
The testing plan specifies the objectives and tasks, scope, testing strategy, test schedule, control procedure, features tested/not tested and tools used to test the website.
The objective of the testing plan is to ensure that the user interface (UI) and user experience (UX) provided by ITpt meets the proposed description and features.
Expected tasks:
- Ensuring that the UI is showing up properly
- Ensuring that navigation within ITpt provides the expected UX
- Ensuring that ITpt is compatible with various browsers
- Ensuring that ITpt is able to perform within expectations with increased user numbers
- Ensuring that all updates to ITpt are tested
- Seeking user opinions for improvements
The testing plan covers the frontend UI and UX and the backend capabilities of ITpt that are in direct interaction with the users.
- Unit & GUI Testing
-
Cypress was used to execute Unit & GUI Testing.
-
Testing code is written to check that all elements expected are visible on the webpage and the buttons navigate to the expected locations in the website.
-
- Compatability Testing
-
The website was checked to be working with different browsers. After every update, the website will also be tested to ensure it is still working.
-
PowerMapper was used to determine the compatibility of our website to numerous browsers.
-
- Volume & Stress Testing
-
The website was checked on whether it can handle large amount of data and multiple users concurrently.
-
Webpagetest was also used to run a performance test on the website.
-
- Regression Testing
-
Use of Github Actions to create a Continuous Integration / Continuous Development (CI/CD) Pipeline that continuously test and deploy ITpt whenever a new feature is added
-
- Usability Testing
-
Use of Google Forms to gather feedback from users. The results from the google form can be found here.
-
| Test Strategy | Test Frequency |
|---|---|
| Unit & GUI Testing (together with Regression Testing) | After every code change |
| Compatibility Testing | After every feature update |
| Volume & Stress Testing | After every feature update |
| Usability Testing | After every milestone feature update |
- Improvements to Fitness Calendar
-
Survey results shows that that the function to toggle between daily and weekly view were unnecessary as a typical person would not exercise more than once a day. As such we removed the function and added a calendar refresh function.
-
- Increased Functionalities
-
Survey from the previous milestone shows that the website needs more features so that users will recommend it to others. Thus, we added a profile page to track user's IPPT progress and IPPT rewards to encourage them to get a better score.
-
- Improvements to User Interface
-
We made improvements to the layout of the elements and used a more descriptive name for buttons. There were also feedback that the tables were harder to read. Thus we made modifications to our CSS to make it more readable.
-
- Improvements to User Experience
-
We made our website more mobile friendly as it would be more convenient for users to access it on their phones. We also added an instructions page for functions that are not common (e.g Calendar and ITPT rewards).
-
- Highlight Important Functionalities
-
After removing certain functions from the previous milestone, the survey results indicates that the remaining and newly added functions are necessary and helpful for users as they use the app to try improve their IPPT score.
-
A Website that helps users plan their fitness schedule to meet their fitness goals easily.
-
A Website that the users can access to interact with the features implemented.
-
A header bar that contains the links to other pages in the website, also containing the login feature where users can login with their google accounts through a popup.
-
A homepage that contains the calendar that allows users to create their exercise plan.
-
A calculator page that contains the in-built IPPT calculator that users can use to calculate their IPPT scores on-the-go.
-
A rewards page that is part of the gamification feature that will be elaborated further in the section on July features below.
-
-
Login feature powered by Firebase Authentication to allow users to sign in using their Gmail account.
-
Fitness Planning feature where users can visualise their workout plan with the calendar.
- Users can toggle the calendar view between month, week and day by clicking on the respective buttons.
- To insert an event, users can click on the desired date and key in the details.
- To view the event details, users can click on the “event block”.
- They can drag the “event block” around to reschedule their workouts to fit into their personal schedule.
- They are also able to export the calendar to .ics format to load into their personal calendars.
-
IPPT Calculator allows users to gauge their current fitness levels based on the latest IPPT scoring requirements.
- This calculator also displays the scores for each station.
-
Lets the user know the additional requirements to improve their score by 1 point for each station. This will aid users in prioritising which station to focus on to improve their overall score.
- Gamification system. A trust-based, self-governed system that provides additional motivation for the user to meet their fitness goals through the gifting of points that can be used.
- Reward points will be given to the user every time they complete an exercise in their exercise plan from the calendar.
- The points given can be used to purchase avatars to customise the user profile.
- User profile
- Contains general information about the user such as age, gender, name, etc.
- Contains an avatar that represents the user (can be customised).
- IPPT Goal setting
- Users can set their desired ippt score.
- They can also view their past IPPT scores to track the progress towards the goal.
- Recommended exercises to improve for each station in the IPPT.
- Users can view a set of exercises to help them improve each station.
- They can then add them to the calendar.
See the open issues for a full list of proposed features (and known issues).
| Before 15 May | Finalise techstack to be used, meet up with advisor, work distribution, finalise scope of project. Start on poster and video. |
| 15 - 21 May | Finalise poster and video. Create a mock up. Start learning the necessary technologies. |
| 22 - 28 May | Learning of necessary technologies. Start implementing basic features of the website. Prepare Milestone 1 submission. |
| 29 - 30 May | Refine Milestone 1 submission. Submission of Milestone 1 materials. |
| 5 - 11 June | Improve IPPT calculator (shows user amount of reps needed to reach the next point). |
| 12 - 18 June | Incorporate exercise recommendations for users to add into the calendar. |
| 19 - 25 June | Testing and debugging. Prepare Milestone 2 submission. |
| 26 - 27 June | Refine Milestone 2 submission. Submission of Milestone 2 materials. |
| 28 June - 4 July | Add gamification system. |
| 5 - 11 July | Add user profile view. |
| 12 - 18 July | Add exercise recommendation feature. |
| 19 - 23 July | Testing and debugging. Prepare Milestone 3 submission. |
| 24 - 25 July | Refine Milestone 3 submission. Submission of Milestone 3 materials. |