My WordPress hosting went down on a Tuesday.
Not permanently - just one of those routine outages that remind you how little control you actually have. While waiting for the service to return, I started reviewing what I was paying monthly for hosting, themes, and plugins.
The numbers were annoying enough to make me research alternatives.
That's when I discovered Vercel offers free hosting for static sites. The catch? You need to build with modern frontend tools instead of WordPress.
So I made a decision to learn React.
The Choice
I had two clear paths forward:
Option A: Find new WordPress hosting. Familiar territory, back online quickly, monthly costs continue.
Option B: Build a custom frontend with React and Next.js. Steeper learning curve, more work upfront, but free hosting and complete control.
The deciding factor wasn't the money - it was realizing that AI tools make learning modern frontend development more accessible than ever.
I chose the harder path that would teach me something valuable.
Learning React With AI
I had minimal React experience and had never touched Next.js. But I had Claude and ChatGPT as learning partners.
The approach was simple: describe what I needed, get implementation guidance, build incrementally, debug with AI assistance when stuck.
Here's what I learned by building:
Core React Concepts
Components and JSX: Everything in React is a component - reusable pieces of UI that accept data and return markup. Instead of WordPress templates, I built components like Header, BlogPost, and CalloutBox.
State Management: Using useState and useEffect to handle dynamic behavior. The dark mode toggle became my first real state management challenge - tracking theme preference and persisting it across sessions.
Props and Data Flow: Components receive data through props, creating a clear information hierarchy. Blog posts pass metadata down to child components for rendering titles, dates, and tags.
The learning pattern was consistent: encounter a problem, describe it to AI, get code examples and explanations, implement and test.
Note: AI wasn't writing entire applications - it was solving specific problems as they emerged. The learning happened through building, not through tutorials.
Next.js App Router
File-based Routing: URLs map directly to file structure. /blog/[slug]/page.tsx automatically handles dynamic blog post routes without configuration.
Server Components: Next.js renders components on the server for better performance and SEO. Blog post content loads faster and search engines see complete HTML.
Layout System: Shared layouts wrap page content. The root layout handles dark mode initialization, global styles, and SEO metadata across the entire site.
Static Generation: Pages build at deployment time, creating optimized static files. This eliminates server processing and enables free hosting on platforms like Vercel.
Each concept built on the previous one, creating a coherent development model that's actually simpler than WordPress once you understand the pattern.
The Frontend Architecture
What emerged wasn't a traditional CMS - it was a modern content site built with reusable components.
Core Layout System
The foundation starts with a root layout that handles site-wide concerns:
// layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className="dark:bg-gray-900">
<Header />
{children}
<Footer />
</body>
</html>
)
}
This wraps every page with consistent navigation, theming, and structure.
Content Processing Pipeline
The content system processes MDX files with structured frontmatter:
---
title: "Post Title Here"
author: JP Garbaccio
date: 2025-01-05
tags:
- React
- CMS
subtitle: "Brief description"
preview: "Longer preview text for listings"
---
# Actual content with MDX support
The processing pipeline:
- Reads MDX files from the filesystem
- Extracts frontmatter metadata using gray-matter
- Compiles MDX content with custom components
- Generates static pages at build time
Custom Components
Instead of WordPress shortcodes, I built React components for rich content:
Callout Boxes: Different types for various use cases
<Callout type="warning">
Always validate your data exports before processing.
</Callout>
FAQ Sections: Collapsible question/answer format
<FAQ question="When will I make more money?">
This depends on your forecasting model...
</FAQ>
Code Highlighting: Syntax highlighting with Prism.js integration, supporting multiple languages with proper themes for light and dark modes.
Each component solves a specific content need that WordPress plugins used to handle.
Styling and User Experience
Tailwind CSS: Utility-first styling that eliminates CSS bloat. Instead of theme files, styles live directly in components:
<article className="max-w-4xl mx-auto px-4 py-8 prose dark:prose-invert">
{content}
</article>
Dark Mode Support: Persistent theme switching using localStorage and CSS classes. The toggle animates smoothly with Framer Motion.
Responsive Design: Mobile-first approach with Tailwind's responsive utilities. Content looks good on every screen size without media queries.
Performance Optimization: Next.js handles image optimization, lazy loading, and bundle splitting automatically.
The result feels faster and more polished than any WordPress theme I've used.
Content Migration Strategy
Moving from WordPress wasn't just copying content - it required transforming how content works.
From WordPress to MDX
WordPress Structure: Posts lived in a database with categories, tags, and custom fields scattered across different tables.
MDX Structure: Each post becomes a single file with metadata and content together:
src/content/posts/
├── predictive-sales-engine.mdx
├── building-my-own-cms.mdx
└── future-post.mdx
This approach has several advantages:
- Version Control: Every content change is tracked in Git
- Portability: Content isn't locked to a specific platform
- Backup: Content lives in your codebase, not a separate database
- Collaboration: Multiple authors can work on content via pull requests
Asset Organization
Images and media moved to the public directory with Next.js handling optimization automatically:
public/
├── images/
│ ├── blog/
│ └── assets/
└── files/
Next.js automatically optimizes images for different screen sizes and formats, improving loading performance without manual work.
URL Structure
Clean URLs without WordPress cruft:
- Old:
/2024/06/building-a-predictive-sales-engine/ - New:
/blog/predictive-sales-engine
The new structure is simpler, more readable, and easier to manage.
Deployment and Performance
Vercel deployment connects directly to Git. Push code, site updates automatically.
The Deployment Process
- Git Push: Code changes push to the main branch
- Build Trigger: Vercel automatically starts the build process
- Static Generation: Next.js generates optimized static files
- Global Deployment: Content distributes to CDN edge locations
- Live Update: Site updates with zero downtime
No FTP uploads, no server management, no deployment scripts.
Performance Improvements
The performance gains over WordPress were immediate and measurable:
Loading Speed: Pages load in under 1 second instead of 3-5 seconds with WordPress.
Core Web Vitals: Perfect scores on Google's performance metrics - Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift.
SEO Benefits: Cleaner HTML markup, faster rendering, better mobile performance scores.
Build Times: Changes deploy in 30-60 seconds from push to live.
The development experience changed completely. Instead of navigating WordPress admin panels, changes happen in code editors with instant preview during development.
What Actually Improved
Beyond obvious cost savings, several things got genuinely better:
Technical Advantages
Performance Control: Every aspect of loading speed is optimized. No plugin conflicts, no theme bloat, no database queries slowing things down.
Security Model: No WordPress vulnerabilities, no plugin exploits, no admin panels to secure. The attack surface is minimal - just static files served from a CDN.
Content Quality: MDX enables rich, interactive content that's impossible in standard WordPress. Custom components, embedded code examples, data visualizations.
Creative Freedom: Complete design control without theme limitations. Build exactly what the content needs instead of working around theme constraints.
Development Benefits
Component Reusability: Build once, use everywhere. The blog post component works for any post format. The callout component works in any content.
TypeScript Safety: Catch errors before deployment. Props are typed, preventing runtime errors from incorrect data.
Modern Workflow: Git-based development, component testing, hot reload during development. Professional development practices built in.
Scalability: Adding new features means building new components, not finding and configuring plugins.
The Learning Compound Effect
Building this frontend taught more than just React and Next.js. It changed how I approach web development entirely.
Technical Skills Gained
React Ecosystem: Components, hooks, state management, JSX - skills that transfer to any modern web project.
Next.js Framework: Server-side rendering, static generation, routing, optimization - full-stack frontend development.
TypeScript: Type safety, interface design, better code organization - skills that improve any programming work.
Modern CSS: Utility-first styling, responsive design, component-scoped styles - efficient styling approaches.
Development Confidence
Problem-Solving Pattern: Break complex problems into components, solve incrementally, test continuously.
AI-Assisted Learning: Describing problems clearly enough for AI to provide useful solutions - a skill that accelerates all technical learning.
System Thinking: Understanding how frontend, content, and deployment connect gives confidence to tackle larger projects.
Quality Standards: Modern development practices like type safety, component testing, and Git workflow become second nature.
The technical skills are valuable. The confidence to build custom solutions instead of searching for existing ones is transformative.
What's Next
This frontend foundation enables much more than just blog posts.
Immediate Enhancements
Search Functionality: Client-side search across all content using libraries like Fuse.js for fuzzy matching.
Enhanced Animations: More sophisticated Framer Motion usage for page transitions and interactive elements.
Content Organization: Tag-based filtering, category pages, related post suggestions.
Reading Experience: Progress indicators, estimated reading time, table of contents generation.
Future Frontend Possibilities
Interactive Components: Data visualizations with D3.js, calculators, interactive tools embedded in posts.
Progressive Web App: Offline reading capability, app-like experience on mobile devices.
Multi-site Architecture: One codebase serving multiple content sources or different site themes.
Headless CMS Integration: Connect to external content APIs while keeping the same frontend experience.
Each addition is an engineering problem, not a vendor negotiation or plugin hunt.
The Real Benefit
The best part isn't the free hosting or better performance - it's the elimination of constraints.
WordPress works within WordPress rules. React applications work within browser capabilities.
When you need new functionality, you build it. When performance matters, you optimize it. When requirements change, you adapt the code instead of working around platform limitations.
That flexibility has value beyond any monthly hosting cost.
Skills That Compound
Frontend Development: React skills apply to any modern web project - dashboards, applications, marketing sites.
Component Architecture: Building reusable UI pieces improves efficiency and consistency across projects.
Modern Tooling: Git workflow, TypeScript, build tools, deployment pipelines - professional development practices.
Problem Decomposition: Breaking complex requirements into manageable components and iterative development.
These skills compound. Each project builds on previous knowledge, making the next one faster and better.
Conclusion
My WordPress hosting went down for a few hours. Instead of finding new hosting, I used it as an opportunity to learn React and build something better.
The process took a few weeks of evening work, powered by AI assistance and modern development tools. The result is faster, cheaper, more flexible, and completely under my control.
It's not perfect. It's not finished. But it's functional, performant, and evolving.
Most importantly: learning frontend development isn't just about building websites - it's about gaining the capability to build any kind of user interface. That skill set opens doors to projects far beyond content management.
The CMS was the excuse. The React skills are the real product.