Build Your MVP 10x Faster with this Next.js Full Stack Tool: Kirimase

we're launching a brand new feature today for kir called child models and I'm really excited to show you how it works so let's create a new Next app uh we're going to call this Twitter demo we're going to say yes to everything we're using App router tail and CSS um and typescript if we clear this uh we're going to jump into that new directory Twitter demo and then I'm going to run kiras in it uh we're going to use shaten UI for a component Library drizzle uh post gjs post. JS for our driver uh Luchia for our authentication and no extra packages for the time being amazing so that's all scaffolded up uh let's first things first create a new local database so we're going to say create database um let's call this Twitter demo as well uh exit out of there and then jump into the editor head into our M file uh and then we are going to update the database URL to be Twitter demo great let's quit out of there and now we can run our first kiras generate um so what I want to build today like last time I would like an application that helps me track the books that I'm reading um but this time I'd like to also add quotes from the books that I like as well as maybe some Reflections or thoughts on those books as I'm reading them so we're going to generate the model the controller and the view uh we're going to use server actions today uh this feature is only available with server actions and optimistic UI for the time being uh so we're going to Define our first model this is going to be called authors every author is going to have a name uh which is required uh no other fields for the author no index I do want time stamps this model belongs to the user um now you can see the new feature uh would you like to add a CH model yes I would uh we're going to call this books every book is going to have a title uh which is required and I do want to add another field here uh a Boolean Cod completed uh this just going to track my uh books that are I'm currently reading and those that I've already finished uh this is required no other field for the time being no index uh I do want time stamps this is going to belong to the user now I want to add a child model here um our first child model is going to be quotes uh every quote is going to have a Content field uh which is required no other fields no index I do want timestamps uh and it does belong to the user uh do I want to add another child model no not to quotes but I do want to add another one to books and this is going to be called Reflections uh every reflection is going to have content as well uh this is required do I want to add another field no no index I do want timestamps I do want it to belong to the user now no chard model for Reflections no more CH models for books no CH models for authors I do want to add the authors to the sidebar and maybe let's add uh books to the sidebar as well but I don't think I need quotes on the sidebar I don't need Reflections on the sidebar great so that's a lot let's uh follow the instructions it says run B bun DB generate uh you can see our new tables there and let's run bun DB migrate great so first things first let's just run the dev server and see if it works right it's a lot that that was going on uh so Local Host 3000 as you can see here uh head to the signup page the brand new app if we make make a new username actually I make it Nico password test 123 you can see we've got our new entities on the side let's start with authors jump in here let's add our first author it's going to be called Tony Fidel as per usual let's head to Tony's page if I click it properly there we go so now we've got Tony's page uh every author now has their own page you can see on URL uh we can now add books as well so let's add our first book as per usual we're going to add build um if we head into build page you can see this is again a nested route uh we can update we're using optimistic UI here so everything is super Snappy uh if I were to delete it also takes me right back to Tony Fidel um so let's create that again say we finished it and then create it let's head to Tony's page and now you can see again we've got another nested model so our book is going to have many quotes this is a much better user interface it's also something your users would expect that they're not tagging every new quote to an author you just do it within or to a book you just do it within the books page so first quote and then we can head in there and the awesome thing is all of this data is available to you on this first quote page within uh at this uh URL this route as well um so super fast again with full optimistic UI working right out the box um so as a reminder like there a lot that just happened here if we head back to um to the app we can even run uh build and you can see that the entire application is done with no errors in in the types uh the beauty of this here is that Keras is just doing code generation there are no libraries there's no abstractions this is pure in this case react code uh with Zod drizzle um and Luchia for authentication so it means that you have great code without a ton of dependencies uh fully typed uh the Zod validators are already done for you I mean you can see all of these routes that are already done for you um so I mean building what we just built in in one command probably would have taken a full day if that not to mention we've done it with error handling out of the box with with API routes with with server actions with optimistic UI I mean it is incredible what you can build so quickly um so I'm I'm super excited about this it's it really is it's remarkable what you can do with this and I really want to see what you can build with this um so have a play around and uh show me what you build thanks so much

Channel: Nico Albanese

Views: 6,392

Keywords:

Id: 33jlErS3Wxg

Length: 5min 24sec (324 seconds)

Published: Tue Feb 06 2024