Fit Builder: Modular Fitness App Development

Timeline: May 2025 – Present

Role: Solo Developer, Designer & Product Creator

Development Approach: AI-Assisted Development (multiple platforms)

Tech Stack: Next.js, React, Tailwind, Framer Motion, Supabase, Firebase, RevenueCat, Sentry, PWA, Astro, Strapi, and more

Tools: Horizons, V0, Bolt, Firebase Studio, Cursor, Windsurf, Warp, VS Code, Android Studio, Figma, Blender, Plask, Spline, Concepts, Affinity Designer

In May 2025, inspired by a competition to test the new capabilities in vibe coding, I set out to create a fitness app that would address gaps I saw in existing digital fitness solutions—mainly, the lack of flexibility and depth for users wanting to be in full control of their fitness. The goal was to offer a full-featured, cross-platform solution that empowers users to create, track, and unlock their best fitness. This was the motivation for creating Fit Builder.

Fit Builder is a modular fitness app which gives users the ability to create custom exercises, workouts, and programs. Other core features include progress tracking, personal record with journal, custom quick workouts and a growing Library with 70+ exercises, +80 workouts, and 4 training programs based on real 10-week programs used to train high-performance athletes and the military. It has partial offline support, themes, dark mode, and comes in a web version (accessible for all devices) and mobile version, for Android. No sign-up or credit card is required for guest users, and premium subscribers have access to all features.

Built the app from scratch using AI-assisted coding, doing manual testing and revisions, in a period of 4 months from start to finish (closed Beta release).

Created the content for all exercises, workouts, and programs.

Designed the original brand, UI, 3D character and animations for all the exercises.

Implemented memberships, user management system, gated content and features.

Full PWA deployment: cross-platform web app, installable via Google Play Store, with offline features.

Custom Admin dashboard and Content Management System (CMS).

Created usability tests and gathered feedback, and made iterations during closed Beta testing.

My approach was to use the latest coding tools available, at that time, with agentic AI features to accelerate development and explore different implementation methods. Since the project was not bound to any particular technologies at the beginning, I had freedom to choose any combination of suitable solutions. This resulted in frequent tool-switching, and I evaluated each for strengths and limitations as the app’s complexity increased over time.

Started with Hostinger Horizons for fast frontend prototyping.

Improved the UI and early bug fixing with Vercel’s V0.

Tried Bolt to reduce the issues introduced by the other tools without diff mode.

Used Firebase Studio for its web-based IDE experience, then moved to local development in Cursor for agile AI-assisted coding, building new features and solving complex problems.

Experimented with Windsurf and Warp to evaluate advantages over previous tools, and to tackle specific development challenges.

Built with Next.js (React) and styled using Tailwind CSS for easy customization and responsiveness.

UI and charts built on Shadcn UI and Lucide icons. Customized as per my Figma mock-ups, and added custom icons designed by me and imported from other open sources.

Custom drag-and-drop functionality with React-compatible library, DnD Kit.

Simple UI animations and interactions handled with Framer Motion.

Support for offline features. Local & cloud storage with sync mechanisms, ensuring data integrity, adding redundancy, and making the app reliable anywhere.

Seamless experience as a PWA; compatible with all major platforms, across web, mobile, and desktop

Started with minimal, hand-drawn sketches in Concepts, before translating flows and visual language to Figma.

Created reusable components and mobile-first UI in Figma to ensure consistency and being able to import mockup references to coding tools.

Following accessibility best practices to make the UX more equitable and reach a wider audience.

Doing usability testing with potential users early on to ensure that the app is matching the users’ mental models

Branding reimagined during the development process. Designed the new “Fit Builder” identity to make the concept more accessible and easier to recall.

In addition to the Lucide icons used for standard UI elements, custom icons were added for a coherent experience.

Supports multiple colour themes and dark mode.

One key aspect of the app is that it uses 3D models to show the exercises. This was an intentional choice to speed up the creation of new content for the Library, and have more flexibility than working with real models typically allows.

The 3D models were designed from scratch, following traditional character concept design methods, then modeling and animating in Blender.

The animations were based on real exercise references, and manually animated.

In the first version of the app, the exercises show an image slideshow to emulate stepped animation, instead of using videos. This served multiple purposes: speed up the creation of the core exercises, give users an easier control to go backwards or forwards when viewing exercise steps, and reduce the app size and loading time.

Most of the challenges in the early stages of the app came from intensively testing the newest apps and services available for AI-assisted coding to find the best balance between output complexity, accuracy and costs. Each tool presented its own learning curve and set of challenges, so switching tools had to be done carefully and with backup plans.

Found ways to mitigate heavy code regeneration and the unpredictability of the AI output by using different workflows.

Constantly monitored the usage and variable costs to make pragmatic decisions regarding the scope and tools to use.

Frequent use of multiple branches and versioning to progress steadily and minimise the impact of irreversible changes

For technically complex features, I followed a method of creating hypotheses, researching, and testing multiple approaches to find the best and most consistent solutions

Optimized for performance by implementing lazing loading, caching, and strategies for efficient resource loading.

The web app was kept separate from the landing page for increased security, modularity, ease of mantenance, and more efficient resource usage. The landing page was built on Astro, and the CMS backend is made with Strapi.

Mobile-first responsive design across devices, for increased accessibility.

DependencyCategoryNext.jsFramework & LanguageReactFramework & LanguageTypescriptFramework & LanguageTailwindStyling & ThemingShadcnUI primitives / componentsZodState / Forms / ValidationFirebaseBackend / Auth / StorageOther JS DependenciesRevenueCat, Microsoft Clarity, Sentry, Next-PWA, DnD-kit, Sortablejs, Recharts, Framer-Motion, Papaparse, Lucide, and various types of small UI & utility libs

Deployed a functional, robust, modular, cross-platform, and secure application in a period of 4 months, from start to finish.

Built, tested, and operationalized all core modules, admin panel, and feature access per user role and subscription status

Conducted usability testing and surveys with a select group of beta testers prior to public release. Implemented critical UX changes based on their feedback.

The app has been operational and growing users through word of mouth, prior to release in the Google Play Store.

To monitor metrics, different sources exist in the app and externally: the custom-made analytics dashboard in the admin backend, Microsoft Clarity, Google Analytics, and Google Play Console.

Though AI made it possible for me to complete this project in a very short time, it was still a very experimental technology that came with many unforeseen challenges. It can be useful especially in the initial stages of a project, for ideation and early research, but as the project complexity increases and transactional and user account features are implemented, there should be a stronger involvement of subject matter experts who can ensure the risks are mitigated.

As AI makes it easier to add features to a product, it is worth keeping in mind the tradeoff between single-problem focus vs feature-rich focus. More features means a steeper learning curve, higher maintenance costs, and higher likelihood that something will break at some point.

Finding the right tools usually require testing them, because each project presents unique requirements and challenges. No amount of research and planning beats experience.

Budgeting for AI tools and hosting costs is as important as the technical choices. The less defined the project scope is at the beginning, the more you can expect to pay at the end, because most of the AI services run on a credit or pay-as-you-go basis, on top of a subscription. Mistakes and iterations can quickly raise the costs.

The quality of AI output depends significantly on the capacity of each model.

Thorough manual versioning and backup strategies in an AI-driven workflow are a must.

The project is currently in closed beta. For more information, please visit fitbuilder.app.