From WordPress to Render in 4 Hours: A Vibe Coding Journey

The Challenge: Migrate an entire WordPress site to a modern Next.js application and deploy it to production.

The Timeline: 4 hours from downloading the WordPress export to having the new site live at the custom domain.

The Method: Vibe coding with AI assistance.

What is Vibe Coding?

Vibe coding is a collaborative approach where you work alongside AI to build software. Instead of writing every line of code yourself, you:

Describe what you want in natural language
Let AI generate the initial implementation
Review and refine together
Iterate quickly based on results

It's not about replacing developers—it's about amplifying their capabilities and moving at the speed of thought.

The Starting Point

We had a WordPress site at chriscreateswithai.com with:

8 AI guides
9 prompting technique articles
36 podcast episodes
1 video tutorial
Various pages (About, Services, Projects, Contact)

The Problem: WordPress felt clunky, slow, and limiting. We wanted:

Modern tech stack (Next.js 15, React 19, TypeScript)
Better performance
Full control over the codebase
Modern UI with Tailwind CSS
Fast, reliable hosting

The Tools

Windsurf IDE

Our development environment—a modern IDE built for AI-assisted coding. Think VS Code, but designed from the ground up for human-AI collaboration.

Claude Sonnet 4.5 (Thinking Mode)

Our AI pair programmer. Claude Sonnet 4.5 with extended thinking capabilities helped us:

Architect the application structure
Generate components and pages
Debug issues in real-time
Optimize for production
Troubleshoot deployment problems

The Stack

Next.js 15: React framework with App Router
React 19: Latest React with server components
TypeScript: Type safety throughout
Tailwind CSS: Utility-first styling
shadcn/ui: Beautiful, accessible components
MDX: Markdown with React components for content
Render: Modern hosting platform

The 4-Hour Journey

Hour 1: Export and Setup (0:00 - 1:00)

What We Did:

Exported WordPress content (XML file)
Created new Next.js 15 project
Set up project structure
Configured TypeScript, Tailwind, and MDX

Vibe Coding in Action:

Me: "Create a Next.js 15 app with TypeScript, Tailwind, and MDX support"

Claude: *Generates complete project setup with all configs*

Me: "Add shadcn/ui components for the UI"

Claude: *Sets up shadcn/ui, creates component library*

Key Insight: What would normally take hours of reading docs and configuring was done in minutes through conversation.

Hour 2: Content Migration (1:00 - 2:00)

What We Did:

Parsed WordPress XML export
Extracted all content (guides, techniques, podcast data)
Converted to MDX format
Created migration scripts

Vibe Coding in Action:

Me: "Parse this WordPress XML and extract all posts and pages"

Claude: *Creates Node.js script with xml2js*

Me: "Convert the content to MDX with proper frontmatter"

Claude: *Generates conversion logic, handles edge cases*

Me: "The YouTube data needs to be structured differently"

Claude: *Refactors data structure, updates components*

Challenge: WordPress HTML needed cleaning and conversion to MDX.

Solution: Claude wrote scripts to:

Strip WordPress-specific markup
Convert HTML to Markdown
Extract metadata
Structure frontmatter
Handle special characters

Result: All 18 content pieces migrated and formatted perfectly.

Hour 3: Building the Site (2:00 - 3:00)

What We Did:

Created page layouts and components
Built navigation and footer
Implemented MDX rendering
Added YouTube integration for podcast
Styled everything with Tailwind

Vibe Coding in Action:

Me: "Create a guides page that displays all guides in a grid with difficulty badges"

Claude: *Generates complete page with:
  - MDX file reading
  - Metadata extraction
  - Grid layout
  - Difficulty color coding
  - Responsive design*

Me: "The podcast page needs to show 36 episodes grouped by season"

Claude: *Creates structured data and season-based layout*

Key Components Built:

Dynamic route pages for guides and techniques
Podcast page with YouTube embeds
Tutorial showcase
Services and projects pages
Responsive navigation
SEO-optimized metadata

The Magic: Each component was generated, reviewed, and refined in minutes. No boilerplate fatigue.

Hour 4: Deployment and DNS (3:00 - 4:00)

What We Did:

Created GitHub repository
Pushed code to GitHub
Connected to Render
Fixed build errors
Updated DNS to point domain

The Challenges (and how we solved them):

Challenge 1: TypeScript Not Found

Error: Cannot find module 'typescript'

Solution: Moved TypeScript from devDependencies to dependencies (needed for Render builds).

Challenge 2: TailwindCSS Not Found

Error: Cannot find module 'tailwindcss'

Solution: Moved all build-time dependencies (Tailwind, PostCSS, Autoprefixer) to dependencies.

Challenge 3: Next.js 15 Breaking Change

Type error: params is now a Promise

Solution: Updated dynamic routes to await params (Next.js 15 requirement).

Challenge 4: ESLint Errors

Error: Unescaped apostrophes in JSX

Solution: Replaced all ' with ' in JSX content.

Challenge 5: MDX Nested Code Blocks

Error: Unexpected closing slash in tag

Solution: Removed nested code blocks from MDX examples.

Vibe Coding Advantage: Each error was:

Identified by the build
Explained by Claude
Fixed immediately
Verified and pushed

No Stack Overflow searching. No trial and error. Just conversation → solution → deploy.

The Results

Performance

WordPress: 3-5 second load times
New Site: Sub-second load times
Lighthouse Score: 95+ across the board

Developer Experience

Full TypeScript type safety
Hot reload during development
Modern React patterns
Clean, maintainable code

