nkfoss / ohm-str

0 stars 0 forks source link

Omega-Strength

Omega-Strength (abrv: Ohm-str) is a web application for strength trainers. It allows the users to record their training, track records, and compare current performance with those records. It was created in Angular, is hosted by Google Firebase, and uses Firebases's Realtime Database (NoSQL).

Table of Contents

Introduction

This project was created by me (Nathan Foss) to showcase my understanding of Angular and as a tool that I use in my own fitness regimen.

The application was built mobile-first with an eye for simplicity. The functionality and interface are meant to emulate a basic logbook. With the addition of material-design components, the process of recording works is very streamlined.

While this app is no longer in active development, I still use it nearly everyday in my training.

Technologies

Functionality

Login and getting started

Ohm-Str uses Firebase Authentication (leveraging OAuth 2.0). Existing users can sign in, but all new users must personally ask me to sign up. The sign-in form uses classes from Bootstrap 4.

Once signed in, the landing page displays a datepicker (the Angular Material datepicker is used here). You can chose a past date when you worked out, the current day, or plan workouts for a future date.

Authentication Home page Datepicker

Entering exercises

After picking a date, you can start adding exercise entries for that day. You may choose from existing exercises within the database, using the Angular Material typeahead to make your selection. Alternatively you may enter a new exercise name. Saving a new exercise makes it available as a typeahead option. We will use the "front squat" exercise for this example.

The workout Add exercise Name Typeahead

Set-types, notes, and warm-ups

You have some options for customizing your sets (using the Angular Material select component). Ohm-Str supports different types of sets, including varieties of rest-pause and drop-sets (we will use regular sets for now).

Since this app is meant to emulate a logbook, you can write notes for a block of sets and access notes from previous logs (for the current exercise). This has been helpful for me to adjust my workload and stay on track with my program. This exercise's notes are displayed in a modified Angular Material dialog component.

In addition to working sets, you can enter your warm-up sets.

Set types Previous notes Warm-ups and working sets

Previous records and saving progress

After saving the exercise, the workout page displays your results (the warm-up sets are intentionally omitted). Each exercise has a table (Bootstrap) with the exercise name, set-type, and the previously calculated one-rep maximum record (1rm). Your calculated 1rm is the metric by which all strength-training progress is measured. You can read more about it here.

Each row in the table represents a set performed for that exercise. It displays the weight and reps, but also a metric to compare your performance to the previously set record. In our example, this means that 190 lbs. at 7 repetitions calculated to a 1rm (about 228 lbs) that was 1.08 times that of the previous record - a good sign that training is going well.

Sets that fall below the record are also shown. Knowing when you are progressing vs. regressing is important for adjusting your program to maintain progress.

When you are done with your workout, click the 'save workout' button. Once again the Angular Material Design library is used here to indicate a successful save (snackbar).

Exercise display Progress vs. records Saving progress