Vibe Coding with Gemini 3 + Cursor (full build / beginner friendly)

What's going on, guys? This is Oliver, formerly from Response AI and a few other tools that I have since exited. In

this video, I'm going to be creating a full CRM from scratch using Gemini, Cursor, and Superbase for the back end and showing you exactly how to do it.

So, if I just refresh the page, you've got this beautiful um landing page for the software called Luminina. Um, you've

obviously got like pretty polished kind of nice looking UI here for the um, like you know design for the landing page.

You've got little uh, fields here for the steps you take uh, and then pricing etc. frequently asked questions, that kind of thing. We're going to head up and click start free workspace and we're

going to sign in. You can also create an account if you want. Um, I'm going to sign in with my credentials and sign in.

So, as you can see here, we've got a beautiful little dashboard here um with the pipeline value, the active deals, the win rate of those deals, and then pipeline value in um a chart. You've got

tasks, which we're going to create in a second. Um you've got a pipeline with

second. Um you've got a pipeline with stages of new, contacted, qualified, negotiation, closed, etc. with the names of the leads, the tags, the deals, the deal sizes, companies, etc. Um you've

got the list of leads here with all the tags. You can delete or restore leads

tags. You can delete or restore leads and add them to specific lists. Um

billing and settings, etc. Pretty boring stuff. Um but from here, let's start

stuff. Um but from here, let's start with the tasks. So you can go into a new task and say follow up with um let's say

Steve. Um he needs to um sign the

Steve. Um he needs to um sign the contract. We're going to say the

contract. We're going to say the priority is high. The status is to do.

And the due date for this, let's put it as tomorrow. Um, [snorts] and let's say

as tomorrow. Um, [snorts] and let's say related leads. And you can actually,

related leads. And you can actually, um, I can't see the screen, sorry. Let's

say it's Bill Townsend. So, let's change it to, you know, follow up with Bill.

So, from here, we're going to create the task. And now we've got a task in here

task. And now we've got a task in here with a high um priority and it is um added to Bill Townsen. If we go into the pipeline, you'll see that Bill also has

a task here. You can go into the lists and add new deals or you can add new leads. Um so if we go into the pipeline

leads. Um so if we go into the pipeline here we are going to or going to list sorry um what should we do here pipeline new deal new task or let's go to

dashboard and click add lead. We go into add new lead. Um Steve Evans company would be Steve Evans Consulting. Email

is let's just say Stevemail.com.

The value let's say that the deal is say $2,000 that he's currently in negotiation and let's say the tags are um warm intro referral and lead. And we're going to

save the lead. It increases the pipeline value and it adds um Steve to our pipeline as well. So where's Steve here?

Steve is in negotiation. You can also import leads um from a CSV. So, if we go into this test CSV with all the names and stuff, we're going to download it as

a CSV. We are now going to head back

a CSV. We are now going to head back over into Lumen and import. We're going

to choose the file. We are going to click test CSV.

Pop it in. And now you just map the the leads names and stuff. So, full name is full name, email, email, company, company, value is value. And then we are going to add it to a target list called

create new list um uh example and we are going to add it to that list and import.

Now it's going to say that we've successfully imported 15 leads. Um and

as you can see all of these new leads have been added as well. And inside the lists you've got the example list. So

this is just a great sort of beginner um and our pipeline is huge now which is cool. You can also export all the data

cool. You can also export all the data etc. So, I'm going to show you guys how to build this in a second and let's get started. Okay, guys. So, the first thing

started. Okay, guys. So, the first thing we're going to do is build a PRD um so a product um research document

um or product requirements document for the actual um app itself. So, what we're going to do first is create the PRD for

the CRM. So, let's say create me a

the CRM. So, let's say create me a detailed extremely beautiful PRD

for a simple CRM app. The app should be minimalist glassy

interstyle thin and small font.

Beautiful tabs and pipeline management.

pretty uh drag and drop canban cards in the

pipeline tab.

Should allow users to upload a list of leads.

should allow users to save new leads and create leads as as new.

Should allow users to delete etc. should have billing settings page dashboard

with pretty analytics.

Pretty pipeline.

a lists tab with lead lists and whatever else you feel is required of a simple CRM.

I want the app to be beautiful like atio linear etc.

Thin font thin lines lots of white space lots of beauty.

