My Journey with Workout Wingman!
How I built an exercise logging app to help me learn and improve my programming abilities and keep track of my workouts!
Ever since I was a teenager I enjoyed lifting weights. Although it hasn’t always been a smooth road to travel, going to the gym has been a consistent outlet for me to express myself. Throughout the years of lifting, I tried many different ways to keep track of my exercises: the traditional notepad (which I always seemed to lose), using a journal at home (I would forget to log things half the time), and various mobile applications that never seemed to scratch the itch how I wanted.
As I got further along in my journey into coding, I decided that I would make my own way to track my workouts, and so, — Workout Wingman was born.
I began to build my concept of Workout Wingman by using Figma. This collaborative design platform allowed me to build out how I wanted each page to look, interact with the other pages, and how I could structure how my app would come together. After using Figma, I wanted to plan out the architecture of my app. I knew that I wanted to make a full-stack application to test my knowledge of the frontend and backend technologies I had learned thus far.
For my back-end I had a pretty straightforward plan — I would use Node.js and Express to help handle my REST API calls and connect my database (using MongoDB with Mongoose), my third-party database that houses all the exercise information, and my front-end. As I had recently learned about the MVC or Model-View-Controller, framework, I planned to design my app to work around these components and used Node to handle all the work of the backend.
Using MongoDB and Mongoose, I was able to build schemas for my user data and individual workout data. I also integrated a third-party database that houses over 1300 different exercises so that I could use that information for my user to choose from and add to their own exercise plan.
On my front-end I had originally planned to use some sort of JavaScript templating language and was debating on EJS or Handlebars. In the first iteration of my project, I built a small concept just using EJS and front-end JavaScript to connect with the thrid-party exercise database to see how I could manipulate the data how I wanted. While this worked, I wasn’t happy with the result and thought I work more efficiently using something else due to the fast-changing state of the app. Meanwhile, I had also been working with React on small projects to help me learn the library. After building that first concept, I decided to go all-in on React and continued moving forward building the rest of my project with React.js as my front-end.
This was quite exciting for me and really helped me learn not only React, but also how to integrate React with a backend environment. I spent time learning more about different React hooks like useEffect and useState as they were the bread and butter of this project. I also learned more about React Router and some of its components, like Link and Navigate.
One of the final issues I had to overcome was actually linking my front-end with my backend services. While I had done this many times using other methods, this was my first experience with doing so with Node and React. I, of course, took to Google and YouTube and learned different ways to set up the Node start scripts to help build the React production environment and link the two environments to complete my project!
I originally had this entire project hosted on Heroku’s free tier, however, unfortunately, Heroku has changed its tiers and no longer offers a free tier for use. Recently I have been working on migrating this app to a different hosting service so stay tuned so you can start building your own workouts with Workout Wingman!
