Track
AI Fundamentals
0 min
Bolt.new is a new text-to-app AI tool. Similar to Lovable, it allows users to build apps purely using prompts. In this tutorial, I’ll walk you through the tool, and we will try creating a Gym Workout app with it.
If you’re keen to learn more about these kinds of tools, I recommend checking out our Lovable tutorial.
What is Bolt.new?
Bolt.new is a text-to-app tool that lets developers instantly spin up full-stack applications with modern frameworks, libraries, and integrations already set up.
Instead of starting from scratch or spending hours configuring project boilerplates, you can type a prompt like “create a SaaS landing page with authentication and Stripe payments”, and Bolt will scaffold a working project in seconds.
The main idea is to reduce the distance between an idea and a running product. With Bolt.new, you don’t need to manually piece together dependencies, routing, state management, or styling libraries; those choices are handled automatically by the tool. It’s designed to follow best practices out of the box, so the resulting codebase is structured and production-ready rather than just a throwaway prototype.
Bolt.new allows you to publish a project with a single click, making it accessible publicly on the web. However, as of the time of writing, important features like database and authentication are still in beta, making it quite limited for real applications.
How to Get Started with Bolt.new
To get started, navigate to their website and create an account. Without a subscription, you have a limit of 1M tokens per month and a daily limit of 150K tokens.
Their free tier makes it possible to try it, but don't expect to be able to iterate a lot over the application.
I've tried to go around the token limit by specifying all of the features in great detail with the initial prompt, but I found that it usually only generates the main app idea, requiring further iterations and, therefore, more tokens.
How to Build an App with Bolt.new: Gym Coaching App
To test Bold.new, we're going to try to build a gym coaching app. The basic idea of such an app is that it will plan exercises for us each day and help us track our progress. It then creates plans based on past data.
Here's the initial prompt I've used:
I want to build an exercise tracking app for the gym. Each day it should give me an exercise set. A exercise specifies a machine, a weight and a number of repetitions. The app should allow me to mark, for each exercise, how many repetitions I did and wether it was hard, normal or easy. Then that data is used to plan further days.
After submitting the prompt, it created a React project and started implementing the basic functionality. It provides a comprehensive list of all the files generated in the logs:
After a while, the app was running. Here's what it looked like at this stage:
When creating a new workout session, this is what I got:
This isn't exactly what I had in mind because each exercise consisted of a single set, but it was close enough. In fairness, I think my initial prompt wasn't totally clear on that. This is where understanding prompt engineering comes in useful.
In terms of tokens, this initial prompt has already used up 97K out of the 150K daily limit. This shows that, on the free plan, we aren't able to push our ideas very far.
Requesting Changes to the App
The main idea behind these text-to-app AI tools is that we can bring our ideas to life without knowing how to code, simply by chatting with the AI and requesting changes.
To put that vibe-coding claim to the test, I request each exercise to be composed of multiple sets.
Bolt.new made changes; however, when it tried to render the app again, it ran into an error.
The interface is aware of the error and offers the possibility to automatically attempt to fix it.
Sometimes it can directly identify the error and fix itself. However, in this case, the new changes came with other errors:
After a few rounds of error fixing, we had a working version, where each workout session had multiple exercises, each with multiple sets (number of repetitions). For each set, we can keep track of how many repetitions we did, and then we can give feedback about the difficulty we felt.
The feedback data should be used to plan future sessions. I wanted to chat to ask for details about how this data is used, but by that time, I had run out of credits for the day.
One of the issues I often find with creating applications like this is that we have little control over what is going on under the hood. We can see by experimenting and using the app, but that's not always enough to get a full understanding of how things are implemented.
Looking at the Bolt.new Code
If you know how to program, then it's possible to get an understanding of how the app works by looking at the code. Contrary to Lovable, Bolt.new makes it very easy to see the code straight in the web interface.
By opening the code editor, we can see all the project files, and clicking a file will open it in the code editor, making it possible to see how it's working and make changes directly in the browser.
There, I saw a file named workoutGenerator.ts, whose name indicates it contains the logic for generating new workouts.
Since I was out of credits, I copied and pasted the code into ChatGPT and asked it to explain it to me. Here's a summary of how it works:
The app creates a new workout for you each day by looking at what you’ve already done. It keeps track of the number of workouts you’ve completed and rotates through different types, like upper body, lower body, or full body, so that your muscles get a balanced routine over time. For each workout type, it randomly picks a handful of exercises that match the right muscle groups, so you’re not always doing the same moves.
It also pays attention to how well you did in your past workouts. If an exercise felt easy and you’ve been succeeding often, it will slightly increase the weight or add more reps to keep you challenged. If an exercise is too hard, it will lower the weight to make it more doable. This way, the workout adjusts to your progress and helps you improve at the right pace without overdoing it. This seems reasonable to me, especially for a first version of the product.
Publishing the Bolt.new App
To publish the application, simply click the "Publish" button at the top right corner.
Once it's published, we receive a URL in the chat where we can open the app.
We can use it on the browser and share it with others. We can also install it on the phone. But since it's a web application, we don't install it using the app store; we do it from the browser by:
- Open the link on the phone.
- Click the options menu in the browser.
- Click the "Add to Home screen" option.
Unfortunately, Bolt.new didn't make the application into a progressive web app (PWA) out of the box. This means that when we install it on the mobile phone, in the way we've just explained, it simply creates a link on our home screen, so the experience isn't much different from using it in the browser.
I asked it to convert the application into a PWA so that it behaves as a native application, but that didn't go very well. Bolt.new started well by generating the necessary files, but one of the requirements for a PWA is to have image logos. Unfortunately, Bolt.new’s attempt to generate those by writing the image bytes, which not only probably generated nonsensical images but also consumed all the tokens.
Setting a Custom Domain
The URL we got for the app was automatically generated, making it not ideal for production. For a real product, we would need to buy and configure our own domain. This can be done on the "Domains & Hosting" page in the project settings.
The current version of the app doesn't store data in a database. Therefore, if we open the app on our computer and then on our phone, we won't see the same data. There is local data persistence on the device, so if you use the same device, the data will be stored locally. That's why if we refresh the app, we won't lose the current workout plan and past workouts.
This is okay for a prototype, but not at all suitable for a commercial product. Right now, authentication and databases are still in beta. You can access them by signing up for their private beta.
Conclusion
I believe Bolt.new is a great tool for quickly scaffolding a prototype and validating a product idea. However, the AI tends to implement features at a surface level, meaning that substantial applications require a great deal of iteration.
Even when providing a detailed initial prompt, the result only scratches the surface of the full specification, and the free tier's token limits make it nearly impossible to build anything meaningful without a subscription.
Furthermore, with essential services like authentication and database support still in beta, I would recommend waiting for their full release before attempting to build a production-ready application.
Overall, Bolt.new operates much like its competitors, but its standout feature is the ability to view and edit the source code directly within the web interface; a crucial advantage that addresses one of the major frustrations I experienced with platforms like Lovable.
