Inspiration

At the start of the new year, many have the resolution to start living a healthier lifestyle. However, almost 90% of people quit going to the gym within three months, why is that you ask? Most people don't have a good enough understanding of what they need to do to achieve their goals. This is where StayFit comes in handy.

What it does

StayFit is a web application that helps users start and track their fitness journey. StayFit comes with a BMI calculator, a mini-exercise wiki, and an intuitive workout planner. The BMI calculator allows users to set a starting point, providing info to the users on what they need to work towards. The mini-exercise wiki allows users to get a better understanding of certain exercises, with a gif showing the proper form, a small description of the exercise, and a link to find out more. The planner builds a day-by-day workout routine, allowing users to enter any exercise they want and specify the sets and reps for any day of the week. StayFit also has a register feature, in which users who want to save or access their info may sign up or log in to the website.

How we built it

The front-end was developed using React, primarily in jsx. The back-end uses a MySQL database, Express, and node.js.

Challenges we ran into

Although I knew javascript, this was my first time using react, which was very challenging. The signup and login features with access to the database were very difficult to make. The overall theme and aesthetics of the website were difficult to make pleasing and took me a very long time to settle on a color theme. Had trouble making the on-scroll animations, which were finalized using AOS.

Accomplishments that we're proud of

Proud of making a working connection to the back-end through the log-in and sign-up features, and the successful use of a database. Proud of the overall aesthetic look of the website. Grateful for being able to make a fully functioning web app in React even though it is new to me.

What we learned

How to use React to develop aesthetically pleasing yet complex websites. How to use MySQL databases, as well as connect them to the front-end of an application.

What's next for Stay Fit

StayFit has plenty of potential, the next move is marketing the company via social media.

Share this project:

Updates