(Portfolio Update) The Pump - Arnold Schwarzenegger's official fitness app
Sometimes you have to be just on the right place at the right time. Not even three years into my career as a frontend developer, together with my fullstack colleague, we were assigned to build an official mobile fitness application for Arnold Schwarzenegger himself. STRV is a top agency with presence both in San Francisco and Los Angeles, so sometimes big names come around, especially in the fitness area, which is manifested in STRV's own love for fitness and its top-floor gym.
Arnold’s team was looking for a first solution that could be delivered quickly (basically 3 months over Summer 2022) and altered on the go to incorporate feedback from beta testers and then later from first users. React Native’s speed of development, flexibility and cross-platform nature made it a perfect fit for the project.
The Pump
The Pump is not only a fitness app but also a closed community of Arnold’s fans, who can interact with Arnold via discussions in motivational articles the app offers. It is for everyone, not only bodybuilders but also for total fitness beginners, with tailored workouts for each difficulty level, gender, equipment (body weight, gym) and fitness goal (get big, get shredded).
What makes it truly standout is the combination of retro and modern bold design, a true masterpiece from our designer Bara, and you can read all about it in STRV's design article (opens in a new tab) and also in the official case study (opens in a new tab). As usual, our team was also accompanied by a product manager and a QA engineer.
Our team at STRV's gym (opens in a new tab)
Development
We knew we have to build the application fast, therefore an idea to use backend as a service was brought up. After dismissing Firebase due to potential Firestore vendor lock-in, and Supabase due to its relatively early nature not tested on a fully-fledged product by us, we decided to go with AWS Amplify (opens in a new tab) from Amazon. But after 2 weeks of development, we realized that our data heavy application requires a lot of custom logic, which made the implementation of Amplify more complex and slower than building a standard backend solution with full flexibility on our side. For our Node BE, besides top DX choices such as Prisma and GraphQL, we also utilized Railway (opens in a new tab) for the first time, and all in all, my fullstack colleague quickly caught up and replicated our Amplify data structure.
On the React Native side, we had lots of UI to build. Luckily, our designer was utilizing consistent spacing and typography, therefore I knew I could use a theme strict solution such as Restyle from Shopify (opens in a new tab) to its full potential. After setting the theme and text variants up, the app was almost building itself.
Besides GraphQL as our data layer, on the client side I also utilized Zustand (opens in a new tab) and MMKV (opens in a new tab) to persist active workout data the user would be filling in. Zustand wins over React Context with its capability and over Redux with its simplicity, and MMKV is a better alternative to AsyncStorage thanks to its synchronous nature and better performance.
It was quite a fun challenge to count total lifted weights when one workout is divided into sets that include exercises which can have multiple sets as well, with each obviously having reps and weight. Take that a fitness program is divided into phases and each phase is divided into individual workouts and you will start to realize how complex and nested the resulting data structure is.
The Pump is a subscription-based application with a lifetime membership option as well, therefore I chose RevenueCat (opens in a new tab) as our battle tested payment solution. All in all, a great experience, but once your application includes also the lifetime membership option, you have to be careful with the way you implement it. It is an in-app purchase rather than a subscription, so obviously you should make the user cancel their subscriptions first before buying a lifetime membership and also if they own one, then they should not be able to buy any subscriptions. Many things you don't have to consider when offering just subscriptions and I felt RevenueCat could do bit more to document this use case.
Finally worth mentioning, after successful experience on Nutiliti, starting the project with Expo was an obvious choice, proving that any native customization can be done via Expo Config Plugins and Expo Application Services are the best in class for building and submitting React Native applications.
Also part of the project was a nicely designed landing page https://thepump.app (opens in a new tab) and an admin site. The landing page is loading pretty much instantly thanks to CloudFlare Pages and the admin was built with Remix to utilize its nested layouts capabilities (this is before Next.js released them as well). Looking back, hard to believe we (two engineers) built all of that over summer, especially when I was preparing everything for my wedding in August as well 😅.
Summary
After the first version of the app was finished in September 2022, as it happens in the agency development, I moved to the Ascension project and my fullstack colleague Michal stayed to gave the app few more final touches until the client took over the maintenance of the project. The app was eventually released in April 2023 hitting the TOP 20 in the US Health & Fitness AppStore category and selling out all 5000 lifetime memberships within 72 hours. Current rating is 4.4⭐️ on both iOS and Android and the app is currently accessible via an invite only, most likely still in the stage to gather and incorporate feedback from its first founding users.
© Aron BerezkinRSS