Canvas Apps Code Sample Responsiveness UI User Experience

Want to track your fitness goals using an app?

A person working out at a gym with weights

    A person working out at a gym with weights

Introduction

I have been wanting to get back to my fitness routine that I followed for many years. With my back injury in 2019 and the challenges in 2023, fitness has taken a back seat. Back then, I used to track my workouts (cardio and weights) using the Notes app on my phone. This time around, I wanted to do better than writing everything down as notes. I looked at some of the apps that are available on the Google Play Store. Some had unnecessary advertisements, some were too complicated, and some just couldn't work for my tracking style. So I decided to build one!

Data model

I have fixed set of exercises for each day of the week. So the idea was to have a master list of exercises and then create schedules for each day of the week.  The data model is very straightforward. It involves 5 custom tables:

  1. User Setting
  2. Exercise
  3. Schedule
  4. Daily Log
  5. Weight Log

Here is an Entity Relationship Diagram (ERD) for this solution:

Entity Relationship Diagram for the Fitness Tracker solution
Entity Relationship Diagram for the Fitness Tracker solution

I created this ERD using the XRMToolBox tool Entity Relation Diagram Creator.

Features

I built both a canvas app and a model-driven app for this solution. The canvas app is self sufficient but the model-driven app is in place in case someone wants to create/edit the master data more quickly or by using the excel import/export functionality. Here is the list of features:

  1. Record details of each exercise in the schedule for a given day of the week.
    • Number of sets and weights for weight training
    • Number of minutes and calories for cardio activities
  2. View videos of each weight training exercise in case you are unclear of the form
  3. Record weight along with
    1. A photo
    2. Which machine was used to record the weight
    3. What time of the day was the weight measured
  4. View historical weight/cardio exercise logs
  5. View historical weight logs
  6. A Chart/graph of weight for the last
    • 30 days
    • 90 days
    • 6 months
    • 12 months
    • YTD
  7. Settings
    • Create new exercises and edit existing exercises
    • Edit schedules (add/remove exercises)
    • Choose between dark mode and light mode

Screens

The app is fully responsive and supports both dark mode and light mode.

Here are the screenshots of the app in the dark mode:

Fitness Tracker app screens in dark mode
Fitness Tracker app screens in dark mode

Here are the screenshots of the app in light mode:

Fitness Tracker app screens in light mode
Fitness Tracker app screens in light mode

Link to code

I have shared a lot of code previously with the community but those have all been on the Power Apps community forums. I opened a GitHub account and uploaded this solution as my 1st repository. Since I am still learning how to use GitHub, please feel free to reach out to me directly via email (hardit.bhatia@thepoweraddict.com) if there are any issues.

Here is the link to the unmanaged version of this solution: Fitness Tracker

Recent articles

3 thoughts on “Want to track your fitness goals using an app?”

Leave a Reply