Bolt Hackathon - First Week Progress

TLDR;

I'm taking part in the Bolt.new hackathon. First week playing with Bolt has been a fun learning opportunity. It's pretty cool for quick prototyping and small projects, but there do seem to be a lot of quirks and small issues that can grind things to a halt if not careful.

I do find that being a web engineer is both helpful and a hindrance to the vibe coding process. Hopefully the practical nature of the project I picked for this will help keep me away from procrastinating over perfecting the code.

Hackathon Prep

I’ve been coding with AI for quite a while now. Mainly Cursor + discussions with ChatGPT, so it’s not like I’m exactly the target audience for the Bolt Hackathon. Yet, I have been thinking about a little personal project for quite a while and it seemed a good fit. Well, I had a few ideas actually, so brainstormed a bit with good ol’ Chat to way up the pros and cons of pursuing each given the time constraints and Hackathon requirements.

I asked it a few leading questions to load the context and then followed with:

Ask me questions - one question at a time until you have enough context about my interests and strengths that you could make two obvious recommendations and two non-obvious recommendations.

After that I whittled the suggested ideas to:

• Worksheet Wizard - something very close to what I started manually doing for my son, customised daily worksheets
• Story Builder for Two (Parent-Child Co-writing Tool) - write story together with the AI as an idea spark and prose gap filler
• Write Mode – A Focus Ritual App for Writers - AI sets the mood and timer, while you do the writing

ChatGPT even gave me a nice comparison table :D

The Story Builder idea was interesting, but also didn’t feel like something that had a clear differentiator from other similar projects. Some of the functionality also could become part of the expanded Worksheet Wizard app.

Similarly, at first I got quite excited about Write Mode, and I still think there’s something there, but a lot would hinge on getting a good music API that doesn’t cost an arm and a leg. Mainly because while the concept is fun, I’m not sure how much of a real need it covers for people to pay for it. So maybe another time.

But with the Worksheets I’m already solving a problem for at least one person (me!). And there’s a few interconnected ideas that I can grow the project with. So we have a winner 🥁

The project:
A progressive web app focused on dyslexia-friendly daily worksheets and literacy tools for early learners (KS1+) with manually created downloaded resources and tools like a maze generator, lined pages generator, etc.

Hackathon Start

I’m glad the hackathon is 30 days long, as while I’m on a self imposed mini sabbatical, there’s still family and school life to deal with. I knew ahead of time I would not be able to start on the opening weekend as we had a family trip planned for those days. But that was okay, I did some of the planning as you can see above ahead of the kickoff and considered those first few days as noodling time (Yes, I have been watching too much Mythic Quest recently).

This was probably for the better, since it gave me time to follow other people's teething issues, wait for my builder pack to arrive, and see a few announcements of extra benefits post day one.

Before jumping into code, or no code in this case, I did read up on the platform and some of the best practices for it, since the free tokens are limited. I've also followed people's comments, questions and complaints on Bolt's Discord.

It did seem to be a good idea to have a basic sketch of what you want to build before jumping into the prompting. So again, I turned to ChatGPT to make a basic PRD (Project Requirements Document).

This helped me clarify what I did want to build and what should be in scope at this stage.

Of course, the project also needed a name. Some obvious choices were already taken, so I went with a bit more abstract one, that is less focused on the initial offering and more of a fun brand: My Dragon Library. Maybe not the most SEO friendly choice, but I wanted to have some fun with it.

Design Prep

Okay, I'll admit I got way too distracted during this step...

Once I had my mini PRD I used that same chat session to get some ideas for detailed Midjourney prompts.

There were some cute results, but one problem I did run into was that Midjourney really wants to tile things at an angle. Clearly my prompt foo here was failing. Still, it was definitely good enough for a mood-board and colour palette inspiration.

I had a few goes at a logo too, but I'm still not really happy with any of the options - too many details and they don't scale well :/ - so that's a TBD for the rest of the month.

All in all on the design front I definitely spent too much time (and tokens) looking at adorable dragons. Ooops.

First Impression of Bolt

