By [Ibrahim]
For the last thirty years, "learning to code" has been a specific rite of passage. It meant buying the O’Reilly books with the animals on the covers, memorizing the difference between == and ===, and spending hours debugging a missing semicolon. But in 2025, that era ended. We have entered the age of "Vibe Coding"—a term popularized by AI luminary Andrej Karpathy—and it has fundamentally changed how software is built.
To prove this hypothesis, I set out to build a fully functional, utility-based web application using a modern tech stack I had never touched before: Next.js. The result is Is It Bottlenecked?, a PC hardware calculator that helps gamers balance their rigs.
Here is how I built a production-ready tool site not by writing code, but by directing it.
The Shift from Writer to Director
The central premise of Vibe Coding is simple: the human provides the logic, the taste, and the "vibe," while the Artificial Intelligence handles the syntax. In the past, if I wanted to build a bottleneck calculator, I would need to know how to set up a React environment, how to manage state hooks, and how to configure Webpack.
For this project, I didn't do any of that. I used Cursor, an AI-powered code editor, to act as my hands. My prompt wasn't a line of code; it was a directive: "Create a clean, dark-mode interface where a user can select a CPU and a GPU, and the system calculates a mismatch percentage based on weighted performance scores."
Within seconds, the AI scaffolded the entire application structure. It wasn't magic—it was a translation layer. I was speaking English; the machine was writing TypeScript.
Why Next.js Was the Only Choice
Even as a "Vibe Coder," the choice of infrastructure matters. I instructed the AI to build on Next.js, the React framework that has become the industry standard for modern web development.
Why Next.js? Because speed is a feature. When a user is trying to figure out if their Ryzen 7 5800X3D is going to choke their new RTX 4070, they don't want to wait for a heavy client-side load. Next.js allows for server-side rendering and static generation, meaning Is It Bottlenecked? loads almost instantly. The AI handled the complexity of the file-system-based routing, a feature that usually trips up beginners, allowing me to focus purely on the algorithm.
Solving the Bottleneck Problem
The hardest part of this build wasn't the code; it was the logic. This is the crucial lesson for anyone wanting to try Vibe Coding: AI cannot fix a bad idea.
I had to deeply understand the hardware market to guide the AI. A PC "bottleneck" occurs when one component (usually the CPU) cannot keep up with another (the GPU), causing performance stuttering. To make the tool accurate, I had to provide the AI with the correct hierarchy of hardware power. We iterated on the math together—I would spot a flaw ("Hey, the Intel i9-14900K shouldn't be bottling an RTX 3060"), and the AI would refactor the calculation function instantly.
The Democratization of Development
The site is now live. It features a responsive design, dynamic dropdowns, and a calculation engine that provides instant feedback to PC builders. It is hosted on Vercel, which integrates seamlessly with Next.js for zero-config deployments.
This experience proved that the barrier to entry for software development has collapsed. We are moving away from a world where you need to be a "coder" to build things, and toward a world where you just need to be a "builder." If you understand the problem you are solving—in my case, helping gamers save money by avoiding mismatched hardware—the AI can handle the rest.
The syntax is dead. Long live the vibe.