Converting Legacy Code to React

It was pretty easy to see what was wrong: the site was built on a deprecated version of PHP from more than eight years ago—his cPanel helpfully told me so. That's why it was easy to tell what was wrong. The only problem? I don’t know PHP.

But you know who does?

If you’ve read anything I’ve written so far, you know these projects are experiments in agentic coding. So if he’s asking me for help, I’m going to help him my way. That means turning it into an experiment I can learn from, write about, and hopefully teach something along the way.

I had a feeling this would be pretty straightforward. Which it was. So instead of overexplaining, I’m just going to break down exactly how I set this up, in case you’ve got an old website you’d like to revive too.

Let’s go.

Set Up Your Project

To rebuild the site, you need the old code. All of it. The entire folder, the original structure—everything. Export it from your host and drop it into a folder on your computer if you haven’t already.

You should end up with something like this:

Project Folder → Old Website Files

Next, create a second folder in your project root called New Website, but don’t add anything to it. We’re going to let Cursor handle that.

Now open the root Project Folder in Cursor.

Your folder tree should look like this:

Project Folder
├─ Old Website Files
└─ New Website
        

Step 1: Plan Your Project

Before we build anything, we need a plan. And for that, the agent needs to understand the old site.

Start by putting your agent into Plan Mode, then drag the Old Website Files folder into the chat window so it can reference everything. Think of it like handing someone a manila envelope and saying, “Read through this and do your best to understand it.”

This is why preserving the original folder structure matters. The agent will scan every file—starting at the root—and map includes, references, links, components, and styles. That’s how it rebuilds the site so it appears exactly the same.

Here’s the exact prompt I used to kick things off:

This is an old, somewhat outdated project that I need to rebuild. It was built 8 years ago using PHP and Bootstrap. It's old, and a lot of it is deprecated.

I would like to take this site and convert it to a modern framework: React, Next.js, using Tailwind (what I'm more familiar with now), and simply duplicate it for hosting on Vercel. Don’t make any changes to the content or styles. It needs to match one-to-one.

I need you to scan this project, read the files, understand the structure, and outline what we need to do next to complete the conversion.
        

You’ll watch it assemble a build plan and to-do list for itself. When it’s ready, a Build button appears. Click it, and let it work.

Step 2: Lower Your Expectations

Maybe you’ll get lucky. But you’ll probably run into the same issue I did.

For the most part, it built everything correctly. But after that initial build, I couldn’t see the site at all because of errors.

This is common when coding agents attempt large, complex tasks. The context window can run out before the job is complete, which means earlier decisions or code can get lost along the way.

An AI’s context window is the amount of information it can actively “see” and remember at one time while generating a response.

Think of it like working memory. Everything inside the context window—your prompt, system instructions, conversation history, pasted documents—can influence the output. Anything outside it is effectively invisible.

When inputs get too long, older information gets pushed out. That’s why long chats can lead to forgotten constraints, inconsistent behavior, or broken logic.

This can happen with the AI’s own work, too. An average context window might be around 200,000 tokens (whatever that actually means). A large, complex build can easily exceed that—sometimes approaching a million tokens. By the second half of the task, the agent may no longer remember how it started.

The result? Code conflicts.

But that’s nothing to stress about, because…

Step 3: Correct and Refine

In my case, rebuilding my friend’s site only required three additional prompts after the initial build. Total cleanup time? Maybe five minutes.

Things like:

• “Can you spin up a server so I can see the site?”
• “The site doesn’t load—can you debug it?”

At first, all I saw was a React error. I copied the error from the console, pasted it into the chat, and let the agent debug its own code.

About 30 seconds later, it was fixed.

And it looked identical. Page for page. Interaction for interaction. You’d never guess it was a different site, except that it worked, and everything loaded fast.

Step 4: Go Have a Snack

Once you’re happy, you’re done. Go grab some cookies or something.

In my case—a simple eight-page informational site—the entire process took just under nine minutes. I often set a timer when running experiments so I can track how long I spend on them.

It was surprisingly easy to take a broken, outdated website and rebuild it in a modern framework. And chances are, you’ve got old projects sitting around that could benefit from the same treatment.

So why not give it a try?

Let me know how it goes.