I built a global chess board from scratch completely with Claude (NextJs & Firebase)

#llm #nextjs #webdev #firebase

First off, I am not a developer irl. I am a DevOps Engineer (senior btw). Regardless coding I have always been self taught and never had the attention span to complete a full course. I've always been building and never had the validation from a real developer if the things I do are bad or not.

With that being said, I have no idea if the code in the app is good or not. What matters to me is that it works.

This post is me sharing my fascination with the whole process and the result.

Also, if you'd like to look at the code to evaluate it, here is the github repo - https://github.com/kubeden/globchess-next-public

The app

The app in question is globchess.com - a global chess board anyone can make the next move on.

Here are the technologies used in the app:

Firebase: client + firebaseAdmin
NextJS: NextAuth.js, React
Stripe: stripe api...
Platform: ArgoCD, Kubernetes (ingress, deployment, service), Nginx Ingress Controller, Cert Manager, External DNS, Cloudflare, Github Actions

Here are the concepts I learned while building the app:

JS: Web Workers; Client Versioning
NextJS / React: useState, useReducer, useRef, unsubscribe logic, React Portal, NextAuth.js, JWT, session token decoding
Firebase: onSnapshot, collection, query, transaction

I was astounded with the level of intelligence Claude displayed. It was able to implement any feature I wanted it to, or fix any bug that appeared along the way.

Here is a list of all the features:

Routing
Authentication (+session token decoding)
Chess board render (with the Chessboard.js library)
Make a move logic (with the Chess.js library)
Board orientation swap logic
Squares highlighting
End game logic
Save finished games
Browse through past moves (both on live table and on past games)
Lock & Unlock board logic
Move Accuracy
Rating
Winning chance for both white & black
Stripe webhooks logic
Stripe to token after payment logic
Sidebar components for Profile + default sidebar
Live chat + system messages for game updates

I probably forget something. I most certainly am.

The process

The LLM code-in-english process is quite simple, very chaotic, and strangely... rewarding.

When I started the project, I entered the same prompt I always start with:

I want to create a [ thing ] with [ framework ]
Imagine I am a junior developer and you are an experienced senior developer. Help me with EACH STEP of the development process.
I want to start with the following:
[ basic feature ]
[ basic feature 2 ]

And then I would refine with:

[ x ] doesn't work, I want it to [ explain what I want it to look like ]
> paste of the entire component / page

And then... this same thing over and over again. This is really everything there is to it. I know this sounds underwhelming. It is.

prompt --> copy/paste --> prompt --> copy/paste

I would like to note down an important detail I found makes a huge difference coding with LLMs. I found it is very important to read through the responses, understand what the LLM is outputting, and if you don't understand a concept - either ask the LLM in a new tab or google it. Understanding what you are copy-pasting is crucial down the road. If you do not understand what you are pasting, at some point you would be unable to prompt anymore and your project will die.

Conclusion

Yes, this post was short. Yes, it was also underwhelming. Just as underwhelming as coding with LLMs is. But you know what? You thought - hey, now I can build an app like this. And you will probably give it a go. And you will succeed.

So in a sense this post provided just as much (little) value as an LLM would.

Just like an LLM would...