0:00

heard of vibe coding? It might

0:02

sound intimidating, maybe even scary

0:04

if like me, you don't know

0:06

how to code. But for

0:08

every marketer on this planet, it's

0:10

about to become absolutely crucial.

0:12

Why? Because this AI powered way

0:14

of building things online is

0:16

already changing how websites, tools, and

0:18

apps get made. And chances

0:21

are your competitors are already building

0:23

things with this. Now recently,

0:25

we've been building everything from simple

0:27

calculators using just prompts to

0:29

fully functional apps with databases using

0:31

tools like Lovable, and even entire

0:33

websites with complex pages and

0:35

fancy styling using platforms like Windsurf.

0:37

This stuff is beyond powerful,

0:40

but... Starting out can feel really

0:42

daunting, so today we're breaking

0:44

it down into three simple levels,

0:46

showing exactly how you can

0:48

get started building, well, anything.

0:54

Okay, girl, do you want to show us

0:56

the first example? Okay, so for

0:58

the first example, I wanted to pick something

1:00

that everyone can do and can actually just

1:03

make them money, basically, like something that's practical.

1:05

And I'm going to give you a real

1:07

case study. Basically, we are working with marketing

1:09

pros, the RI recruiting agency in South Africa,

1:11

and their kind of like USP is that

1:13

they're cheaper than everyone else. You get people

1:15

that are equally as good for less money.

1:17

That's really the high level thing. The problem

1:19

is like their landing page. does not

1:21

really reflect how much money you can

1:23

save right and so you could be using

1:25

vibe coding to make some kind of

1:27

like simple calculator so people could essentially calculate

1:30

their savings right so that was the

1:32

idea for this project the first thing i

1:34

needed is data i needed to understand

1:36

like you know how much do the kind

1:38

of jobs that they hire for What's

1:40

the price difference in terms of salary?

1:42

So I asked it for, I went

1:44

to Gemini 2 .5 Pro Advanced Deep

1:46

Research. Do you to just break down

1:48

what those words mean? This has changed

1:50

recently, right? Okay, so Gemini Advanced is

1:52

just like, we have that as part

1:54

of Google Workspace. So if you pay

1:56

for a company Gmail, you basically have

1:58

that. But I think there is also a

2:00

Deep Research in a free version. Deep

2:03

Research is basically an agent that will

2:05

browse the internet. I think it browsed like

2:07

300 websites to essentially create that. report,

2:09

takes about 20 minutes, which is why

2:11

I'm not doing it live. And I ask

2:13

it to look for in -house SEO,

2:15

you know, salaries, US versus South Africa,

2:17

ads managers, podcast managers, video editor, software

2:19

developer, marketing project manager. And what it

2:21

did is it actually got me data

2:24

in tables, which is very handy. It's

2:26

not perfect, but it's not worse than

2:28

if I sent an intern to get

2:30

that data, basically. So that's kind of

2:32

like the basis of my calculator. Then

2:34

the next thing that you are going

2:36

to start learning. when you want to

2:38

do this kind of vibe coding, which

2:40

is going to remove a lot of the

2:42

mistakes that the code editors make when

2:44

you create something. It's creating what is called

2:46

a PRD, which is a product requirement

2:48

document. Thank God it's very boring to write,

2:50

but we have AI to do that

2:52

for us. We've built a few tools in

2:55

our previous business using a software development

2:57

agency. And this is essentially the same process

2:59

when you're working with the developers. You

3:01

need to tell them what you want because

3:03

they don't understand your business. So it

3:05

doesn't need to be too technical. You just

3:07

need to explain what the business wants. Exactly.

3:09

And the more detailed your prompts, the

3:11

more essentially likely you are to actually

3:13

get what you want. So literally my

3:15

prompt to Gemini 2 .5 without deep

3:18

research this time and using the Canvas

3:20

feature that allows it to create documents

3:22

was to say, hey, I need to

3:24

create. a PRD for a simple calculator

3:26

for marketing pros to help people value

3:28

their services on their homepage by comparing

3:30

the price of hires they make with

3:32

them versus the price of hiring in

3:34

the US. And I very dirtily pasted

3:36

the data I got from deep research,

3:38

basically. And the only second prompt I added

3:40

was like, oh, make some tasks at the end

3:42

of essentially like how to build this, like

3:44

kind of like plan the building. And so I

3:47

have this kind of like big document and I

3:49

clicked on the copy button and then

3:51

I went on a new window and I

3:53

said, create a calculator following this PRDs.

3:55

And I just pasted whatever I got over

3:57

there. And I started thinking and it

3:59

gave me basically like a

4:01

version of this basically. And I

4:03

can show you the previous version. You

4:06

can preview code directly in Gemini

4:08

then. Yep. So that's the first version

4:10

I got, right? And it's like, you could basically

4:12

select a role based on the data we got.

4:14

You could select like the level of experience. It

4:16

would give you basically some kind of

4:18

comparison where you can save between $41

4:20

,700 and $48 ,000, whatever, annually average saving

4:22

this. It gave me some kind of

4:25

design stuff that wasn't perfect. And so

4:27

I just kind of had a few

4:29

chats with it. So I was like,

4:31

oh, change this, change that. The flag

4:33

wasn't here at the beginning, et cetera.

4:35

And then it's like, for example, I

4:37

ask it to add some loading animation

4:39

to make it look like

4:42

we actually like... deep research into

4:44

a database and make something that looks

4:46

fancier than it is. And it's like, now

4:48

the last version I have, it's like

4:50

I gave them the branding as well, like

4:52

the colors. And if I take like

4:54

ad manager senior, for example, then you can

4:56

see I have this like, oh, calculating

4:58

your savings, whatever. It does that. It kind

5:00

of reformatted that. And I can just

5:02

basically have the button. That's pretty much what I

5:04

built. Could help your conversions if you had

5:06

something like this on your website as marketing

5:08

pros, right? The problem that a lot of

5:10

people have. I'm just thinking like back when

5:12

we had our SEO agency, there's so many

5:14

SEO companies had these calculators, like how much

5:16

money can you make with SEO if you

5:18

rank for this for your keywords and these

5:20

little calculators. It was pretty cool. But, you

5:22

know, back then it cost money to build

5:25

this. Completely trivial to do. And

5:27

you can see on my prompts on the left, I basically

5:29

talk to it like I talk to a developer. This

5:31

prompt is so simple. Let's add some perceived

5:34

value by adding a two -second load time

5:36

for the results with a fancy animation, making

5:38

it look like we're doing live calculation and

5:40

covering proprietary databases. And so, for example, like

5:42

the branding, I went from a non -branded version

5:44

to a branded version. The only thing I

5:46

did is I went on their website, I

5:48

right -clicked it, I went into...

5:50

This looks fancy, but don't be afraid. This

5:53

is the CSS on the right. And then

5:55

you can see there's like all the variables

5:57

of their design here. I just copied this

5:59

and I pasted it in the chat over there.

6:01

You can see I just literally pasted this. I

6:03

was like, use this. Just figure it out.

6:05

And it just rebranded it, basically. You have to

6:07

paste in the code. Can you not just

6:09

ask it, like give it the URL and say

6:11

style it in the style? It doesn't fetch

6:14

it as well. Sometimes it will fail. Like it's

6:16

much more reliable to do. It's really not

6:18

that difficult to do this. Just scroll to the

6:20

bottom of the CSS, the styles tab, basically.

6:22

Grab the theme style. You can see there's the

6:24

fonts, the sizes, all of that. And

6:26

here is that. You don't need to understand what it

6:28

is. And it will just delete. That's vibe coding. Like,

6:31

in essence, you don't have to understand. You just

6:33

need to understand the high level. You don't really

6:35

need to understand what the code is doing. This

6:37

is pretty safe to deploy something like this on

6:39

your website. Like, it's fine. You can totally release

6:41

that. But then I guess the question people have

6:43

is like, OK, cool. We're on Gemini. How do

6:45

I put this on my website, right? That's the

6:47

main problem people will have. And so the way

6:49

you do that is actually very simple. I'll show

6:51

you a free way to do this. You go

6:53

in the code part. It's going to

6:56

look scary, but don't worry. You just click

6:58

on the copy button, right? Then after

7:00

that, we're just going to go on my

7:02

desktop, or rather in this thing, and

7:04

I'm going to make a new folder. I'll

7:06

call it mpcalculator. I'll put a Z

7:08

at the end because I already did this before

7:10

to practice. Then what you do is you open

7:12

a basic text file. You can see this is

7:14

like the literal of the stock text editor on

7:16

my desktop. I change it to plain text, and

7:19

I paste. You can see all this code