I want to allow users later on to set up backend with superbase.

create this PRD and make it at least 3,000 words with emphasis on design

functionality animations and beautiful styles of loading,

beautiful icons, etc. So guys, um the P has loaded uh based off of that um prompt, [snorts] right? And I'm going to put that prompt in the um description.

So don't worry. The CRM app is designed for small teams and solo founders who want to build a simple who want a simple, elegant, highly functional um tool for managing leads, etc. So

analytics, activity feed, quick actions, camb board, columns, car details, animations, lead lists, etc. Right? Uh

it's done the design as well. It's

sorted out the back end for us or at least like the general overview of the back end. And I'm going to head over

back end. And I'm going to head over into Gemini AI Studio and just paste this in. So, um, let's actually just

this in. So, um, let's actually just click build on that. Okay, guys. So,

let's have a look at the first sort of, um, run through of the dashboard. So,

immediately what I'm noticing is that I don't really like the sort of AI slop style of this dashboard. So, it's just going to take one or two little um you

know changes to the dashboard itself to make it look beautiful. So, let's go.

We've got the dashboard itself which has conversion rates, revenue, active leads, etc. and then recent activity which is good. You've got a pipeline with a

good. You've got a pipeline with a working pipeline stage canban board. So,

this is pretty cool. You've got lists.

Um so, it's a beautiful list sort of like um deck here. Billing as well, which looks pretty cool. and then

settings with no other working tab. So

let's actually go over to the dashboard and decide what we don't like about this design. So I am going to say leave full

design. So I am going to say leave full screen.

Thanks. But I don't like the AI slop style of the dashboard.

I think we could use more white space.

majority white, gray, black, etc. Atio style, linear style, less radius of edges. So, you see how like

it's kind of like sloppy when there's like rounded edges. I much prefer um square edges.

Uh square edges instead.

Um, less blue, more white, black, gray. Adding images

for inspiration here.

So, I'm going to head over to dribble.

Going to look up UIs. I'm just going to decide on some UIs that I like. So, I

quite like this one here. So, I'm going to copy this image.

Going to post that one in. I'm now going to look up um Atio.

So, let's let's get some Atio designs in here. So, that looks pretty nice. Uh

here. So, that looks pretty nice. Uh

copy image um this one. And I'm just going to send the prompt. Okay guys, so um it has completed um the rehash of the design and as you can see here, it

actually ran into its own um scope error which it then analyzed and corrected itself. So, as you can see, all of the

itself. So, as you can see, all of the updated files are here. If I go into full screen now, you can see that it is a lot prettier, right? In my opinion, I don't like the sort of blue AI slop and

like the neon colors of the last one.

Pipeline looks gorgeous as well. It's

like very minimalist. Um, lists, etc. Billing settings, that's absolutely fine. Right. So, what we're going to do

fine. Right. So, what we're going to do now is I'm actually just going to set at the back end. So, what I'm going to do is save this to GitHub.

So repository name can be um CRM YouTube and um test for YouTube and we're just going to set that up as private and

create the GitHub repo. It's going to ask you to stage and commit all the changes. So we're going to do that as

changes. So we're going to do that as well. I'm actually going to take the uh

well. I'm actually going to take the uh URL of the GitHub repository, click clone repo, and then paste this in.

I'm going to select as repository destination is just, you know, my files.

Going to um open this up and here it is. So, as you can see now, I'm just going to run it on local host or just start a new terminal.

I'm going to try and just, you know, run mpm rundev, right? It's unlikely that it's going to work. Um, so I'm gonna ask

uh cursor instead. So, um, or let's say mpm install.

I don't know if this is [clears throat] going to do anything to be honest, but it's just to double check that um, all of my bits and bobs have been downloaded. Now it has added 112

downloaded. Now it has added 112 packages which is great. I think because we're on Vite it won't work or there it

is. So we are on localhost 3000. So

is. So we are on localhost 3000. So

let's head head over to localhost and I'm going to say localhost 3000.

Okay. So the local host did load but it was actually initially blank. So what I said was um local host is blank for some reason and there's no logs. So it um

basically said that because we got it from Google AI Studio, the index html, which was just like the app itself kind of thing. It was um pointing to a CDN, a

of thing. It was um pointing to a CDN, a CDN from Google, right? So basically I said, okay, we'll fix this. And now we have the dashboard. Okay, so here's what

