Full Stack Linktree Clone in 8 minutes! Next.js 14, Kirimase, Prisma, Stripe, Shadcn UI, Lucia

today I've got a bit of a different demo for you kiras has launched quite a few cool new features in the last few weeks and I thought it would be fun to recreate an old demo to show you some of the improvements but also how much faster and and more fun I think it is so we're going to take this uh link tree clone at the time I'd said i' I'd built it in in 10 minutes it actually turned out to be a bit more like 15 um I think we can do it in 10 minutes now and I think we can make it look a lot cooler um so I'm actually going to show you what the finished product is uh right as we get into it you can see we have a landing page um uh we are going to create an account uh NCO test 123 sign up I make a new page my page is going to be called kiras uh we're going to have uh keramas resources and this slug is going to be called keramas page uh I'm going to head into here uh I'm going to create my first link first link test.com we're going to create a second link uh second link test.com and uh we are going to have to subscribe to share this page let's add an email uh test email.com uh test person uh we are going to go to billing uh we are going to subscribe head off to stripe put in our details go back to our page head into the edit make the page public you'll see now open the uh new page in a new browser and there that's what we're going to build so let's see how fast we can do this I'm going to close this uh I am going to head back to local 3000 let's quit out of here exit this brow exit this terminal sorry exit this jump out of this directory and create a new Next Step we're going to call this clone link tree we're going to say yes to everything here using App router tail and CSS um we are going to jump into that new directory and we're going to run kiras say in it we're going to use shaten UI um we are going to actually you know I'm going to use um actually going to use the latest version available to everyone on pmpm uh so sh K sheni we're going to use Prisma with equal light Luchia for authentication and stripe as an additional package I'm also going to be doing this in a bit more of a speedrun format to see how fast we can do this so I won't be talking through everything um but I will be mentioning what I'm working on uh so let's run our first generate command uh we're going to generate uh Pages as our first uh model um it's going to have a name uh description description yes another field it's going to be slug and then uh public uh no other fields yes uh page links uh title and then URL no other fields no no yes great no cool uh I'm going to jump into the project add uh my stripe Keys stripe great and then I'm going to make one change to the schema we're going to go and make this slug unique great we're going to run Bund DB generate Bund DB migrate sorry that's we actually want to just run Bund DB push not BB migrate and then let's run B Dev head to the Local Host 3000 we've got our landing page already done uh let's go to sign in we are going to create a new account call this test test one two three great go to Pages first thing I want to do is open a new editor so we can do both at the same time I'm going to go to the page form and I'm going to find the public um the public if you see the public field and I'm going to uh comment it out for the time being because I don't want the user to be able to make the page public without paying uh so we're going to make our first thing here M say resources resources that are helpful and then the slug is going to be called k um you'll see right off the bat as well something really cool is that because we have a unique uh we have error handling already sorted uh because this is a unique feel if I try and create this there'll be a DB constraint error and it won't get created right away um so let's create our sharable page now we're going to go and create a new group called shared uh share page. TSX this is going to be export default function shared page it's going to take in pams which are typed as pams slug I forgot to add that which I'm going to do quickly um return main hello uh we are going to add uh slug like that and we're going to pop the page in there I really can't spell today perfect um so now if I were to uh pre jss and Par should give us out Local Host 3000 shareir should give us a SL great um so now we're going to head to the queries for the page I'm going to head down here um and I'm going to copy this whole function and we're just going to update it um we're going to say get by slug we're going to take in the slug actually yeah we'll change that to slug IDE is Slug I don't have a ton of time so I'm not going to update all of this we don't need to take in the session um so that's great and then we're going to say where slug is equal to page ID here so that should be enough that we can now pull it in here if we make the function asynchronous um const equals a wait get Pages by slug I get Page by slug with page link give it the pam. ID um oh sorry not Pam it's pam. slug pull out the page page pull out the page links we're going to say if um if page equals null then not found um if page dopu equals false then we're going to return main this page is not public um great so this page is not public great we're already finding it um I'm going to head to v0 um like last time I already scaffolded up a uh a link Tre page we're going to highlight it here copy it in like that like so I'm going to head down and all these links we're going to remove because we're just going to map over the um over the page links so we're going to import this from the right place this time home icon great uh let's take this entire component wrap page links. map L and then in here great we're going to go back we're going to add a key of l. ID um this is going to be l. URL again if I can spell um and then this is going to be l. tile cool uh we're going to make this joho is going to be page. name and this is going to be page. description awesome okay so this page should be done now although we can't see it because this page isn't public um I have uh let's add very quickly two page links first page test.com uh second page test.com wow those son toasts are really nice you can see it's public we have no way to change it um so I have cheated in one way I've prepared one component in advance and that was because I ran out of vzero credits and so um I couldn't I couldn't generate it uh it's going to be called toggle public and it's going to do exactly that it's a very simple component and I actually copied it from Shad nuis example components cards it's just this component here but everything up to the input and um uh so toggle public component it's really simple it's 70 lines of code uh we'll see it in a second if we go to the page ID we're going to head here we're going to go down uh and then we're going to insert it right above the page links we're going to call this toggle well it is going to import as toggle public see what it accepts it takes in a page P which is our page and then it takes in an is subscribed prop which is a Boolean um let's pull in K already generated some really helpful stripe uh related uh function to return is subscribed is canceled all this kind of thing everything related to the uh subscription so let's give it we need to wrap this in a Boolean or um cast it to a Boolean uh is subscribed great uh so if we go back to the app we should see now look great uh this is the component very simple and then there's an overlay you need to subscribe to show this page uh let's open up the um stripe terminal CLI sorry this is automatically added to your um your package Json so let's uh click subscribe let's add email to subscribe so we're going to say test test.com test and now we're going to go to billing fill in our credentials great that's all set up we go back to our res ources um we are going to watch this here uh make public perfect and then the only other thing we need to do is we need to head back to this toggle public and we just need to change the ID to be uh page. slug we can now copy this to our clipboard we can open up an incognito window open that up and there we've got our page so really as simple as that everything very straightforward the only thing like I said I kind of cheated on was this component here but it really is a super simple component it's a card um if subscribed is true um or is false then it has it prints out an overlay on top otherwise it um it has a button that we saw if we just say let's just make this equals false um and so you can see we have this button here um and when you click it very simple onclick Handler um uh which one sorry this this one I wanted to show a very simple onclick Handler that runs the update page action which is already generated for you this is just a simple server action that works right out of the box right as you would expect um using Zod validators for everything based on the schema that we have in in Prisma um and just all in all it just works it's it's really it's easy and fun to build with it even has um form validations built in without any extra librar so if we take this uh we're in the page schema right now if we were to add uh for the page name uh as Zod minimum length of four characters and we try and update the page to be less than four characters you can see like we can't save it we get errors in line um it really is you think it and and you think of how you would go about doing it and typically that is how you do it um it's got optimistic UI here so if we were to remove um or if we were to make any changes you can see uh testing we even on a on a slow connection let's go to network fast 3G um the you can see our validation is already there uh 1 2 3 um this also fails because we didn't meet the unique constraints um because they both had no slug test um but if I were to go back here and try and create new item uh you see that initially the the modal goes away so it's very applike uh but the item itself has a lowered opacity to give you the impression that uh it hasn't been saved yet um it also has for everyone that loves it let's stop the um the slower con slowed connection it's got light and dark mode across the entire application um and what's cool as well is that uh you can use uh shaan's themes like right out of the box too so if we were to go to themes come up with let's say we want everything to be red copy this add it to the global CSS um head down to here update those colors head back to the application we should have we got a four four right now but we should have everything that looks kind of as you would expect it to um themed up really fairly straightforward but um again really quick to get up and going and to change things as you would as you would like them and then um with route groups as well you get um really this was something we launched yesterday you get really straightforward permissions across the entire application so like if I try to go to Local Host 3000 Pages I'm going to get thrown right to the signin page see as well we've already themed up the sign in page easy as that um so yeah this is this is where k m is at at the moment I think it's super powerful uh I'm really enjoying building with it and got some cool new features coming in the next few few days weeks uh so yeah please play have a play around with it and let me know what you build because I'd love to see thanks

Channel: Nico Albanese

Views: 7,438

Keywords:

Id: C_WspTAxOVA

Length: 13min 26sec (806 seconds)

Published: Fri Feb 09 2024