0:01 Unlike other vibe coding tutorials, I'm
0:03 going to show you how to go from an idea
0:06 to a deployed application end to end
0:08 this tutorial. Um, and we're going to
0:10 pull in some external data. We're going
0:11 to build with some fun frameworks and
0:13 create a really interactive map
0:15 visualization. Uh, so this is going to
0:17 be more fun than those other tutorials
0:18 out there. And by the end of this video,
0:20 you're going to know everything you need
0:22 to know to get started building on
0:24 Replet. So, let's actually just dig in.
0:27 Uh, when I get started building, I like
0:30 to start by kind of thinking about the
0:31 problem that I'm trying to solve. And
0:32 this really helps me. This is really
0:34 useful for folks that are new to vibe
0:35 coding. If you struggle with like
0:37 conceptualizing what you're trying to
0:39 build, um, or sometimes you find
0:40 yourself like in front of a prompt box
0:41 and you're like, I don't I don't even
0:43 know what to say. This can be really
0:45 useful. If you don't think that way,
0:46 maybe you should just start building.
0:48 Sometimes I do that, too. Um, but
0:49 usually when I'm planning things out, I
0:51 like to get a visual of what I want to
0:53 build. So, what I'm having in mind is I
0:55 live in San Francisco. I want a map of
0:57 all the cool spots, the cool parks in
1:00 San Francisco. Um, and I want to be able
1:02 to kind of move around that map and see
1:04 interesting locations, maybe apply some
1:07 filters, maybe some other stuff. So, the
1:08 problem, right, for framing the problem
1:10 is that I want an interactive map of San
1:14 Francisco's parks and public spaces.
1:16 um which is what we want is an
1:17 interactive tool that allows me to check
1:19 a map of San Francisco, see public
1:21 spaces and parks, discover new places.
1:22 The things I need to know how to do, I
1:24 need to know how to prompt, process and
1:26 analyze external data because you know
1:28 we have to get that data, that park data
1:30 from somewhere, how to debug, how to
1:33 handle errors and edge cases. Um now
1:37 this is the crux of vibe coding. um
1:39 creating the first prompt and we're
1:40 going to walk through. There's some like
1:43 actually kind of gotchas here or things
1:44 that jump out. Help me create a
1:47 minimalist maps app to visualize San
1:48 Francisco's parks. That's great. You
1:50 should use Leaflet for map visualization
1:52 and fetch data from Open Street Map.
1:53 Boom. Okay. So, right off the bat,
1:55 you're saying, "Okay, this isn't fair.
1:56 You knew what Leaflet was. You knew what
1:59 Open Street Map is." Vibe coding doing
2:03 this stuff. 90% of it is knowing what
2:05 you don't know. knowing frameworks that
2:06 you can apply to certain problems,
2:08 knowing words that produce really good
2:09 outputs. So, in the next video, you'll
2:11 see I'll talk about five key skills in
2:13 vibe coding. Don't worry about that for
2:16 now, but I'm going to call out when I
2:18 use these types of things, and you're
2:19 going to see how I do research to
2:21 integrate that into um the apps that I
2:24 build. So, Leaflet, I know Leaflet's a
2:26 really good JavaScript framework for
2:28 making maps. As a matter of fact, this
2:30 uh sample over here came from Leaflet.
2:33 Um, Open Street Map is a great
2:37 open-source um, data platform for maps
2:40 data and it has parks. It has these
2:42 formations. You might say, "Hey, what
2:45 type of data will we include in this
2:48 application?" Well, I did a quick Google
2:49 search. I said, "How can I visualize
2:51 what types of data Open Street Map has?"
2:53 And I found this Open Street browser.
2:56 So, this is like a very busy map. But I
2:57 was like poking around here and I was
3:00 like, "Okay, I can get parks for free.
3:02 There's Golden Gate Park. What else can
3:04 I get for free from Open Street Map?"
3:07 Um, picnic tables is I don't really care
3:09 about picnic tables. Um, but I think if
3:11 we go in here like places, natural
3:16 formations. Okay, so we got woods wood
3:18 and there are images, right? Like so if
3:21 I look at this um this is all free data.
3:23 This is pulling from Wikipedia. So maybe
3:26 open street map has this data somewhere.
3:28 Um we have access to woods, right? And
3:29 so what I did was I kind of like went
3:30 through here and I looked at all the
3:32 stuff and I was like what would be cool
3:34 stuff that I want in my map.
3:38 Um and so now I identified this domain
3:40 specific knowledge. Um and this is
3:42 really important right I said hey we
3:43 want to use this framework. We want to
3:45 use leaflet because I know that produces
3:46 a good outcome. I want to use open
3:47 street map because I know there's free
3:50 data there. Um and now I know based on
3:51 open street map that they have these
3:55 natural formations and these leisure um
3:57 sort of uh locations as well. This is
3:58 domain specific knowledge. What does
4:02 that mean? Well the power of AI is
4:04 actually in product specifically product
4:06 specific knowledge domain specific
4:08 knowledge. The models all these models
4:11 that are coming out today yesterday week
4:13 that's too much. um they're really
4:15 powerful, but the thing is nobody knows
4:17 what to use them for. And so everyone's
4:19 trying to figure out how do I use this
4:20 thing to be more productive or create
4:22 something cool. And what we see is
4:23 actually the people that are the most
4:25 productive or create the coolest stuff
4:29 are one creative and two um have some
4:31 specific knowledge of a thing that other
4:32 people don't have. I know a lot about
4:34 parks. I know a lot about, you know,
4:36 maps apparently. Like I knew these
4:37 things. I was able to do research to get
4:39 to these things. So now I have the
4:40 domain specific knowledge to go and
4:44 build this app with some clues for AI to
4:45 integrate. And I have a pretty good
4:47 feeling that this is going to work well
4:49 because Open Street Map has been around
4:51 for a very long time. So now what I'm
4:52 going to say is like I'm just going to
4:55 drop this in here. Help me create uh a
4:57 minimalist maps application to visualize
4:59 San Francisco's parks. You should use
5:01 leaflet for map visualization and fetch
5:03 data from open street map. And then
5:06 we're going to say include the following
5:10 open street map data
5:12 types for San
5:14 Francisco. So, we're going to say
5:18 natural formations, woods, uh beaches,
5:21 um eyelet eyelet. I've I've literally
5:24 never seen that word before. Um cave
5:26 entrance. Apparently, there are caves in
5:27 San Francisco. And then we'll say
5:31 leisure uh leisure park and gardens. One
5:33 other thing I like to do here is what we
5:35 can do is come over here. I actually
5:36 have this nice little mockup. We're
5:39 going to take a screenshot of
5:42 that. I'll copy that guy and then pretty
5:45 cool. Can attach that.
5:50 Um say I've attached a mock up. We're
5:52 going to start building. So um what
5:55 we've seen at Replet product managers,
5:56 product designers, people that just like
5:58 want to get an MVP done or like
6:00 visualize their ideas. We're going to go
6:02 from something that I sketched out, this
6:05 rough idea that I sketched out, did some
6:07 research on to something that works.
6:09 That's the goal today. That's what vibe
6:11 coding is, right? It's not about writing
6:12 the code. It's about that product
6:14 specific knowledge and it's about the
6:16 domain knowledge and applying logic to
6:18 these problems. So, the first thing
6:20 agent does, if you haven't used agent
6:21 before, is it's going to come up with a
6:24 plan for our application. Um, and that
6:26 plan just kind of confirms what agent's
6:27 going to work on and make sure it's like
6:30 on the right track. Once we approve that
6:31 plan, Adrian's going to start with a
6:33 visual preview. Then after the visual
6:34 preview is through, it's actually going
6:36 to start building out our app. So, uh,
6:38 I'll help you create a minimalist maps
6:40 app, uh, using leaflet open street map
6:42 data. Um, we have some follow-up stuff
6:44 here. I'm just going to prove that with
6:46 the most basic version start. Um, and
6:48 now what's happening, right, agents
6:49 configuring our entire development
6:50 environment. So, if you've never used
6:51 replet before, if you've never heard
6:53 about replet before, you go to
6:55 replet.com and I didn't install
6:56 anything. I didn't configure any
6:58 languages or packages or environments.
7:01 This is in my browser. Um, but agent set
7:03 up the entire environment. So, it kind
7:05 of is mimicking what a developer would
7:07 do, what a junior developer would do.
7:10 And then our very first step here is
7:11 that agent's going to stream in a visual
7:14 preview of my app. And notice how the
7:16 layout looks kind of like the mockup I
7:19 drew, which is pretty cool. Um, and it's
7:23 going to give us kind of the um uh same
7:27 um data types that I provided it from uh
7:29 from Open Street Map, which is pretty
7:31 cool. Um maybe next steps if we get this
7:33 is going to be to implement some like
7:35 advanced filtering or those Wikipedia
7:36 images we saw because I thought that was
7:38 pretty neat. Uh or to maybe like make
7:41 things mobile friendly. Um but again to
7:44 emphasize this is a preview and then I
7:46 wouldn't expect it to load the map for
7:47 the preview. That's kind of a leaflet
7:49 specific thing, but once it's done with
7:51 the preview, it's team to start building
7:53 um the full application. Some things to
7:55 call out. While agent's building, it
7:57 will make checkpoints. Uh checkpoints
7:59 are really important for vibe coding uh
8:01 because they're kind of like fallbacks,
8:03 right? If something breaks, I can always
8:04 roll back to a checkpoint under the
8:06 hood. This works on git. Uh you don't
8:08 have to worry about that too much, but
8:11 every agent project by default has git.
8:12 So you can go to a new tab and type in
8:15 git to see the version control and all
8:18 of the different commits. Um if you're
8:20 you want to connect this to an external
8:22 GitHub repository, you can do that as
8:26 well. Um but uh every project has git
8:27 you can go back to these checkpoints at
8:31 any time um in order to you know sort of
8:33 fix things if they break. And that
8:35 actually ties into my vibe coding
8:36 philosophy. Again in the next video I'll
8:38 talk more about that. But you should
8:39 build in such a way where you're trying
8:41 new things out. testing new things and
8:43 then rolling them back. If they break,
8:44 try a different prompt, tweak it a
8:45 little bit. Sort of this iterative
8:47 philosophy. So now what we can see agent
8:50 is doing, it's actually building out the
8:52 um it's building out the actual app. So
8:55 it's fetching some some tile stuff from
8:57 open street map. Um it's going to set
8:58 the current view. You can kind of like
9:00 pick through here. And like I don't
9:02 understand this code. You don't have to
9:05 understand the code either. But like
9:07 what I can see here is like logically I
9:09 see the types of characteristics that
9:11 are being implemented. This is a
9:13 component called sidebar. And in the
9:15 sidebar I just saw some like filters
9:16 right coming by. And so I'm like
9:18 thinking okay like this is how agent is
9:19 structuring my app. And if I wanted to
9:21 learn more about this app I would open
9:23 up the files and start looking around
9:24 saying okay like client server what does
9:26 that mean? Well client is a front end a
9:30 server is a backend. Um, and inside the
9:32 client I would have front-end stuff,
9:34 front-end components, an app, etc.
9:36 Inside the server, I have routes.
9:38 There's actually an API that's going to
9:40 power this application. And that's how
9:42 most applications with agent are built.
9:43 They're full stack applications. They
9:45 have a front end and a backend. Now, at
9:47 any time, we can see the different files
9:49 that are being edited here, which is
9:50 important. And so, when I'm thinking
9:52 about building with AI, I'm really
9:54 thinking about learning how this project
9:56 works. I don't know how it works because
9:59 I'm not writing the code. But once it's
10:01 working, I can start to reverse engineer
10:02 that. And that's kind of what I'm
10:03 talking through here. Looking at the
10:06 files um and looking at the folders in
10:09 this project. So now agents installing
10:12 the dependencies. Again, pretty cool. We
10:13 have all these like languages and
10:15 dependencies installed. We're actually
10:17 seeing an error on the run. So you might
10:20 be thinking, okay, that you know that
10:22 didn't work. Um, but we're going to
10:24 notice is that agent can actually see
10:27 the error. So, cool thing about uh our
10:29 agent, if you're not familiar with an
10:30 agent, it's just like AI that can do
10:32 stuff for you. Basically, it can see the
10:34 console. It can actually take
10:36 screenshots of the app. And so, it can
10:38 do a lot of the same debugging steps
10:40 that you or I would do when we're trying
10:42 to build something. Hey, why why is this
10:44 thing broken? What are some clues for me
10:46 to understand why this thing is broken?
10:49 Um, and how can I fix that?
10:52 So, you know, often the last step agent
10:53 takes is saying, "Let's check if our
10:56 application is working and request user
10:58 feedback." So, it looks like the map is
11:02 loading. See what we got. I see a map. I
11:06 don't see any Open Street Map data. Now,
11:08 let's let's think through this through.
11:10 Something isn't working here, right? The
11:13 map loads. The map looks cool. Um, but
11:15 we're not getting the data. So, often
11:17 what I'll do is I'll go to the console.
11:20 The console is like um the logs for your
11:23 project. So like logically debugging, we
11:24 have dev tools here. You can see the front-end
11:26 front-end
11:28 console. You can see other elements in
11:30 the site, the network, right? It's
11:32 actually making a request to this SF features
11:33 features
11:36 endpoint and the request is getting is
11:39 not working. It's is red. That's bad.
11:43 Um, so what I would copy here is boom,
11:45 failed to fetch map features error
11:46 cannot read properties of undefined
11:48 reading natural. I'm just literally
11:51 going to paste that to agent. And and
11:53 what I'm doing here is I'm facilitating
11:55 the process of figuring out what's wrong
11:58 with my app and then providing something
12:01 useful to our sort of AI agent here that
12:05 it can debug that issue and hopefully
12:07 fix it. So what it looks like is
12:09 happening is we're calling the open
12:12 street map API somewhere and we're
12:14 getting a response that doesn't fit into
12:16 what agent is expecting. And so if I was
12:18 like, okay, what's going on? I build
12:19 these apps a lot, right? It's probably
12:22 happening in routes SF features. We're
12:24 building an overpass query. I have no
12:26 idea what that means. Um, and we're
12:29 fetching this overpass data. Something's
12:31 breaking in here. We're seeing the exact
12:34 same thing, but agent is making some changes.
12:36 changes.
12:37 So it's saying let's try to understand
12:39 what might be going on with the response
12:41 from the overpass API. So now I'm
12:42 starting to understand okay we're using
12:44 something called overpass to access open
12:46 street map data. I don't know what that is.
12:47 is.
12:50 Um it's not
12:52 working. So it looks like agent is
12:54 adding some kind of fallback. We're
12:56 getting these errors. Failed to match
12:58 failed cannot read properties of
13:01 undefined reading natural. Hm.
13:03 Interesting. Let's modify our map
13:06 overpass to features function to provide
13:08 more error robust error handling. So in
13:10 our console, we're also seeing the same error
13:11 error
13:13 calls. A lot of this stuff, right? Like
13:15 I could let agent continue to try and
13:17 like fix this on it own its own or I
13:19 could just like leave and come back. I
13:20 like to kind of follow along sometimes
13:22 if I'm trying to learn. If I'm in a
13:24 rush, I'll leave and let it work and
13:27 then I'll come back.
13:31 Um but uh the the crux of what what
13:33 agent is doing here is it's like trying
13:35 solutions, observing the output, trying
13:37 again. That's like that's debugging in
13:39 some sense. And so my hypothesis here
13:41 for what's going wrong is that we're
13:45 making these calls to SF features um in
13:48 our routes and then something's breaking
13:49 where we're getting data in an
13:52 unexpected format.
13:54 Um, and so it looks like agent just
13:57 implemented some error logging. My hope
14:00 would be that this error logging
14:04 um provides more information as to what
14:07 the problem is. Skipping element without
14:10 tags. That looks pretty pretty
14:12 conclusive, right? Like we're getting data
14:14 data
14:17 now and it's being skipped for some
14:20 reason. So, we get this get request
14:24 pending. Okay, it actually works. Look
14:25 at that. I didn't even have to do
14:29 anything. So, now we have This is cool.
14:32 Uh we have a map of peaks of
14:39 plaza, some gardens, little
14:44 peak. Very cool. Unnamed cave. I'm going
14:46 unnamed cave later. That's That's what I
14:48 got on my plans. Uh, so we got it
14:51 working. We We connected all of the
14:53 pieces. Let's uh let's see what we can
14:55 do here. Do the filters work? Do these
14:58 things work? Woods. Yes, they do.
15:04 Ilets, parks, gardens. Pretty cool.
15:08 Um, yeah. So, I I dig this the styling,
15:09 but there are actually some better
15:11 there's some better leaflet styling. Uh,
15:16 can you use a more minimalist
15:22 C um style uh for open street map
15:25 uh cardo light. Again, I did some
15:27 research. I know what good open street
15:30 map open good um uh some good leaflet
15:33 maps look like. Uh hopefully it
15:34 understands what I was saying there.
15:38 Cardite is a theme for um Leaflet that
15:39 gives us like a bit more of a clean
15:43 interface. Um, so agent should be able
15:44 to make that change for
15:46 us. There you go. That looks pretty
15:48 cool. Typically, when I want to add more
15:50 polish or tech tackle smaller features,
15:52 I'll switch over to assistant uh and
15:56 I'll say something like um again, for
15:58 those unfamiliar, assistant is our tool
16:00 for uh more lightweight edits. We were
16:02 kind of laying the foundation with our
16:04 MVP with agent. Now for assistant, I'm
16:05 going to come over. I'm going to say
16:09 like, can you add a dark mode to my app
16:13 and use uh Cardo dark for the map in the
16:17 dark mode? Um, and assistant's a little
16:18 bit snappier. What you'll see is that
16:20 the responses typically come in a little
16:23 bit faster here. Um, and again, a little
16:25 bit more lightweight. Cool thing is
16:27 that, uh, assistant can do like a lot of
16:29 the stuff agent can do. So, um, it can
16:31 run files, it can make changes, it can
16:33 make edits, do a lot of really cool
16:36 stuff, update your app, restart your
16:38 app, um, and most importantly, read
16:40 files for context. So, it like read the
16:42 structure of my application. It looked
16:43 in the client because it knew it needed
16:44 to be in the front end, and now it's
16:48 making theme context edits. It's editing
16:50 a theme provider. Um, it's adding some
16:53 dark mode styles. Uh, and it looks like
16:56 it's going to add a dark mode map style
16:59 to update the tile
17:02 layer. Again, I'm not super sure what
17:03 that is in the context of our
17:04 application, but I do know that map
17:07 tiles have to do with how we show the
17:09 app. And then it just restarted the app,
17:12 which is why you saw it flip over to the
17:13 console again. We might have to look
17:16 into the Oh, I don't know what all this
17:17 means, but we might have to look into
17:20 that. Let's see what we got. Um, that
17:23 that's a little weird.
17:24 I don't really
17:26 know. Yeah. So, it doesn't look like
17:29 there's a toggle number one. Oh, okay.
17:30 So, the toggle theme button works for
17:33 the map, but
17:37 then then it disappears. Uh, okay. So,
17:41 the toggle theme
17:45 uh button works for the map, but it
17:51 disappears when clicked. The theme
17:56 toggle should be in the side uh nav and the
17:57 the
18:01 theme should be applied to the
18:04 side nav. I feel like building with AI,
18:05 you know, it's kind of like uh you get
18:07 kind of like a genie in a bottle. You
18:10 ask it to do something, it may or may
18:12 not do that thing. Uh which is kind of
18:14 the fun the fun part about what we're
18:16 doing here. So, we're going to need to
18:17 update the text here. So, we're just
18:18 going to kind of need a little bit more
18:20 uh robust edits. Um again, the nice
18:23 thing is that assistant moves pretty
18:26 quick. Um and so like these edits can be
18:28 kind of a little bit more targeted. Uh
18:30 but we're noticing on toggle theme is
18:33 not per is not defined. Um again, agent
18:35 is taking these actions on your behalf.
18:36 Assistant is going to take fewer of
18:38 those actions, which is why um you know,
18:40 like I'm going to have to do more work
18:43 in kind of providing context here uh to
18:50 import. But if you're following along,
18:53 right, what we did was we built the kind
18:56 of foundation of our app in agent. Then
18:58 we moved over to assistant for some of
19:00 these lightweight edits. Now we're
19:02 working on a dark mode toggle. So we got
19:04 light mode, dark mode. Now there are two
19:07 toggle theme
19:10 buttons. Now there are two toggle themes.
19:13 themes.
19:17 One controls the map, the other controls
19:23 the side nav. Um, make them into one in the
19:24 the
19:27 sidenav and update the
19:30 CSS. Again, I'm being really descriptive
19:32 here with what I want. Uh, because it's
19:33 kind of what you have to do. I do not
19:35 like this thing up top there. That's
19:38 kind of lame, but we're getting close,
19:40 right? So, if you're going to assistant,
19:42 assistant is technically cheaper. It's
19:44 technically just like more lightweight
19:47 again. Um, now I have these lines. Uh,
19:49 it's technically more lightweight, but
19:51 you can move faster. And I sometimes I
19:53 really like to chat fast and just kind
19:54 of move fast. You'll notice how fast
19:56 these edits are being applied a little
20:08 uh, use I'm probably not being targeted
20:10 enough, right? Sidenav is not being
20:11 defined. Well, let's look at our
20:15 components sidebar. Um,
20:19 yeah, use at you can mention files
20:21 sidebar. I was, you know, we're not
20:23 using the right the right components.
20:25 And so, we can direct assistance
20:27 context. We can say, hey, you should
20:28 probably read this
20:31 file. And then it's going to update the reference.
20:41 You can even see there it was like
20:44 assuming assuming this component exists.
20:47 Kabota does not exist but that's okay.
20:55 out. And debugging what we're doing now
20:57 largely trial and error. I want to show
20:59 you all this because you're going to get
21:00 errors when you're building with AI,
21:01 right? Like this stuff is going to
21:03 happen. It's not going to be a walk in
21:04 the park. And so I don't want to make
21:06 you think it is a walk in the park. Um
21:08 but it's important
21:11 that now it doesn't toggle the map. So
21:15 we have to tell AI okay now the dark
21:20 mode toggle in at uh side
21:26 bar does not toggle the map to Cardo
21:28 dark. It's important for you to see
21:29 errors. It's important for you to see
21:31 mistakes because there are a lot of
21:33 mistakes in AI and that's just kind of
21:35 like what we're doing inherently. The
21:37 state of building with AI, the state of
21:39 building with agent and assistant and vibe
21:40 vibe
21:42 coding. That's exciting because I think
21:43 it's going to do what we want it to do
21:45 is that there are a lot of errors and
21:46 it's very trial and error play with
21:48 things. But hopefully what you're
21:49 getting from this video is that I'm
21:51 showing you u my process and that it's
21:53 it's all okay, right? Uh it's just
21:54 they're not they're not mistakes.
21:57 They're they're happy little accidents.
22:00 Um, so if I can be the Bob Ross of vibe
22:02 coding, that would be fine by me. So we
22:04 have our dark mode that we added with
22:05 assistant. This is certainly pretty
22:07 good. I'm actually pretty happy with
22:10 this. You can filter all these different
22:13 things. Notably, we're not showing some
22:14 of these. So I think the these errors
22:16 skipping element, these are just like
22:18 missing tags. So that would be something
22:21 to look into. But um, for this version
22:24 of the app, uh, I think we're in a
22:25 really good spot. After all, this is
22:27 vibe coding 101. This video is probably
22:29 already longer than I wanted it to be.
22:31 Um, I like this a lot. We have an
22:33 interactive map of San Francisco um
22:35 outdoor spaces that we pulled in from an
22:36 open source framework that we did a
22:37 little bit of research on and figure out
22:39 how to build. Um, you can see the
22:40 different landmarks, the different
22:43 types. Um, and yeah, the amazing thing
22:46 is that this is running in an
22:48 environment that's on Replet. It's it's
22:50 kind of live already. The cool thing is
22:52 like if I scan this, you know, locally
22:54 if you're building with another tool,
22:57 normally you'd be building on local host
22:58 and that's only accessible on your
23:00 machine. The cool thing about Replet is
23:02 that it's already, you know, you have a
23:03 development environment that's live in
23:05 the cloud and so I can access this on my
23:06 phone and see what it looks like and
23:08 click around. Notably, the filters
23:09 aren't present on my phone, so that
23:11 might be a followup. Um, but we have
23:13 this development URL. This is ephemeral.
23:15 It's not deployed or anything. What
23:16 we're going to do now is deploy the app.
23:19 So agent replet we're going to is going
23:21 to tell me what to deploy it to. I think
23:24 that looks good. I like SF parkmapper.
23:26 Um it configures the build and run
23:29 commands for me. Important to mention if
23:31 there are any secrets right like so if
23:33 you have any like API keys stuff you
23:35 want to define that's like sensitive
23:36 information. You put them in
23:39 secrets agent will build with those on
23:40 the back end so they're not exposed to
23:42 the front end. Important security
23:44 consideration. Um and we'll pull those
23:45 into your deployment for you. And now
23:47 what I'm going to do is click deploy.
23:49 Now what Ripple is going to do is bundle
23:51 up this entire environment, this entire
23:52 thing that we've been building here, and
23:54 it's just going to make that same
23:56 version live on the web. So if you go
23:58 back and you start editing this project,
24:02 um you're not going to uh change what's
24:03 already deployed unless you click
24:05 redeploy, which will be present when
24:12 Um, now typically deployment takes a few
24:14 minutes, takes a little while to bundle
24:16 everything up and get it promoted. I'm
24:17 going to jump back in when deployment is
24:19 done. We're going to talk about what we
24:20 built. We're going to talk about next
24:23 steps and where to go from here. Okay,
24:24 so we're back. That took about 5
24:27 minutes. I can go to this link and I
24:30 have my park mapper. Um, kind of next
24:32 steps here. Uh, pretty cool. Really
24:35 happy with how this came together. Um,
24:37 next steps. The parks load on every
24:38 refresh, so we might want to add a
24:39 database. Want to consider some like
24:41 data storage. Be cool to be able to save
24:43 parks or maybe highlight your favorite
24:45 parks. That's something we can kind of
24:47 explore maybe in a later video. Um, and
24:50 then you know what else? Um, yeah,
24:52 storing these in a database, advanced
24:53 filtering, figuring out what's kind of
24:54 going on with the console and why we
24:56 weren't loading certain things. Uh,
24:59 maybe, um, different icons or some
25:01 better styling. Uh, but yeah, this is
25:03 coming along. Simple little application.
25:06 We pulled in some external data. Um, we
25:08 uh made some bug fixes. We did some
25:10 debugging together. Um, follow-up video
25:11 is going to be on how I think about vibe
25:13 coding skills and vibe coding. Uh, and
25:15 then the next video be like we're just
25:16 going to keep building. We're going to
25:17 keep making this better. Um,
25:19 implementing some more cool stuff. But
25:21 again, I'm out with Replet. This has
25:22 been vibe coding 101. How you can get
25:24 started building cool stuff on Replet.
25:27 And I didn't write any code 10 minutes.
25:30 We went from idea to deployed park
Chrome Extension