Reluctantly vibe-coding a site redesign
I was hoping to dodge the topic of AI on this blog for as long as possible, but here we are. You can barely turn your head without bumping into it. Over the past couple of months, I can count three different friends I've met up with where AI ended up coming up, even when we were talking about stuff not directly related to work or tech, and we rolled our eyes when we realised this.
Yet I had a problem, and I was curious about whether AI could solve it.
The frontend app for my side project, Named After Women, needed updating. Not only was I unhappy with the design, it had also been built with Create React App, which has been unmaintained for years and officially deprecated earlier this year. I wanted to try out Next.js for the website instead.
For this very blog, I've actually been using Next.js since 2022, but in the case of Named After Women, it would be quite a learning curve for figuring out all the framework's different peculiarities. For any old low-stakes side project, fine, I could have taken the time to get stuck into that. But I needed a new website, fast, because people already knew about my project and wanted to visit it, with a new design, which was an overwhelming prospect.
Enter v0. Vercel, the company behind Next.js, have created an "always-on pair programmer". Looking at the homepage, it's easy to see the appeal: you see that people have vibe-coded calendar apps, data viz, point-of-sale interfaces, even a retro Microsoft Paint clone. Who wouldn't want to create whatever their heart desires just by typing in a few words?
So I swallowed my pride and asked v0 to make me a static page with a filterable map. I downloaded the code and ran it locally. Here are some of the issues I noticed immediately:
- Map data loaded, but component broke the page; had to swap it out with the one I'd previously built for the project
- Had to disable the dark/light mode toggle as it caused rendering/hydration problems
- React module imports, even though this hasn't been necessary since React 17 (almost five years ago!)
- Components written as JavaScript functions instead of const/arrow function or (typed) functional components
- Later on I noticed vulnerabilities such as unsanitised HTML inputs in components that weren't even being used — careless is not even the word!
- Just generally bloated and overengineered
As you might have guessed by now, there's a considerable amount of refactoring and rejigging I need(ed) to do in order to get this codebase into a state that I find satisfactory.
I don't know, maybe some people find this exercise unproblematic or even fun. Apart from the security issues, my biggest issue with it is that so much of the app is not my work. I value integrity and conscientiousness above all. If someone were to go into my repository and ask me what this file means, or why I made this decision, I wouldn't necessarily be able to answer. I'm embarrassed that they might think the bad code is mine — or rather, that they they might be able to suss that a robot blatantly wrote it.
In the end, maybe using AI means you aren't having to think about how to build the app from the ground up, but I don't... believe this is a good thing? Not only because my understanding of why/how it works is diminished, but also because I have to spend so much time improving it and learning about it!
You can tell these agents to produce a scaffolding that you can later make changes to and that's fine, but I don't buy that this is a long-term win. And that's why I am not super worried about being replaced by a robot, at least not in the near future. I understand I need to keep up a little, learn how to make good prompts, and so on. I already hold my nose and occasionally turn to ChatGPT on the job, trying to set aside my concerns about the environmental and social consequences.
For now, the repo to my website is private. I'm going through it with a fine-tooth comb and trying to leave my mark on it, make it human...