From Vibe Coding Newbie to Builder: A Mindset Shift

This article is for those who have already started building and want to solve practical implementation problems!AI If you are an AI beginner, my previous blog post on how to breakdown needs will be a smoother start

I'll never forget how, on June 5th, when I kept going back and forth with Claude, trying to solve my website's SEO performance issues. I was obsessed with getting my PageSpeed score above 99, and I pushed myself until almost 11 a.m. the next day before finally resolving the bottleneck.

In my previous post Vibe Coding for Beginners: How I Built My Website from Scratch with AI, I shared the process of building my site from scratch, and the mindset I recommend for Vibe Coding newbies. This article focuses on concrete execution details and the solutions I found when facing problems. (Here's a Perplexity conversation I used to organize my thoughts.) In short, my Vibe Coding journey was fueled by coffee and AI.

Project Overview

After deploying Ghost.io on Zeabur, I used Claude.ai to break down requirements and generate code, then integrated various tools (Google Analytics, Search Console, etc.). Here's the detailed project overview:

- **Frontend Foundation & UI Component Development**
    - Update global styles (globals.css), create a new color system
    - Add Layout component, integrate Sidebar and homepage structure
    - Implement mobile-first sidebar and responsive design
    - Refactor homepage and main layout (layout.tsx)
    - Configure Tailwind CSS, optimize the design system
- **Content Integration & Data Flow**
    - Connect to the Ghost API, create data fetching functions
    - Define TypeScript types, set up environment variables
    - Build article listing and dynamic routing
    - Support Ghost native blocks (YouTube, Gallery, Button, etc.)
- **SEO & Structured Data Optimization**
    - Set up SEO (metadata, sitemap, robots.txt)
    - Dynamically generate sitemap, add structured data
    - Optimize OG images, favicon, social media previews
- **Tracking & Performance Monitoring** (shifted to the end)
    - Add Google Analytics 4 tracking code, set up custom events and conversions
    - Submit sitemap to Google Search Console
    - Test and verify GA and SEO results
    - Lighthouse, PageSpeed Insights, and accessibility optimization
- **Deployment & Automation**
    - Prepare deployment files, set up GitHub Actions for CI/CD
    - Configure Zeabur platform, environment variables, and domain
    - Continuously test API connections, content updates, OG image display
- **Advanced Optimization & Maintenance**
    - Unify metadata system and data services
    - Implement API caching and revalidation to ensure fresh content
    - Continuously adjust design consistency, performance, and accessibility

Vibe Coding Challenges and AI Solutions

I shared how to break down requirements and map them to features in my previous article. Here, I will dig into the "real developing issues", "troubleshooting & debugging process with AI," and "outcomes."

UX Interaction Details & Mobile-First Challenges

Ensuring a consistent browsing and interaction experience across devices was a major challenge during the "Frontend Foundation & UI Component Development" phase. Even with references as a guide for interaction logic and visual style, I still had to make adjustments due to frontend framework limits.

Sidebar Collapse Issues

I knew from the start that the sidebar would be a major hurdle. I wanted to keep it simple, maybe even non-interactive, but Claude just directly generated a collapsible version. I spent at least 2-3 hours tweaking the collapse animation. The main challenge was ensuring that the open/collapse effect was consistent across mobile and desktop view, with desktop defaulted to open and state persisting after refresh.

Mobile-First Layout and Content Breakage

I spent a lot of time aligning and centering the homepage content, making sure it dynamically adjusts when the sidebar collapse. This was a huge challenge. I spent ages checking every device size to prevent layout breakage and ensure interaction consistency.

Interactive UI and Dynamic Usability Issues

I build two simple dynamic effects on the homepage: a breathing tag and a floating hover effect on content tabs. I spent about 2 hours on visual tweaks, making sure contrast and sizing met WCAG standards and general usability.

Client-Side and Server-Side Structure Overhaul

During the third and fourth steps, I encountered performance issues due to the original AI-generated site structure.

For non-technical people, this can be a bit abstract. I spent a lot of time figuring out the logic. Let's revisit the "three elements of a website" from my previous article: HTML (static structure), CSS (style), and JavaScript (dynamic effects).

Assuming you understand these basics, let's break down what "rendering" means—how website content loads on your audiences' device/browser. Here's a furniture analogy for better understanding:

- **Client-Side Rendering (CSR, like an IKEA kit):**
	You buy an IKEA desk. You get a box of parts and instructions. You have to assemble it yourself—your room is empty at first (the web page is blank), and only after assembly you get a complete desk (the page displays).
	- **Pros:** Once built, it's easy to swap out drawers or add shelves (interactivity and page switching are smooth).
	- **Cons:** The initial setup is slow, and visitors see nothing at first.
- **Server-Side Rendering (SSR, like pre-assembled furniture delivery):**
	You have the furniture store deliver a fully assembled desk (complete HTML). As soon as you open the door, everything is ready (the web page loads instantly).
	- **Pros:** Instant content for visitors (fast initial load, SEO-friendly).
	- **Cons:** Any changes require the store to come back (every interaction needs the server, less instant interactivity).

CSR is great for rich dynamic interactions and user experience, while SSR is better for SEO and fast first loads. Most sites nowadays implement a hybrid rendering method.

AI-Generated Messy Frontend Code

Non-dev vibe coders often reached the state of "AI wrote the code, but I still don't know what it's doing or how it's structured." Here's a classic meme:

I had the same issue. Claude initially generated a messy, logical yet not efficient code, so after testing the homepage and sidebar, I spent 6-8 hours restructuring everything. In the end, I settled on:

- Homepage: SSR
- Sidebar: CSR (separate code for rendering)
- Writing overview: CSR
    - Writing article pages: CSR
- Project overview: CSR
    - Project article pages: CSR

A frontend developer friend told me that CSR method can render components individually, even down to a single button or small widget. I was not aware at first but now looking back, I did use the same logic for sidebar rendering.

Ghost API Integration and Content Fetching

For most people, APIs sound intimidating, but I actually had less issues than I thought while integrating the Content API this time. Once the API was added, Claude suggested a splitting test with several stages (content fetching, load time logging), and it all worked smoothly.

p.s. If you're unsure what an API or Webhook is, brush up on those concepts first.

Hydration Issues in SSR/CSR Hybrid Mode

A common issue when mixing SSR and CSR is "hydration". Using the same furniture analogy:

• Hydration is "turning the furniture (static HTML) delivered by the server into interactive furniture you can actually use at home."
• If the instructions (JavaScript) and furniture (HTML) don't match, the furniture won't work—on the web, this means broken interactivity or content flickering. I often ran into this with the sidebar, because its state and dynamic effects had to sync with static blocks. I solved it by adding state-checking functions. During this phase, I iterated with prompts like:

I just ran into this error (screenshot/code):

1. If I can guess the direction of the bug >>> Maybe something's wrong in this area, maybe it's this type of problem.
2. If I have no clue >>> Please tell me how to fix it and explain the logic.

---

*For minor, non-structural issues, I'd fix them directly in Windsurf.
*For structural issues, I'd attach all related code snippets.

Technical SEO and Website Performance Optimization

In the final stage, I kept running PageSpeed tests after deployment, trying to keep every score above 99 (this is where most of my time went lol).

Image Loading and Performance

Adding caching and lazy loading helped optimizing the performance, and I also tweaked image SEO for external links.

OG Image Rendering Failure

I spent about 4 hours fixing OG image rendering on social platforms—Discord and LinkedIn were especially tricky. After repeatedly clearing caches, it finally worked.

At this point, the site was basically ready to deploy and launch!

Zeabur AI Deployment: Iteration and Tracking

GA4 Advanced Tracking and Automation

I waited for three days to check if all tracking methods was working and ensure that there was enough traffic/events before setting up GA reports. For this project, I wanted to test and verify AI's impact on SEO and content, so I set up several key events:

Key Events:
- text_selection (text highlighting, indicating content was quoted or copied)
- ai_referral_traffic (AI platform referral traffic)
- session_quality (session quality, reflecting deep engagement)
- article_deep_read (deep reading, indicating thorough consumption)
- content_completion (content completion, full content absorbed)
- cross_content_engagement (cross-content engagement)
- brand_search_traffic (brand search traffic)

These events mainly targeted AI relevant behaviors by "reading completion" and "text highlight counts", to gauge how much content was being indexed and cited.

Rybbit Tracking

Three weeks later, I found Rybbit, an open-source website analytics tool. After trying out, I found it much more user friendly than Google Analytics. I embedded the tracking code and continue on testing its features.

If you want to deploy Rybbit, try out Zeabur's new Rybbit template for a more complete, user-friendly analytics dashboard. Without any further charge, every cost is included in your current plan!

New Content Category Filter

When splitting client and server rendering, I reserved space on the Writing page for implementing a future tag/category filter. Once there are more articles, I'll add this cool feature and improve the binge view/next article navigation for a better reading experience.

Hacker Tips for Advanced AI Builders

If you've made it this far (and your head isn't spinning), you probably have what it takes to become an advanced Vibe Coder!

