How I Built MauJuara.com Fully With AI

Windsurf Editor for maujuara.com

Building https://maujuara.com fully with AI #vibecoding

At that time, I had the idea to revive the long-defunct kompetisi.id. kompetisi.id is an online competition platform in Indonesia.

Homepage of maujuara.com

Due to limited time due to work, I finally thought about creating a website with a full coding vibe. At the time, I wasn’t sure whether the results would meet my expectations. My homework here was to ensure the AI ​​coding results were easy for humans to read. Easy here means that if there is an error, it’s easy to find the source, and the total number of lines per file shouldn’t be too many. Furthermore, it was reusable, especially for components and libraries. The other homework was mostly about the appearance, so that it matched the description.

Long story short, I finally made it little by little with the help of prompts, but it still wasn’t 100% AI, at most around 95% AI and 5% human, because there were some things that needed my touch to improve the final result.

Init Project

The first step is init project. I prepared an empty directory first, opened it in an editor (I used Windsurf and Cursor) for this project. I needed 2 because the quota was used up when using the free version. Anyway, back to init project, I asked AI to “init new project to this directory, latest stable Svelte with Svelte Kit”.

Why I chose Svelte? Because I had a web project with Svelte before, and the impression was very good, because the bundle is small, the syntax is closer to HTML, and it’s just more fun because it’s new, because I’ve been using React and Vue too often.

Step To Create Features

Browse competition page of maujuara.com

Okay, at this point, the project is ready to run, with the default page from Svelte Kit.

The steps are gradual. I finished the static pages first, first the home page, I asked “Make me a home page, and let just an empty page,” then I continued by asking AI to create the top section first, in this case, create a header, once it was suitable, continue with the bottom section, little by little.

The important thing that I didn’t forget to prompt is, make sure when creating files, they are placed in the appropriate place, for example: creating a component, placed in scr/components, a library in scr/library, etc.

List organizer of maujuara.com

Additionally, everything is built with Typescript, making it easier for both AI and humans to write lines and functions according to predetermined expectations.

On the MauCoding YouTube channel, I also made a video on creating a simple tic-tac-toe game using Vibe Coding. You can check it out in the video below.

https://www.youtube.com/watch?v=D1ZczCD4cBk