Chapter 1: Journey

I love games and coding, so I always wanted to create an online version of a board game but there are many challenges with such a project. For example, getting all the rules right, managing the real time interactions, and replicating the essence of the game board on a flat screen. I have tried before to implement a board game online, but never succeeded. I’ve even tried to convince some friends into creating one but after a few meetings the enthusiasm faded away.

The project went into the freezer of unfinished hobbies but one day I met with some friends (including ones mentioned above) and we played a simple and fast paced game called “No thanks!”. I was engaged. I really liked the simplicity and the strategies that emerged just after a few rounds into it. We also discussed the surge of LLMs (the tech behind all the AI hype). Therefore, it all clicked. I had a few hours that weekend so I decided to give it a try. I am going to get help from AI to finally create a board game online!

In less than 2 hours I had the running game ready to be tested

I used Claude.ai because it has more support for coding experiences. I threw some prompts at it, and there I had the code for a full version of No Thanks! in React with a Supabase as the backend. Claude guided me into setting up the supabase and I asked for help to deploy into github pages. In less than 2 hours I had the running game ready to be tested. It took me more time getting people to play with me 😢 Hehe but when I finally convinced two players to join we were in the middle of the game when Kaput! The game went bananas. A player could keep making illegal moves and the real time was broken AF.  We tried one more time, same result, crashing at mid game.

It was awful, going from a dopamine zenith of a “finished” project right into the abyss of a buggy code.

Chapter 2: The valley of despair

While the UI generated by Claude was functional the game logic was on the client side and it had a bunch of errors so I added unit tests and manually fixed all errors but when I was done –to my surprise– the view didn’t actually use the logic file. It had replicated the logic in the middle of the supabase calls so it was spaghetti. I tried to patch it but I gave up. I had already spent more time fixing the thing at this level than what I wanted to.

I was about to give up but a friend told me to start fresh, so I did. I went and decided to start with tests and Claude recommended Cypress. I had the room logic in a few minutes, maybe hours (can’t remember) but I also noticed that the LLM was combining architectural decisions on each prompt. I tried to stick with client side logic for room creation, but when jumping into the game functionality it was clear that having all the clients (each website) making decisions and changing the state wasn’t that great.  It is better to have consistent logic and a state that combines players and room variables in a single place, the backend.  Also, I found Cypress had limitations with testing multiple browsers. I didn’t want to mock the database and the real time part. I wanted the test to end-to-end so I was disappointed and tired. 

So I started again: ”Third time’s a charm!” This time I did test driven development (TDD) and used the LLMs –the new way of doing search– to figure out that Playwright was what I was looking for for a test suite.  I painstakingly did the room creating tests, joining and starting a game. Then decided to start with an architecture where we will only send moves to the DB which would contain the logic and state management as well as validation. It felt like work. To make progress, I have to keep grinding. It helped a lot with the development, treating every major change from the AI like a pull request, where I review every line and ask for clarification. I found many bugs doing this.
A friend asked me, how much code did Claude generate compared to me? I said 98% was the LLM but –a huge BUT– my 2% was vital to make it work. 

Chapter 3: Hope

I got some guinea pigs to play again with it, and this time we managed to complete the game! Success🎉… Well, not with much roughness 😩. The UI was not great on mobile and there was no disconnection management, luckily I did store the ids so a refresh would make the game revive. And after many bug fixes I still have a long list of backlog of improvements. To name a few, the reconnection handling (if you lost connection it should try again) and not sending all the info for my hacky friends to see the payload in the dev tools with important information about the game cards 🤫🤐

At this point I just want to wrap it up and ship it. I am not sure many people would like to play it as it is but I’ll put it out there, especially with friends and family far away = ] The reason I create software is for people to use it and enjoy it. 
I learned so much about web development and some of the state-of-the-art tech (AFAICT) like Supabase, Playwright, Cypress. Claude defaults to recommending React using Vite. I’ve always used Firebase for RT projects (cough attempts). I also got my brain thinking about how to make the architecture and trying to come up with the prompts that would get the job done. I was happy with the logic being handled by postgres and learned a lot also about the functions and the real time (RT) caveats. At least now I know more of my unknowns. Claude and all the LLMs are going to shift the way we generate code, indeed, it was fun. I had a bunch of team members available at my keyboard. The AI as now is like an eager intern that makes many mistakes and has knowledge holes but always has a supportive attitude. 

As some may know, good code is rare, and exceptional code is even scarcer. The problem is that LLMs  are not trained with the best of the best only, they are created based on quantity rather than quality that is needed for smooth software experiences. 

The internet made me an engineer. Being able to Google something allowed me to move from crawling to a bicycle but with LLMs I felt like going from biking, to using a motorized scooter on a gravel road. You know you’re going to hit the ground, you just prepare to not have your face erased by the fall. We still need to study. Maybe very good engineers and makers in general will fly, some may tame the beast if it’s tameable –to begin with– but LLMs are definitely a powerful and intriguing tool. Versatile but clumsy.

My output is capped by my experience and knowledge and those take time and effort to grow. I will continue to use AI for my hobby projects and as it is being imposed at work, not complaining, it can be useful. I hope to be able to have a local version, even if it is a smaller model. Generating content in the age of a machine that vomits it is quite peculiar, it can feel like running against the current or like shouting next to the buffer, but that is topic for another post. 

I hope you enjoy this story. Leave a sign to me that you read it, that is the best reward. Share it with friends or leave your comments. I will solve your doubts if the LLM can’t or at least I will hallucinate one answer for them. 

You can play the game here: https://hugomosh.github.io/no-thanks/

Can you do better with the project? Maybe your prompting would give a full functional board game in one go! I want to hear more about attempts and experiences. 

Glossary

This terms section plays the role of an introduction, invitation to learn more and to give credit for the tools. 

Term	Definition	URL
LLM	Large Language Model	https://en.wikipedia.org/wiki/Large_language_model
Claude.ai	LLM chat built by Anthropic	https://claude.ai/
Gemini	LLM chat build by Google	https://gemini.google.com/
React	JavaScript library for building user interfaces	https://react.dev/
Vite	JavaScript build tool	https://vite.dev/
Supabase	Low-code backend platform	https://supabase.io/
Cypress	JavaScript testing framework	https://www.cypress.io/
Playwright	End-to-end testing framework	https://playwright.dev/
TDD	Test-driven development	https://en.wikipedia.org/wiki/Test-driven_development
Firebase	Real-time database and backend services	https://firebase.google.com/
PostgreSQL	Relational database management system	https://www.postgresql.org/
RT	Real-time	https://en.wikipedia.org/wiki/Real-time