prastoin / bodybuilding-dashboard

Hi there 👋, I'm Paul Rastoin

I'm a Full-Stack Web developper from the south of France 🫒
And a 42 student at 42Paris
You can find my devblog here 🚧

Core Stack:

• TypeScript
• Node.js
• XState
• React
• AdonisJS

Interests 👀 :

• React Native
• Vue3 composition API
• Temporal
• Stately
• @xstate/test
• Playwright

bodybuilding-dashboard's Issues

Program builder

Program builder

A bodybuilding program can have a lot a forms.
In our case a bodybuilding program will involves a weeks ( 7 days ). And from 1 to 7 sessions.
A bodybuilding session contains at least one 1 exercise.

How does it work ?

A user should be able to create a program, defining session by session, exercise by exercise.
In the best of worlds the user should be able to search exercises from a list using specific muscles filters etc.
We do not want the user to maintain a calendar, at least for the moment.

Open questions ?

• Does a user should be able to create several programs and switch between them ?

When ?

The user should be asked to create a program on the application first start. He could choose a default program just to be able to browse the application if he wants to.
Once the user has created a program he can start a session, it starts the first upcoming program session's tracker instance ( see session tracker issue )

Main Roadmap:

• #3
• #8
• #12

Next step improvements:

• Improve global layout using drag and drop to change session and session's exercise order
• Implement a static list of existing exercises with tags related to muscles
• Create a page for each existing listed exercise where the user will find documentation to execute the exercise

Set and repetitions Editor screen

In this screen will be displayed a digit select.

Range value for sets from 1 to 10
Range value for repetitions from 1 to 30

Should the user be able to select a custom value ? => not for the moment as the tracker session will iterate on sets range value

Default Rest duration Wizard step

Program builder add exercise screen

Here the main will be to work around the exercise addition step:
The user should be able to define the following field facing the created exercise:

• Name, The user should be able to pick an existing exercise from a defined list
  By choosing a defined exercise the following form field could be prefilled
• Starting Load
• Default Sets & Reps
• if he might equip a belt, knee pads, wrist pads, salt etc
• RIR
• Default Rest

Then an exercise interface could be looking as:

interface ExerciseDefinition {
  name: string | ENUM
  uuid: string | ENUM
  setsNumber: number
  repsNumber: number
  defaultRest: number
  askForRIR: boolean
  askForEquipements: boolean
  equipementsToAskFor: []ENUM
}

Session training creation wizard Form:

This will involve a react navigation specific stack nor group of n screen depending on required fields.
We will use react hook form for the data validation.
A specific machine/actor will handle every workflow at once. It will be spawned by the related program builder machine.
When instanciating a sessionTraining creation wizard will be asked the following information:

• The session name.
  That's it
  But the thing is, just after filling this data the user will a enter by default a TrainingSessionExercise creation wizard form

Session Training Exercise creation wizard form:

Also using react-hook-form and xstate to handle eiter the form field validation and the view.
TBD what and how we will be build the inputs etc

TODO:

Training Session:

• #15
• #13
• #17

Exercise:

• Init form component & screen context for both editor and wizard form

Editor:

• #15
• tests
• #17
• #19
• Handle exercises sets and repetitions editor
• tests

use eslint

Starting load Wizard step

Default Rest duration Editor screen

Starting load Editor screen

Here we will need to handle the unit lbs or kilos
For the moment whenever the user will have to select a mass, will be associated a unit using a MassObject

interface MassObject {
    unit: "kg" | "lb" ENUM
    value: number
}

The input will be a simple digit only input

todo:

• create screens
• handle the input number
• Update the TrainingSessionExercise type definition
• update the exerciseMachine
• Tests

Create and maintain a really simple program containing at least one session

Program builder first step

Todo

• Create a page where the user will create a static program
• With auto-generated program name
• The user will only be able to create one program
• The user will only be able to add sessions to the program
• The user will only be able to add exercises to a session
• The user will be able to remove a session from the program
• The user will be able to remove an exercise from a session

Wireframe:

Set and repetitions Wizard step

Use msw to retrieve user program on app start allowing more interesting and not repetitive tests context