7:21

is here. I save it into my folder. I'll

7:25

go here, and I'll

7:27

call it index .html, right?

7:31

That's it. And I click Use HTML. Now,

7:34

I'm going to go on a site called

7:36

Netlify, which

7:39

is a free hosting provider. Like, you

7:41

get 100 GB per month for free,

7:43

so it's very unlikely Marketing Pro would

7:45

ever run out of stuff. And once

7:47

you've created an account, you click on

7:49

Add New Site, Deploy Manually. And

7:51

here... you just drag and drop the folder that

7:53

you created with the index .html in there, right?

7:56

So I'm going to drag and drop it. And

7:59

normally, it's done.

8:01

It's ready. And so now you have

8:03

this permalink thing that you can click. If

8:05

I click it, you can see essentially

8:07

my calculator is now live on the internet.

8:09

It's working in principle. Yep, it's working.

8:11

I can copy the URL here,

8:13

go on WordPress. And then you

8:16

basically have this iframe code. Ask ChatGPT if

8:18

you don't know how to write this. Be like,

8:20

how do I iframe this URL on my WordPress

8:22

site? And all I did here is I did

8:24

slash HTML. I put

8:26

the code. And then here you

8:28

just replace the URL

8:30

with your app, right? And

8:33

then if I save the

8:35

draft and I open the preview, my

8:38

calculator is now on my page. Nice.

8:42

Completely free. You don't

8:44

need any coding to do this. Literally

8:46

anybody now is a developer. How is

8:48

this going to change the internet? How

8:50

is this going to change websites? I

8:52

mean, there's no excuse not to make

8:54

your website not interactive now. Like you have

8:57

to do that. It's going to be

8:59

the bare minimum because like... Every

9:01

kid's going to know how to do that. Like, you

9:03

know, it's like I have this moment, this thing in

9:05

my head where it's like, this is a boomer moment.

9:07

You know, when the internet came out and our parents

9:09

just got left behind because they didn't adopt it. This

9:11

is where we are at. There will be 20 something

9:13

years old coming out of university that can do

9:15

this all day long next year. And if you

9:17

don't know how to do that, then you're the

9:19

old schmuck that is basically outdated. It's

9:22

time to pick that up. And it's time

9:24

to build better websites, basically. And I think that's

9:26

the thing. It's like. Content websites have fallen.

9:28

They're gone. Like, there's no point for a content

9:30

website when AI can answer your questions better.

9:32

But there's a point for stuff like that, for

9:34

example. Like, this is added value. We've done

9:36

a deep research. We got some data. We put

9:39

it together. And honestly, even if I did

9:41

the deep research live, like, we'd probably be done in

9:43

10 minutes. And it would be done. Obviously, there's a

9:45

little bit of tweaking to do. Like, you can see there's

9:47

a bit of padding and margin here. But I could

9:49

totally go back to my code, talk to Gemini to change

9:51

it. or whatever, and then just

9:53

tweak it, basically. But that's the point. this is the

9:55

thing. Anytime you have a problem, you just speak

9:57

to it like you would speak to a developer.

9:59

And it's like, hey, there's a big space at

10:01

the top of this. Can you fix it? Yeah.

10:03

And it's like, I think it's knowing how

10:05

to do this is bare minimum for any marketer

10:07

today. Like if I was doing a hiring

10:09

test to hire someone to work with us right

10:11

now, that would be one of them. I'd

10:14

be like, hey, you have 20 minutes to make

10:16

me a calculator and put it on the

10:18

website. Go. And it's

10:20

like, it sounds impossible if you don't know these

10:22

tools, but that's the point. Like that's being a

10:24

native. And that's why I'm like, we're talking about

10:26

this now because it's that simple. It's that easy.

10:29

You don't know, like we didn't read a single

10:31

line of code. We didn't talk about anything technical

10:33

here. And we still have a life calculator on the

10:35

website. You can see it on authorityhacker .com. And the

10:37

first time you made this, so, you know, I

10:39

know here you've kind of gone through it before, but

10:41

like how long did it take you start to

10:43

finish going in, not knowing how to do this? Less,

10:46

like 40 minutes, 30 minutes. Like

10:48

once you understand the PRD, I think the

10:50

key that people are going to be lazy

10:53

and skip is the preparation. It's like everything,

10:55

right? It's like, I mean, this

10:57

research is fine, but this prompt is

11:00

gold, basically. And it's like every project we're

11:02

going to do, we're going to do that

11:04

on this podcast. We're going to create a

11:06

PRD. You don't have to write it anymore.

11:08

You just have to chat and have AI

11:10

who is like a very well -rounded project manager.

11:13

Write it for you. And again, you

11:15

can use the Canva function with Gemini

11:17

2 .54, which is, in my opinion, the

11:19

best model at this point, for free.

11:21

It's on free accounts. And create these

11:23

documents. So there's no excuse not to

11:25

do this. And that gets you a

11:27

one shot. That's why it was so

11:29

easy. And especially as your projects get

11:31

more complicated, as we'll see, it becomes more

11:33

and more important. And we'll introduce even more

11:35

preparation steps as we go. And

11:38

it seems like these AI companies are really

11:40

putting a lot of effort into the

11:42

coding ability because there's a huge advantage for

11:44

them to be able to do that,

11:46

right? You know, Facebook has said, I think

11:48

it's like not hiring new developers. Yeah,

11:51

it's just going to basically replace

11:53

people with, or replace junior developers

11:55

or augment their current developers with

11:57

this tech. All the

11:59

effort is pretty accurate. That's what to say. Like,

12:03

we are, like, OpenAI released the GPT

12:05

4 .1 yesterday. It's not even that

12:07

good of a coding model. And

12:09

yet, like 70 % of the

12:11

presentation was making it right in code.

12:13

Like these AI companies, most of

12:16

their effort is on that because they

12:18

know that's what's going to, essentially

12:20

code is going to make better AI

12:22

over time. And that's what's going

12:24

to drive the most value. And you've

12:26

said this before, right? The highest

12:28

value words that AI is code. Because

12:30

what would cost you thousands of dollars

12:32

to make this from an agency in

12:34

the past is now trivial. Should

12:37

we jump out to the next project? Yep. Okay,

12:39

let's do that. But before we do that,

12:41

let's have a quick word from our sponsor

12:43

today, which is Bento. Now, last

12:45

week, I told you about how Authority

12:47

Hacker switched to Bento and saw

12:49

major improvements in our email deliverability. Today,

12:51

I want to highlight why their

12:53

marketing automation features have been a game

12:55

changer for us. Now, unlike

12:58

other platforms that lock their

13:00

best features behind expensive tiers,

13:02

Bento gives you access to

13:04

everything from day one. Their

13:07

powerful automation workflows let you

13:09

create complex, multi -path customer journeys

13:11

without the enterprise price tag.

13:13

You can build multiple automations

13:15

inside a single flow, something that

13:17

I haven't seen elsewhere. This

13:19

essentially eliminates the need for those

13:21

frustrating part one, part two,

13:23

part three sequences in other email

13:25

marketing tools. What's really

13:28

impressive, though, is their site tracking.

13:30

Now, this follows user journeys

13:32

even before they subscribe. This essentially

13:34

gives you incredible insights into

13:36

how anonymous visitors become customers in

13:38

the first place. And all

13:40

this starts at just $30 per

13:42

month for up to 3 ,000

13:44

contacts. And the big one, this

13:46

comes with unlimited email sending. So while

13:48

other big platforms out there are

13:50

limiting the number of emails you can

13:52

send per month, even on their

13:54

higher tiers, Bento does no

13:56

such thing. You can send as many emails

13:58

to your customers, to your subscribers as

14:01

you want. And you can see

14:03

this pricing ethos throughout their software.

14:05

So there's no feature gating, no

14:07

upsells, no hidden costs, just straightforward

14:09

pricing where you get the entire

14:11

suite of marketing tools for all

14:13

your subscribers. And their starter plan

14:16

includes everything from advanced flows and

14:18

broadcast to transactional emails and even

14:20

live chat. So if

14:22

you're tired of paying premium prices

14:24

just to unlock basic features with

14:26

other providers, check out bentonow .com. Their

14:28

approach to pricing is as refreshing

14:30

as their approach to email marketing. Thanks

14:32

again to Bento for sponsoring this

14:34

episode. Now let's talk about the next

14:37

level two we're calling it of

14:39

vibe coding. What is level two and

14:41

what is the difference between level

14:43

one and level two? Okay,

14:45

level two is actually data permanence. So it's

14:48

like, you know, the calculator we built earlier,

14:50

when you refresh the page, essentially the data

