YouTube Transcript:
Vibe Coding 101 - Build and deploy an interactive map with Replit

Skip watching entire videos - get the full transcript, search for keywords, and copy with one click.

Video Transcript

Unlike other vibe coding tutorials, I'm

going to show you how to go from an idea

to a deployed application end to end

this tutorial. Um, and we're going to

pull in some external data. We're going

to build with some fun frameworks and

create a really interactive map

visualization. Uh, so this is going to

be more fun than those other tutorials

out there. And by the end of this video,

you're going to know everything you need

to know to get started building on

Replet. So, let's actually just dig in.

Uh, when I get started building, I like

to start by kind of thinking about the

problem that I'm trying to solve. And

this really helps me. This is really

useful for folks that are new to vibe

coding. If you struggle with like

conceptualizing what you're trying to

build, um, or sometimes you find

yourself like in front of a prompt box

and you're like, I don't I don't even

know what to say. This can be really

useful. If you don't think that way,

maybe you should just start building.

Sometimes I do that, too. Um, but

usually when I'm planning things out, I

like to get a visual of what I want to

build. So, what I'm having in mind is I

live in San Francisco. I want a map of

all the cool spots, the cool parks in

San Francisco. Um, and I want to be able

to kind of move around that map and see

interesting locations, maybe apply some

filters, maybe some other stuff. So, the

problem, right, for framing the problem

is that I want an interactive map of San

Francisco's parks and public spaces.

um which is what we want is an

interactive tool that allows me to check

a map of San Francisco, see public

spaces and parks, discover new places.

The things I need to know how to do, I

need to know how to prompt, process and

analyze external data because you know

we have to get that data, that park data

from somewhere, how to debug, how to

handle errors and edge cases. Um now

this is the crux of vibe coding. um

creating the first prompt and we're

going to walk through. There's some like

actually kind of gotchas here or things

that jump out. Help me create a

minimalist maps app to visualize San

Francisco's parks. That's great. You

should use Leaflet for map visualization

and fetch data from Open Street Map.

Boom. Okay. So, right off the bat,

you're saying, "Okay, this isn't fair.

You knew what Leaflet was. You knew what

Open Street Map is." Vibe coding doing

this stuff. 90% of it is knowing what

you don't know. knowing frameworks that

you can apply to certain problems,

knowing words that produce really good

outputs. So, in the next video, you'll

see I'll talk about five key skills in

vibe coding. Don't worry about that for

now, but I'm going to call out when I

use these types of things, and you're

going to see how I do research to

integrate that into um the apps that I

build. So, Leaflet, I know Leaflet's a

really good JavaScript framework for

making maps. As a matter of fact, this

uh sample over here came from Leaflet.

Um, Open Street Map is a great

open-source um, data platform for maps

data and it has parks. It has these

formations. You might say, "Hey, what

type of data will we include in this

application?" Well, I did a quick Google

search. I said, "How can I visualize

what types of data Open Street Map has?"

And I found this Open Street browser.

So, this is like a very busy map. But I

was like poking around here and I was

like, "Okay, I can get parks for free.

There's Golden Gate Park. What else can

I get for free from Open Street Map?"

Um, picnic tables is I don't really care

about picnic tables. Um, but I think if

we go in here like places, natural

formations. Okay, so we got woods wood

and there are images, right? Like so if

I look at this um this is all free data.

This is pulling from Wikipedia. So maybe

open street map has this data somewhere.

Um we have access to woods, right? And

so what I did was I kind of like went

through here and I looked at all the

stuff and I was like what would be cool

stuff that I want in my map.

Um and so now I identified this domain

specific knowledge. Um and this is

really important right I said hey we

want to use this framework. We want to

use leaflet because I know that produces

a good outcome. I want to use open

street map because I know there's free

data there. Um and now I know based on

open street map that they have these

natural formations and these leisure um

sort of uh locations as well. This is

domain specific knowledge. What does

that mean? Well the power of AI is

actually in product specifically product

specific knowledge domain specific

knowledge. The models all these models

that are coming out today yesterday week

that's too much. um they're really

powerful, but the thing is nobody knows

what to use them for. And so everyone's

trying to figure out how do I use this

thing to be more productive or create

something cool. And what we see is

actually the people that are the most

productive or create the coolest stuff

are one creative and two um have some

specific knowledge of a thing that other

people don't have. I know a lot about

parks. I know a lot about, you know,

maps apparently. Like I knew these

things. I was able to do research to get

to these things. So now I have the

