Creating a healthy recipe app in Bolt
A few posts ago I wrote about using AI to reduce the time involved in creating PRDs. The next step is to use this PRD to create a first version of your product idea.My idea is to create a healthy recipe and I’ve created a PRD for it here.*
* Companies are starting to move to a “build first” culture instead of spending days, weeks to “write first”. I feel differently, having learned that creating a PRD, however brief, does positively impact the output quality of your prototype in the different AI tools.
Before providing a specific prompt, I first make sure that my global system prompt is up to date. Instructions like sharing a plan before writing any code or generating a PRD file help in getting the right output and context from the AI assistant.
I then add my specific project instructions from the PRD I created.
Breaking down my PRD in specific milestones or phases makes it easier to zoom in specific components, batching the outputs from the AI assistant.
It makes it easier for me to easily spot any bugs or issues. For example, when my recipe coach shows that I’ve applied two filters where I have applied only one:
Or when it turns that the mock data that I asked the AI to use (I’m purely focusing on the client application with this prototype):
When I now search for “pasta” and apply filters, I get relevant suggestions from my recipe coach:
Or when the calendar UI doesn’t do anything. A single sentence and a screenshot is enough to get the AI to fix the issue:
So with that issue fixed, I move on to other aspects of the second milestone of my project, meal planning & tracking.
Again, this phased approach to building out the prototype serves me well in that I can spend time refining specific aspects such as the width of the calendar columns (making sure that the meals selected are actually readable).
I then ask the AI to implement the third and final milestone of the project, adding gamification and grocery delivery integration features.
At a first glance, the”progress” section does what it says on the tin: providing an overview of the user’s personal progress. However, it feels very static and so I ask the assistant to come up with suggestions to make the feature more engaging, which it does quite nicely actually.
I definitely realise that I should update my project instructions and prompts to make sure that the buttons are clickable. When I look at the code for “Plan tomorrow” and “Rate last meal” there is no line to say “render content” or “on click handler”.
When I focus on the final milestone of my PRD, “Grocery Integration”, the interesting piece is me asking the AI to integrate with one of the grocery delivery services to see how ordering from a shopping list would work.
The assistant runs into an error, and I open the preview version of the project in a separate tab so that I can get an error log on the prototype and not on Bolt itself. I ask the assistant to review the error log first and present a plan to fix the issue.
Main learning point: A nice first prototype (and plenty of learnings) here.
