Vibe Coding Isn't Magic - But It Made Me a Better Developer

I Tried Vibe Coding. Here's What I Learned.

For the past few weeks, I kept hearing people talk about this thing called Vibe Coding. It sounded cool, but I had no idea what it actually was. Was it just coding with lo-fi beats playing in the background? Was it a new framework? A mindset? Turns out, it's more of a workflow and philosophy than anything else.

So, I decided to give it a try.

I wanted to see what it was like to build a small project from scratch while letting my vibe guide the process.

Setting the Stage

To test this out, I needed a project. Something small enough to finish in a few days, but big enough to challenge me and push me out of my comfort zone. That's when I remembered a GitHub profile I had seen:
 👉 sciencepal's GitHub profile

They had a chess graph embedded right in their README, pulling live data from Chess.com. As someone who plays chess regularly, this immediately caught my attention.

That was the spark: I was going to build a Chess.com stats card for GitHub READMEs.

The Idea

Here's what I wanted this project to do:

• Fetch my current Chess.com stats using their public API
• Show my ratings for Daily, Blitz, Bullet, and Rapid games
• Display my profile picture and current league
• Package all of that into an SVG so I could embed it in my GitHub profile

Sounds simple, right? Yeah… not quite. I had no idea how to do any of these things:

• Work with the Chess.com API
• Render dynamic data into an SVG
• Host and serve the card in a way that works on GitHub
• Deploy a project with Vercel
• Create API routes from scratch

But that's what made it the perfect "Vibe Coding" project.

Getting Into the Flow

The whole idea behind Vibe Coding is to stop overplanning and just start building with AI. You tell AI what to do and AI spits out the code you need.

So that's what I did.

I opened up ChatGPT and typed my first prompt:

"Create a chess card stat app that pulls from the Chess.com API and outputs it to an SVG."

Boom! ChatGPT gave me a sample API call in JavaScript and told me how to run it. I tested it in and saw the data coming through. So far, so good. The first version worked! Kinda. I was able to get the name and picture, but the ratings were not showing.

I asked for a few tweaks, but this is where things started to go off the rails.

When AI Gets in the Way

Instead of tweaking the code, ChatGPT rewrote everything. The new version didn't work. I couldn't figure out what broke. I asked it to generate another version, but that didn't work either.

I showed it the original code and asked it to iterate on that and yet it still didn't work. At this point, I was frustrated. I felt like I was fighting with the AI instead of coding.

So, I took a step back, looked at the original working version, and started reverse-engineering it. This turned out to be a great move. By digging into the logic, I started to understand the code. It wasn't about copying and pasting anymore, it was about learning.

That's when I remembered: AI should be a learning tool, not a shortcut.

Breakthroughs and Setbacks

Once I had the API part down, it was time to render everything into an SVG. This part was tricky. I didn't know how to generate an SVG dynamically with data. So I asked ChatGPT.

It gave me an SVG template, but I didn't understand what it was doing. I took a break.

The next day, I started Googling more about SVGs and realized something huge: SVGs are basically HTML with a twist. You can style them with CSS-like rules and treat them almost like regular markup.

That changed everything.

Suddenly, I could look at the AI's SVG output and understand what it was doing. I started tweaking the styles, moving elements around, and customizing the layout.

Time to Deploy

With the card working locally, it was time to put it online. I had heard a lot about Vercel, but I'd never used it before. I figured it was worth a try.

I asked ChatGPT how to deploy a basic project to Vercel. It gave me step-by-step instructions and it worked! Almost.

The site deployed without any errors, but the SVG wouldn't render. After some back and forth, ChatGPT explained that the image needed to be served through an API route if I wanted to embed it properly.

This was all new territory for me. I had never created API routes or serverless functions before. But again, with some help from AI and some trial-and-error, I got it working. I moved the logic into the /api folder and, just like that, the card appeared.

The final hurdle was getting my Chess.com profile picture to render. It turned out that I needed to embed the image directly into the SVG using Base64 encoding. I asked ChatGPT how to do that, and it gave me a neat little function. Boom! Everything was working.

What Vibe Coding Taught Me

This project took about three days. It wasn't smooth sailing the whole time, but I learned so much.

Here are my biggest takeaways:

1. AI isn't magic but it is powerful

It's tempting to let AI code entire projects for you, but that usually leads to confusion and broken code. The real value is in having it explain concepts and fill in the gaps.

2. Work in small, meaningful chunks
The smaller your prompts and changes, the better results you get. Instead of asking ChatGPT to "build a full chess card," I got better outcomes by asking things like "How do I embed an image in an SVG?" or "How do I fetch data from this endpoint?" AI is just Google with less steps.

3. Learning > Speed

When I tried to go fast, I hit roadblocks. When I slowed down to learn, I made real progress. The best part? I came out of this project with actual skills I can use again.

4. You still need to understand your code

Vibe Coding is about flow, but not blind trust. Let the AI help you learn, not do everything for you. Understanding your own code is what makes the process satisfying and sustainable.

Final Thoughts

Vibe Coding isn't a silver bullet. You're not going to build the next billion-dollar app overnight by prompting an AI. But you can use this method to unlock creativity, stay in flow, and learn faster than ever before.

For me, it's not about replacing my skills with AI it's about enhancing them. AI is a powerful tool.

I'll definitely keep using this approach for side projects, personal tools, and experiments. I'll just do it with a "learn-first" mentality, not a "solve-this-for-me" mindset.

Check out the project here.

👇 Have You Tried Vibe Coding?

I'd love to hear your thoughts. Have you tried building a project this way? What worked? What didn't? Would you do it again?

Drop a comment below and let's talk about it 👇