Out with Wordpress, and in with React

When we decided to rebuild the CopyClub website, we knew we wanted something more flexible and developer-friendly than our old WordPress setup. As Jason eloquently put it, he'd "rather shave his teeth" than try to make updates to our previous site. WordPress had served us well, but its limitations were becoming increasingly frustrating - default templates didn't combine elegantly, updates were unintuitive, and the whole process felt unnecessarily complex.

Our AI False Start

AI has emboldened us to try new things, and we were eager to see if we could build a new website with it. We started with a simple plan: we would use Tailwind templates and WindSurf (an AI coding assistant) to convert our Google Docs content directly into a website.

Like many development journeys, ours began with a misstep. The results were, to put it candidly, "really shitty."

Adapting the content we had to work with existing Tailwind templates was not straightforward. Updating the look and feel was also not as simple as we had hoped.

Back to the drawing board.

We Hit the 70% Wall

In the time since our first attempt, Jason and I and another member of the community, Vikrant, had decided we wanted to invest some time in learning to build software. We rented an AirBnB and spent a few days learning the ropes of React and Next.js.

The initial progress felt magical. But it was followed by countless hours of pasting in errors to fix bugs, which also involved inadvertently breaking other parts of the site.

After using Next.js, Markdown, and AI tools like WindSurf, we experienced firsthand what Addy Osmani calls "the 70% problem" in AI-assisted development. Our journey perfectly illustrates both the tremendous potential and the hidden challenges of modern development workflows.

In Addy's article, he describes a pattern where "Non-engineers using AI for coding find themselves hitting a frustrating wall. They can get 70% of the way there surprisingly quickly, but that final 30% becomes an exercise in diminishing returns."

That was exactly what we were going through.

Finding Our Breakthrough Approach

In the months following our initial attempt, we continued to learn and grow. The biggest thing we learned was that we needed to be more methodical in our approach. We were trying to shortcut the typical software development process. So, this time we did it the old-fashioned way.

We started with Vercel's blog starter kit that provided the foundational structure we needed, particularly for the blog functionality we wanted. We liked that it used a markdown-based approach, which was more AI-friendly than a UI based CMS, like WordPress. Instead of trying to generate the entire site at once, I built pages block by block. The process looked like this:

1. Find the perfect UI component (like a hero section) through Tailwind
2. Copy the React code
3. Store it in a dedicated "Tailwind components" folder
4. Reference these components when building pages

This library of components became the building blocks for our entire site.

WindSurf became our trusted development partner in this process. When editing pages, I'd simply reference these Tailwind components and use plain English instructions to refine the design - much like working with a human designer, but with considerably less coffee consumption and scheduling conflicts.

The Markdown Magic

The most transformative aspect of our new setup is the content management system. The blog posts are stored in /_posts as Markdown files with front matter support. Adding a new Markdown file in there will create a new blog post.

This makes creating new content incredibly straightforward:

1. Write a markdown file with front matter (title, excerpt, cover image, date, author)
2. Add your content
3. Save it in the right folder
4. That's it. You're published

No more fighting with WordPress editors or mysterious formatting issues. Just clean, simple markdown files that automatically transform into beautiful blog posts.

Our Git-Based Workflow

The deployment workflow we established is delightfully seamless. Using Cascade (part of WindSurf), we can commit changes directly to GitHub with simple commands. Since Vercel watches our GitHub repository, any new content triggers an automatic rebuild and deployment. As Jason succinctly put it: "add a post on your local machine and hit save... not my problem." The system handles everything else.

Component Organization Lessons

Not everything went perfectly. On the pricing page, Justin stacked block elements, which made the rendering logic unnecessarily complex: "I ended up essentially stacking each of these block elements. So that meant that the logic for the rendering got more convoluted than it should have... What I would do next time is consider each block its own thing in here, and then you can keep the front matter cleaner." We discovered that while managing multiple component files might seem organizational nightmare, with AI assistance, it becomes a sensible and maintainable structure.

The Human Touch

Before launching the site, we took the time to reach out to all CopyClub members featured on the site to get their permission - showing that even with all this technical innovation, we still prioritize the human element of our community.

Lessons Learned

Our CopyClub website rebuild offers several valuable lessons for teams considering AI-assisted development:

Start with a solid foundation: The Vercel starter kit gave us a well-structured base that the AI could build upon. Understand the technology stack: Having familiarity with Next.js, React, and Markdown was essential for guiding the AI effectively. Maintain architectural control: We made high-level decisions about site structure and organization, letting the AI handle implementation details. Anticipate the 70% threshold: Going in, we knew that the initial progress would be rapid but that finishing touches would require more detailed work. Value simplicity: The markdown-based content management system made the site maintainable despite the complexity of the implementation.

The Future of Our Development Process

As we continue to maintain and enhance the CopyClub website, we're applying these lessons to create a sustainable development workflow:

1. Documentation-first approach: Maintaining comprehensive documentation helps both humans and AI understand the system.
2. Clear component boundaries: Defining clear interfaces between components makes it easier to update individual parts without breaking the whole.
3. Content-code separation: Keeping content in markdown files separate from the rendering logic makes content updates simple for non-developers.
4. Continuous refinement: Rather than accepting the "good enough" 70% solution, we're committed to refining the site to achieve that final 30% of quality.

Our experience building the CopyClub website validates much of what Addy discusses in "The 70% Problem." AI tools like WindSurf dramatically accelerated our development process, but the final polish, architectural decisions, and quality assurance still required human expertise. Our new approach is focused on following a more traditional development process, creating a system that's flexible, maintainable, and actually enjoyable to work with. The key to our success was understanding AI's limitations and complementing it with human judgment. We used AI to augment our development skills, allowing us to build a better website faster than we could have done alone. The combination of Next.js, Tailwind CSS, and Markdown files creates an AI developer-friendly environment that makes updates simple and keeps the site fast. And with the Vercel's hosting platform, we get automatic deployments, preview environments, and global CDN distribution without any additional work. This hybrid approach was the most promising path forward for us to build maintainable software. What started as a source of frustration is now a live web app we're actually excited to share!