we're going to do now. We are going to set up Superbase. So let's head over to Superbase. going to head over to project

Superbase. going to head over to project name and we're going to say CRM for YouTube. Database password can be

YouTube. Database password can be whatever. Um, create new project.

whatever. Um, create new project.

Now that we've done this, um, [snorts and clears throat] I'm just going to head over and get the API key.

U project URL and gonna say is my

uh let's set up superbase now for user authentication

managing SQL Well, and back end managing the UI itself. So users can use the entire app with backend

functionality and allow privacy. So only

users can see their own data.

Now what we're going to do guys is we're going to say here is the PRD

that built the app so you can govern the SQL needed for all the functionality

eg pipeline saving leads dashboard etc. also create a basic

landing page and or screen for creating an account and logging in.

And this should be set up. So, Superbase

manages it.

Next thing I'm going to do is get the API key.

Um, I'm going to say is my API key And [snorts] what we're going to do now is head over to the PRD that we built and say the PRD

for my CRM app and we're going to post this in. Okay guys, so we are back.

this in. Okay guys, so we are back.

We're going to keep all So a lot happened here. Okay, there was a really

happened here. Okay, there was a really massive chunk of um code that was created, code that was deleted, etc. So it says to run the SQL code. So what

we're going to do, the SQL code guys is basically just like the skeleton of the back end. So if we head over to the um

back end. So if we head over to the um Superbase dashboard and go over to SQL editor, um I am going to run this SQL code.

There is a lot of SQL.

Now we're going to run the query.

Says no rows return. So go to table editor. As you can see here, we've got

editor. As you can see here, we've got all of these different um tables. What

we're going to do is go into project settings and then go down to authentication.

I'm going to say confirm email off and then save changes. So, this is so that people can log in and log out easily.

Right. Um I'm going to can I save this and just set it up?

Okay. So um it looks as though it has created the dashboard or the landing page at least right on local host and it is very funny because there's absolutely

no data here. It is just this page you can't scroll right. So obviously this is a really terrible landing page and we're going to get started on designing it better. But if we click get started you

better. But if we click get started you are taken to the authentication and we can set up a full name. Let's set

up the um email as ober 5569 whatever it may be password and then we're going to create the workspace.

So it has created the workspace now and as you can see you've got empty dashboard empty pipeline empty lists billing and settings etc. Right. So

let's test this out. So the dashboard um let's add a lead. So, I'm going to say um Steve Jones

company with let's say SJ Consulting.

It's all pretty similar to um my past test from a different um app. So, Steve

at um let's just change that. So, SJ, we're going to say the value is

um $10,000. The stage is that they are

um $10,000. The stage is that they are qualified and the tags, let's say for example, let's just use this from a different test. So, save lead. So, as

different test. So, save lead. So, as

you can see, our pipeline value is $10,000. We've got active deals one, win

$10,000. We've got active deals one, win rate is 0%. Let's head over to our pipeline. As you can see, Steve is in

pipeline. As you can see, Steve is in our qualified pipeline. Now, if we head on over to the dashboard, let's go over to the table editor. If we go into leads,

we've got a prior lead from um a previous test and we've got Steve Jones, right? So, um SJ Consulting 10,000

right? So, um SJ Consulting 10,000 qualified, etc. And it says that he's in the qualified stage.

Um list leads, there's none lists, there's none activities, none invoices, none leads, subscriptions, profiles. So,

as [snorts] you can see, I've got a profile here. Well, there's two profiles

profile here. Well, there's two profiles from one of the test. And I'm [snorts] going to head over now and test this out. So, what if I move um Steve to

out. So, what if I move um Steve to negotiation?

So, it looks like everything is fine now. So, let's just refresh the page to

now. So, let's just refresh the page to make sure that worked. And he's still in negotiation, which is great.

I'm going to head over to um the leads and see what pipeline stages in. So, it

still says he's inqualified, which is really interesting.

There we are. So, I just had to refresh the page. So, Steve is now in

the page. So, Steve is now in negotiation, which is great. So, it

looks as though what you can do now is you can create leads. The leads and the pipeline value are inside the active deals, right? On the overview. Let's add

deals, right? On the overview. Let's add

another lead.

And let's say Jamie Evans um Jamie Evans um co.

Let's say that um his email is jco.com.

