Knitting Better Infrastructure and Developer Experience (DX) in React with GPT-4.1

Continuing the vibe coding journey I started in the previous post. If you missed the first chapter, you can catch up here: "Vibe Coding with AI-Generated Forms in React Using GPT-4.1"

Yarn

Let's level up the infrastructure a bit. We'll kick things off by setting up Yarn in the repo. The goal is to have a project-specific Yarn version, making it independent from whatever global version might be installed. While it's not critical for this solo project (no team collaboration, no CI/CD planned), it's still a good habit to practice.

Here's what I got back:

Not exactly what I had in mind. This installs Yarn globally, but I wanted a project-specific setup. It was clear the agent got a bit tangled up here.

Rather than fighting it, I moved on and manually created the .yarn folder. I did ask the agent to help update the .gitignore file, though—and after a little nudging, it nailed it. Always nice when I don't have to remember small things like that.

CSS Modules

Previously, I loaded styles globally without touching CSS Modules. Time to fix that.

It turned out to be trickier than expected—the agent struggled quite a bit:

• It updated the CSS import in only one component (even though multiple components needed it).
• Then it broke entirely because Rspack doesn't support CSS Modules out of the box. (A small config tweak is needed.)

None of this was rocket science, but the agent couldn’t connect the dots by itself.

On the bright side, it did successfully rename ./App.css to ./App.module.css. For some reason, that small win was oddly satisfying.

Date Display

This task was refreshingly smooth:

First, the agent prompted me to install the library:

I approved it, and the rest was handled correctly. No hiccups!

i18n

Adding internationalization turned into a deeper exercise than I anticipated.

I kicked it off with:

The agent took care of installing react-i18next and i18next, extracted most of the text into an i18n.ts file, and wired up the initialization. It missed a couple of components, but a quick follow-up prompt got things sorted.

Next challenge: loading translations asynchronously. I asked for a simple setup where translations are bundled and loaded via promises. The agent handled that nicely too.

The real struggle came when I asked it to handle the loading state while translations were being fetched. This requires wrapping the app in <Suspense>, but the agent couldn't figure that part out. No biggie—I added it manually.

And just like that, internationalization was live.

Copilot Instructions

To save myself from repeating guidelines over and over, I added a .github/copilot-instructions.md file. Here's what I wrote:

In this project, I’m developing a user-facing application.

The following technologies are used:

• Rspack
• React
• TypeScript

Design Guidelines

• Minimal, clear, and consistent design
• Friendly UI and UX experience

General Guidelines

• Keep code concise and readable.
• Adhere to the existing code style and formatting.
• Use modern TypeScript and functional programming practices.
• Prefer clearly defined types over "any".
• Use CSS modules.
• Use named functions and descriptive variable names instead of short or generic ones.
• Prefer named exports over default exports.
• Prettier is used for formatting—follow its conventions.

The results were immediately noticeable—the agent genuinely "listened" and adapted future prompts accordingly.

Of course, some older code was still misaligned. Instead of fixing it manually, I prompted the agent to self-audit:

And it was fruitful. The agent scanned the repo, spotted misalignments (mostly around type definitions), and proposed fixes.

Honestly, this is one of the most useful tools I've worked with. I'm excited to see how it handles a larger, more complex codebase next.

 

---

You might also be interested in the following posts:

ChatGPT Models Summorized: Canvas, Projects, and IDE Integration

OpenAI recently released a series of videos showcasing different use cases for ChatGPT. I wanted to summarize them here, because otherwise I'd have to dig through each video again to find those useful examples—and that would be annoying.

Generating hourglass animation with ChatGPT, part 2

We're back with part two of our LLM animation adventure, this time giving Gemini 2.5 a whirl. We'll walk you through how we tweaked prompts to get that cool particle sand effect, and share some thoughts on how Gemini handles code changes step-by-step.