Fit Happens: How I Built Motion App

I’ve always been passionate about fitness and technology. While working on my personal fitness goals, I realized how clunky most fitness apps were. The fitness apps that did seem appealing were expensive and had a feature list that was overkill for most users. This frustration sparked an idea: what if I created a simple, intuitive tool that gym-goers could rely on to track their workouts without distractions?

From the beginning, I envisioned a platform that combined clean design with efficient functionality, a tool that would simplify workout tracking while letting users to monitor their progress. This project became a solo project, a chance to combine my skills in modern web development with a passion for building something meaningful. And for personal motivations, I simply became tired of app subscriptions 😄.


Building the Vision

I started first by creating a list features that mattered most for the first iteration. I wanted users to focus on their fitness journey, not struggle with overly complicated interfaces or irrelevant features. The app needed to log exercises, sets, and reps seamlessly, display progress in a clear way, and work flawlessly on any device. With that vision in mind, I began crafting the app, one piece at a time.

Designing for Real Needs

Every design decision I made was rooted in the needs of gym-goers. Motion App had to feel effortless. I ensured that users could easily log their workouts, create templates for repeated routines, and explore exercises using a comprehensive library. For this, I integrated the ExerciseDB API, which provided a robust database of exercises. The app’s responsive design was another critical priority. I used TailwindCSS to ensure Motion App worked beautifully on smartphones, tablets, and desktops alike.


The Development Journey

Bringing Motion App to life was a hands-on exploration of modern web technologies. I built the frontend with Vue.js, focusing on creating reusable components to maintain consistency across the interface. For state management, I used Pinia, which allowed me to ensure users could switch between views without losing their progress. This dynamic state persistence became one of the app’s most seamless features, further reinforced by local storage as a backup.

On the backend, I developed an API using Express.js and set up a relational database in PostgreSQL. This architecture allows Motion App to efficiently store user data, track workout sessions, and manage custom templates. Integrating the ExerciseDB API also required thoughtful adjustments to ensure the data aligned with the app’s structure and delivered a smooth experience.


Overcoming Challenges

Creating Motion App wasn’t without its challenges. Early on, I realized that users needed to navigate between screens while keeping their workout progress intact. To solve this, I relied on Pinia for real-time state management. For extra reliability, I added local storage, ensuring no data would be lost even if the app refreshed unexpectedly.

Another challenge came with integrating the ExerciseDB API. While the API provided rich exercise data, its raw format didn’t align with Motion App’s design goals. I spent time restructuring and customizing the API’s responses to ensure consistency across the app.

Finally, creating a responsive design posed its own hurdles. Gym-goers often use fitness apps on their phones, so I prioritized mobile usability. TailwindCSS’s utility-first approach allowed me to craft a layout that adapted perfectly across devices, delivering a smooth experience everywhere.


Lessons and Reflections

Building Motion App taught me the value of simplicity in design and functionality. I worked solo on every aspect of this project, from frontend development and backend architecture to integrating third-party APIs. I do, however, want to thank my mentors for helping me whenever I got stuck on an issue. This holistic experience reinforced my technical skills while reminding me of the importance of user-centered design.

The feedback I received from users during testing was invaluable. It highlighted areas for improvement such as offering more flexibility for workout templates. I took this input seriously, and am currently refining the app to better serve users.

The current iteration of Motion App is only the beginning. As I reflect on this project, I’m already excited about the next steps. Here’s what I plan to tackle next:

  • Introducing progress visualization with dynamic charts and graphs.
  • Adding social features to let users share workouts and achievements.
  • Optimizing the app for larger datasets to support more users.

This app has been a journey of growth, creativity, and problem-solving. It’s a tool that started from a simple idea but grew into something meaningful that I actually plan to put to use regularly as I reach my own fitness goals.


Explore Motion App


© 2024 Chauncey Harlan. All rights reserved.