Workout Logger App

Background

I've used a number of different workout logging apps (and even physical workout journals, once upon a time), and, while they all have their pros and cons, they’ve never been quite perfect for me. Situations like needing to easily identify which side of the body some exercises were performed on, or being able to switch easily between weights in pounds and kilos, often require cumbersome workarounds. Its been a goal of mine since beginning my web-development journey to build an app that fits my needs on a day-to-day basis. This app is (the beginning of) my attempt to craft that myself.

Features

Workout Logger is a no-frills, straight-forward, strength-training record-keeping app. Version 1.0 of the app is admittedly a bit bare-bones at the moment, but it performs its primary functions, and, since I plan to make use of this app (and eventually port it to a native-mobile application), it will continue to be updated with new features.

The list of current features include:

  • Add to and customize a provided list of exercises, sorted by muscle group.
  • Distinguish between unilateral and bilateral exercises, tracking the weight and reps for each side of the exercise performed.
  • Change on the fly between imperial and metric weight units.
  • View at a glance the number of exercises performed for each exercise, as well as its total duration.

The list of planned features include:

  • View your previous workouts stats for each exercise, per set, on its sets-page, to immediately know your goal to beat.
  • Search exercises by title.
  • Visualize your progress with each exercise, by One-Rep Max or by total volume.
  • Sort by most and least used exercises per muscle-group to see which are your favourite exercises, and how to add some variation to your workouts.
  • Add, edit, and delete muscle-groups and equipment.
  • A robust user account section, in which users can view stats such as their total number of workouts, number of unique exercises performed, largest weight and volume per muscle-group, etc.

Development

React

React

Material UI

Material UI

Firebase

Firebase

Workout Logger is developed as a React app using Google's Firebase web and mobile platform as a backend for authentication and storage (Cloud Firestore).

Front-End

The React front-end primarily utilizes components from Material UI, a component library implementing Google’s Material Design visual language. Where components need more custom styling, Material UI’s supported JSS styling solutions are used. The front-end combines the use of Reacts traditional class structure (for the pages) and React Hooks for the more elemental components. React’s Context API is used for routing flags and to provide lateral communication amongst nested components.Workout Logger is a single-page application, as it uses React Router as its routing solution, only fetching the index HTML page on initial loading.

Back-End

The back-end is a bare-bones Node.js server that returns the index.html file from any location, making Workout Logger a single-page application. Google's Firebase web and mobile development service is used for the authentication middleware, and for storage via their Cloud Firestore service. The services are interacted with directly from the front-end, with the component pages and elements using Firebase's web and mobile client SDK. The data structure of the Firestore storage is a combination of the subcollection and root-level collection patterns described by the Firestore documentation, depending on which pattern makes contextual sense. For instance, all collections are subcollections of the particular user documents to which they are assigned, and sets are subcollections of the exercise instances to which they are assigned, but workouts, exercises, and exercise instances are root-level collections that refer to each other for ease of access and manipulation.