14:52

is gone and then you start over. What

14:54

if you want to build an app that

14:56

has a little bit of data permanence and,

14:58

you know, essentially like you can post something,

15:00

have an account or something like this, right?

15:02

Something that's a little bit more like a

15:04

SaaS, like a job board, for example, a

15:06

simple, more interactive part to your website, which

15:08

honestly, again, used to cost tens of thousands

15:10

of dollars to develop. Not that

15:13

long ago. And now we're going to

15:15

build something in that vibe. Like, I'm going to

15:17

show you how I did it. The challenge behind this one,

15:19

again, was to pick something that's relevant and interesting and

15:21

could be useful. So in this case, I was like, you

15:23

know, it would be good if the audience could tell

15:25

us what they want us to talk about on the podcast,

15:27

right? It's like, that would be a

15:29

cool thing. So what if we made something

15:31

that's kind of like Reddit, where you

15:33

can post podcast topic ideas and people can

15:35

upvote them if they like them. And

15:37

essentially, the best ideas rise to the top.

15:39

And then that... into consideration when we

15:41

pick a podcast topic to do, right? It's not

15:43

necessarily a huge SaaS or something like that,

15:45

but it requires a database because we need a

15:47

database for the accounts. If I let people

15:49

post without having an account, people are going to

15:51

spam or whatever. So I want an account

15:54

system. I want to be able to count the

15:56

votes from people. So I need some data

15:58

permanence here and I need to store the ideas

16:00

as well. But again, we went

16:02

back to our PRD, right? I went

16:04

back to Gemini, which is still very good,

16:06

on Kava mode. And I was like,

16:08

help me build a simple web app that

16:10

I want to embed on Atari Hacker.

16:12

It will be built on Lovable .dev, which

16:14

is the tool we're going to use for

16:16

these tasks. I want my audience to

16:18

be able to input podcast topics through some

16:20

kind of leaderboard for topics people cannot

16:22

vote, downvote. Only people who are logged in

16:24

using Superbase, which is the database integration

16:26

with Lovable, which is free. can

16:28

add ideas. Anyone can upvote, downvote.

16:30

Think of it like a Reddit

16:32

system with a simple algo that decays

16:35

ideas with time similar to them.

16:37

Ask me more questions if you have,

16:39

and let's put the PRD together.

16:41

Already, that's getting quite

16:43

complex in terms of what

16:45

you would expect to build

16:47

with algorithms and databases and

16:49

things like that. So that's

16:51

a $10 ,000 plus project for

16:53

a custom dev agency, right?

16:56

Yeah, I mean, spoiler alert, I don't

16:58

think the decay is built in in the final

17:00

product I'm going to show you in a

17:02

second. But it probably would take like 30

17:04

minutes. You actually gave me a

17:06

pretty good piece of advice with this stuff

17:09

is like, just build a kind of quick

17:11

and dirty version that actually works first. And

17:13

then you can always tweak it and improve

17:15

it over time. If you try to be

17:17

too complex too quickly, it's difficult to get

17:19

it working. Exactly. You want

17:21

like once it works, it's quite easy to rework it. And

17:24

we'll see who is lovable is actually probably one

17:26

of the best tools. It's kind of like

17:28

the happy middle between like more control than Gemini, but

17:31

still like equally easy. Then after that, the

17:33

next level is going to be significantly more

17:35

technical. So that's like kind of the frontier

17:37

of like non -technical, I would say. So again,

17:39

like it, you know, it asked me some

17:41

questions as well. Like I was like, ask

17:43

me some questions if I'm missing some stuff.

17:45

And so I chatted with it. It's like,

17:48

again, I used. This

17:50

time I type, but sometimes I just use Mac Whisper,

17:52

right? I just press my key and I just

17:54

talk and I just do it, you know? Then

17:56

I went to Lovable. There

17:58

is a free plan. You get like five prompts

18:00

per day for free, which is

18:03

like, I built a working version of

18:05

this in five prompts. You can

18:07

build something that works here. And so

18:09

like literally... Let's go. First of all,

18:11

you can see the app is here and you

18:13

can vote. You need to log in, sign up, et

18:15

cetera. You can see where it works. You can

18:17

sort it by new, best, popular, whatever.

18:19

And then there's some kind of CTA for

18:21

the podcast. My prompt is

18:23

build this app, column, paste. That's

18:27

it. Don't overthink. If you've done

18:29

your PRD, then you don't need to think

18:31

about it. Especially Lovable is very well done

18:33

for this. And it's like, can I go

18:35

to the preview of this? Let's see. Yeah,

18:38

so this is the first version I got, actually.

18:40

Like, after my initial prompt, this is what

18:42

I got, which, in my opinion, is

18:45

incredible. I mean, it looks really nice. For one

18:47

shot. Now, I mean, if you dig a

18:49

bit deeper, like, this didn't work. For example, the

18:51

signup, like, if you do, like, .com

18:53

and you put a password, you click

18:55

this, it just creates an account immediately, for

18:57

example. So it's like some stuff wasn't

18:59

connected and so on, but still, like, not

19:01

bad, right? It's like, I would say it works

19:03

decently. So Lovable is super strong. At one

19:05

shot, actually, very, very good tool. And again, after

19:08

that, they're like, oh, what's next? And you

19:10

kind of chat away with it. So I'm like,

19:12

oh, connect it to Superbase. So you can

19:14

see you have this button here. You could basically

19:16

log on there. You make a free account

19:18

on the Superbase thing. You connect to your API,

19:20

et cetera. And that just gives

19:22

you a database, basically. It's that simple.

19:24

A way for us to store the

19:26

data of the suggestions and people's account information

19:28

and things like that. Yeah, it does

19:30

everything. You can connect Google with it, so

19:32

people can log in with Google, all

19:34

that stuff. It handles the permanence of your

19:36

app, the security and everything. And it's

19:39

also free up to 100 ,000 users, which

19:41

is incredible. You don't have to pay for

19:43

a very long time. This is

19:45

one of the pushback you get from developers

19:47

right now is like, oh, you know, it's

19:49

not going to be secure. It's not going

19:51

to think of things that we don't

19:53

think of. And if you don't know

19:55

how to code yourself, you may

19:57

miss things and have vulnerabilities. And

20:00

I think I saw someone on Reddit

20:02

a few weeks back who was basically saying like,

20:04

the app that I built is amazing. You

20:06

know, no one can touch it. Developers

20:08

kind of like figured quite quickly how

20:10

to hack it. You

20:13

know, there is like kind of like still a

20:15

bit of a barrier there, I would say. But

20:17

for something simple like this, you know. Here's

20:19

my question to you. If you had

20:21

never coded before and released something, how

20:24

hackable do you think it would be? Probably

20:27

quite hackable. It's like, is

20:29

the reason the guy got hacked because

20:31

AI did this or because he was

20:33

a beginner that released something and then

20:36

a lot of advanced people decided to

20:38

try to make a point by hacking

20:40

his app. Yeah, I think that's the

20:42

thing. He invited the unwanted attention, let's

20:44

say. But the thing is, to answer

20:46

to this, I think... It's like, I'm

20:48

learning this stuff right now, but I need to learn

20:50

the high level stuff and I can let AI do

20:52

a lot of this stuff. It's not perfect. It's not

20:54

as good as a human, but as I make mistakes,

20:56

I also learn what to ask better, you know? But

20:59

it's like, for example, like you

21:01

need to... tests for your codes and then

21:03

just run these tests before you deploy, for example.

21:06

That's one thing. So I've learned that concept and it's

21:08

like, I'm just chatting away with AI, like, oh,

21:10

how does testing work? And like, what should I be

21:12

looking for? And like on a high level, like,

21:14

you know, like how would I structure this, et cetera.

21:16

But I don't really have to know like the

21:18

code or how to do that stuff, but I have

21:20

to understand the concept of it and be able

21:22

to explain it. So same for like building websites, right?

21:24

It's like. I'm changing my view

21:27

completely. I think we recommend people go for Webflow.

21:29

I withdraw that now. I

21:31

take it away. I think you should build

21:33

your website with vibe coding, basically, with the

21:35

next thing that we're going to show on

21:37

Level 3, actually. That's a pretty big statement

21:39

right there. So you're saying that for the

21:41

front end of a website and the content

21:43

management system? There is a lot of content

21:45

management systems you can plug in. You can

21:47

even plug a site you built. with

21:50

Next .js or something like that, which is a

21:52

framework I've learned from as I was building

21:54

a website, to WordPress if you want. And

21:56

you can still use WordPress. Essentially, when you

21:58

build your website, it will just connect to

22:00