On the app start will be fetched on http route the user program
In this way we will be able to start the app from a context allowing more specific testing env
To be doing that we need:

• msw
• zod
  Define a type to be saved in the msw database from whom will be spawned related actors on programbuilder start

Todo:

• Install deps zod and msw
• Define types for the TrainingProgram
• Define an msw route that will return a TrainingProgram object
• Retrieve on the app start the TrainingProgram object an spawn the required xstate actors

handle exercise name editor screen

Todo:

• create editor screen
• create editor screen content as for the training session name content
• tests

Init exercise wizard creation using the very first step, exercise name

Todo:

• create exercise creation form screen
• Setup and config an exerciseCreationFormMachineConfig
• update the training session machine to invoke and handle an exerciseCreationFormMachine
• tests

Session tracker V0

The first step is to make the user be able to start a session tracker instance from the defined bodybuilding program via the programBuilder.
The first version will be really minimalist:

• The user should be able to start a session tracker instance from the next body building program training session.
• The user will be asked after n each exercise set his performances. This data will be put in an accumulator. Type definition to define
• When the user has finished his session tracker then we will form the moment just display the raw data

For the moment the user should ne be able:

• To skip a training session, exercise, nor set but also not be able to change program exercise oder in the session tracker instance

Types: ( example )

interface SetTracker {
   load: number
   repsCounter: number
   setIndex: number
   rest: RestDuration
   rir: number
}

ExerciseTracker {
   exerciseId: string
   setTrackerCollection: SetTracker[]
}

TrainingSessionTracker {
  exerciseTrackerCollection: ExerciseTracker[]
  trainingSessionTrackerId: string
  trainingSessionId: string
}

Todo:

• User should not be able to edit the body building program when a trainingSession is started
• Create a stack screen for the sessionTracker screens
• Create a SessionTrackerMachine that will be invoked in the appMachine. Tihs machine should iterate on every trainingSession exercises request for each set the user performances.
• Create the first wizard entry for the load
• Create the second wizard entry for the repsCounter
• Create the third wizard entry for the rir
• Create the fourth wizard entry for the rest

TBD wizard default value

From now when a user go back from a wizard step, the step context is reset
Maybe we would like to keep in memory the previous entered step context

Add 3 fields to the exercises definition

The goal here is to add progressively the following fields to both the exercise wizard creation and exercise field editor screen for each screen.

The field we wanna add are the following:

• Set and repetitions
• Starting Load
• Default Rest duration

Each field will have its order and screen inside the exercise wizard creation form.
Each field will have its specific editor screens.

The exercise creation wizard form will be covered inside a specific @xstate/test model.
The machine test model will have to be updated after each other steps creation

Set and repetitions:

• #25
• #24

Starting load:

• #28
• #29

Default Rest duration:

• #28
• #29

Session tracker

Session tracker:

Motivations

Following it's bodybuilding session performance day by day is really interesting for anyone that practices bodybuilding.
It is useful to track and maintain a good progressive overloading on every exercises.
A lot of people does follow their performances by hand on a paper. Which involves to write down after each set the corresponding data on paper.
The goal of this application is to enhance this tracking by automating it. Browse and view centralized the data easily , not on paper pages.
Even further, define some expectation for the upcoming session and compare your expectation to the reality afterwards.

Here is an example of a sheet I made for tracking a bodybuilding session from my program:

We can find the following entries:

• Exercise name
• Load (Kg / lbs)
• Repetitions
• RIR (Reps in Reserve)
• Rest ( seconds, minutes and seconds ? )
• Notes ( some text )

Notes:

• The user should be able to set load as pounds (lbs) or kilograms (Kg)
• User should be able to skip a session from his program

Open questions:

• How should we handle the Rest unit ?
• Does the user should be able to add his own entry (such as reps or load etc ) ?
• Does the user should be able to remove an entry ?
• Should we add RPE as default entry ?

What are we expecting from this feature ?

The user should be able start the next session of his program ( see the program builder issue ).
It will directly start a session tracker using the predefined program exercises as "lines".
A wizard should come after each sets asking for the related data to be filled. UI details to define lateeeer.
After the last exercise set the user should be asked if he wanna do the next exercises upcoming depending on the session order or if he wanna do an other remaining from the session