Let's say that his value is let's say for example 2000 and the stage is

contacted and tags is cold lead um some interest or interest and let's save lead. So now what's great is you've

save lead. So now what's great is you've got the calculation of the pipeline value. If we refresh the page just to

value. If we refresh the page just to make sure that it's all good, you've got a perfect pipeline value. You've got the active deals too. And then inside the pipeline, Jamie is in contacted or

negotiation. Right inside the lists,

negotiation. Right inside the lists, we've got two leads and with the tags, it looks beautiful. I don't really like that black chunk there. And then

obviously, you've got settings and building that doesn't change. So, the

dashboard itself is looking pretty good, right? So, I'm going to head back over

right? So, I'm going to head back over to um the PRD. I'm going to say now that

this is done, make me a functionality PRD for the next few features.

a to-do list with tasks, priority of tasks, and the leads from

our system that the tasks include or concern.

Um, uh, I can't spell. Let's say the next thing is import leads. Export leads. So users can

import leads. Export leads. So users can upload a CSV of leads with simple data.

Let's say value, full name, email, company,

and upload the CSV as long as the headers work. Or maybe set up

headers work. Or maybe set up functionality to create

a matcher. So user uploads a CSV,

a matcher. So user uploads a CSV, chooses the columns, then the data is mapped from CSV and the leads are

imported to their lead list.

What else should we add, guys? So you've

got import leads and export leads.

You've got a to-do list, which is going to look beautiful. [snorts] Um, we can already add and change leads um and delete leads. Oh, we actually

can't delete leads. Um, we cannot delete leads yet from the pipelines

or lists. So, make sure we add that.

or lists. So, make sure we add that.

Um, and let's say also creating save lists doesn't work right now because we don't have functionality

to save specific um, selected leads to a list. Um, what

else can we do now? If we say no, we'll actually just save it like that. So, um,

now create this um, CRD PD a to-do list with tasks. import leads, export leads.

with tasks. import leads, export leads.

Um, here's a focus functionality. So,

okay. So, it's an absolutely giant PRD here. So, I'm just going to pop this in.

here. So, I'm just going to pop this in.

Head back over to Superbase. Keep all

the thanks.

Now, I'll implement these new features from my next PRD. We have a to-do list

um functionality for tasks and for uploading CSVs.

Make sure the back end works for this among other things. We're going to paste that in and we're going to click send.

And I will skip ahead guys until this is done. Okay. So, um it ran again for a

done. Okay. So, um it ran again for a long time. And by the way guys, this is

long time. And by the way guys, this is not costing much. It's costing pennies at a time. Um I'll explain at the end how much all of this is costed, but it's going to be less than a couple of dollars basically singledigit dollars.

So >> [snorts] >> um basically um everything has stayed the same except settings and billing. So

keep all.

I'm now going to pop in if I just restart the server mpm rundev.

Right. So we are back to the dashboard and I am going to just add a new lead to double check this. So let's say um

Louise Evans um l eval elco.com the value we can say is uh 2400 stages

qualified tags is cold from LinkedIn and just click save lead. It's now added the correct pipeline value which is great.

Um, she's now also Louise is now also inside the pipeline, which is great. Um,

now we're going to go to lists and she's here. And we've now also added a delete

here. And we've now also added a delete lead feature. So, you can click delete

lead feature. So, you can click delete lead. Um, and you can delete Louise. And

lead. Um, and you can delete Louise. And

if you go back to the dashboard, Louise is gone. She's gone from the lists and

is gone. She's gone from the lists and she's gone from the pipeline, which is awesome. Now, here comes the tasks test.

awesome. Now, here comes the tasks test.

So, we've got a sort by due date, a search task, and then all of these different tabs. So, I'm going to go to

different tabs. So, I'm going to go to new task. Um, that looks pretty clunky,

new task. Um, that looks pretty clunky, but it's okay. I'm going to say,

um, follow up with Steve about contract.

Um, Steve needs to sign.

Let's say priority is high, status is todo, and due date is does this work? Yeah, it

does. We're going to say the 30th. And

then the related leads. Let's say Steve.

And look, it actually um searches for the lead. And we're going to click

the lead. And we're going to click create task. So now, if we refresh the

create task. So now, if we refresh the page, we've got a follow up with Steve about contract. We go into the CRM,