domain specific knowledge to go and

build this app with some clues for AI to

integrate. And I have a pretty good

feeling that this is going to work well

because Open Street Map has been around

for a very long time. So now what I'm

going to say is like I'm just going to

drop this in here. Help me create uh a

minimalist maps application to visualize

San Francisco's parks. You should use

leaflet for map visualization and fetch

data from open street map. And then

we're going to say include the following

open street map data

types for San

Francisco. So, we're going to say

natural formations, woods, uh beaches,

um eyelet eyelet. I've I've literally

never seen that word before. Um cave

entrance. Apparently, there are caves in

San Francisco. And then we'll say

leisure uh leisure park and gardens. One

other thing I like to do here is what we

can do is come over here. I actually

have this nice little mockup. We're

going to take a screenshot of

that. I'll copy that guy and then pretty

cool. Can attach that.

Um say I've attached a mock up. We're

going to start building. So um what

we've seen at Replet product managers,

product designers, people that just like

want to get an MVP done or like

visualize their ideas. We're going to go

from something that I sketched out, this

rough idea that I sketched out, did some

research on to something that works.

That's the goal today. That's what vibe

coding is, right? It's not about writing

the code. It's about that product

specific knowledge and it's about the

domain knowledge and applying logic to

these problems. So, the first thing

agent does, if you haven't used agent

before, is it's going to come up with a

plan for our application. Um, and that

plan just kind of confirms what agent's

going to work on and make sure it's like

on the right track. Once we approve that

plan, Adrian's going to start with a

visual preview. Then after the visual

preview is through, it's actually going

to start building out our app. So, uh,

I'll help you create a minimalist maps

app, uh, using leaflet open street map

data. Um, we have some follow-up stuff

here. I'm just going to prove that with

the most basic version start. Um, and

now what's happening, right, agents

configuring our entire development

environment. So, if you've never used

replet before, if you've never heard

about replet before, you go to

replet.com and I didn't install

anything. I didn't configure any

languages or packages or environments.

This is in my browser. Um, but agent set

up the entire environment. So, it kind

of is mimicking what a developer would

do, what a junior developer would do.

And then our very first step here is

that agent's going to stream in a visual

preview of my app. And notice how the

layout looks kind of like the mockup I

drew, which is pretty cool. Um, and it's

going to give us kind of the um uh same

um data types that I provided it from uh

from Open Street Map, which is pretty

cool. Um maybe next steps if we get this

is going to be to implement some like

advanced filtering or those Wikipedia

images we saw because I thought that was

pretty neat. Uh or to maybe like make

things mobile friendly. Um but again to

emphasize this is a preview and then I

wouldn't expect it to load the map for

the preview. That's kind of a leaflet

specific thing, but once it's done with

the preview, it's team to start building

um the full application. Some things to

call out. While agent's building, it

will make checkpoints. Uh checkpoints

are really important for vibe coding uh

because they're kind of like fallbacks,

right? If something breaks, I can always

roll back to a checkpoint under the

hood. This works on git. Uh you don't

have to worry about that too much, but

every agent project by default has git.

So you can go to a new tab and type in

git to see the version control and all

of the different commits. Um if you're

you want to connect this to an external

GitHub repository, you can do that as

well. Um but uh every project has git

you can go back to these checkpoints at

any time um in order to you know sort of

fix things if they break. And that

actually ties into my vibe coding

philosophy. Again in the next video I'll

talk more about that. But you should

build in such a way where you're trying

new things out. testing new things and

then rolling them back. If they break,

try a different prompt, tweak it a

little bit. Sort of this iterative

philosophy. So now what we can see agent

is doing, it's actually building out the

um it's building out the actual app. So

it's fetching some some tile stuff from

open street map. Um it's going to set

the current view. You can kind of like

pick through here. And like I don't

understand this code. You don't have to

understand the code either. But like

what I can see here is like logically I

see the types of characteristics that

are being implemented. This is a

component called sidebar. And in the

sidebar I just saw some like filters

right coming by. And so I'm like

thinking okay like this is how agent is

structuring my app. And if I wanted to

learn more about this app I would open

up the files and start looking around

saying okay like client server what does

that mean? Well client is a front end a

server is a backend. Um, and inside the

client I would have front-end stuff,

front-end components, an app, etc.

Inside the server, I have routes.

There's actually an API that's going to

power this application. And that's how

most applications with agent are built.

They're full stack applications. They

have a front end and a backend. Now, at

any time, we can see the different files

