Building this app honed our React Native skills to a great extent.
This complete fitness mobile app revolves around daily exercise and meal plans for the Trainee to execute. Trainer plans include daily exercise routines in the form of images and videos, and detailed meal plans. Date wise exercise regime syncs with the app’s calendar to help execute the designed plan as per schedule. Video-player was integrated to enable viewing of the exercise videos sent by Trainers.
The React-Native-Cached-Image library was used for Image Caching. Exercises being targeted towards body parts were depicted using vector images. Specific highlighting of body parts was implemented using SVG rendering.
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 Native, as it fell short in several places. We had to customize it at various points to overcome the shortcomings to make it a complete fitness app. Similarly, the Persian Calendar library that we found in React Native was insufficient to support the complete functionality and hence considerable customizations were done in it to achieve the target.
Offline data caching was another critical aspect and we used Redux Persist to achieve the same. Data would be synced with the server, on the connection.
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).
This complete fitness mobile app is all about the Trainee, Trainers and Admin are on the Web. A trainee can register with complete information, with all health parameters, body measurements, etc. Thereafter the Trainee selects a Trainer and makes the payment to avail the trainer’s services.
The Trainer (on the Web app) reviews the trainee’s health info and creates suitable health plans with scheduled exercises and meals. The daily exercise plan then appears on the trainee’s calendar. Daily events are scheduled that show date-wise exercises with videos and other information.
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 to the end user.
Live socket Chat is implemented using Socket.io, enabling a channel of communication between the Trainee and the trainer.
For details on the Web app please click here.