Building a Workout App with React

5 min readJun 20, 2021

I built a simple workout app using the React library to improve on my skills. React is becoming an increasingly important tool for web developers to learn. In Stack Overflow’s 2020 survey, over 36% of developers say they use React.

React can help simplify the development process by making your code more flexible and by abstracting away tedious details like DOM manipulation.

My workout website would be a simple CRUD(create, read, update and delete) app. This would help test my React skills and give me more experience creating my own projects.

The Idea

I came up with the idea of a workout app because it’s something that I could see myself using, and it was different from the to-do apps you usually see in tutorials. I wanted users to be able to create and explore exercises. They would also be able to create their own custom workouts from a list of exercises.

The Back End

Since the focus of this project was working on my React skills, I used a simple back end, based on the JSON Server library. It’s good for prototyping, and let’s you get something like a CRUD app running quickly.

The data is stored using the JSON format. I have two different resources. The first has the exercise data with information about each exercise and a YouTube link demonstrating the exercise.

Exercises resource containing data about exercises

I also have a resource with information about the workouts you can create. It has an array of exercises, and the duration of each exercise.

Workouts resource that contains workout data

This is obviously not meant to be a server for anything substantial, but it is good enough for a front end focused project.

React and Hooks

React introduced hooks as an alternative to class components a few years ago. Components could now be made using functions. It’s supposed to make reusing components easier. Most applications written recently are using hooks over classes.

This project took advantage of two commonly seen React hooks, useState and useEffect. The hook, useState, lets us declare a new state variable and provides us with a new function to change the state.

The useEffect hook lets us handle side effects, such as fetching data. This is important to my app where I had to fetch a JSON containing my exercise and workout data, so I had to know how to use this hook properly.

The Front End

Organizing your code is important. I separated my components into components focused on the workout data, components focused on the exercise data, and more general components like the home page and navigation bar.

I tried to make my code as reusable as possible, and I did manage to reuse some components like forms in multiple places. Before I started coding, I made a simple drawing of what I wanted my website to look like and sketched out a hierarchy of components so I could plan out my code. For example, for my exercises page, I knew that each exercise card would be held in a container, so I knew I had to develop an ExerciseCard component and ExerciseContainer component. Previous projects taught me that planning ahead would be important.

Using React Router for client side routing

Using React Router, I enabled client side routing so users will have a more organized experience. This also allowed me to create a 404 page and to set up unique pages for each workout, so someone could share their custom workout with a simple link.

I didn’t focus much on styling and just used Bootstrap so the interface would be usable enough.

When I was done, I deployed the front end using Netlify and the backend with Heroku.

Challenges

Dealing with state and props in any React based application can be challenging. A few times, I had to change where I was declaring a state variable, so it could be more easily passed as props to different components. I could have thought this out better beforehand, and I will in the future.

There was also one time I expected a component to re-render, but nothing changed. I realized I wasn’t changing the state, so React didn’t …react. Knowing how React works helped me figure out the problem.

ExerciseCard component in the workout app

One of my more annoying challenges was figuring out modals. I wanted users to be able to easily browse exercises without having to go to a new page or having to load something at the top of the page. I settled on having a modal box appear when I user clicked an exercise that they could easily close.

I didn’t understand how modals worked so that required some good old fashioned googling. I ended up using Bootstrap’s modal class and setting it in CSS to display the modal at all times. Instead of Bootstrap’s method to toggle modals, I chose to use a state variable to control when my modal component would be mounted and unmounted. This seemed to be better suited for a React based application.

Lessons

Keep your code organized. Organized code is easier to debug and change. Planning ahead is key. Think before you code. Think about component reusability. As you get more experience, you’ll learn more design patterns and be more experienced at dealing with the challenges you come across.

Test your code. Don’t code everything and then try to debug. Build a component or feature and then test it. This saved me a lot of time and headaches.

Understand the libraries you use. React has some quirks that trip you up if you don’t understand how React actually works.

I faced some challenges, but overcame them one by one. Hopefully, I’ve learned a few things that I’m going to carry with me to future projects.