about contract. We go into the CRM, go to um tasks, and as you can see, we've got a new task inside the

dashboard for the user. What I'm going to do now as well is test out the um list creation. So, oh, okay. So, we can

list creation. So, oh, okay. So, we can select these two, save to list, and we're going to save it to founders test.

And as you can see over here, now you've got the two leads in founders test.

We've actually also got the leads that we've deleted inside the trash, which is so so cool. Right, what we're going to do now is just double check that we can move leads to the pipelines. Going to

refresh. And that's working.

Tasks is working. Dashboard is working.

And now here's what we need to do. So

I'm going to try and click export.

Nothing happened still. So we're going to do the export as well.

>> [snorts] >> But if we go to tasks pipeline, I'm going to create a sheet [snorts] and we're going to test the

hardest feature that I've built so far, which is the lead import. So, I'm going to say um full name, email,

company, um um stage, and then let's just say that. So, uh

let's say Phil Roberts and let's add his brother Dave Roberts.

Let's say Philxyzco.com.

Let's add his brother's email. Um,

Davexyzco.com.

His company is xyzco.

His company is xyzco.

Let's say the stage is contacted and contacted.

Um, and let's just make sure that that is both that whatever.

I'm hoping that if we do this and say test going to export this as a CSV.

Now I'm going to head over to Lumen.

Going to import.

Going to drag the CSV in.

Let's just actually choose it.

We've got the mappings. Let's see if this works. So full name is full name.

this works. So full name is full name.

Email is email. Company is company.

Value is ignore for now. Duplicate

handling. Target list. No list. Oh, we

can say let's add it to founders test which is great. And then let's click import.

Okay. So as you can see guys, we've got the um list here which is great.

Obviously, it has no um pipeline value.

Um and it also doesn't have any tags, but that's okay. Um we can obviously change that inside the CSV. Um we can also see here actually that there's a

task involved from that lead, which involving that lead, which is great. So,

um I think to be honest, guys, I think I'm done here. I think in general, we go back to the dashboard. I'm now also going to give you guys the prompt to

create a beautiful landing page. So, if

[snorts] we head back over to the PRD, thanks. Now, can you give me a gorgeous

thanks. Now, can you give me a gorgeous design PRD for the UI and um whole

for the landing page. I will give you images

landing page. I will give you images from pretty landing pages, interstyle,

minimalist, glassy, lots of pretty animations, etc. And then you can

and then you can create the PRD for the landing page of the CRM.

So I'm going to head back over to Atio um or back over to um Dribble, sorry.

I'm going to click I'm going to type in landing page.

Let's find some landing pages that we like.

Um going to just choose this one.

Just copy this image in.

Um wrong tab at your landing page to linear um

factory.ai etc. Lots of movement and animations and pretty background

textures like grids, etc. We're going to copy this.

Thanks.

Finally, can you please design the landing page?

So, it is beautiful.

Here is the PRD. Now, I'm going to do something experimental, guys. I'm

actually going to choose Gemini 3 Pro for this because the design is so be actually I'm going to use Claude 4.5 Opus High because it's the new model and

it's as cheap right now as the um normal Claude model. So, I'm going to click

Claude model. So, I'm going to click send and it's going to design our landing page for us. Right, guys. Let's

see how this landing page looks. It

wrote something like 2,000 lines of code. So, I'm just going to head over to

code. So, I'm just going to head over to the Okay, guys. So, I am on the landing page, and it looks absolutely insane.

So, as you can see, um the uh agent actually wrote something like 1,500 lines of code. And as you can see, a CRM that you want to open. You've got

the um sort of like animated. This is

completely from scratch. The animated um dashboard kind of like animation here.

You've got first sign up to lead. Uh

you've got the designs here. You've got

the this is kind of like blank here, but every screen thoughtfully designed. And

then you've obviously got like the pipeline boards and stuff like that. Um

you've got a animated um like testimonials timeline which is awesome.

You've got the steps here. So, upload

CSV map fields pipeline ready simple transparent design and then start your workspace and you've also got an FAQ which is unreal. So, you click start free it sends you to the or which is

insane. So, that is crazy. Um, and I'm

insane. So, that is crazy. Um, and I'm going to end the video there. Um, and

obviously at the start of the video you might see some changes because I've just done some little like touch-ups here and there. Take care.

there. Take care.