This content originally appeared on DEV Community and was authored by Kuberdenis
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...
Read Next: Juniors Are Doomed And This Is Good (LLMs Hype, Copilots, and The Turning Point)
This content originally appeared on DEV Community and was authored by Kuberdenis
Kuberdenis | Sciencx (2024-07-31T17:46:25+00:00) I built a global chess board from scratch completely with Claude (NextJs & Firebase). Retrieved from https://www.scien.cx/2024/07/31/i-built-a-global-chess-board-from-scratch-completely-with-claude-nextjs-firebase/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.