that are being edited here, which is

important. And so, when I'm thinking

about building with AI, I'm really

thinking about learning how this project

works. I don't know how it works because

I'm not writing the code. But once it's

working, I can start to reverse engineer

that. And that's kind of what I'm

talking through here. Looking at the

files um and looking at the folders in

this project. So now agents installing

the dependencies. Again, pretty cool. We

have all these like languages and

dependencies installed. We're actually

seeing an error on the run. So you might

be thinking, okay, that you know that

didn't work. Um, but we're going to

notice is that agent can actually see

the error. So, cool thing about uh our

agent, if you're not familiar with an

agent, it's just like AI that can do

stuff for you. Basically, it can see the

console. It can actually take

screenshots of the app. And so, it can

do a lot of the same debugging steps

that you or I would do when we're trying

to build something. Hey, why why is this

thing broken? What are some clues for me

to understand why this thing is broken?

Um, and how can I fix that?

So, you know, often the last step agent

takes is saying, "Let's check if our

application is working and request user

feedback." So, it looks like the map is

loading. See what we got. I see a map. I

don't see any Open Street Map data. Now,

let's let's think through this through.

Something isn't working here, right? The

map loads. The map looks cool. Um, but

we're not getting the data. So, often

what I'll do is I'll go to the console.

The console is like um the logs for your

project. So like logically debugging, we

have dev tools here. You can see the front-end

front-end

console. You can see other elements in

the site, the network, right? It's

actually making a request to this SF features

features

endpoint and the request is getting is

not working. It's is red. That's bad.

Um, so what I would copy here is boom,

failed to fetch map features error

cannot read properties of undefined

reading natural. I'm just literally

going to paste that to agent. And and

what I'm doing here is I'm facilitating

the process of figuring out what's wrong

with my app and then providing something

useful to our sort of AI agent here that

it can debug that issue and hopefully

fix it. So what it looks like is

happening is we're calling the open

street map API somewhere and we're

getting a response that doesn't fit into

what agent is expecting. And so if I was

like, okay, what's going on? I build

these apps a lot, right? It's probably

happening in routes SF features. We're

building an overpass query. I have no

idea what that means. Um, and we're

fetching this overpass data. Something's

breaking in here. We're seeing the exact

same thing, but agent is making some changes.

changes.

So it's saying let's try to understand

what might be going on with the response

from the overpass API. So now I'm

starting to understand okay we're using

something called overpass to access open

street map data. I don't know what that is.

is.

Um it's not

working. So it looks like agent is

adding some kind of fallback. We're

getting these errors. Failed to match

failed cannot read properties of

undefined reading natural. Hm.

Interesting. Let's modify our map

overpass to features function to provide

more error robust error handling. So in

our console, we're also seeing the same error

error

calls. A lot of this stuff, right? Like

I could let agent continue to try and

like fix this on it own its own or I

could just like leave and come back. I

like to kind of follow along sometimes

if I'm trying to learn. If I'm in a

rush, I'll leave and let it work and

then I'll come back.

Um but uh the the crux of what what

agent is doing here is it's like trying

solutions, observing the output, trying

again. That's like that's debugging in

some sense. And so my hypothesis here

for what's going wrong is that we're

making these calls to SF features um in

our routes and then something's breaking

where we're getting data in an

unexpected format.

Um, and so it looks like agent just

implemented some error logging. My hope

would be that this error logging

um provides more information as to what

the problem is. Skipping element without

tags. That looks pretty pretty

conclusive, right? Like we're getting data

data

now and it's being skipped for some

reason. So, we get this get request

pending. Okay, it actually works. Look

at that. I didn't even have to do

anything. So, now we have This is cool.

Uh we have a map of peaks of

plaza, some gardens, little

peak. Very cool. Unnamed cave. I'm going

unnamed cave later. That's That's what I

got on my plans. Uh, so we got it

working. We We connected all of the

pieces. Let's uh let's see what we can

do here. Do the filters work? Do these

things work? Woods. Yes, they do.

Ilets, parks, gardens. Pretty cool.

Um, yeah. So, I I dig this the styling,

but there are actually some better

there's some better leaflet styling. Uh,

can you use a more minimalist

C um style uh for open street map

uh cardo light. Again, I did some

research. I know what good open street

map open good um uh some good leaflet

maps look like. Uh hopefully it

understands what I was saying there.

Cardite is a theme for um Leaflet that

gives us like a bit more of a clean

interface. Um, so agent should be able

to make that change for

us. There you go. That looks pretty

