Inspiration

As individuals thoroughly involved in sports and other mediums of physical activity, we recognize that one major issue regarding exercise is the risk of muscles feeling sore or even getting injured. Thus, we decided to tackle this issue by providing a website for the general public.

What it does

Recovery Lab is a web application that provides an in-depth guide to stretches that individuals can perform to exercise certain muscle groups. The stretches benefit muscle groups in discomfort and lower the risk of injury. Through this application, users can simply select a muscle group and view digestible demonstrations of the most essential stretches for the corresponding muscles.

How we built it

Recovery Lab has three components to the application: the front-end, the backend, and the database. The front-end component of the web application was built with HTML, CSS, and JavaScript. It takes in the user's choice of which muscle group to exercise, sending the request to a Python Flask application, which acts as the backend. With the requested muscle group, python also connects to a MySQL database that stores all the helpful stretches and the corresponding muscle groups that the stretches benefit from. The resulting stretches and their descriptions are retrieved by Python and sent to JavaScript. Finally, the user is redirected to a different web page that lists all helpful stretches and the instructions.

Challenges we ran into

One significant challenge we encountered when building the application was transferring the retrieved MySQL data from Python to JavaScript, which was an essential part of connecting the backend and front-end components. We were able to resolve this issue by utilizing a tool in Python Flask called werkzeug to transfer information from Python to HTML files, in which JavaScript was embedded. Another challenge we ran into was making the search results disappear when user clicked on parts of the website outside of the search bar. Although our initial approach of adding an on click listener to the page container seemed to work, any adjustments to the page container constantly caused the issue of the search results remaining in place despite clicking outside of the search bar. To address this issue, we tried a different approach of implementing an event listener on the entire html body instead. This allowed the search results to appear and disappear as intended even when the page container was modified.

Accomplishments that we're proud of

An accomplishment we are extremely proud of is successfully deploying our web application to a public server through Heroku. Although Heroku is relatively user-friendly compared to servers like AWS and Azure, it is still difficult to deploy code, as oftentimes the errors are unknown. In our case, we failed the deployment in our first attempt because we did not list out all necessary dependencies required to run our application but were able to quickly identify and fix the issue, resulting in a successful deployment of our web application.

What we learned

As a team, we learned more about the language of JavaScript, for we incorporated it into our application to manage the functionality of the website design-wise. Some of our members never used Python Flask before, so constructing the backend with Python was also a learning experience. Moreover, we were able to learn more about efficiently constructing a website from scratch through comprehensive UI designing and implementation of effective CSS codes.

What's next for Recovery Lab

We plan on expanding our current progress with Recovery Lab by listing out the various benefits involved with performing certain stretches. Additionally, our team hopes to enhance the interactiveness of the website by incorporating an account system that enables individuals to customize unique schedules that incorporate various stretches that best fits them.

Share this project:

Updates