that WordPress site that has no traffic and

22:02

just grab the content from there, from the

22:04

API, and just build it as a static

22:06

HTML in front of your site. And you

22:08

can have a cron job that refreshes that.

22:11

So yeah, there's a lot of ways to build

22:13

that. You said complicated words there. I don't

22:15

think everyone knows what a cron job is. Let's

22:17

break that down. Okay, what

22:19

is a Chrome job? It's basically a task

22:21

that you set at a repeated amount of time.

22:23

Like you say, every 30 minutes, do this

22:25

task. And the task could be check if there's

22:27

a new post, and if there's a new

22:29

post, grab the content and put it on the

22:31

site, for example. That would be a Chrome

22:33

job. That's a little bit like how to mention...

22:35

tools work, right? And so like, yeah, I

22:38

would just have a WordPress site on the cheapest

22:40

server I can find on like digital ocean

22:42

for like $4 or whatever that receives absolutely no

22:44

traffic, but just access my CMS and then

22:46

just like have my live website, have a script

22:48

that just grabs the content from the API,

22:50

rebuilds it. And then it's

22:52

there, basically. Doing that is

22:54

you can essentially vibe code it to look

22:56

and feel and act however you want very

22:58

easily without having to play around with generate

23:00

blocks. I think we should save the discussion

23:02

for the next level, though, because we're going

23:04

to talk about that, actually. I'll show you

23:06

some examples of, like, landing pages I made

23:08

in, like, 20 minutes that would take me,

23:10

like, two weeks or something. So let's just

23:12

keep going with this thing. But you can

23:14

see, basically, yeah, implemented database. I think I

23:16

had an error at some point. Yeah, it

23:18

said it failed with an error. And

23:20

then it's kind of like solved it itself, I think,

23:23

which was kind of like I just had to

23:25

say, he was like, oh, do you want me

23:27

to do this? I had no idea what he

23:29

said I should do for the SQL database. I said,

23:31

yep, this looks good. It just edited eight files,

23:33

apparently, and kept going. And then I was like, oh.

23:35

So remember, I had

23:37

this initially, right? And what I

23:39

did is I took a screenshot of Product Hunt.

23:42

I was like, this looks better. Can we

23:44

do this? And, well,

23:46

we got the current version that you see here that

23:48

looks a lot more like Product Hunt just by doing

23:50

this. And again, I could probably keep prompting to make

23:52

it look more sleek. But again, this is a demo.

23:55

I don't think we're even going to roll this out.

23:57

I want to think about this a bit more before

23:59

we roll this out, basically. But the point is,

24:01

yeah, you can see this is not that

24:03

long of a chat. Most of the chat

24:05

here is actually Lovable answering, but I didn't

24:07

write much here. You can put this on

24:09

your website. So it's like Lovable actually comes

24:11

with free hosting as well. limited

24:14

in visits, but for small web apps

24:16

on your site that doesn't get that

24:18

much traffic, it will be free. And

24:21

again, you can iframe it. So

24:23

if I take my URL

24:25

here, like the podcast .lovable .app, I

24:28

come here, I go

24:30

on my site on podcast ideas,

24:32

and then I put the URL

24:34

here. If I click save

24:36

in the iframe again. ChatGPT

24:38

can write the code. So like, hey, how do I

24:40

frame this URL on my site? The only thing that you

24:42

have to change really is the height. Like it's

24:44

basically like how much space do you have

24:46

for that element? So I put too much

24:48

right now. I would adjust it if it

24:50

was production. But yeah, and then you actually

24:52

go on your page. If I

24:54

find the URL, yep, here we go. I

24:56

think I published it. And boom, we have a

24:58

page on MotoriHacker where you can create an account. You

25:01

can log in. The one thing is like, yeah,

25:03

because an eye frame, like you can see this,

25:05

like you would change the effects a little bit,

25:07

basically. But other than that, like it's functional. Like

25:09

people, like I'm not logged in and I kind

25:11

of vote, but I cannot add an idea. And

25:14

if I log in or like if I create

25:16

an account, it will actually send me an email

25:18

and I will confirm my email and then I

25:20

can add ideas, basically. Again, this

25:22

is a 30 minutes vibe

25:24

code. for the podcast,

25:26

basically. What

25:28

other examples can you think of for

25:30

this kind of level two type vibe

25:32

coding that people might want to implement? We're

25:35

going to the launch section. You can

25:37

actually see everything that was built and upvoted

25:40

by people. They actually have their own upvote

25:42

system. And you can actually see the apps

25:44

people. build with this, which is really

25:46

cool. So that's like, I like productivity, for example. So

25:48

they have this GPT chain and I can

25:50

open it. And people launch real SaaS with this,

25:52

by the way, right? Yeah, they're selling this,

25:54

right? It's not free. Let's share.

25:57

It's a bit like the site is not amazing.

25:59

I mean, it's not terrible, to be honest. Frequently

26:01

asked questions. I don't think they have pricing.

26:03

Like if I click, it doesn't work here.

26:05

doesn't do anything. So I guess it's free

26:07

for now. But they're like, you know, they

26:09

made a image cropping website, for example. I

26:11

could make like, you know, Gemini 2 .0 Flash.

26:13

A lot of people complain that our podcasts

26:15

are too long and it's hard to follow.

26:17

I could make a podcast takeaway generator online

26:19

on the site, for example. And it's like

26:21

people would just go paste the URL of

26:23

the podcast they want or see it in

26:25

a list. They would click on it. then

26:27

here's the topics talked about. You would click

26:29

on the bubble and it would just generate

26:31

the main takeaways and people could take that

26:33

away, for example. So it's like, you can

26:35

make your site more interactive and fun and

26:37

actually a place people want to go that

26:39

has more value than just going to chat

26:41

GPT. And that's really the goal. It's like,

26:43

to me, this reinvents the internet completely and

26:45

how... builders become essentially mini app builders, you

26:47

know? And I think once you combine it

26:49

with AI's functionality, you can basically have AI

26:51

functions within any of the tools you're building.

26:53

Like the sky's the limit. Look, they have

26:55

a lead generator that they built here. So

26:57

for example, I can pick like technology and

26:59

I'm looking for like a sales manager. Well,

27:02

they only have South Africa here. And I

27:04

click generate. And this is connected to AI 1000

27:06

% or Scraper or something. And it's like, let's

27:08

see if it works. Like a lot of

27:10

these lovable startups don't work, but let's see if

27:12

it works. But yeah, it's like people build

27:14

these kind of tools. You can make it free.

27:17

And again, amazing for links, right? You're doing

27:19

SEO. This is amazing. So you can

27:21

see, boom, I got five leads, basically. Oh,

27:24

look, see, this is the vibe coding

27:26

issues. Look, I can highlight the phone

27:28

number. It's supposed to be blurred out.

27:30

When you click over it, the phone

27:33

number is visible there. Again, if you

27:35

actually QA your app and you talk

27:37

to the AI about this, you can

27:39

fix it. Like, I've had bugs like

27:41

that I've fixed many times by coding.

27:43

The problem is, like, this wasn't QA

27:45

properly. And you need to human test

27:47

it, basically. Is there

27:49

anything kind of catastrophic that can go

27:52

wrong with this? Like, you know, can

27:54

someone get your API key and then

27:56

rinse your credit card with that or

27:58

something? Yes, they can. So you need to be

28:00

careful. We will talk more about

28:02

that when we use WinSurf. But like, basically,

28:04

you need to protect all that stuff. Yes.

28:06

And it's like, again,

28:09

I'm not a developer, so I'm not

28:11

going to pretend I know everything about online

28:13

security. But you need to be quite careful.

28:15

Every time I do a plan for something

28:17

that has something like this. I spend

28:19

a lot of time talking to AI about

28:21

how to protect it and how people could

28:23

exploit it. I think if any marketers are

28:25

generally worried about this and put off and

28:27

maybe afraid to start because they're worried

28:29

about some security issues. I mean, most of

28:31

you have done that with a website before,

28:33

right? You've had to deal with sometimes a

28:36

lot of people trying to hack your

28:38

site or malware and these kind of things.

28:40

And there are ways around it. Like you're

28:42

able to solve the problem once you face

28:44

it. And there's also solutions. The

28:47

solution is out of the box, right?

28:49

It's like you can implement CAPTCHAs, for example.

28:51

So if you talk to AI and

28:53

you're like, hey, let's implement CAPTCHAs, like I

28:55

want to see a CAPTCHA. And it's

28:57

hard to cheat the CAPTCHA because it's like

28:59

it's built by Google and they actually

29:01

know what they're doing. And then your app

29:03

