My Vibe Coding Workflow: Idea to Launch

Hi everyone, I'm Kai. Today I want to share a small side project I recently built using the web coding approach.

It's a simple MVP, but I think it solves a real problem. To be honest, most of the work from the product idea to the UI design and even the actual coding was

done with the help of AI coding tools.

Let me quickly explain the problem this tool is trying to solve. Learning

through YouTuber tutorials is super common these days. For me, I watch Jason's video pretty much every week to stay on top of the latest AI coding

tricks. The content is great, but here

tricks. The content is great, but here is the scenes. I often forgot most of it right off watching just because there's no clear plan to actually practice what

I just learned. So, I had this simple idea. What if we could turn the YouTube

idea. What if we could turn the YouTube video tutorial into actionable to-do list? Learn by doing, not just watching.

list? Learn by doing, not just watching.

I asked a few friends about it and it turns out they feel the same way. So I

decided to build something fast over weekend using the vibe coding method.

Let's open it and take a look. This is

homepage. It show all the YouTube video I'm currently learning from. For each

video you can see how many tasks it includes and progress so far. If you

want to start new one, just click add a video and paste in a YouTube video link here. Now, let's check out the video

here. Now, let's check out the video detail page. Here you can see video

detail page. Here you can see video summary, some study notes, and here is a list of to-do tasks. You can click a task to toggle it as complete, and it

will automatically keep track of your learning progress. Here is what this

learning progress. Here is what this tool does. You paste in a YouTube video

tool does. You paste in a YouTube video link. The back end will fetch videos,

link. The back end will fetch videos, subtitles and some basic metadata like title, description and category. Then

using large language model break down into key learning points, study notes, to-do list you can actually follow step by step. Let you track your progress as

by step. Let you track your progress as you go. This is a full stack project.

you go. This is a full stack project.

Front end is built with nextjs back end is fast API. I use Python a lot so I'm more comfortable with that. and the

database is post grid circle. So that's

a general background of the project.

Here's a quick flow chart I generated using crowd sonic 4 and it outlines the main process I will walk him through today. Part one I started with notebook

today. Part one I started with notebook LM which is an AI power note takingaking tool from Google. It's very powerful. I

used to brainstorm around the project idea, gathering reference materials, organizing early thoughts, ask key question all in one place. It helped me

lay the foundation for the project by turning scattered ideas into something structured and usable. Then I took the

insights and notes from the notebook LM used them as a base. From there I asked TR GBD03 model to help generate a full

design dog for the project. So that's

high level overview. Now let's zoom in on those first two steps and I will show you exactly how I did it. All right. So

if you haven't used Notebook LM before, you can access it at notebookm.google.com.

notebookm.google.com.

I'm using the plus version here. You can

start by creating new notebook.

Next, you can upload files or documents that will serve as a foundation for your conversation with this a you can also use it to explore stuff. For example,

you might ask something that help me explore the user experience and the pain points of YouTuber tutorial products and similar products.

Click submit. You can go through this result. Pick what you want and remove

result. Pick what you want and remove anything that not useful. After that,

just hit input, bring them into notebook. Sometimes input might fill for

notebook. Sometimes input might fill for certain source. That's normal. You just

certain source. That's normal. You just

need to manually delete those. You can

also add web pages like this one. Once

all your content is in, you can start charting with it. For example, what's the biggest pain points when learning through the YouTube videos? Give it a few seconds. It might take some time to

few seconds. It might take some time to think and generate an answer. You can

continue asking questions. What are the core features of this application? One

feature I really like is that it can generate a mind map based on those content. That's super useful for

content. That's super useful for personal learning and break down the complex ideas. Next, once you've

complex ideas. Next, once you've explored everything, you can ask it to generate a requirement document based on all the materials in the notebook. like

I did here. All right. Now, the goal of this step is let GB3 model help us generate a detailed and usable text back

document. So, first open up a TBT and

document. So, first open up a TBT and make sure you are using 03 model. My

prompt here is super simple. I just

wrote you are senior architect text tag.

I'm using front end, back end and database. And then I just copy paste the

database. And then I just copy paste the requirement document generated earlier from notebook LM. A few seconds later, IGBD gave me a complete technical spec

that covers everything. Project vision,

system architect, data model, API design, and even milestones. Honestly,

it is super detailed and pretty impressive.

Now, one thing I was specifically looking at was a database design. at

first only give me a video model and a step model which clearly didn't meet the four requirements but no worries you can just ask GBT to trick and iterate it

will adjust the schema for you after a couple of quick updates the data model started to look much more aligned with what I needed next I want to ask Chibd3

about technique stack decision specifically which OIM framework is better for this kind of project circle acme or circle model. After comparing it

recommended a circle model which also happens to be my personal choice because circle models save you lot of boiler plate which is perfect for project where

you want to move fast. So yeah that's how I use all three model to help with tech spec writing database schema design and technical decision making. In this

part, I want to show you how I use v 0ero to help with product design with zero is one of my favorite tools. It

works pretty well with my stack nextjs tailwinds and shot. So what exactly is think of it as for developers specifically designed to help you build custom and web pages? Let me share a few

tips and tricks from my own experience to help you get the most out of it. With

just one prompt can take you from zero to a full product prototype. Let's take

a look at the first prompt I used. I

gave it a quick description of what I want to do followed by key features. I

also mentioned I would like the UI to be clean and minimal. If you can provide a reference screenshot that will be super helpful. I provided a screenshot of

helpful. I provided a screenshot of notebook. As you can see, the UI it

