🪄 Vibe Coding the Concert Archive

When I was young and started going to concerts, you needed physical paper tickets to enter the venue. Forget having your ticket on your cellphone—there were no camera phones! Like many concertgoers before me, I kept my ticket stubs. That lost its charm once Ticketmaster started forcing us to print tickets at home. Being the spreadsheet-loving nerd that I am, I transitioned my concert archive to a Google Sheet. But for some inexplicable reason, I didn’t track the dates—just the city, venue, and bands that played.

In my weird 90s youth, the music you listened to was given way too much importance, and that has somehow led me to think that the concerts I’ve gone to represent some kind of unique lens into who I am. Naturally, when I decided to make this website, including a page listing all of the concerts I’ve seen felt like a worthwhile addition. It also seemed like a good opportunity for some 🫲🏼vibe coding🫱🏼.

Building the page with vibes

This would be a good spot to include the exact prompt that I used, but I seem to have deleted it. Whoops! But it’s still interesting to talk about.

I have a Claude Project for this website, which gives me the ability to sync the GitHub repo, which Claude accesses through RAG. Since it has access to the whole repo, it can see the layout of other pages, the design and styling, etc. So when I told Claude that I wanted to make a concert archive page, I could trust that what it created would fit in with the rest of the site.

I discussed with Claude how we could make it work, and asked for the best option given that I already have the data in a Google Sheet. I wanted the page to update automatically, but it didn’t have to be in real time. Since I already have daily rebuilds turned on, Claude suggested downloading a CSV of the spreadsheet at build time. With that figured out, it went ahead and built the page.

The very first draft came with components for charts and statistics, and table views for concerts grouped by year. Of course, at this point, none of the concerts had dates, so nothing displayed. We went through a bunch of revisions: handle concerts where the date is undefined; don’t over-count concerts where multiple bands played (a festival with 10 bands is still just one concert, as far as statistics go). The charts and tables required horizontal scrolling on mobile screens, so we corrected that, and then tweaked things for dark mode. We improved the charts too, making sure every bar in a bar chart showed a band name (for some reason it started out showing every other one).

A look at the charts in the archive.

A look at the statistics and charts in the archive.

Search “Agents”

At this point, I felt like I needed to fill in the dates. It seemed like an interesting (read: difficult) challenge for LLMs.

In my experience, there was a limit to the number of searches Claude and ChatGPT will do in a session. They don’t seem to like doing big batches of work (at least in the chat interface). I would give them the CSV of concerts without dates and ask them to search. The results were mixed. They generally did surface some surprisingly difficult answers, having landed on some local culture magazine or college newspaper listing upcoming concerts. But they struggled to find shows for still-active bands. The search terms were sometimes “Band Name City Venue Concert,” which would frequently return 10 results about some upcoming show. I tried to coach it on how to do better, and gave it context on when I lived in each city to help it narrow things down. Often it got stuck and would keep searching for concerts it had previously failed to find answers for.

It was fun when the LLM was successful, but time-consuming and often fruitless. It probably found about 40% of the answers. I managed to find a lot of the dates just by searching band names in my Gmail and Google Calendar archives.

Towards the end of manually searching on Google, I landed on what I probably should have done from the start. Setlist.fm has a very functional search interface where you can make structured queries (e.g., “artist:(Nails) venue:(Forum) city:(Inglewood)”). In hindsight, the LLMs probably would have had much more success just running those queries against Setlist’s archive. Useful lesson learned.

Adding Visual Interest

With the dates backfilled, I decided that the overall page looked a little bland and needed some concert photos to make it more engaging. I proposed a data format (a dictionary of arrays indexed by year) in my prompt, but otherwise left Claude to do its thing. I just had to export some photos and provide years and captions. (I’m still backfilling—it’s wild just how much worse the image quality is as the photos get older.)

It wasn’t 100% pure vibe-coding, in that there were a few times where I did look at the actual code. I tweaked the very first output to match the real column names in the CSV, for example, but I didn’t change any of the code for grouping and ordering concerts, preventing duplicate counts, etc. All of that was handled by Claude with me just telling it what needed to change via prompts.

Vibes Are Easy

While I was writing this, I decided I wanted to add a bar chart showing the number of concerts each year. I started Claude Code in my terminal and said: Add a chart to the /src/pages/concerts.astro page listing the number of concerts by year. (Use the methods in the existing code to avoid double-counting concerts where more than one band played the same event.) And it did. I needed one more prompt to change the background of the tooltip, which for some reason was fully transparent, and to capitalize the ‘C’ in the Concerts label. I didn’t have to spend any time reading documentation for charting libraries. I just asked Claude and got what I wanted.

Reflections

Overall, it’s a really fun page to have on the site, and I enjoyed going back through the list and remembering those concerts (some of which I couldn’t even 100% recall going to). The whole process demonstrates what I appreciate about vibe coding and working with LLMs in general. I never would have taken the time to do the front-end coding to make this page. Instead, I could focus on what I want rather than getting bogged down in implementation.

The concert archive turned out to be both a nostalgic trip through my musical history and a great example of how AI tools can handle the tedious parts of development, letting you focus on the creative and meaningful aspects of a project.