v0 Integrations: Text to Scalable Full-Stack Web Apps with v0 + Neon

--- type: transcript date: 2025-03-20 youtube_id: ZjPWEaJ3tvQ --- # Transcript: v0 Integrations: Text to Scalable Full-Stack Web Apps with v0 + Neon in this video I wanted to show you VZ integration so this just came out last week and in this video I wanted to demo it how it works and how you can potentially leverage this in building out an application that you have in mind if you don't have an account for VZ you will be able to try this out with a number of free queries per day so you can go ahead make an account and try out what I'm about to show you what I'm going to do in this video is we'll work through the process iteratively and when we get to a point where we do need to integrate a database I'll go ahead and show you what that new Integrations feature looks like within this I'm going to say bu out a clone of Hacker News except I actually want to be able to add and submit stories as if I was a user here's the first iteration of our Hacker News clone and what I can say here is now I want to leverage neon for my database so users can sign up and authenticate make accounts and also post to the platform as well now with the new Integrations feature when you go and ask for an integration if you said something more ambiguous like I want to add in a database what you'd see here is a list of different options option so neon superbase as well as up stash are the options at time of recording and just to show you how easy this is if I go and I click add what I can do is I'll go through the steps all that you need to do is Click add you can determine the region and then finally you can determine which plan that you want to leverage now the great thing with neon is you do have the ability to have up to 10 free postgress databases on their platform at any given time I'm going to go ahead and click generate here I'll call it Hacker News clone then once you're done it will close it out and it will continue the process it's very seamless everything's going to be integrated within the versell marketplace in other words you're going to have all of the billing centralized within the verel platform and there isn't going to be a markup so you're going to be paying what you would have otherwise paid at neon for the postgress database you're going to be paying the exact same price as if you were to go over to Neon themselves and sign up for the particular paid tier that you selected now if I scroll down here we see that we're going to set up our users table our stories table the comments table and then you can go ahead and run the code there now that it's successfully created the database tables what it's going to do is it's going to go through and complete The Hacker News clone here now the nice thing with VZ is as it goes through the generations of different files it can also edit previous files as you might expect but the other nice thing that I just noticed within the platform is if there are any errors that were generated from the response from the large language model it will go ahead and try and attempt to resolve those it is nice to see some of those mechanisms within there where if there is erroneous code it will go ahead and detect that all right so it went through and it generated an awful lot we see that it generated the schema the authentication for us we see these stories there are a ton of different files here now we do see that it is prompting us here I'm just going to go ahead and I'll submit that once it's done that what it's going to do is it's going to go and generate some sample users stories as well as comments so when we had the first generation there we did notice that we did have some stories but all of those different stories were hardcoded now what we're doing here is we're just going to be seating our database with some temporary data so we can see a number of different posts and we'll go ahead we'll run this SQL statement now that we've seated our database with some sample data it's going to go through it's going to enhance our Hacker News clone with additional storage functionality it'll add user save stories and improve the comment handling we'll just let that run through and then we'll take a look at once it's done here is our Hacker News clone we can now save the stories so users can save stories for later reading we have a dedicated page for all of the users stories and the ability to unsave stories we have the user profiles we have an enhanced header and we also have the improved story details now if I just go and click around here so we have this first post an open source alternative to chat gbt I'll go and I'll click the comments here and within here we have this link to that seated data that we had generated we also have a couple comments here if I just take a look at the stories here we can see all of the different values announcing nextjs 15 we can see that story here within here I can go and I can click through to the comments we also have these different tabs here say if I wanted to submit something I can go ahead and log in put in a password or if I want to make an account I have a sign up page here as well we go ahead and I'll test this out and I'll try and sign up here we see that we do have an error now the nice thing with v0 is there's a really nice ergonomic way on handling errors where I can just click that button and it will pass that error into the AI model with the relevant context of what it needs to resolve that now if I try and sign up again there was another slight error where bio didn't exist when I tried to sign up again similar thing is I click to send that error into the context and it's going to work through the relevant files to update everything that it needs to hopefully have our application in a working State now that it's made those Updates this time we now see that I am logged in now if I go and I submit the story I can say hello world this is an example of building an application with neon and VZ I'll go ahead and I'll put in an example link here put in some lurm if some text so I'll go and I'll submit that I now have this story within here I can go ahead and I can click through within it and additionally since I'm now logged in I can go and add in a comment I can submit that comment and now we see that comment persist on the page here that's pretty much it for the application build now the great thing with vzer if I want to deploy the application is I can go and do that with just one click and you do have the option to easily set a custom domain next just to touch on some of the code that was generated so you can go and click on the code button here and within here you can edit the code just like you would within your I you're not just limited to using natural language you can always pull down this repository or alternatively make the tweaks directly within the interface here now if I take a look at what was generated here let's just first take a look at the DB for instance we see that we're using neon from their serverless package and then for our omm we're going to be using drizzle we're setting up our SQL client we're passing that into our drizzle configuration from there if I take a look at our schema we do see this drizzle generation for us if you haven't used drizzle before this is effectively how you're going to be defining your schema we have our users stories comments so on and so forth and the nice thing with using an orm like drizzle if you were to pull this down you'll have all of that nice type checking throughout your application so say if you're building a nextjs project you'll be able to have all of this type checking throughout so there's no conflicts for whether you're writing on the front end back end when it actually interacts with your database from neon and then from there if we explore our app folder we can see that we have our main homepage here this is going to be where we have that list of different stories where we have The Hacker News header and then from there we have our different pages as well as our routes for instance if I take a quick look at the authentication here within here we see we're basically rolling our own off we're using the bcrypt library to Hash our passwords we're going to be using Jose for signing and verifying our JWT tokens I always encourage you with these types of applications especially if you're building something that you plan on putting into production is just make sure that you do verify what it has generated for you we have the different routes and Pages for whether you're signing in logging in and then we also have a number of API routes within here finally one last thing that I wanted to look at is how each item page is being generated if we click on into one of the hacker news stories we're going to go within this route this is going to be how you have a dynamic route within nextjs and within here if I just scroll down we can see that within here we're making the request to stories with the particular ID and if I go into the stories route we have an example of what our base qu would be if we're going to go and pull all of the latest stories alternatively we do also have some sorting so whether the story is new if we're clicking on the new tab the top tab we have these different queries on how it will ultimately go and make that request so I just wanted to do a quick overview on what was generated that is some feedback I have got with some videos is when I do showcase some of these text app Builders is some people like to see what the llm is actually generating then finally if you do want to see the information within your database for instance what you can do is you can head on over to versell log into your account go to the Integrations Tab and in this case I can click neon and then I can go ahead and click our project here we have all the information about our neon instance here we also have the quick start steps and then finally we can open it within neon by just clicking that tab there here you can see that I am using neon's free tier if I go over to tables we can go within here we can see our comments we can see our stories our users including the one we just set up the table for all of the different votes all kudos to the team over at versell for these new Integrations this is something that I've actually wished to see within text app builders for quite some time when I did a video last year on a now popular text app builder one of the comments that I had to one of the CEOs of the company was actually to have a Marketplace of different Integrations and not just to have one sole integration for these types of platforms I encourage you to try out the platform as well as the new Integrations feature the platform I have to say has definitely come quite a ways from when I tried it just a number of months ago but otherwise that's pretty much it for this video if you found this video useful please comment share and subscribe otherwise until the next one