Sign in to continue learning
Vibe Coding 101 with Replit
Beginner
1h34m
Topics
AI Coding
AI in Software Development
Agents
GenAI Applications
Prompt Engineering
In this lesson, we'll refine our National Parks voting app by integrating our complete data set. We'll also add final features with Agent and Assistant to ensure everything works correctly. Then we'll deploy the application for public use. In the last lesson, we built out our park ranking head-to-head voting app. Here we got all the functionality implemented. We have our parks being stored in a database. We kind of got this nice little ranking table here, along with our recent votes that are being stored in Postgres. Now we're going to add some additional functionality. We're going to understand how this works and then deploy our app. But on that last stage and running the dial I kind of zoned out. And so I kind of missed I missed exactly how things were being implemented. So what I'm gonna do now is I'm gonna head to Assistant, and I'm just going to ask it to help me understand how my project's working. Again, you're going to see the the preview refresh as we switch to Assistant mode. But I see client, I see server and shared. But like, I don't know much about databases or how we implemented our database. So I'm just going to ask Assistant: help me understand what frameworks we used for our database. How does it work? And how are we managing it? And again I think frameworks are important. Something I've been emphasizing throughout this course. And understanding what we're building is important because as we get into these debugging issues, you need to understand how to solve these problems and how things work in order to solve those problems. So, the system basically just gave me a recap of everything Agent just built. We're using Postgres, which is a main database configured through a connection URL in our environment, variables, which we talked about. Cool. We're using an ORM framework called Drizzle ORM, which is a TypeScript First ORM. I have no idea what that means. We're going to dig into that in a second. We're also doing some schema management, so we're defining that. I can actually look through here shared schema. Okay cool. Like this is defining, the parks table and all of the columns there. It's defining a votes table. Neat. Actually walking through our tables. And the code base has two storage implementations an in-memory implementation. So this was like our old dev implementation. We could clean that up if we wanted to. So good call out and explains how these things work. Now what was that? They just walk this through. I don't really know what an ORM framework is. So I'm going to say what is an ORM framework and why would I use drizzle ORM. This is exactly how I've learned to code or how to build with AI and basically everything that I'm showing you today. I just asked a bunch of questions and, you know, Assistant uses the latest models. We're just asking questions, and understanding kind of what's going on. So this isn't going to actually tell us here exactly what our ORM is. Object relational mapping is a framework that lets you interact with your database using programing language objects. Instead of writing real SQL queries. Okay. So we're using objects instead of writing SQL or SQL, which is a language for interacting with databases. So it's actually telling us some of the benefits type safety schema management, query building, schema validation. Okay, maybe I don't know exactly what these things are, but I could keep digging into them. So really the goal here is just to help you understand, hey, I don't actually know what this thing is. I don't really know, what's going on, but I can learn and I can ask AI and I can use that as a way to kind of reinforce the things that I'm building and to keep, iterate it. So just like that, since then, it helped us understand how our application worked and maybe even learn a few things about Drizzle, about Postgres, and some of the tools that we're building with. But I've been really impressed. I like how this works. We have an application where we can vote for the parks that are recorded in our database, and we get our ranking system. This is exactly what I wanted, and it's really cool. It's really interactive. We actually pulled the data and these images from Wikipedia. So pretty complicated app here. Some data manipulation visualization kind of extract transform load type stuff. So now we're going to go ahead. We're going to deploy this just like last time, we're gonna use Autoscale. We're going to approve those settings. And this time you'll notice that we have secrets for our database. Right. So if we're going to deploy with APIs or external services, we'd pull those secrets through as well. We'll call this one Park Challenge. I think that's available. And we're going to go down and deploy it. And just like last time, Replit is going to build this deployment, it's going to configure everything and promote that to, our production environment. There's really not much we need to worry about since we built the entire thing out. And typically in development, it's really hard not only to recreate your environment in the cloud, but then to add in those external services, to add in databases and manage those databases in a separate environment, or do a bunch of other stuff. Right. And so what we have here is a database that's directly integrated into the environment. As we talked about before, our app kind of installed a bunch of stuff for us that ran some Python scripts to import data. You know, Agent configured this database that embedded into our application. And we didn't have to go anywhere. We didn't have to go to another tab. We didn't have to set up another account or input an API key. We just did it all from writing Replit. So the power of building the Agent, the power of building with Assistant, is that we're able to make these applications, the full stack applications that have databases that have front ends and have back ends and really, build complex tooling from one pane that is vibe coding, right? We did a lot of planning. We did a lot of discussion about tools and frameworks, but for the most part, this looked a lot different from, coding, or building otherwise. There's a lot of vibes. We're just kind of going by feel with the debugging. Were going by feel with like how we managed context. So I'm gonna let this deployment in wrap up. We'll come back, we'll finish it up, make sure our application works and we'll move on from there. Cool. So we deployed our application, we get a URL, and it's deployed as an auto-scale deployment. Again, if you want to learn more about that, you can check out our videos or the documentation. Opening the app. We get exactly what we had before I can vote on Mammoth Cave. And actually, it's important to note that the same score is pulled through from before. That's because we're using the same database. So we have our voting system, we have some recent votes, and we have our rankings that are being stored persistently in our database. As a kind of talked about, this is the power of Replit. We just deployed this live on the internet for anybody to access. If you want to share with your family or friends, you can do just that. And yeah, you know, end-to-end full-stack application, persistent storage, vibe coded all the way. So in our next lesson we're going to talk about next steps. We're going to talk about where to go from here. But thanks for joining along. Thanks for building some cool apps. Let's let's wrap it up.
