Matheus Workout Generator

Launched Saturday, October 10th, 2020
MWG is workout generator that can be used to create random workouts taking some key physiological variables into consideration. It was built with HTML, CSS, Bootstrap, JavaScript, MySql.

About the project

Matheus' Workout Generator (MWG), is a workout generator developed with PHP, JavaScript, CSS and MySql.

This project was developed with the intention of dealing with different technologies and launching a complete product: from planning, development to hosting.

By developing this application, I was able to learn new concepts and face various types of problems along the way.

As I'm very connected to the sport, I didn't hesitate when choosing the topic: workout generator.

Live demo

Check out this project running on Heroku

Features

The user is greeted by the home page, where he must indicate which physical level he fits into: amateur, casual, athlete or professional.

Depending on the level selected, the system will generate a number of repetitions, number of sets and a specific number of exercises for that type of user. Also, the higher the athlete's level, the greater the chance of generating an exercise with an advanced stimulus.

The second field on the home page refers to the muscle groups the user wants to train.

After selecting the user level and groups, the workout will be generated.

At the top of the exercise list there is a unique code for the generated workout. This code can be copied and shared with another user so that they can view it.

With the workout code in hand, you can get back to it later by searching the home page.

All workouts have a view counter, the newly created ones are presented as "Brand New". The view count only increases when unique users view the training.

Front-end

The client-side of MWG was built with HTML, CSS and JavaScript, using no particular framework. Every page change is performed through requests, preventing the entire page from being loaded from scratch.

The app's client side can be summarized in the following layout:

Layout

Mobile

Mobile 1Mobile 1Mobile 2Mobile 3

Desktop

Desktop 1Desktop 2Desktop 3

Technologies

The following technologies were used to build MWG's front-end:

  • HTML: Good and old HTML
  • JavaScript (jQuery): All validations and async requests were performed with jQuery. (I am fully aware that this is an outdated technology, however, I chose this library because I was already used to the syntax and it is still eventually used in my workplace in legacy code).
  • CSS: General CSS styling using Bootstrap.

Third-party plugins:

Back-end

The back-end was developed with PHP, where every class was built from the ground up. Check out some of the back-end key points:

  • All class inclusions were made with composer's autoloader through namespaces.
  • Elegantly architectured via Model View Controller.
  • Class and folder naming are structured in the psr-4 pattern, required by the autoloader.
  • Friendly URLs were created with the help of .htaccess to avoid ugly querystrings.
  • A cookie system was developed to track workout view counts: the view count of a given workout will only increase when a unique user visualizes it.

Technologies

The following technologies were used to build MWG's server:

  • PHP: All communication with the database and the training generation logic were performed with PHP.

Database

MWG's database of choice was MySql. Check out a brief description of the tables:

  • tbexercise: stores a wide set of available exercies;
  • tbgroup: stores muscle group divisions;
  • tblevel: stores possible user's level;
  • tbstimulus: stores advanced variations for a exercise;
  • tbworkout: stores generated workouts basic info;
  • tbworkoutexercise: sotres relations between a workout and exercise. Many-to-many table.

How to set up

If you wish to fork this project, start by running the SQL provided in the root directory into your MySql database.

Also, you'll need to set up the following environment variables in your code:

Server-side:

  • CLEARDB_DATABASE_URL (MySql database url)