just basically says, trigger CAPTCHA, walk only

29:05

if CAPTCHA says, yes, it's fine, basically. And

29:07

give all the security tasks to Google.

29:09

So it's really a matter of like, as

29:11

I said, understanding the tech and learning

29:13

how to connect it. so that you can

29:15

prevent these things, basically. And there's going

29:17

to be someone with more software development experience

29:19

in the comments that explains how this is

29:21

such a bad idea or something. But

29:23

I would say that... There is always too

29:25

high case. But it's like, yeah, for

29:27

example, if you use a webhook, like if

29:29

you don't protect it, like there's also

29:31

ways to do that without the capture, etc.

29:33

So it's like, yeah, you just need to

29:35

learn a bit about it, like building

29:37

a website. Okay, let's

29:39

jump on to level three.

29:41

But first, let's have a

29:44

word from our second sponsor

29:46

today, which is Originality .ai. Originality

29:48

.ai Their AI detector remains

29:51

the gold standard for identifying

29:53

AI -written content, a capability that's

29:55

becoming increasingly crucial. Google's quality

29:57

raters are now specifically evaluating

30:00

AI content as part of

30:02

their assessment process, signaling a

30:04

stronger stance against low -quality,

30:06

machine -generated articles. In our recent

30:08

tests, Originality's detector accurately flagged

30:11

every AI article that we

30:13

threw at it, even those

30:15

that fooled other detection tools.

30:17

But what's really transforming content

30:19

workflows is how their content

30:22

optimizer works hand in hand

30:24

with their detector. So after

30:26

confirming your content is human

30:28

written, the optimizer assesses what

30:30

truly matters for ranking. So

30:33

instead of the outdated keyword

30:35

density approach, it takes semantic

30:37

relationships, content structure, and topical

30:39

coverage that correlates with actual

30:42

ranking success. Now the tool

30:44

provides actionable insights like identifying

30:46

missing subtopics, content

30:48

improvements and highlighting areas where

30:50

your competitors are outperforming you.

30:52

What impressed me is how

30:54

Originality used these exact techniques

30:56

to grow their own traffic

30:58

by over 400 % in the

31:00

last few months. For

31:02

content creators serious about both quality and

31:04

rankings, having both tools in one

31:06

platform is invaluable. At under $15 a

31:08

month for their pro plan, it's

31:11

significantly more affordable than paying for separate

31:13

detection and optimization tools. So check

31:15

out originality .ai if you want to

31:17

create content that's both authentically human and

31:19

strategically optimized for search success. Thanks

31:21

again to Originality .ai for sponsoring this

31:23

episode. Level three. What have we got?

31:25

Level three is, I don't think

31:27

going to do a full build here.

31:29

I'll show you something I built.

31:32

Level three is like starting to build

31:34

four websites, basically. Like not just

31:36

like a quick page on your domain

31:38

or something, but a real website.

31:40

And it's like, you can do that

31:42

with lovable, but it's still a

31:44

little bit limited in terms of like

31:46

what you can do and so

31:48

on. So I'll show you an example

31:51

of a landing page I built

31:53

that I was testing. This

31:55

took me 20 minutes. And I talked

31:57

to Tim at the same time. He was

31:59

asking me like, oh, how is it

32:01

easy to edit the content? Like, oh my

32:03

God, it would be so difficult. And so

32:05

like, I just - I'm very much getting Ahrefs

32:07

vibes from this. Yeah, I stole the

32:09

branding. Color scheme. Yeah. I stole the branding.

32:11

And so like, that's the, so first of

32:13

all, let's talk about what tool people are

32:16

looking at. This tool is called WinSurf. It's

32:18

a full coding tool. Like it's something that

32:20

professional developers use. Like you can see if

32:22

I click here, there's this code everywhere.

32:24

It's scary, basically. Very intimidating. But

32:26

that's the point. It's like, yeah. But the

32:29

good news is you don't have to write much

32:31

of that code. It's like it's actually mostly

32:33

automated through AI. And actually, the good thing

32:35

with Windsurf is it has this preview. You can

32:37

see I have like a chat on the

32:39

right. And then I like where I can

32:41

talk with AI. And then I can even. click

32:43

on this send element, and I can select

32:45

this H1 that adds it here, like on

32:47

my chat at the bottom right. And I can

32:49

say like, oh, change the font or whatever,

32:51

for example. I would just do that if

32:54

I wanted. So it's like, it's not too bad.

32:56

It's like probably the most approachable real dev

32:58

tool out there. And I would say for

33:00

anyone coming from like a WordPress site background, I

33:02

mean, there are places within the WordPress dashboard,

33:04

you go into your theme files, that also

33:06

looks very intimidating, right? Kind of got to understand

33:08

what you're looking at roughly. AI will do

33:10

the heavy lifting for you. So

33:12

like, let's just look at the page

33:14

quickly because I haven't shown it, but

33:16

this was vibe coded in like 20

33:19

minutes. And I think it's like a

33:21

pretty strong landing page, including again. A

33:23

calculator that would like calculate your monthly

33:25

cost or whatever. And

33:27

then like what our clients say, like,

33:29

okay, you can have some photos. FAQ,

33:31

nicely animated, looks beautiful. CTA

33:33

and footer. I mean, for a 20

33:35

minute generation, this is absolutely incredible. There are

33:37

obvious issues with it, with like padding

33:39

and spacing and things, but like nothing. it's

33:42

because my window is small. Like it's

33:44

because like I've shrunk my window. Look, if

33:46

I expand, it works fine. So

33:49

it's okay. It's just because I'm making

33:51

my Windows more for the podcast. Okay, fair.

33:53

But actually, it's fully responsive. If I shrink

33:55

it, you can see it goes in

33:58

mobile mode perfectly fine. And

34:00

the image is ChatGPT, by the way. It's

34:02

not a stock image or anything. This is

34:04

all AI generated. So it's like, yeah. This

34:06

is better than 99 % of websites, I

34:08

would say. And that's why I put it

34:10

in 20 minutes. The problem is it's a

34:12

little bit more complicated in the sense that

34:14

you need to give the right instructions to

34:16

AI here in terms of technology, for example.

34:18

So, you know, I talked about crazy words

34:20

like Next .js or like Astro is the one

34:22

I'm using here for like, which is some

34:24

kind of like framework for building website, basically.

34:26

But it doesn't look as scary as it

34:28

sounds like. So, for example, I can change

34:30

my copy just by editing the title here,

34:32

for example. And it's like it would just

34:34

edit. But let's just go through. The

34:36

process. I'm not going to build a full website

34:38

live. It would still take some time. And there's a

34:40

chance that it will fuck up because it's not

34:42

perfect. Can you guess what we're going to do now?

34:45

No. We are

34:47

going to do a PRD, as we say,

34:49

for every other project. In this case,

34:52

I was like, let me rebuild Marketing Pro.

34:54

I don't know how far we're going

34:56

to go with this, but this is the

34:58

extent of my prompt, which is pretty

35:00

short. Help me write a PRD for the

35:02

new Marketing Pro website. I want to

35:04

rebuild our site from scratch using Next .js.

35:06

So that's why it's like, oh, you probably

35:08

should know what you're talking about. I

35:11

know what the technology is. I don't

35:13

know how to code it. It doesn't

35:15

matter too much. What is Next .js? It's

35:18

basically a framework. It's a web development framework for

35:20

front -end that allows you to make nice interactive

35:22

websites. So think about like Apple sales page when

35:24

you scroll and you have these beautiful elements. And

35:26

I'll show you how to do that in a

35:28

second, actually, using AI, how to do pages that

35:30

have all this stuff. So basically, yeah, I need

35:33

to be able to tell you that, again, don't

35:35

know what it is, fine. You hear it in

35:37

a YouTube video, type this into IDPT. It's like,

35:39

explain to me what Next .js is and why is

35:41

it good for building websites and is it good

35:43

for SEO and so on. And that's the kind

35:45

of discussions I have. to understand this stuff, basically.

35:48

I want to ensure it's SEO friendly. The

35:50

reason I said SEO friendly is because,

35:52

again, I don't want to get too technical,

35:54

but for Google to be able to

35:57

crawl your website, it needs to be HTML.

35:59

And it's like you could code the

36:01

website with like heavy animations and stuff. It's

36:03

not HTML, it's JavaScript. It wouldn't be

36:05

as SEO friendly. So basically by saying that...

36:07

I understand this framework. I understand you

36:09

could make it not SEO -friendly. And so

36:11

I specify that, right? It's like, I want

36:14

it to be SEO -friendly, fast, and secure.

36:16

I'll be building a mix of landing

36:18