cool. Typically, when I want to add more

polish or tech tackle smaller features,

I'll switch over to assistant uh and

I'll say something like um again, for

those unfamiliar, assistant is our tool

for uh more lightweight edits. We were

kind of laying the foundation with our

MVP with agent. Now for assistant, I'm

going to come over. I'm going to say

like, can you add a dark mode to my app

and use uh Cardo dark for the map in the

dark mode? Um, and assistant's a little

bit snappier. What you'll see is that

the responses typically come in a little

bit faster here. Um, and again, a little

bit more lightweight. Cool thing is

that, uh, assistant can do like a lot of

the stuff agent can do. So, um, it can

run files, it can make changes, it can

make edits, do a lot of really cool

stuff, update your app, restart your

app, um, and most importantly, read

files for context. So, it like read the

structure of my application. It looked

in the client because it knew it needed

to be in the front end, and now it's

making theme context edits. It's editing

a theme provider. Um, it's adding some

dark mode styles. Uh, and it looks like

it's going to add a dark mode map style

to update the tile

layer. Again, I'm not super sure what

that is in the context of our

application, but I do know that map

tiles have to do with how we show the

app. And then it just restarted the app,

which is why you saw it flip over to the

console again. We might have to look

into the Oh, I don't know what all this

means, but we might have to look into

that. Let's see what we got. Um, that

that's a little weird.

I don't really

know. Yeah. So, it doesn't look like

there's a toggle number one. Oh, okay.

So, the toggle theme button works for

the map, but

then then it disappears. Uh, okay. So,

the toggle theme

uh button works for the map, but it

disappears when clicked. The theme

toggle should be in the side uh nav and the

the

theme should be applied to the

side nav. I feel like building with AI,

you know, it's kind of like uh you get

kind of like a genie in a bottle. You

ask it to do something, it may or may

not do that thing. Uh which is kind of

the fun the fun part about what we're

doing here. So, we're going to need to

update the text here. So, we're just

going to kind of need a little bit more

uh robust edits. Um again, the nice

thing is that assistant moves pretty

quick. Um and so like these edits can be

kind of a little bit more targeted. Uh

but we're noticing on toggle theme is

not per is not defined. Um again, agent

is taking these actions on your behalf.

Assistant is going to take fewer of

those actions, which is why um you know,

like I'm going to have to do more work

in kind of providing context here uh to

import. But if you're following along,

right, what we did was we built the kind

of foundation of our app in agent. Then

we moved over to assistant for some of

these lightweight edits. Now we're

working on a dark mode toggle. So we got

light mode, dark mode. Now there are two

toggle theme

buttons. Now there are two toggle themes.

themes.

One controls the map, the other controls

the side nav. Um, make them into one in the

the

sidenav and update the

CSS. Again, I'm being really descriptive

here with what I want. Uh, because it's

kind of what you have to do. I do not

like this thing up top there. That's

kind of lame, but we're getting close,

right? So, if you're going to assistant,

assistant is technically cheaper. It's

technically just like more lightweight

again. Um, now I have these lines. Uh,

it's technically more lightweight, but

you can move faster. And I sometimes I

really like to chat fast and just kind

of move fast. You'll notice how fast

these edits are being applied a little

uh, use I'm probably not being targeted

enough, right? Sidenav is not being

defined. Well, let's look at our

components sidebar. Um,

yeah, use at you can mention files

sidebar. I was, you know, we're not

using the right the right components.

And so, we can direct assistance

context. We can say, hey, you should

probably read this

file. And then it's going to update the reference.

You can even see there it was like

assuming assuming this component exists.

Kabota does not exist but that's okay.

out. And debugging what we're doing now

largely trial and error. I want to show

you all this because you're going to get

errors when you're building with AI,

right? Like this stuff is going to

happen. It's not going to be a walk in

the park. And so I don't want to make

you think it is a walk in the park. Um

but it's important

that now it doesn't toggle the map. So

we have to tell AI okay now the dark

mode toggle in at uh side

bar does not toggle the map to Cardo

dark. It's important for you to see

errors. It's important for you to see

mistakes because there are a lot of

mistakes in AI and that's just kind of

like what we're doing inherently. The

state of building with AI, the state of

building with agent and assistant and vibe

vibe

coding. That's exciting because I think

it's going to do what we want it to do

is that there are a lot of errors and

it's very trial and error play with

things. But hopefully what you're

getting from this video is that I'm

showing you u my process and that it's

it's all okay, right? Uh it's just