notebook. As you can see, the UI it generates looks pretty good. Even though

I'm not a UI designer, this little trick actually worked pretty well. To make the UI feel more real and interactive, I added some mock data that looks like

actual YouTube video content. Like here,

just use this JSON as mock data. To make

the page mobile friendly, just say let's make the page responsible so it works on mobile too.

Now if you want to take a specific part of the page, just hit the select button here. It let you click on any element

here. It let you click on any element and adjust it. I want to make the logo a bit bigger. After few rounds of tweaks

bit bigger. After few rounds of tweaks and iterations, the whole page feels a lot cleaner now. And that's pretty much it for UI design part. Now we are

getting to the most important part of this video. The AI coding tools I use

this video. The AI coding tools I use and how the actric code works. For this

project I mainly used to croc code and cursor. I will mainly focus on C code

cursor. I will mainly focus on C code which is a pretty popular air coding tool recently. It's developed by

tool recently. It's developed by Enthoropic and it's for agentic coding tool that runs in command line. Because

it's a CLI tool, it's quite flexible.

You can even run CR code on your Linux server. I've been using CR code for

server. I've been using CR code for about one week now. And overall, I feel like it's a bit smarter than cursor, especially when it comes to handling

more complex tasks. The installation is super simple. Just hit this command and

super simple. Just hit this command and hit enter. then C to enter C code. After

hit enter. then C to enter C code. After

installation, the first step is to login or set up your API key. You do this by typing login. Since I've already logged

typing login. Since I've already logged in, it shows my account info directory.

Next, type model to choose a model. I'm

on the pro plan, so I only access to Sonet 4. If you on the max plan, you

Sonet 4. If you on the max plan, you also to be able to choose UPS 4 here.

Now let's talk about something important. The MCP setup. By default,

important. The MCP setup. By default,

the MCP config file is located in your current directory as MCP.json. You can

open this file with any editor and add MCP servers you want to use. Once you've

added them, type MCP.

You will see that servers are now connected. Click into one and you will

connected. Click into one and you will see the toss it provided. Let's try one out. As you can see the answer is right.

out. As you can see the answer is right.

In real world development I actually use crowd code inside the cursor. Just open

new tab and type / ID and you will see it's already connected. When we start a new project we use /init command which will generate a crowd MD for project

guide. This file is similar to cursor

guide. This file is similar to cursor rules in cursor. It include overview of project the folder structure useful commands star rules and more. Here are

the four main steps I usually follow when working with Crocode. Step one,

project planning. At this stage, break down the task into smaller, more manageable pieces. Why? Because if you

manageable pieces. Why? Because if you give a huge task at once, it often ends up generating spaghetti code messy and hard to maintain. Step two is process.

Let AI generate code. Step three is code review and testing. Once a task is completed, I always review the code and test the functionality. This helps make

sure everything on the right and working as expected. Step four is get commit.

as expected. Step four is get commit.

After completing a task, immediately commit into Git. This is super important because if a major bug pops up later, we can easily roll back to previous working

version. All right, let's take a look at

version. All right, let's take a look at how this works in practice. First, we

create a file called task.md.

This file will be used to track and manage all the project tasks. We are

using the hash to add a content to memory. Oh, as you can see, it's already

memory. Oh, as you can see, it's already been added to the memory. Once that's

done, we ask crow code to generate a project to-do list based on our project document. Keep in mind, sometimes the

document. Keep in mind, sometimes the generated task might include items we don't actually need. So, we do need to make a few manual adjustment here and there. But overall, the quality of this

there. But overall, the quality of this generated to-do list is pretty good.

Krono just launched a plan mode feature.

It's super useful before write any code.

It gives you a complete plan first. This

really help reduce the chance of rework and if there's anything unreasonable in the plan, you can catch it early. Press

shift enter twice. You can enter the plan mode. Let's give it a try and run

plan mode. Let's give it a try and run the task. We can see the proposed plan

the task. We can see the proposed plan looks good. So, let's confirm and run

looks good. So, let's confirm and run it. As you can see, CR code maintains a

it. As you can see, CR code maintains a small to-do list while working on a single task. It visualize the whole

single task. It visualize the whole process and the development experience is really good. I use this mode to finish most of the code for the project.

Croc code even write tests on its own and bugs errors pop up. It often fix them without me. Honestly, that's just incredible.

All right, finally, let me walk you through the deployment process for this app. Since this is just an MVP project,

app. Since this is just an MVP project, I went with free tire options for everything. For database, I use Neo free

everything. For database, I use Neo free tire works great. For the front end, of course, I chose Vel because this is nextJS project and NextJS is made by

Vel. So, the compatibility is perfect.

Vel. So, the compatibility is perfect.

Deployment is super easy. We just import the ripple from GitHub and it's done.

Now here is the challenge. MTO processes

long videos and the subtitles can get really big which means LLM course can take quite a while but has a max duration limit for API call. Also I'm

using fast API for back end. So I needed to look for alternative for the back end. I use a crowd deep research feature

end. I use a crowd deep research feature to help me explore different backend hosting options. It generated a

hosting options. It generated a comparison table for me. You can see that render offers a wrong API timeout durations which is great. But the

downside is on the free tile the server goes to sleep and the code starts can take over a minute. Still after

comparing I decided to go with a render for the back end. To fix the sleep issue I found a simple solution. I'm using a chrome job service called better stack.

It pins my API on a regular schedule so the render server doesn't fall asleep.

That's it for this video. Really

appreciate you sticking around.