Fitness Website for Trainers

fitness website
fitness website for trainers
fitness health monitor

This is a multifaceted Web app for Fitness Trainers supported by a Mobile app for Fitness Trainees. The Web app was developed using React JS with Redux and Flux architecture, while the Mobile app used React Native. Both applications used GraphQL for efficient and fast data access.

Portfolio Detail

This Fitness Website for Trainers enables the fitness trainer to design and set up daily exercise and meal plans based on the health parameters of each trainee registered with him/her. Exercise routines are setup using videos, step-wise instructions, highlighted body part images, etc. The website enables body part highlighting using SVG rendering. The trainer can thus indicate the parts of the body that the particular exercise should affect.  This along with meal plans form the daily regime set up by the trainer for each trainee. It is received and processed by the trainee on his/her mobile app.


Localization posed a major challenge in our progress, specifically because besides an LTR language (English) it required the support of an RTL language (Persian). To integrate a consistent UI whilst supporting languages flowing in 2 different directions, was a challenge in React JS, as it fell short in several places. We had to customize it at various points to overcome the shortcomings. Similarly, the Persian Calendar library that we found in React was insufficient to support the complete functionality and hence considerable customization was done in it to achieve the target.


We used ESLint for JS code linting and the Jest framework for developing Test cases. Used GitLab VCS and GitLab’s CI for continuous integration (just like Circle CI on Github).


Live socket Chat is implemented using, enabling a channel of communication between the Trainee and the trainer.


Functional Overview


The Web app is all about the Fitness Trainer. Once a trainee registers with a Trainer, the Trainer reviews the trainee’s health info and creates suitable health plans with scheduled exercises and meals. Creating an exercise regime involves creating content for daily workout. Uploading video material, adding images and mapping the affected body parts on them, and adding stepwise description of the regime, go into its making. This, coupled with meal plans is set off as the plan for the targeted trainee. The trainee receives the plan, and on execution, updates the status on a daily basis so that the trainer can view the progress. Trainees can update their medical parameters daily. The result shows a comparison between expected and actuals. The progress of each parameter of health history – weight, measurements, etc, is shown graphically.


For details on the Mobile app please click here.

Related Work