they're not they're not mistakes.

They're they're happy little accidents.

Um, so if I can be the Bob Ross of vibe

coding, that would be fine by me. So we

have our dark mode that we added with

assistant. This is certainly pretty

good. I'm actually pretty happy with

this. You can filter all these different

things. Notably, we're not showing some

of these. So I think the these errors

skipping element, these are just like

missing tags. So that would be something

to look into. But um, for this version

of the app, uh, I think we're in a

really good spot. After all, this is

vibe coding 101. This video is probably

already longer than I wanted it to be.

Um, I like this a lot. We have an

interactive map of San Francisco um

outdoor spaces that we pulled in from an

open source framework that we did a

little bit of research on and figure out

how to build. Um, you can see the

different landmarks, the different

types. Um, and yeah, the amazing thing

is that this is running in an

environment that's on Replet. It's it's

kind of live already. The cool thing is

like if I scan this, you know, locally

if you're building with another tool,

normally you'd be building on local host

and that's only accessible on your

machine. The cool thing about Replet is

that it's already, you know, you have a

development environment that's live in

the cloud and so I can access this on my

phone and see what it looks like and

click around. Notably, the filters

aren't present on my phone, so that

might be a followup. Um, but we have

this development URL. This is ephemeral.

It's not deployed or anything. What

we're going to do now is deploy the app.

So agent replet we're going to is going

to tell me what to deploy it to. I think

that looks good. I like SF parkmapper.

Um it configures the build and run

commands for me. Important to mention if

there are any secrets right like so if

you have any like API keys stuff you

want to define that's like sensitive

information. You put them in

secrets agent will build with those on

the back end so they're not exposed to

the front end. Important security

consideration. Um and we'll pull those

into your deployment for you. And now

what I'm going to do is click deploy.

Now what Ripple is going to do is bundle

up this entire environment, this entire

thing that we've been building here, and

it's just going to make that same

version live on the web. So if you go

back and you start editing this project,

um you're not going to uh change what's

already deployed unless you click

redeploy, which will be present when

Um, now typically deployment takes a few

minutes, takes a little while to bundle

everything up and get it promoted. I'm

going to jump back in when deployment is

done. We're going to talk about what we

built. We're going to talk about next

steps and where to go from here. Okay,

so we're back. That took about 5

minutes. I can go to this link and I

have my park mapper. Um, kind of next

steps here. Uh, pretty cool. Really

happy with how this came together. Um,

next steps. The parks load on every

refresh, so we might want to add a

database. Want to consider some like

data storage. Be cool to be able to save

parks or maybe highlight your favorite

parks. That's something we can kind of

explore maybe in a later video. Um, and

then you know what else? Um, yeah,

storing these in a database, advanced

filtering, figuring out what's kind of

going on with the console and why we

weren't loading certain things. Uh,

maybe, um, different icons or some

better styling. Uh, but yeah, this is

coming along. Simple little application.

We pulled in some external data. Um, we

uh made some bug fixes. We did some

debugging together. Um, follow-up video

is going to be on how I think about vibe

coding skills and vibe coding. Uh, and

then the next video be like we're just

going to keep building. We're going to

keep making this better. Um,

implementing some more cool stuff. But

again, I'm out with Replet. This has

been vibe coding 101. How you can get

started building cool stuff on Replet.

And I didn't write any code 10 minutes.

We went from idea to deployed park

Click on any text or timestamp to jump to that moment in the video

Most transcripts ready in under 5 seconds

One-Click Copy125+ LanguagesSearch ContentJump to Timestamps

Paste YouTube URL

Enter any YouTube video link to get the full transcript

Most transcripts ready in under 5 seconds

Get Our Chrome Extension

Get transcripts instantly without leaving YouTube. Install our Chrome extension for one-click access to any video's transcript directly on the watch page.

Add to Chrome — Free

Works with YouTube, Coursera, Udemy and more educational platforms

Get Instant Transcripts: Just Edit the Domain in Your Address Bar!

YouTube

←

→

↻

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

YoutubeToText

←

→

↻

https://youtubetotext.net/watch?v=UF8uR6Z6KLc

YouTube Transcript:Vibe Coding 101 - Build and deploy an interactive map with Replit

Video Transcript

Paste YouTube URL

Transcript Extraction Form

Get Our Chrome Extension

Get Instant Transcripts: Just Edit the Domain in Your Address Bar!

YouTube Transcript:
Vibe Coding 101 - Build and deploy an interactive map with Replit