Introduction
So I decided to jump in and ride the new Vibe-coding wave in order to see it firsthand. What started as a simple, small project testing AI capabilities became more interesting for me. I have to admit I invested a couple of days during weekends to have it decently for my standards. It still needs more improvement, especially the way I seed the challenges to the database and add unit tests.
The heavyest part was the backend's CI/CD process because it uses several services, such as Docker containerization.
https://quest.cristianecheverria.com/
Code submission
Skill Tree
The Idea
It all started because I always struggled with coding interviews, where I had to code based on other developers'/managers' instructions, things like traversing an array, using map/reduce to transform an array into an object, etc. I always failed those coding challenges, so I decided to build something for personal consumption and try out different algorithms and languages; for now, it only has TypeScript/JavaScript and PHP (requested by my nieces).
I would add more languages like Go and Python, and other technologies like CSS and HTML. I might also add features like Learning Tutorials and more web-core concepts like Server-side rendering, and use it as a teaching tool with mentees who want to learn to code.
The Process
You know the saying: The most important part is not reaching the goal; the most important part is the journey itself. So far, it's been a very interesting and learning experience, and I can see now the potential in AI for coding.
I went from purely auto-complete using Copilot when working at Volvo Cars, Sweden, to the Terminal thanks to a colleague who introduced me to Neovim when I re-joined Etraveli. I spent some months learning about Vim and then fully moved into Neovim. Then I tried AI using the Claude Web App client together with Repomix, and the results I got blew my mind.
Today, as I write this post, I'm testing Zed as a code editor, and so far, so good. I like that it has Vim motions as an option, and it works pretty much fine. It also has all the cool features like AI Chat and Collaboration with others via Channels.
Step by Step
I started with a basic frontend Vite React + TypeScript + Tailwind Template, which is nothing fancy. And then I used Repomix, a great tool that Pack your codebase into AI-friendly formats and created a repomix-output.txt file that I used to inject as Context to Claude.
If you have some experience coding with LLMs, you know that Context is King. In order to get better suggestions from LLMs, you need to feed them with the right Context (you can also use Rules, but I haven't tried that yet).
Also, in order to get the best from AI, you'd better pay for one of the LLM's monthly subscriptions; otherwise, you will not get the best. I currently pay the $20/month subscription to Anthropic creators of Claude.
So far, Claude 3.7 Sonnet and Gemini 2.5 Pro are the best LLM's for coding that I have used. I use Claude for personal purposes.
At first, I had two separate repositories: Frontend & Backend. Still, I decided to use Monorepo to generate a full codebase with repomix with frontend components and backend API.
Gamification
Originally the project looked like this for the Challenges:
And like this for LearningPath:
I actually didn't have the Badges, and then I asked Claude to add some Gamification. It gave me a full implementation with a Skill Tree, Badges, XP, and a gaming look and feel. I was mind-blown.
Code editing
As I mentioned, I used Neovim for this project, so it was a lot of copy-and-paste from the Claude Web App into my code editor. I didn't want to use Cursor, Windsurf, or other fancy tools at that time; I just used Neovim AI plugins. Most of the time, I prefer to ask Claude and then review the complete suggestion myself by copy-and-paste. I do recommend this in order to keep track of what code you are adding to your project.
CI/CD
Originally, I never thought about pushing the project online; it was just for my own consumption. But then I decided to push it online, and that was when all the pain came. My goal was to have a decent setup using GitHub Workflow, but the backend is more complicated.
I needed a proper backend setup to handle Docker containers for the code submission and also decide about the database to use. All this needed to work smoothly with GitHub actions. On every git push to the main branch, I needed to be able to integrate my changes into the backend server and, if necessary, seed the database with the latest added challenges.
The front end was the easiest part to set up, with a static hosted site we have access to for Free that already handles the CI/CD process.
And that's it!
Things to take from this
- You'd better pay for LLM's subscription to get the best.
- Context is King.
- I recommend the old-fashioned copy-and-paste method for important projects so you can keep track of what you're adding.
- Be patient. LLMs use tokens as inputs and outputs. Every character you pass/get can be a token, and you can easily run out of tokens if your codebase is big. If you need to wait a few hours to reset your tokens, pause, drink coffee, and return, maybe the next day.
- AI is becoming better and better, especially for coding. Creating projects from scratch is probably the best use of AI you can make, instead of big existing projects.
- Be careful about Privacy, I only use Claude for my personal projects.
If you want to know more about the platform send me en email and we can talk: cristian.echeverri4@gmail.com
All the best!
Note: This post was generated 98% by the author. 2% used Grammarly.