Hang tight while we fetch the video data and transcripts. This only takes a moment.
Connecting to YouTube player…
Fetching transcript data…
We’ll display the transcript, summary, and all view options as soon as everything loads.
Next steps
Loading transcript tools…
Vibe Coding 101 - Build and deploy an interactive map with Replit | Matt Palmer | YouTubeToText
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.
Share:
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
Share:
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
Transcript Extraction Form
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.
Chrome Extension