As mentioned above, you want to have a bit more detailed prompt than say 'build me an app for X'. Though outside of a hackathon where people are trying to be unique, this might be a good starting point. If that's the case, you can use the 'Enhanced prompt' option. It will expand whatever you already typed into a more detailed prompt. It's also good for inspiration if you don't know where to start with prompting Bolt and you get to edit the text before finally running the prompt.

What you get from the initial prompt can be pretty impressive. Although I did run into problems with ungenerated files in my oneshot attempts that when imported lead to errors on first run. These were generated just fine after hitting the 'Fix errors' button though.

Another snag I hit on one of my early runs was the AI trying to generate an svg logo and timing out in the middle of that processed leading to an unusuable state.

As I didn't specify my stack exactly it picked Astro for my first attempt. Spoiler alert, I did end up circling back to this choice after trying out a few other options.

Sadly I can't easily revert to the original state of the project, so the above is a slightly cleaned up version of my first attempt with the custom logo added.

It's both impressive and a bit underwhelming at the same time. It was functional, decently laid out and with relevant boiler plate content thrown in. I've resisted looking at the code, but at a glance other than the million Tailwind classes everywhere it didn't look too bloated. At the same time, given the standard Bolt project prompt included in the Settings:

"For all designs I ask you to make, have them be beautiful, not cookie cutter. Make webpages that are fully featured and worthy for production."

Beautiful and not cookie cutter...? Well, this ain't either.

Then again, if you strip most sites from images and little flourishes things do tend to look kind of basic.

Second attempt - the One with Better Output

While my natural instinct is to iterate on what I have, I wanted to give Bolt a fair shot with an updated prompt. It also felt more in the spirit of the no coding hackathon to revise my initial instructions and let Bolt generate a new project.

In my second attempt I tried to be more specific about colours, page layout and the tech specification. Interestingly with the added details it chose a vite+ts tech stack rather than Astro.

A note here, that as I'm gathering screenshots and notes for this post, I did run into an issue running this version of the project. When open it now gives an 'Unable to connect to port 5173' error in the preview window and no errors in the console.

With my dev hat on I tried clearing cache, killing node_modules and manually restarting the server in the terminal also with no errors, but with no success. If anything with the '--host' option it would load the preview from another open Bolt tab. Eventually I was able to get the screenshot by exporting the project and running it locally. But it does make me wonder about having multiple Bolt projects open at the same time being an issue.

Third Attempt - the One with MDX Setup

I can't remember what exactly prompted me to restart, but then came v3.

For those keeping track this was vite+express I also asked for a Supabase integration.

Sadly looking back at this iteration I run into another Bolt interface issue - I'm not able to scroll back the chat history in Bolt to the very first prompt. And the chat history is not part of the export, which would have been a nice way to archive the discussion.

With this version Bolt put my blog posts in Supabase, but I realised I wanted them in MDX format locally. After a few goes at switching I had to again put away my developer hat and just let the AI go again with the updated assumptions.

Fourth Attempt - the One with the Broken Tailwind Version

This one came out as vite+ts again. While messing around with Tailwind I thought something wasn't working because of a version mismatch, so tried to update to Tailwind v4.

Don't.

Bolt was not happy with it and trying to revert the change was more than just a package.json revert, which I didn't want to waste tokens on.

I could have dug into the code in the 'Code' tab on Bolt, but it's both familiar and annoyingly lacking a lot of the day to day conveniences that come with VSCode/Cursor. It's okay for a quick touch up or some html/css tweaking, but any more serious work outside of a hackathon I'd be straight back in Cursor.

Fifth Attempt - the One with the Theme Switcher

When spinning the next version up I wanted to be more explicit about the stack so I specifically requested NextJS. I thought I've seen it mentioned as one of the supported frameworks and it is mdx friendly so a win win.

I have to also admit that it's around this version I went down the rabbit hole of trying to find the perfect background image and exploring a few alternative palette options. Really need to work on not getting distracted by random design tweaks.

I couldn't quite decide between the green nav bar set and the lighter version of the earthy colours. Because of this v5 got a detailed spec for the 2 colour sets and a request for a working palette switcher.

Bolt really helped with the quick prototyping and testing here. What it wasn't so great at (and same goes for the other chat AIs actually) was getting that curve at the bottom of the hero image. In fact it was sometimes so insistent at reverting to a single (albeit broken clip path) that one time it just randomly erased the working version 🙈