Always Pause and Review Your Development Process

AI can't solve every problem at once. Being able to ask the right questions and break down the logic behind it, is much more important than just coding. For example, I prefer conversational agents and would usually start with a "project script" that keeps consistency all my chats, this helps me focus when things get chaotic. (This might be a bit similar to the "system prompt" concept but not that technical yet)

Never expect AI to solve everything for you and stop thinking. Even if you actually build a site with AI, you'll still struggle to iterate or improve it later lacking fundamental knowledge of what a proper product should be like.

Version Control and Documentation

When speaking with experienced engineers, they often highlight that the most important skill for developers isn't coding or tool mastery—but "Version Control". This means saving, documenting and describing every working version as your codebase grows more complex. You don't need to force yourself to use GitHub from the start—Notion or any tool works. But whatever you use, consistent project management mindset is and will always be the same.

Fact Check and Cross-Referencing Sources

After using AI agents to gather information, always cross-check your sources. Here are some articles I recommend:

• How to Build Fast and SEO-Friendly Web Apps with ReactJs, Redux, and NextJs (Pintech)
• Vibe Coding: A New AI Programming Trend (iKala)
• Cursor Vibe Coding Tutorial - For COMPLETE Beginners (YouTube)
• The Ultimate Vibe Coding Guide - Reddit
• Git Version Control for Beginners (YouTube)

These three points were the most valuable lessons I learned building my site from scratch—I recommend them to anyone using AI to build products.

Conclusion: Learning by Doing Is the Best Way

It wasn't until I finished development and wrote this reflection that I truly completed my Vibe Coding journey. I now can proudly say that I'm graduated from the beginner status (at least now I can understand about 60% of what engineers say at dinner), and that I really did build my own personal site! Looking back the entire process, I realized the term Vibe Coding is truly a "learning by doing" act.

While hosting Cursor Meetup Taipei on June 22, iChef co-founder Spencer shared several of his ongoing projects. With over 10 years of experience, he mentioned that he uses AI to explore new technologies like speech recognition and image generation, which were initially out of his skill set and expertise. This had made me reflect, with the fact that IDE tools lower the technical barrier, the traditional and pivotal way of facing the rapid change is still "Constant Learning". The learning of how to learn, with the interjection (or intervention) of AI, is philosophical yet what truly makes you stand out as a Vibe Coder and Builder. That's where the real impact and change lies.