I opened up my email to see that an AI support agent replied back, asking me to use a Chromium-based browser. So I downloaded ungoogled-chromium and re-ran the stupid prompt again this time frfr. After another 50K tokens, we got the same vite error.

bolt did generously ask if it wanted me to attempt to fix it, and it ate up 20K tokens trying to run npm install; and still left me with another error, this time claming that ../app.css was not found. And indeed it wasn't, in fact, there was not a single CSS file in the project.

I didn't want to waste any more tokens, so I copied an app.css file from one of my other projects that used shadcn-svelte.

This is what it came up with:

Apart from the obvious contrast issues (which may have happened because of a missing app.css), the rest of the page looks awesome!

Here's how it looks in light mode:

There are a few other issues that I found, like the Navbar not having a background, so text below it would still be visible, and I'd have liked bolt using more of that "glassy" design in other places too.

For now, that can wait, because I want to see what bolt had generated yesterday.

Unboxing yesterday's lost memory

Let's take a look at what we might have possibly missed out on. I had downloaded the project generated by bolt yesterday.

Running bun install gave me a few alarm bells:

bun install v1.2.15 (df017990)
warn: incorrect peer dependency "[email protected]"

warn: incorrect peer dependency "[email protected]"

warn: incorrect peer dependency "[email protected]"

+ @sveltejs/[email protected] (v6.0.1 available)
+ @sveltejs/[email protected] (v5.0.2 available)
+ @sveltejs/[email protected] (v2.21.5 available)
+ @sveltejs/[email protected] (v5.1.0 available)
+ @typescript-eslint/[email protected] (v8.34.0 available)
+ @typescript-eslint/[email protected] (v8.34.0 available)
+ [email protected]
+ [email protected] (v9.29.0 available)
+ [email protected] (v3.9.2 available)
+ [email protected]
+ [email protected]
+ [email protected] (v3.5.3 available)
+ [email protected] (v3.4.0 available)
+ [email protected] (v5.34.3 available)
+ [email protected] (v4.2.1 available)
+ [email protected] (v4.1.10 available)
+ [email protected]
+ [email protected]
+ [email protected] (v6.3.5 available)
+ @supabase/[email protected]
+ [email protected] (v2.8.0 available)
+ [email protected]
+ [email protected] (v0.0.19 available)
+ [email protected]
+ [email protected] (v1.0.8 available)
+ [email protected] (v0.0.6 available)
+ [email protected] (v1.0.3 available)
+ [email protected] (v2.26.1 available)
+ [email protected] (v3.3.1 available)
+ [email protected] (v1.0.0 available)
+ [email protected]
+ [email protected]

All the dependencies are major versions behind! We're also using Svelte 4, and not Svelte 5, so I'll probably have to migrate all that code myself, which sucks.

Anyway, let's see how this one looks:

Quite similar, but I did like this one a bit more. We'll certainly be using some inspiration. This one actually came with an app.css, and putting that file in today's project makes it look much better! It fixed the contrast issues and the navbar's background. I should've asked bolt to create it for me, but half my tokens for today have already been used. Every time I send a message, it eats up 20K tokens.

bolt also did not add integration with Supabase, so that's another thing I'll have to do.

Re-styling

I bit the bullet and asked bolt to regenerate the app.css file.

SIXTY THOUSAND tokens and FIVE HUNDRED lines of CSS later, we have:

Let's work locally

I set up the GitHub and Supabase integration on bolt, which created a repository and pushed the project there so I could take a better look on my machine.

The first thing I notice is that bolt, while having used SvelteKit, has used a README that claims that the project was not built with SvelteKit, which was pretty strange.

The next thing I noticed is that bolt committed the .env file which contained Supabase keys, and it also committed SvelteKit's internal .svelte-kit folder, both of which should not have been committed. I fixed those issues by running the following commands:

# --cached removes the files from the `git` index, but not from your disk
$ git rm --cached -r .env .svelte-kit/

$ echo -e "\n.env\n.svelte-kit/\n" >> .gitignore

$ git add .

$ git commit --amend

$ git push --force

This again shows that you should be very careful with AI, and double-check all the code it produces.

I fixed a few other issues I found, like an invalid tsconfig, some broken styles, and I bumped the dependencies and pushed the code to GitHub, from where bolt automatically pulls whenever there are any changes.

I was too lazy to manually fix broken peerdeps, so I nuked the package-lock.json and installed the latest version of every dependency using npm i. I've been using bun and pnpm to manage dependencies for so long; using npm feels like a kick to the guts. Unfortunately (from what I was able to find online anyway), bolt (or Stackblitz rather) supports only npm for dependency resolution.

There were two major changes left to do now: Migrate from Svelte 4 to Svelte 5, and migrate from Tailwind 3 to Tailwind 4. This is another bad side of AI. Since its training data cuts off quite early, it isn't kept up to date on the latest versions of packages, and it sucks to waste so much time migrating a brand new project.

I could have stuck with Svelte 4 and Tailwind 3, but that didn't bode well with me, so oh boy, here we go!

And after two long hours, and changing a few more things, like the scrollbar styles, I've finally migrated the application to Svelte 5 and Tailwind 4.

Deploying on Netlify

I wanted to deploy the application to Netlify, so that I can get a free domain from Entri. I clicked on the blue "Deploy" button in bolt, and it hung on npx vite build for like 30 minutes. The build command did complete successfully, but it wasn't exiting the process, instead, it was just hanging. The build command did complete and exit successfully locally. Stackblitz uses a shell called jsh to run commands on web containers, that's probably the thing causing the issue.

Or maybe it was my fault for choosing SvelteKit instead of NextJS and React.

Well, after loads of debugging, including starting a blank SvelteKit project on Stackblitz and adding dependencies one-by-one until I find out what breaks the build, I see that it was upgrading to tailwind v4 that made the build command hang indefinitely, irrespective of the adapter.

Well, so much for the time I spent on migration. It's time to rewrite git history again!

That's about five hours (not all the time was spent on this application, mind you, since I do get distracted quite easily) that I'll never get back.

I did test this on NextJS with Tailwind v4 on Stackblitz, and it built properly and exited the build process, so I guess this issue affects only Vite unfortunately, which quite sucks, because AFAIK, Stackblitz has been a big sponsor of Vite in the past.

Anyway, after undoing hours of work (and creating one GitHub issue), we finally have a deployed website, it should be live here.

Unfortunately, I've stumbled onto a big problem. The TLD .today is not offered for free on IONOS by Entri. I should have checked earlier, but for now I'll have to pick another domain (and another name) for this project.