myWODApp was born out of a desire to explore CrossFit style workouts at my own gym. There are a lot of apps that provide a WOD (workout of the day) but sometimes WODs reference movements or lifts I can’t remember or haven’t done. Instead of trying to lookup instructions for doing each lift and flipping between two or three apps on my phone, I wanted it to be able to view the workout and then instructions all in one place. That way if I get to the gym and want a refresher before I start, it is easy to pull out my phone and review it. I thought that something like that had to exist so I looked but couldn’t find any free solutions (I didn’t explore paid solutions). Since this was something I wanted and I had been wanted to build an app from the ground up in React Native, I decided to design and build it.
I had a few goals in mind as I set out to develop this app. The first thing was I wanted the app to be simple and do the two things I wanted it to do well. In looking at some of the other WOD apps, they provided a lot of functionality but there were so many options and things going on it was almost overwhelming. I also knew that for me, an intuitive and well designed app makes me feel good about myself, which is an added bonus as I head into the gym. From a technical perspective, I wanted to have a great user interface that felt natural and maintained continuity on both Android and iPhone. I wanted to have as little platform-specific code as possible for ease of maintenance.
Backend Design
As well as building the app for both iPhone and Android, I needed to design a backend to serve up the WODs and videos that go along with them. I chose to use the Serverless framework to deploy a scheduled AWS Lambda function to parse an RSS feed that posts a WOD every day and then manually define videos from reputable sources such as the official CrossFit YouTube channel and Crossfit affiliated gyms. Each days WOD plus videos are stored in a Firebase database which is queried directly via the app via the exposed HTTP REST API. The database rules prohibit writing to the database except by the lambda function and the reads are rate-limited by Firebase. I wasn’t able to use Google Cloud Functions because from what I can tell, there is no way to deploy the function at a scheduled time like you can with AWS.
Phone Apps
Since I already had some experience with React and React Native, getting a basic version up and running was a pretty quick process. I used redux and redux-persist for managing and saving state and redux saga for asynchronous tasks such as determining network connectivity and fetching data from the backend. On the Workout screen, I added pull to refresh functionality so if the user had the app open from the previous day and wanted to update the workout or went from being offline to online, they could get the current workout. On the Videos screen, I used embedded webviews to display the YouTube videos instead of integrating with the YouTube API, thus allowing for the YouTube app to be used if desired.
After the initial release, I added the ability to see a full week of workouts instead of just the current day. To do that I updated the backend to start storing the workouts by day instead of overwriting the previous days workout once the new one came out. I also updated the app so the user could swipe through the WODs on the Workout screen. The Videos screen automatically updates to show the videos for the WOD that is being viewed on the Workout screen.
Conclusion
Building the app was a great experience and seeing others download and use the app has been incredibly gratifying. It ended up accomplishing what I set out to do — provide the workout and instructional videos in a clean and intuitive interface. Interested in giving it a try? Visit mywodapp.com to download it for free!
Addendum: myWODApp has been retired, read about it here.
