How I built a browser game portal using AI and what I had to fix myself

I created a game portal in the browser to see how fast I am using AI code generators. Today I have a working product, many daily users and five playable games. This series describes my journey.

In this article, I describe how I got started using an AI code generator. I share my early successes and later struggles with the generated code and my workflow.

Why I chose a browser-based vibe-coding tool and React

The vibe-coding tool I started with allows quickly creating running web applications based on an initial prompt:

I want to build a puzzle games website where people 
can play different brain teasers and logic puzzles. 
Users should be able to create accounts, track their scores, 
and compete on leaderboards. 
Use react and vite.

I deliberately chose a tech stack I am somewhat familiar with so I can judge the quality of the generated code. And it was pretty impressive!

Here is what I was impressed with during my first experiments:

• The first version was already pretty good, both visually and technically.
• The tool understands my prompts and executes them quite nicely.
• The tool looks like VSCode in the browser and allows switching between source code and the running web application.

First successes

As mentioned, the game portal was running quickly in the browser AI coding tool. I could adjust the overall appearance by vaguely describing my preferences:

Use different colors. It should be bright and friendly.
Also, make sure it looks good on mobile screens.

I think the colors, game logos and texts chosen by the AI code generator are pretty good as the screenshot below suggests.

The first games that were added by the code generator without me specifically asking for it were a memory game and minesweeper. Both games worked instantly and only needed minor adjustments, for example regarding colors, the game buttons and the layout for different screen sizes - all done by using non-technical prompts:

Add buttons for restarting the game and starting the 
game of the day. While all games are randomly initialized, 
the game of the day should be the same game for all users.

The code generator invented a concept using a seed number and implemented a pseudo-randomized seed function based on the current date. This worked like a charm!

Adding variations of the game by introducing different sizes of the game field again was just a matter of asking the AI to just do it. I was truly impressed!

These early wins worked well because the games were simple. That changed as soon as I tried to build more complex games.

Where AI struggled: complex games & visuals

The AI code generator consistently produced React game components with roughly the following structure:

import React from "react";
...

// types and constants

export function Game({seed, gridSize: initialSize}: GameProps) {
  // state hooks
  const [isRunning, setIsRunning] = useState(false);
  // ...

  // set up grid
  const initializeGame = () => {
    // ...
  }

  // side effects
  useEffect(() => { ...  }, []);
  // ...

  // handlers
  const onNewGame = () => { ... };

  // JSX
  return (
    <div className="...">...</div>
  );

If the game gets more complicated, this immediately creates the following problems:

• The code of the component is pretty long and hard to read.
• The code block has too many responsibilities - game logic and presentation logic are mixed into one code block.
• Game logic could not be tested in isolation, for example by writing a unit test.
• Code cannot be reused.

All this makes the game and the portal harder to maintain. Little bugs are harder to fix both for me and the AI code generator.

I learned this the hard way when creating a game where the user is asked to connect a grid of pipes:

You can try the Pipes game here: https://pausengames.com/en/waterpipe.

The initial version of the game did not work out of the box. The game had the following issues:

• Creating an initial solution as the starting point of a game did not work.
• Detection of when the player won the game did not work.
• Visualizing the connected pipes in a different color did not work.
• Drawing the pipes with an outline stroke using SVG did not work.

My way of approaching and resolving the issues successfully was:

1. Ask the code generator to refactor the component.
   • Separate the game logic into another file. Create an proper TypeScript class with state and methods.
   • Separate the solution generator into a separate file.
   • Create a reusable component for the game buttons and use it across all games.
2. Start reading and actually understanding the generated code.
   • At this point I switched from the browser-based code generator to a general-purpose LLM chat.
   • I asked the chat about typical data structures and algorithmic approaches for the problems I needed to solve.
3. Write my own implementation of the game logic and the solution generator
   • I didn't see a way to avoid actually understanding what I was doing here.
   • I could use the LLM chat to quickly learn the data structures and algorithms needed. No need to read a paper or some university slides!
   • I could use the LLM to create implementations the way I needed it and to have conversations about alternative implementations.

Regarding the SVGs to render the pipe, I saw no alternative to again work closely and iteratively with a LLM chat to create the implementation the way I liked.

Key takeaways and conclusions

Using a vibe coding tools was fun and led to first results quickly! It created a prototype that was ready for testing with actual users.

But quickly I realized that AI code generators still seem to have limitations.

For me it was critical to jump in where the AI code generator failed. Together, we could refactor and simplify the code. With a general purpose LLM chat, I could find an implementation that was correct, reliable and maintainable.

Even in the age of AI code generators, good engineering practices like clean code, test automation and thoughtful architecture still matter - maybe even more than ever.

AI can help me (and probably you) code faster, but only with my engineering judgement I can build maintainable, stable, secure software.

What should I write about next?

For the next post in this series, I’m considering diving deeper into one of these areas:

• Security considerations for browser-based games (cheating, attacks, runaway cloud costs)
• Low-cost end-to-end architecture (from AI-generated React code to a deployable, maintainable production setup)
• Privacy-compliant user analytics (how I measure player behavior without sharing user data with 3rd-parties)
• Acquisition (how people actually find and start playing the games with a limited budget)

Let me know which one you’d find most useful.