pages, case studies, blog, and marketing material. I'm

36:20

going to be using, again, ShadCN for

36:22

many of the elements. Now, again,

36:24

these frameworks, the beauty of them is

36:26

that they have a lot of elements

36:28

that are pre -built. So for example,

36:30

I'm going to show you a really

36:32

cool website that Sebastian showed me. That

36:34

is called 21st .dev. And this has like,

36:36

you know, the Apple -esque animations that

36:38

you might dream of. You see, like

36:41

this kind of stuff, right? And

36:43

they took all these elements and they made

36:45

them into a prompt you can give to

36:47

something like Winsurf. All lovable for that matter.

36:49

So if you click copy prompt, like you

36:51

see you have like lovable here, for example.

36:53

So you could click here. I could copy

36:56

the prompt. And it's like, let's paste it

36:58

here just to show you. But like you

37:00

basically have a giant prompt that gives all

37:02

the code to use. and

37:05

how to use it to an LLM inside

37:07

something like WinSouth. So you can, that's why I

37:09

say, like, I'm going to use these kind

37:11

of elements. So then I can just go shop

37:13

here and I can be like, hey, change

37:15

the header to this, change the navigation. You know,

37:17

they have these amazing navigation, for example. So

37:19

I can be like navigation menus. And

37:22

let's say, like,

37:25

yeah, even something like this one, for example.

37:29

Like you have all these like beautiful windows that

37:31

pop, et cetera. Like this looks so much

37:33

better than the WordPress super smooth the way those

37:35

menus open. And I can just copy the

37:37

prompt and then put it wherever I want. And

37:39

it will build something quite similar. I've tested

37:41

it. It works quite well. So, okay. Back

37:43

to the prompt. I basically gave it that.

37:45

It gave you a PRD. Fine.

37:48

I was like, I want to build a

37:50

robust design system using, again, another technology

37:52

you should learn about, Tailwind CSS. It's like

37:54

a... design framework i want design consistency

37:56

blah blah i keep chatting with it right

37:58

i'm like oh actually we missed that

38:00

and we want to add this etc and

38:02

when i'm done can i a question

38:04

like if you don't know what shad cn

38:06

and tailwind css and all that is

38:08

can you still do this or is it

38:11

gonna like prompt you to use that

38:13

or is it gonna just pick something right

38:15

it will do it by default it

38:17

would pick something so basically here's how i'm

38:19

learning this stuff i started with like

38:21

build me a website and build me a

38:23

website and then i was like what

38:25

did you use to build this website? And

38:27

then it's like, oh, I use this

38:29

ChatCN and Tailwind CSS and blah, blah, blah.

38:31

It's best practices. I'm like, what is

38:33

it best practices? Is it good for SEO

38:36

and marketing and stuff? Oh, like, what

38:38

is the... So you're kind of asking AI

38:40

questions to train you at the same

38:42

time as you're... Okay. And it's

38:44

like, that's how I'm talking today. It's like, I

38:46

don't know everything about that stuff. But then I'm like

38:48

watching a YouTube video about it or whatever. And

38:50

it's like, yeah, eventually I have a concept of what

38:52

it is. I've been working a

38:54

lot in NAN recently, building automations. And

38:56

at the start of every work session,

38:58

I always say, hey, I'm very new

39:00

to this. I don't know what everything

39:02

does, but I like to learn by

39:04

understanding how it works. Make sure whenever

39:06

we're talking that you explain it in

39:08

plain English to me. And so every

39:10

time it says, I'm going to do

39:12

this, it just really breaks it down

39:14

into simple terms. And that helps me

39:16

learn super fast. Yeah, you become

39:18

like a better marketer as you do this.

39:20

But the good thing is like before you had

39:23

to kind of like pause and learn and

39:25

you wouldn't do anything productive. Now you can do

39:27

the productive thing while learning. And it's so

39:29

much more fun, actually. You don't have to go

39:31

watch a 20 minute video to learn about

39:33

something. It just explains exactly what you need to

39:35

do completely relevant to the context you're working

39:37

in. So now let's go back

39:39

to Windsurf. And so what I did is

39:41

I made a document. So I clicked on

39:43

new file and I called it. PRD

39:45

.md. .md is markdown, right? It's just a

39:47

format. That's this kind of like hashtag for

39:49

headlines, et cetera. And I pasted it. I

39:51

pasted it, and then I asked the chat

39:53

to clean it because it was like when

39:56

I pasted it, it looked horrible. And I

39:58

was just like, hey, fix this thing. So

40:00

it's like in these code editors, you can

40:02

say fix, and I could say at, and

40:04

then here I can mention a file, for

40:06

example, right? So I do at PRD, and

40:08

then now it understands what I'm talking about.

40:10

And so I was like, hey, fix this.

40:12

It's not well formatted. So

40:14

I did that, and then I told

40:16

it to read the project document and

40:18

to prepare a list of tasks to

40:20

break down the process step by step

40:22

with a new file. So it made

40:24

a file. It made itself a to -do

40:26

list, right? Yeah.

40:30

And that's kind of like when you make more

40:32

complex projects. Yeah, there's hundreds of tasks and subtasks

40:34

in this one. And then that's why I have

40:36

no idea what's going to happen. Like I wanted

40:38

to show you the one I built before because

40:40

I don't know what's going to happen. But then

40:42

I just go. read

40:44

task .md and

40:47

pick up and

40:49

start the project. And

40:52

normally, Gemini 2 .5 Pro,

40:54

which is connected to Cascade,

40:57

is now opening my task

40:59

file, reading it. Oh, okay, I

41:01

need to do npx create projects app latest

41:03

on the terminal. Well, that's what I just

41:05

did, right? And now it's actually just running

41:07

my terminal. So, actually, I need to... to

41:09

it. But like, do you want to install

41:11

Next .js? Yep. And it's just installing all

41:13

the stuff for me. And now it's building

41:16

a website. And the good thing

41:18

with something like Cascade is it can do like

41:20

20, 25 actions in a row. And because the

41:22

actions are essentially outlined already, it will really do

41:24

a lot. Like, I'm sure you've used it a

41:26

bit. It wasn't necessarily a lot. But now it's

41:28

like, you know, we're going to be chatting. And

41:30

it's just going to start building the website,

41:33

basically. And I have no idea where we're going

41:35

to land here because sometimes it's not perfect.

41:37

But yeah, you can see it's like it's building

41:39

a new folder now. And so it's installed

41:41

all that stuff already. So the thing is, the

41:43

reason these coding tools are so powerful is

41:45

they have access to this thing called MCP. MCP

41:48

probably could be a whole

41:50

podcast episode, but it stands for

41:52

Model Context Protocol, I think. And

41:56

basically... It's like an API for AI, right?

41:58

Yep, exactly. So you can see, for example,

42:00

my MCP here is connected to this 21st

42:02

.dev, so you can actually pull the elements

42:04

that we looked at earlier. just by me

42:06

describing them and even modify them on the

42:08

fly. It has access to Brave Search, so

42:10

you can actually search for stuff on the

42:12

web. It has access to Firecrawl, so you

42:14

can open websites and take screenshots of them.

42:16

It has access to Perplexity, so you can

42:18

also search for that. It has access to

42:20

a full browser through this property, and it

42:22

has access to Sequential Thinking, so you can

42:24

actually break down tasks further, and so it

42:27

can do a better job. And so it

42:29

will use all these tools to do stuff,

42:31

basically. And so that's kind of the power

42:33

of this. And you can see it's still

42:35

going, right? It's like, oh, I would like

42:37

to cancel the da. I'm like, whatever, do

42:39

it. Your approach is generally just, yes, okay.

42:41

I mean, I kind of like check quickly,

42:43

but this was the chat CN. So it's

42:45

like, this is actually just elements. It's not

42:47

crazy. It wants me to see the terminal

42:49

is here. It wants me to just pick

42:51

stuff, right? So I'm just, I'm just need

42:53

to make a few decisions. Now it's done.

42:55

Like, it's going to keep going. And you

42:57

can see that thing is like, I'm basically

42:59

just watching it code and just. And then

43:01

it's like, if I don't understand something that

43:03

went on, I basically go into chat mode

43:05

here and be like, hey, what did you

43:07

do? What did you change? How does that

43:09

work? Et cetera. And I can just ask

43:11

questions basically. So yeah. And you

43:13

can see it keeps going through its phase

43:15

one by checking the project structure, et

43:17

cetera. And just asking me like, oh, like.

43:20

Output show, but not source component, which seems

43:22

that the data doesn't create source components. Do

43:24

you want me to create the directory? I'm

43:26

like, yeah, okay, do it. Then when this

