| |

How I Created a Fully Functional Fitness Timer App with a No-Code Platform

ByWill

One of the apps I used to track my planks suddenly disappeared from the App Store. Recently, I’ve been using my iPhone’s stopwatch to time my wall sits and planks.

Then I thought, Why not try building my own fitness timer app? That’s when I remembered watching YouTube videos about how others used Lovable.dev to create functional MVPs (minimum viable products).

So, I headed to Lovable and signed in with my Google account.

My First Prompt:

Create a simple web app that has a start timer and a history log to keep track of exercises like wall sits, planks, etc.

I was amazed by the first iteration of the app—the timer part was perfect! However, the history section was too similar to the timer’s records, with only a basic monthly sorting feature. So, I tried improving it with my second prompt:

Second Prompt:

For the History, group them (e.g., total Wall Sit for a particular month) and also include a chart view.

The result wasn’t great. Hmm, it seems “charting” was harder to implement than I expected.

After several more attempts, I refined my prompt:

Final Prompts:

Revamp the Monthly Summary—include a dropdown to select the exercise type and just show a list view for the month. Also, display the total time for the month (for the selected exercise).

Then, I noticed a potential bug:

Is there a bug in the Total Time? It doesn’t seem to be adding up correctly.

Lovable did some debug and that’s it – My “final” version of the Fitness Timer app was complete!

Optimizing the Prompts

I then asked Lovable to summarize the final prompts—the one that, if given in the first try, would have produced this exact app (I called this Prompt Re-Engineering). Here’s what it generated:

Create a React-based web application for tracking static bodyweight exercises like wall sits, planks, and side planks. Develop a two-tab interface with a timer and exercise history log, allowing users to select exercise types, track duration, and save sessions.

Implement a timer component with start, pause, reset functionality, and exercise type selection. Use local storage to persistently save exercise records, enabling users to track their static exercise progress over time. Design an intuitive UI with responsive Tailwind CSS and Shadcn components.

Build a comprehensive history log with monthly summaries, daily breakdowns, and a bar chart visualization using Recharts. Add toast notifications for user interactions, and enhance the user experience with Lucide icons and smooth animations.

Ensure the application provides clear time tracking, exercise categorization, and easy-to-read historical data, making it simple for users to monitor their static exercise performance and progression.

Wow … but that’s not really practical as in the first place, the prompts include quite a fair bit of technical terminologies like React, two-tab interface, local storage, Tailwind CSS, Shadcn – which I will not be able to come up with such a detailed prompts with such degree of technicalities.

So I prompted Lovable:

Make it simpler by eliminating all technical terms like React, use local storage - in the first place, I didn't give such technical terms and you were able to decide what and how to use - purely just simplest shortest non-technical paragraphs that you would have come up with this final app in the first try.

Then Lovable give me the “final” prompts:

Build a simple app to track exercises like wall sits and planks. The user should be able to pick the exercise, time it, and view their history.

Make a timer that starts, stops, and resets. Save each exercise session. Show a list of past exercises with monthly summaries and daily breakdowns.

Use clear icons and a clean design to make it easy to use.

I even double-checked with Lovable to confirm if these prompts would have worked on the first try. Its response:

Yes, absolutely! These prompts capture the core functionality and user experience of the app: exercise selection, timer controls, session saving, history tracking, and summaries—all in a clean, intuitive design.

These prompts are user-focused rather than technical, which makes them even better. If given these exact instructions, I would have built the same Fitness Timer app you see now.

Final Thoughts

And there you have it—I created a fully functional fitness timer app in 5 minutes with Lovable, without writing a single line of code! Literally, anyone can become a “programmer” just by using English as their programming language (aka prompt engineering). And you can see how I learn “how to prompt” from Lovable too (prompt re-engineering 😉)

Don’t get me wrong—while I’m an advocate for no-code app development, I’m also learning how Lovable built the app (using React, TypeScript, and Tailwind CSS). Understanding the underlying code helps me grasp the structure and, more importantly, how to deploy apps live.

In my opinion, coding remains a highly valuable skill—even when using no-code solutions, it always comes in handy.

P.S. Here’s the live link to my newly created Fitness Timer app – https://fit-log-folio.lovable.app/ – Let’s get fit together!

Similar Posts