Token Scrooge

One thing that I was impressed with is that despite all these restarts and a bit of tweaking via the prompts I haven't really burnt through much of the 10M free hackathon tokens yet (I still have 8M left at the time of writing). As this was a complaint I've seen on Bolt's discord it was something I was keeping my eye on.

There's a few things to keep in mind when trying to be frugal with tokens.

Balanced prompts
While you don't need to overthink everything you type, being precise and keeping the change scope small definitely helps.

Handling errors
Bolt will from time to time run into errors. In itself this isn't the end of the world and often the 'Fix issue' button will solve these for you. But it's good to check out the error details before clicking the button. This might be easier for a dev, but for obvious and small issues a manual quick fix can save you tokens and the AI from getting stuck in a loop.

Consult other AIs
Personally I tend to do exploratory discussions or technical questions outside of Bolt. This way I can come back with a better formulated request for changes.

Use Devtools
Another more dev focused tip, but if I'm exploring say whether I want rounded or square corners in my design, I wouldn't waste a prompt on this kind of request. It's easy enough to mess around with the page using the browser's devtools. Though this is maybe getting away from pure vibe coding as such...

Smaller Codebase
This is partially about token usage, and partially about AI efficiency. If your whole project can fit in the context window you're more likely to get better results.

In fact some of the above are what made me reconsider NextJS in the context of Bolt. I kept getting odd webpack cache errors with it and the amount of files seemed a lot higher than the other options I tried. For a prototype size project I wanted a limited amount of components and elements.

Intermission with Stitch

Around this time I got a shiny email from Google about all their new toys. One of the mentioned tools was Stich. Why yes, of course I would like to play around more with the site design... 😂

My impressions so far are a bit mixed.

✅ The good

• It's a pretty solid base to quickly get some common elements on the page
• Figma export* - as someone only dabbling in design it gave me a decent Figma export. Not super advanced though as I didn't see any components.
• Multiple screens from one prompt

❌ The not so good

• The Standard Mode does not take images as part of the prompt* - so no quick layout or palette suggestions
• The built in theme options are severely lacking - basically just one accent colour
• The layouts are pretty basic - I tried to get items to visually overlap in one version and the AI completely ignored the instructions (well, it claimed it followed them while doing nothing, thanks for the gaslighting Gemini)

*The Experimental Mode does offer the option to include an image, however then you have no option to export to Figma 🤦‍♀️ The results felt a bit more polished though... if you get a good run.

Below from left to right: inspo image, good mocks, other inspo image, not so great mocks.

Sixth Attempt - the One with Astro Again

After running into issues with NextJS I did take a moment to think through what the project needed. I realised that especially early on, the main focus will be on the blog and downloadable content, which means I don't need as much app- like functionality. So I decided to go with Astro for this iteration. I've not had much experience with it before, so it was also a nice opportunity to try out a new tech (there's that dev itch for new shiny tools).

Over each iteration I tweaked my starting prompt bit by bit. The previous prototypes helped me narrow down:

• elements I wanted on the home page
• what page stubs to ask for
• specific palette colours

I also gave Bolt snippets for the svg curve for the hero image in the initial prompt, but it decided to ignore them in favour of it's own version (bad Bolt!). So had to manually adjust those.

Current work in progress.

I've settled for the lighter variant of the theme in the end. But kept some elements from the darker version - white featured card and orange primary colour.

The Daily Worksheet heading banner I'm still not 100% decided on. I had Bolt add the styles for me, but it was a bit clunky so ended up using this one as reference instead.

Next

The immediate todo list:

• decide on site fonts
• Daily Worksheet card positioning for desktop and mobile layouts
• draft Daily Worksheet copy
• layout Daily Worksheet card elements
• finalise hero copy
• draft first post

I'd like to publish an initial version of the site soon, so will focus more on the content next week and then spin up separate Bolt projects for the Tools.

This has turned into quite the essay (congrats and thank you ❤️ if you've read this far!). I'm going to aim for smaller updates next, time allowing, until the end of the hackathon. :)

Continue reading about Week 2.