43:28

is running, you kind of go back to

43:30

something like that. And then now you can

43:32

actually work more on stuff. So for example,

43:34

let's say I want to add some photos

43:36

on the testimonial, right? I could literally select

43:38

elements. I can be like

43:41

selecting this, like this thing. And

43:43

then I could be

43:45

like, let's add some photos

43:47

to the testimonials. It's

43:50

just like, because I selected the element, it

43:52

understands. It's going to look at it, and it's

43:54

going to try to, like, it's looking at

43:56

the files, and it's just going to start adding

43:58

some photos there. Obviously, I don't have photos

44:00

on my project, so I'm going to put a

44:02

broken photo here. But I could just put

44:04

a photo in my project. I would just do

44:06

it, basically. And this is very similar to

44:08

how you would give feedback to a web designer

44:10

who is building this for you. Yep.

44:12

And not only that, but, like, if

44:14

you want to go node level 1 ,000. The

44:17

photos are here. You can

44:19

see it. Like stock photos or something? I

44:21

don't know. Or just generate some random? I

44:24

don't know. But yeah, I just did

44:26

it. But if you want to go

44:28

nerd level 1000, in Mac Whisper, I

44:30

actually did a deep research on how

44:32

to prompt for Vibe coding. And so

44:34

now I can speak a comment, and

44:36

Mac Whisper will transform that into a

44:39

better prompt for Vibe coding. So let's

44:41

pick one, for example. Like, for example,

44:43

I don't like that the FAQ. kind

44:45

of opens when you just mouse over,

44:47

or just want it to open when

44:49

you click, right? So let's select the

44:51

FAQ here, and I'll press my key,

44:53

and I'll be like, so this FAQ

44:55

element opens the question when you mouse

44:57

over, which I don't want. Instead, I

45:00

want the element to only open when

45:02

you click on it. Can you fix

45:04

this, please? And so,

45:06

like, I've just said something pretty

45:08

basic, but because I have my

45:10

bytecode prompt, you can see I

45:12

actually just wrote a whole prompt.

45:14

on this, basically. What you've spoken

45:16

is being transformed into these more

45:18

technical instructions by the prompt within

45:21

MacWhisperer, which is a separate voice

45:23

tool. Which breaks down the task

45:25

again. So let's try to run

45:27

it. That's basically a

45:29

system prompt within MacWhisperer that uses an

45:31

AI model to do that. Is

45:33

that right? Yep. So it's like

45:35

Gemini 2 .0 Flash gets the transcript of

45:37

what I said and has a prompt that

45:39

essentially guides it on transforming what I said. and

45:42

just rewrite it. And then I can review it

45:44

and do that. Obviously, you need to be a bit

45:46

careful because sometimes AI can just go off -road and

45:48

actually say something you haven't said. I haven't checked

45:50

here, so let's see what happens. But the good thing

45:52

with this vibe coding as well is AI can

45:54

fuck stuff up, right? It can happen. So let's see

45:57

what happened here. Can

45:59

I click? Now I can't click, actually. It's

46:01

still working, so let's see. Yeah,

46:03

it doesn't work now. It's fine. Let's

46:05

say it's broken. Perfect. All I can

46:07

do is I can go back to my prompt and I

46:09

click on revert to this step. And if

46:11

you click here and you confirm, all

46:13

your code is now back to exactly

46:15

where it was before you did the

46:18

prompt. So it's like inbuilt version control.

46:20

Yeah. And then my prompt is back

46:22

here and I can tweak it to

46:24

get a different result, basically. So it's

46:26

like, that's how you do this, basically.

46:28

So what else, aside from building websites,

46:30

can you use Windsurf to do then? I

46:33

mean, anything that... It requires programming,

46:35

really. You can make a backend

46:37

in Python. Could you

46:39

make a full SaaS app in here? Yeah.

46:41

Like an App Store app for a

46:43

mobile app. You can do everything. This is

46:45

a full code editor. The sky's the

46:47

limit, but obviously, it's like you need to

46:49

say the right words, and you might

46:52

need to troubleshoot quite a bit to get

46:54

to a more complex result. The more

46:56

complex the project... the more difficult it becomes

46:58

to write code your way out of

47:00

it. So like you saw the first calculator

47:02

was very easy. And as we go

47:04

forward, it gets more difficult, basically. Now, a

47:06

lot of people watching our podcast come

47:08

from a marketing background and they've built websites,

47:10

they've worked in websites before. So would

47:12

you suggest starting with building a website because

47:15

that's maybe familiar to a lot of

47:17

people or is there something simpler? I

47:20

think a website is good. Like I

47:22

think a website on Astro or Next

47:24

.js, it's good. It's like your risk

47:26

of getting hacked is very low. Because

47:28

there's no crazy database or hidden stuff,

47:30

et cetera. Basically, the risk is you

47:32

get your API keys hacked and a

47:34

lot of credit is used. If you're

47:36

using AI API keys, you can put

47:38

limits on your API keys. So do

47:40

that. So whatever happens, you can definitely

47:42

limit the damage. It doesn't mean it's

47:44

good, but... You get the idea. Websites

47:47

is a good start. And then just

47:49

start adding interactive elements, like build these calculators,

47:51

build these mini, like this voting app

47:53

for the podcast. You see how everything we

47:55

did in this podcast kind of combines

47:57

together, right? You can build your site, then

47:59

you can build these little things together.

48:01

You can add them up. It's very easy.

48:03

Okay, so just to show you another

48:05

example of something really simple you can do

48:08

inside Windsurf, I built this company name

48:10

cleaner. So quite often when you're doing prospecting

48:12

for link building or for sales outreach,

48:14

you'll get a list of company names. and

48:16

it might look something like this. You

48:18

know, this is probably pulled from the website,

48:20

you know, the title tag of the

48:22

website or from somewhere else or have, you

48:24

know, LTD or LLC in the name.

48:26

And you want to clean that. You can,

48:28

of course, use AI to do that,

48:30

which we've done in the past. But I

48:33

wanted something which could very quickly do

48:35

some basic cleaning for a list of, you

48:37

know, thousands or tens of thousands

48:39

of company names. So I didn't even

48:41

do a PRD. I just... went into,

48:43

I think it was Gemini used, and

48:45

I said what I wanted it to

48:47

do and what I might want it

48:49

to do in future, but just build

48:51

this core company name cleaner for now.

48:53

I said, we may want to integrate

48:55

it with AI in the future to

48:57

do some more advanced operations, but this

48:59

is all we need to do for

49:01

now. And then it built this. So

49:03

you enter your company, list company names,

49:06

hit clean names, and it's literally like

49:08

a split second and it's done. And

49:10

then I went back and said, add

49:12

a copy to clipboard button and make

49:14

it work well from a UX perspective

49:17

or something super basic like that. And

49:19

so like when you click on it,

49:21

it changed. So it's, you know, you

49:23

see it there. It changes to green

49:25

and says it's copied just so you

49:27

know that it's been copied. And that's

49:29

the kind of output you can get

49:32

from something super basic like this. And

49:34

this is literally a two prompt. Is

49:36

this AI like that cleans the names?

49:38

No, no, no. It's just applied some

49:41

rules. So I gave it a few

49:43

examples of company names. The AI produced

49:45

the It wrote the rules. It wrote

49:47

the rules, but the AI isn't cleaning

49:49

this because that would take too long

49:51

when you have tens of thousands to

49:53

process. Okay. Yeah. I mean, look,

49:55

this is the kind of stuff that you can

49:58

build. You can do that for marketing. You can

50:00

do that for your internal processes to essentially speed

50:02

things up. So in this case, outreach, like there's

50:04

lots of use to this stuff. This is... Something

50:06

that most marketers are going to have

50:08

to pick up. You build your custom dashboards,

50:11

analyzers, that kind of stuff. It's much

50:13

easier than you think. Now, Windsurf, it's still

50:15

like a little bit. challenging i

50:17

would say for most people but i

50:19

want to say though i i think people

50:21

should just try it yeah so simple

50:23

like this i even find it quite intimidating

50:25

watching gail navigate around windsurf and pulling

50:27

all these elements and shad cdn and whatever

50:29

the hell he was talking about there

50:31

you know it's intimidating because you don't know

50:34

what these things are but you get

50:36

to know it quite quickly when you just

50:38

try you learn it by doing it

50:40

i i think you have no choice that's

50:42

the way i think So you have

50:44

to figure this out. You have to learn

50:46

how to build simple things that will

50:48

impress people. I don't see people linking to

50:50

articles anymore. They link to tools, you

50:52

know, like do that if you want links

50:54

