Alvin Dizon

Trying out Vibe Coding

I have always wanted to build a personal website, but never got enough time and motivation to actually do it. But with the advent of AI-assisted coding or more commonly known as "vibe coding", I realized I should try building my personal website via vibe coding.

Enter v0

So while snooping around our company's Slack channels, I stumbled upon v0.dev, an AI-assistedwebsite builder that generates code using modern web frameworks. At that time our company was holding a hackathon, and other teams have been using v0 for rapidly prototyping ideas. I gave it a spin and entered the following prompt:

I want you to build a personal website that contains a blog, an about section that contains links to Linkedin, Github, and a link to download resume. This website should be updatable via editing markdown, so something like a static website. It doesn't have to be fancy.

After entering, v0 started running, showing its progress in building all the necessary code, and after a few moments, it created a fully functional website that has the features I requested. It even added a toggle for dark mode. It generated some unnecessary code, and I had to delete them, but after that, all that was left to do was to tweak the auto-generated blog posts and deploy the website, or so I thought.

Technical difficulties

Curiosity got the better of me, and instead of deploying the newly created website via the "Deploy" button, I wanted to run the website locally and eventually deploy it via Github Pages, so I downloaded the code from v0.dev, and researched how to deploy it locally. After a few missteps, I found this Reddit post, outlining how to get a local copy of the code in v0.dev. The posts outlines the following steps:

  1. Install nextjs via npx create-next-app@latest
  2. Navigate to newly created directory, and setup shadcn via npx shadcn@latest init
  3. Copy command from "Add to codebase" and run it

After following the steps outlined in the said post and entering npm run dev, I can finally run the website locally, but quickly found out that some stuff were not working. For one, markdown content was not being rendered correctly--in contrast, the preview shown v0 has markdown content being shown perfectly.

Human (and a bit of AI) to the rescue

As I've experienced previously when dealing with AI-generated code, one still needs to do some extra legwork in order to make AI-generated code fully functional. So I opened Cursor (a VSCode fork and my IDE of choice for anything outside Android and iOS development), and started tweaking lines of code to see how everything fits, and found that there are two problems:

  1. The code for reading .mdx files was not working.
  2. The code for rendering markdown content was not working.

I learned that the code generated by v0 for reading .mdx files used gray-matter, a parser for "frontmatter" content. Frontmatter refers to content that has metadata formatted as YAML, commonly used in static websites. The solution was to install gray-matter via npm.

With the first problem solved, I turned my attention to fixing the second problem. This time, I had to resort to use Cursor's chat feature and started asking how to fix the broken markdown rendering code. The answer I got basically told me to the following:

  1. Install the official Tailwind CSS typography plugin via npm install -D @tailwindcss/typography
  2. Create a tailwind.config.js file
  3. Restart development server

In reality though, only steps 1 and 3 are needed. I found out that newer versions of Tailwind do not rely on a tailwind.config.js file for customizations, but instead, customizations such as plugin imports can be done in the globals.css file directly. See this link for more details. This means that after installing the typography plugin, all I had to do was to add this line:

@plugin '@tailwindcss/typography';

to the globals.css file.

I also accepted Cursor's suggestion to enable Github-flavored markdown, and after doing that, markdown content was now being rendered correctly.

Realizations

v0 greatly accelerates building software and makes it easier for developers and non-developers alike to see their ideas come to fruition, but I can't help but feel like an impostor, it feels like I "cheated" my way to building a website. I do not possess the necessary knowledge to comprehend most of the Typescript code that was auto-genenerated. Since I do not know much about modern web development, I also had to look up a lot of the terms I encountered while setting up the code from v0 locally. Despite this, I feel optimistic that I will get the hang of things, as I felt the same way when I started learning Android development. Vibe coding can increase productivity and speeds up learning about web development, but grasping the technology and concepts behind the auto-generated code takes time.