Content Management

MDX files in version control
Easy to edit and update
No database complexity
Git-based workflow

Hosting

Cost: $7/month (vs $20+/month for WordPress)
Performance: Edge-optimized CDN
Reliability: 99.9% uptime
SSL: Auto-provisioned
Deployments: Automatic on git push

Key Takeaways

1. Vibe Coding Accelerates Everything

What traditionally takes days or weeks took 4 hours. The AI handled:

Boilerplate code
Configuration files
Component structure
Bug fixes
Deployment troubleshooting

2. Conversation is the Interface

Instead of:

1. Google "how to set up MDX in Next.js 15"
2. Read 5 blog posts
3. Try different approaches
4. Debug for an hour

We did:

1. "Set up MDX in Next.js 15"
2. Review generated code
3. Deploy

3. AI Excels at Tedious Tasks

Parsing XML
Converting formats
Writing migration scripts
Fixing linting errors
Debugging build issues

These are perfect for AI—repetitive, well-defined, and time-consuming for humans.

4. You Stay in Control

We made all the decisions:

Architecture choices
Design direction
Content structure
Deployment strategy

Claude executed our vision, but we drove the direction.

5. Debugging is Collaborative

When errors occurred, Claude:

Explained the root cause
Suggested multiple solutions
Implemented the fix
Verified it worked

It felt like pair programming with an expert who never gets tired.

The Vibe Coding Workflow

Here's the pattern we used throughout:

1. Describe the Goal

"Create a responsive navigation with mobile menu"

3. Refine as Needed

"Add a dark mode toggle"
"Make the mobile menu slide in from the right"

✅ Be specific about what you want
✅ Review all generated code before committing
✅ Test incrementally as you build
✅ Ask for explanations when something is unclear
✅ Iterate quickly based on results

Don'ts

❌ Don't blindly accept all suggestions
❌ Don't skip testing between changes
❌ Don't forget to commit frequently
❌ Don't ignore errors hoping they'll fix themselves
❌ Don't lose sight of your vision

The Technical Details

Project Structure

chriscreateswithai-nextjs/
├── src/
│   ├── app/                    # Next.js App Router pages
│   │   ├── guides/
│   │   │   ├── [slug]/        # Dynamic guide pages
│   │   │   └── page.tsx       # Guides listing
│   │   ├── prompting-techniques/
│   │   ├── podcast/
│   │   ├── tutorials/
│   │   └── vibe-coding/       # This section!
│   ├── components/
│   │   ├── ui/                # shadcn/ui components
│   │   ├── layout/            # Header, Footer
│   │   └── sections/          # Page sections
│   └── lib/                   # Utilities
├── content/                   # MDX content files
│   ├── guides/
│   ├── prompting-techniques/
│   └── vibe-coding/
└── public/                    # Static assets

Key Technologies

Next.js 15: App Router, Server Components, Metadata API
React 19: Latest features and performance
TypeScript: Full type safety
Tailwind CSS: Utility-first styling
MDX: Markdown + React components
Render: Hosting and deployment

Deployment Pipeline

1. Code changes → Git commit
2. Push to GitHub
3. Render detects change
4. Runs build: npm ci && npm run build
5. Deploys to production
6. Site live in ~5 minutes

Cost Breakdown

Before (WordPress)

Hosting: $20/month
Theme: $60/year
Plugins: $100/year
Total: ~$340/year

After (Render + Next.js)

Render Starter: $7/month
Domain: $12/year (same)
Total: ~$96/year

Savings: $244/year (72% reduction)

Plus: Better performance, full control, modern stack.

The Future

Now that we have a modern, flexible foundation, we can easily:

Add new content types
Implement search
Add interactive features
Integrate APIs
Build custom tools
Scale infinitely

All with the same vibe coding approach.

Try It Yourself

Want to migrate your own site? Here's the high-level process:

1. Export Your Content

WordPress: Tools → Export → All content

2. Set Up Next.js Project

npx create-next-app@latest my-site
cd my-site

3. Use AI to Help

With Windsurf or similar AI coding tools:

"Parse my WordPress XML export"
"Convert posts to MDX"
"Create page layouts"
"Set up deployment"

4. Deploy to Render

Push to GitHub
Connect to Render
Deploy!

5. Update DNS

Point your domain to Render.

Conclusion

4 hours. That's all it took to go from a clunky WordPress site to a modern, fast, production-ready Next.js application.

The secret? Vibe coding with AI.

We didn't write every line of code. We didn't read every documentation page. We didn't spend hours debugging obscure errors.

We described what we wanted, reviewed what was generated, and refined until it was perfect.

This is the future of development:

Faster iteration
Less boilerplate
More creativity
Better results

The best part? You don't need to be an expert in every technology. You need to:

Know what you want to build
Communicate clearly
Review critically
Iterate quickly

The AI handles the rest.

What's Next?

This is just the beginning of our vibe coding journey. Stay tuned for more articles on:

Building AI-powered features
Creating custom tools
Integrating APIs
Advanced Next.js patterns
Real-time collaboration
And more!

Want to learn vibe coding? Check out our other guides and tutorials.

Questions about the migration? Reach out—we're happy to help!

Tech Stack: Next.js 15, React 19, TypeScript, Tailwind CSS, MDX, Render
AI Tools: Windsurf IDE, Claude Sonnet 4.5 (Thinking Mode)
Timeline: 4 hours
Cost: $7/month
Result: Production-ready, performant, modern web application

Vibe coding works. 🚀