and so on. I'm just thinking back

50:56

through all the previous companies that we've had,

50:58

how many internal tools to just process

51:01

data or execute simple tasks we could have

51:03

built that would save us and our

51:05

team. you know, hundreds or thousands

51:07

of hours over the years. And now

51:09

it's just completely trivial to build on that.

51:11

So it's a whole new world out

51:13

there. It's like NA10 together

51:15

with Vibe Coding. It's like, holy shit.

51:17

You want to just talk briefly about

51:19

that combination? I think we'll need to

51:21

do a full podcast on NAN at

51:23

some point. But what is NAN and

51:25

how does that interact with these kind

51:27

of tools? I mean, NAN is a

51:29

bit like make .com. Yeah. It's

51:32

an automation tool. Yeah, like

51:34

you can actually do code with it and

51:36

so on. But again, the code can be

51:38

written by AI. You don't actually have to

51:40

do that. But the point is that you

51:42

can create these workflows and then you can

51:44

connect them to frontends you build on WinSurf

51:46

or on Lovable. And so you could run

51:48

the product on something that looks like a

51:50

bunch of nodes that you connect to each

51:52

other. This is something that's not finished, but

51:54

I just want to show what the interface

51:56

looks like. So that's what NA10 looks like,

51:59

basically. You just add a bunch of nodes,

52:01

you have the interface. The

52:03

stuff, like the apps that you can connect to on

52:05

the right, and then you open one and then

52:07

it's like, you know, has all this stuff, you connect

52:09

the fields, it goes on the other side and you

52:11

just connect stuff on it and do things. And

52:13

so like, that's, that's an

52:15

8N and you can essentially like, for

52:18

example, I'm rebuilding BrandSnap with it

52:20

right now. So like, you get. data

52:22

from people putting a prompt that says, like,

52:24

I have a dog hosting business. Then you

52:26

have Gemini that basically gets the topic, the

52:28

TLDs, and it's like just has a

52:30

long prompt to brainstorm a bunch of domain

52:33

names. Then you have this thing that's like

52:35

an API query that will essentially check if

52:37

the domains are available. And then if the

52:39

domains are available, passes it to the next

52:41

one, that's then going to do more tasks,

52:43

et cetera. And then I can have it

52:45

come out on the other side on the

52:47

front end I build on Winsurf, basically. Couldn't

52:51

you do all this back -end stuff within

52:53

Windsurf, or can you have it coded

52:55

directly? Why do you need NAN for this?

52:58

Well, and it is a great workbench. So it's

53:00

like, for me, it's a way to test

53:02

each node individually and see how it works and

53:04

change the settings and see how things go.

53:06

And then after that, you can export a file

53:08

from it that you can import into the

53:10

AI. And then that has basically your entire workflow.

53:12

And you'd be like, hey, that's my workflow.

53:14

Let's build an actual backend for it. And then

53:17

that's probably how it would go. But for

53:19

MVP, it's enough, actually. I would literally just connect

53:21

hooks to that. And it's like, if people

53:23

actually like it, then I'll build the backend. The

53:25

hardest part with software is getting traction, right? It's

53:28

getting people to actually use it. And

53:30

I think one big advantage with NAN

53:32

is like as a non -developer, non -coder,

53:34

you can see exactly what's happening step

53:36

by step. It's just a bit easier

53:38

to kind of comprehend what's going on.

53:40

Because if you get multiple Python files,

53:43

it's going to be intimidating and it's going

53:45

to be difficult to work on. You're just

53:47

basically going to have to rely on AI.

53:49

And if it bugs, because it does, it's

53:52

not always perfect. And it's like sometimes you

53:54

get stuck. Then there's not much you can

53:56

do. Whereas here, like... you can actually figure

53:58

it out. So I find N8N to be

54:00

an excellent workbench for any kind of like

54:02

mini SaaS idea. You might have free tool,

54:04

that kind of stuff. Even it's good

54:06

enough to launch it if you set it up

54:08

properly. And then if you have traction, then yeah, you

54:10

should definitely not keep it that way. But it's

54:13

a place to start. I think we'll have to do

54:15

a full podcast on NAN and make .com and these

54:17

kind of automation tools at some point in your

54:19

future as well. I agree. Let us know in the

54:21

comments if you want that. This was Vibe Coding,

54:23

though, so hope you liked it. Final

54:25

question. Final question for you. So

54:27

are software developers dying out then?

54:29

Like, is this the end for

54:31

that profession or is it just

54:33

going to change? With

54:35

AI, we saw it

54:37

pretty much wipe out

54:39

a significant percentage of

54:41

writers, right? And with

54:44

images in ChatGPT, there's

54:46

now a question about

54:48

graphic designers. Is the writing

54:50

on the wall for software developers? Should

54:52

people still learn to code? I

54:54

think for the bad ones, yes, it's

54:56

bad. It's good writers, right? It's like, they're

54:58

still writers. They're not all gone. But

55:00

the shitty freelance writers that didn't really have

55:02

anything to say, they are gone. And

55:06

so like, yeah, it's like, again, like if

55:08

you understand all this tech, how it plugs together

55:10

and you're able to prompt AI well, I

55:12

think you'll be very, very useful and people will

55:14

be very happy to have you. Like one

55:16

guy like that will output the work of like

55:18

a whole team before, right? And so like,

55:20

yeah, it's like, I don't think CEOs are going

55:22

to start coding. But if you're a crafty

55:24

marketer, like, yeah, you'll be able to do some

55:26

stuff. You'll do the basic stuff, like probably

55:28

the first two steps, like the lovable step and

55:30

the Gemini stuff. Like I think most people

55:32

will do that. The Windsor

55:34

stuff is I would argue it's like it's

55:37

not everyone's going to do that and that's

55:39

okay. You know what? We were talking about

55:41

this before, but like it reminds me of

55:43

the early days of setting up a WordPress

55:45

site, right? Where you had to upload files

55:47

in the FTP and it took 20 minutes

55:49

to set up. It was complicated and it

55:51

put a lot of people off. Whereas now

55:54

it's one click and everything is set up.

55:56

Like you don't need to know anything.

55:58

So I think a similar level of ease

56:00

of use. Ification, just invented

56:02

a word there, is going to

56:04

happen to this industry quite rapidly. Yeah,

56:06

and that's why look back at

56:08

your website and ask yourself, would any

56:10

of the stuff we talked about

56:12

make it so much better? Because every

56:14

new website that's built is going

56:17

to be built like that now. So

56:19

you're going to get outclassed very

56:21

fast if you don't start. at

56:23

least adopting the Gemini stuff, making simple

56:25

interactive widgets and so on. We need

56:27

to rebuild the Toy Hacker. I see

56:29

that stuff. I'm like, holy shit. But

56:31

I need some practice still. I feel

56:33

like we're just discovering right now. Really,

56:35

this was us sharing three weeks of

56:37

discovery, really. We

56:39

need to progress. We need to get

56:42

better. No question. But I

56:44

think the fact that we can already

56:46

put stuff out that could be used

56:48

by people after literally a few weeks

56:50

shows that This is essentially enlarging to

56:52

a larger amount of people being able

56:54

to build things on the internet. And

56:56

marketers are in the front row of

56:58

the kind of people who should be

57:00

leveraging that. And the people who will,

57:02

will do well. The people who don't,

57:04

they still spam Pinterest, you know? Do

57:06

you think there's some business opportunities here?

57:08

I'm thinking for... know, people who go

57:10

around and like make websites or do

57:12

marketing for small, like local businesses. Like

57:14

you could really churn out some good

57:16

work. A lot of stuff. You can

57:18

sell cheaper. You can make it faster.

57:20

You can make it better. Like people

57:23

see more value. Like the market hasn't

57:25

adapted in terms of prices yet. So

57:27

there's a bit of an arbitrage right

57:29

now. There will be for a few

57:31

years probably. So yeah, it's cool. There's

57:33

money to be made, but it's... It

57:35

has to be made differently from how

57:37

it was done before, basically. All

57:39

right. So that was vibe coding. Any final words

57:41

of wisdom, Gail? No, just

57:43

try it. Like, do at least make a,

57:45

like, you have to make a calculator you can

57:47

build for your website and make it on

57:49

Gemini for free. Like, do that at least. Sign

57:51

up for a free trial on Lovable and

57:53

make a simple app as well. Like, you will

57:55

be surprised at what you get initially. And

57:58

then if you like it, then you can and

58:00

look at something like Windsor for something else. If

58:02

it's already too much, then just stay at these two levels.

58:05

And if you do manage to build something,

58:07

make sure to head on over to the

58:09

YouTube comment section of this video.