Learn Next.js 13 With This One Project

next.js 13.4 just launched and it comes with massive changes to how you deal with mutations between the server and the client in this video I'm going to show you how to build a really simple to-do list application that's going to demonstrate all of these changes so you can stay ahead of the curve with all the changes to react and to next.js [Music] welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your application sooner and as you can see on the right hand side here I have the working version of our application we can toggle all these different things and the really great thing is all of this is using the brand new features from nexjs 13.4 we can create a new to do whatever we want and you can see it'll show up right here and all this data is being persisted in a database on the back end so in order to get started with this project we need to create a new next application to do that we can run the command npx create next app I want to create this in the current folder so I'm going to put a period here also it's really good idea to make sure you put at latest at the end here and it's going to make sure you're using the brand newest version of nexjs as you can see it's asking me to install this version and now we have to go through the steps for example do you want to use typescript I'm going to say yes you want to use eslint I'll say yes for this same way tailwind and same with using the source directory and finally it's asking me if I want to use the app router which again I'm going to use yes and essentially I'm just going to leave everything completely default I'm not changing anything at all that's going going to go ahead and download everything that we need and it's going to put everything inside of here and the next step that we can do after that is actually get set up with Prisma so to do that I'll just come over here to a brand new terminal while that's running so we can install all of our dependencies for president I can say npmi and then I can just type in Prisma since that's what I want to install and we're going to save this as a Dev dependency now Prisma is what we're going to be using for our database in this application It's relatively simple and I really love Prisma but if you want a full crash course on how to use Prisma I actually have a video I've done on that already I'll link it in the cards and the description for you but with that done now what we need to do is initialize Prisma so we can say npx prismo and we want to call the init function and in our case we're going to be using SQL Lite because that's the easiest to get set up with so we'll say data source provider is going to be SQL Lite just like that that is going to get up and everything is going to generate all our files for us we can essentially delete that we can come in here now you can see we have this Prisma schema file which is SQL Lite and our database URL is inside this.env file here now by default next does not ignore these dot EnV files so what I would recommend you doing is going in your git ignore and just add that dot EMV file right here and it's going to make sure that your EnV file does not get committed to any type of git repository that you have now with that done we can actually go ahead and work on our actual schema and all we want to do is add in a model here for dealing with our to-do's so we'll say model to do this is where we're going to put all of our information for our to do such as ID and so on now our to-do model here is going to be very simple we're going to have an ID here so we'll say add ID and this is going to default using uuid so we'll just say uuid just like that then what we're going to do is we're going to give it a title which is going to be a string as well and then finally a complete property to determine if it's complete or not and this will be a Boolean now generally when I'm working with Prisma I also like to add in a created ad and an updated but these are going to be date times and the default for the created that is just going to be the current timestamp and then for our updated ad you can make this a date time as well and we can use the fancy at updated at symbol and this will just update this field every single time we make a change to our to do we're not using these inside the project but I generally like to include these because they're really useful for when you want to do like analytics or login for your application now what we can do from there is just migrate this into our database to do this in Prisma we can type in npx Prisma migrate Dev and then we just want to give it a name we'll call this init since we're going to be initializing this and this migrate Dev is just saying do a migration in our Dev environment here as you can see that's created this migration file right here as well as some DB files right here now we obviously don't want to check in these DB files because they're only for development so we're going to put those in our git ignore as well so if you just open up that git ignore we can come in here and we can say anything that is dev.db star we just want to completely ignore so that's going to ignore those files there for us which is great now the final Prisma related thing we need to do is be able to use our database inside of our project so inside the source folder here I'm going to create a brand new file I'm going to call it db.ts because we're working inside of typescript and if here I'm going to import that Prisma client so I'll say import Prisma client that is coming from at Prisma slash client I'm gonna put that inside of quotes there there we go now the main reason that I'm putting this inside is a separate file is because the way next.js works in development mode it likes to do something called hot reloading where it's essentially going to only send down the files that need to be changed and it kind of reruns things without actually restarting your entire server to make things faster for you but it has a bit of a problem with Prisma because what happens is it tries to constantly create new connections to your Prisma client so if we come over to the documentation for Prisma they actually have an article specifically for how to solve this problem you just need to include code like this so I'm going to copy this over so we can see what this looks like as you can see we're importing our client at the top and then all we're doing is we're taking the global object here and we're just adding in our Prisma client to this then what we're doing down here is we're creating a variable called Prisma and we're either setting it to that variable that we already created that Global variable or we're creating a brand new Prisma client and then finally down here we're just saying if we're not in production then get Prisma from that Global variable so essentially what this does is it instantiates a Singleton if you're not familiar with the syntax of Singletons I have a full video covered I'll link your cards in the description for you but essentially no matter how many times I try to access this Prisma variable it's only ever going to create one single client which is great for when we have that hot module reloading inside of development it just prevents us from I'm having tons of clients being spun up when we don't actually want that so once we have that code done that's everything we need to do for Prisma and our database and whatever database or backend you're using it doesn't matter at all I just like using Prisma which is why I used it in this project so the next thing we can do is just start our application let me just say npm run Dev and that's going to start up our application in the dev environment and it's going to give us a bunch of boilerplate code so if we just pull this over here I'll close out of the actual working version of it once it loads up you're going to see it's just going to give us a bunch of you know information about next.js and so on we don't really need any of this information so in our CSS I want to get rid of everything except for the Tailwind stuff at the top because that is what I care about inside of this page file here I'm just going to get rid of every single thing inside here so I'm just going to replace all this we're going to export default home just like that make sure this is a function and for now I'll just return an H1 that says hi there we go so as you can see it just says the text hi and now inside of our layout here we can also change around quite a bit of this as well for example our title can be like to do app we don't really need any description on this inside here we're just going to add a few different classes to our body so that we can actually use some Tailwind stuff to make it look a little bit better because we're going to kind of have like a dark mode theme going on for our site so I'm going to keep around this inter class name that's just essentially a font you can get from next next has all the Google fonts built in so we can just get that font like this that's fine we're going to keep that as is all I want to do is add some classes for some dark backgrounds so we're going to say background slate 800. just by doing that you're going to notice we get this dark background I'm going to change our text to slate 100 so essentially a white color add the container class and then I'm just going to add some Auto margin on the right and left and padding of four on all the sides and that's just going to give us a little bit of space and also if our screen size is very large you can see that it actually kind of puts this text in the middle as opposed to being pushed all the way up against the edge on larger screen sizes so now with that done we can go ahead and actually go to this page here so in xjs13 the way everything works is inside of your application the way routing works is based on folders so if I wanted to add a new route to like a slash new page I would create a new folder called new and then inside of that I would create a new file and this one would be called page.tsx and that would be how I would route this file essentially everything that I put in this page.tsx file is going to be what routes to the Slash new route in our case we don't have anything at Slash new yet all we have is this page file inside of our app which is essentially our root of our application that's why whatever I put in here renders out when I'm at that slash route if we go ahead and we do that Slash new you're going notice we get a 404 but again if I create that file page.tsx I'm going to put that inside the new folder and here I'm just going to return a simple function and we're just going to say actually not return export default and inside of here I'll just return an H1 that says new now you can see if I just refresh my page we're on that new page by going to slash new so that's how the routing Works inside of next 13 is it all based on folders and inside there you put a page.tsx you can almost think of that as like an index file essentially so for now we're not going to do anything with this new page we'll just leave it as is but we can go back into our home page because I want to add essentially the shell of our application all the different styles we're going to have we're going to have essentially two different sections we're gonna have a header section which is going to contain like our you know H1 links and stuff like that we're going to have a UL that actually lists out all of our different to-do's so inside of our header here we're going to have an H1 this H1 is just going to say to Do's I'm going to really simply add a class name on here just to make the font a little bigger so we'll say text to XL if we go back to that root page you can see we have that large text that says to Do's I'm also going to add a link inside of here and next has a built-in link component it works just like an a tag we put an href on here for example this is going to be for a new link but the text new now we have a link right here it says new there's no Styles applied to it because we're using tailwind and we haven't added any Styles but we click that it brings us to the new page and all of that routing and stuff happens on the client so when I click new it doesn't actually do a full page refresh or it doesn't do like all of that all it does is it does all the client routing just like you're used to in a normal react application so that's all great now we have everything we need inside of our header I just want to add some classes so here I want these to line up side by side so I'll use flex I'm going to actually justify them with space between them to put them as far away from each other as possible and add some margin on the bottom also I'm going to Center everything so I'll say items Center just to make sure our button right here for our link is centered with our text now for our link I'm actually going to add a lot of styles here to make this look good and I'm actually you're just going to copy these over and I'll explain what they are so you don't have to watch me type them all out by hand as you can see we have a lot of styles mostly related to The Border as you can see we're adding a border which is this light gray color we're also making the text the same color adding a little bit of padding we're rounding that border and then finally whenever we hover or focus on this element I'm giving a darker background color so as you can see here it kind of makes it look a little bit lighter because our background is really dark but essentially I'm just changing that background color so we can see if we're hovering or focusing on that button and finally I just removed the outline pretty straightforward stuff so essentially I made our link look like a button if I click on that you can see it still brings me to the new page now for our list of to-do's I'm going to add just one single class I'm going to put a little padding on the left just to give it some space then here's where we need to Loop through all of our to-do's so we would say something like to dot map for each one of the to Do's we want to render out something but how do we get these to Do's normally inside of a react application you would use something like use Query or you would make a fetch request instead of a use effect and you would get your to-do's that way but with server components inside of next js3 teen we don't need to do any of that as long as you're using the app router which we already configured when we actually did our initialization as you can see we're inside this app folder as long as we have that we have the ability to call server code inside of our components and it's going to run all this on the server and then just send down the data to the client which the really great thing about this is I can turn this into an async function then right here I can just make a call to anywhere that I want for example I can call our database by saying Prisma I need to make sure I import Prisma so there we go from that DB file I can just get the to-do's that we have so I can say to do dot find many that's going to find all of my different to-do's I can just say const to Do's is equal to that that's going to get all the to-do's from my database and it's going to put them right into that variable which is great then here I can use these to Do's to do whatever I want for example for now let's just do an l i which says to do dot title really straightforward stuff and then I just need to make sure here I add in a key so let's say the key is the to do.id and now if I save you'll notice something interesting our right side doesn't look any different because there's no to-do's in our database you'll notice on the left we actually have a log that says we queried our database so we made a query to our database from our server because all the logs over here are from our server but we wrote Our code inside of a react component this is the really cool thing about react server components as long as your code doesn't do anything on the client like you don't have any use effects use state or like on change event listeners it's going to run all of your code on the server then it's going to send that down to the which means you can do things like call your database from this component and none of that actual server database code is going to get to the client so all your code is still secure on the server but all the data from that for example our to-do array here is going to make its way down to the actual client which is really really great now to see what this looks like I'm essentially going to fake adding a to do to our database so just all the way up here I'm just going to say Prisma dot to do I want to just add a new to do so we're just going to say create this new to do I think we have to pass in some data here we go it's going to have a title which is just going to be test and we're going to say complete is false just like that that should be all we need to do if we give that a quick save here that should hopefully create a set to do I'm going to comment that out for now because now if I refresh our page we should have it to do in our database it doesn't look like it's actually showing up so let me just bring this down in here so we'll create it to do just to make sure this actually works there we go that it should create our to do now if we save and refresh you can see we have our to-do showing up right here so I can get rid of that code so now you can actually see what's happening because if I inspect my page I actually view the source and I do a line wrap here I'm going to scroll all the way down to the bottom ish see here where's our code at there it is and you can see inside of here it's a little bit hard to read but you see we have our to-do's right here and then we have our actual UL right here and inside this UL we have an Li with the text of test which means what happens is our server generated all the HTML and it sent it down to our client so it didn't have to do anything at all on the client the client just got essentially raw HTML and that's all it has to deal with which means it's really great because we don't have to worry about loading state farfetch or errors or any of that it's all handled for us by next.js now generally when I'm doing this kind of code I like to just break this out into a separate function so I'll say like function git to do's and this function here is just going to return Calling that Prisma whatever this code is right here for getting our to-do's so we'll just copy that over paste that down then here we'll call that get to Do's function I find that this just makes your code a little bit easier to read especially because you can take this git to do function put it anywhere else that you want inside your project put it inside of some type of folder and then you can have that same function be used in your component you can have it be used in other components you can have it be used in your API you can use it anywhere that you want you can even use it in other projects if for example you want to it doesn't matter at all this code is entirely different it's just some type of asynchronous code that gives you back data that you can use inside of your actual client so let's go ahead and make these to do items look a little bit better so here instead of having an Li I'm going to create a component called to do item do the same thing with our key that is just to do.id and then we're just going to pass along all of our different to do information into here just like that now we can create that component and generally to do that inside of our folder here we can just come in our source we can add a brand new folder called components inside of here we can just create a file called to do item.tsx here we go export function to do item this is going to take in quite a different few different properties we need our ID we need our title and we need our complete property and we'll call those to do item props there we go and we can just Define that type up here to do item props ID is a string our title is a string and then finally our complete is a Boolean there we go so that's all mapped up perfectly make sure that's actually a Boolean there we go and now here I can just return the code that we need to render this we know that this is going to be an Li so I'm just going to come here with an Li I want to add quite a few classes to this I like to use flexbox for a lot of things so we'll add in a flex here with a gap of one and then we'll Center our items that's because we want the actual checkbox on the left and we're going to have our label on the right speaking of let's put down our input here we'll make this self-closing we're also going to add an a label and this label is going to be for our actual input so the html4 is going to be equal to our ID and then our input we're going to have an ID that's equal to our ID that way they're linked to each other which is really important for accessibility also going to make sure that this is a check box and I'm going to come in here and add a few classes to this so we'll say class name now the first class I want to give this is a cursor of pointer just so it is a little bit easier to tell that you can click on this the next class is peer and this essentially allows me to actually add different styles to my label based on if my input is checked or not because now I can come down to my input I can add in some class names I can say if my peer is checked just like this then what I want to do is I want to cross this out by using the line through class let's just add in our label which is to do dot title actually it's just title sorry there we go let's just quickly save this and actually see what this looks like so if I import to do item here there we go give this quick save you can now see when I have this checked you can see it gives me a line through this which is really important so based on if it's checked or not I can have this line through my label which is really great also on my label here I want to add the same cursor pointer because obviously if I click on this I want it to be able to toggle so if I have a cursor pointer it's just a little bit more obvious then finally another thing I want to do if it's checked I want to essentially change my text to a little bit more muted color so we'll use slate 500 so now if it's checked you can see it's a little bit harder to read a little bit more discrete so you can kind of tell that this is a checked off thing now for now I'm not going to be handling this checked property at all I'm going to handle that a little bit because it's a little bit more advanced of a use case for Server components and actions and instead I'm going to focus on the new to do section because it's a little bit simpler and easier to understand and then we'll come back to how you handle this checked property because it's a little bit more advanced and it builds on what we're going to learn in this new section here so in this page to create a new section I'm just going to come over to this new page here I'm going to start working on my code in here now the very first thing I'm going to do inside of here add in a fragment I'm going to add in a header and the header is going to look very similar to what we have here so I'm just going to copy this header over and I'm just going to get rid of this link because we're not going to have any link and instead this is going to say new as you can see everything looks very similar between our new and our to-do's we just don't have that extra link then what I want to do is I want to add in a form the really great thing about server actions inside of next.js13 is they're built essentially on top of the normal browser Primitives like a form this is really nice because if for some reason the JavaScript is disabled on the page everything will still work it won't have quite as many of the nice bells and whistles built in but it's still going to work which is really great and also it's just built on things that we're already used to with forms so you don't have to learn like a new way of doing things which I really love and inside the form we essentially just need one single input new import here type is going to be text and the name for this is going to be title there we go and the name is actually really important because we're going to use that inside of our server action which we'll get to in just a little bit now for some class names I'm just going to copy these over again because it's not super important what the actual styling looks like on this we'll just paste those in right there close off my input give it a quick save and you can see my have my input right there essentially all I did is make it so that the border is a little bit lighter when you click on it and that has a gray border really pretty straightforward stuff also for our Forum I'm going to add a few classes into here as well these classes are just going to be to lay things out so we're going to use flexbox with a gap of two I want to use a column layout there we go flex the column perfect so now what I can do is I can create a div and this div is going to house our buttons so we're going to have a back button which is going to be cancel and then we're going to have a submit button so for our back button this is actually going to be a link so we're going to use the next link it's just going to go back so we'll use that simple href there and we'll just say cancel inside of that and then we're going to have a button for the other one just like this I want to make sure the type is submit because this is going to be for submitting our form and then of course we need to add a bunch of class names to both of our different links and buttons now the nice thing is is I essentially want to use the same class names that I did over here so I'll just copy this over into the page here I'm going to do the exact same thing for our link I essentially want it to look just like a button so I'll copy the exact same classes over to here and for our button I'm just going to say create there we go now you can see we have our two buttons and if on our div we just come in here and we change this over to use flexbox with a gap of one and if we just justify everything to the right hand side you can now see that we have those two buttons cancel is going to bring us back this create button is going to create a new form so just make sure I save and everything's going to great great if I click create it's going to essentially submit our form right now it's just submitting our form and it's not doing anything else because we haven't hooked this up to any type of server action so the way a server action works is you create a function so in our case we're going to create a function up here and you can call this function anything you want we're just going to call this one create to do because it's going to create a to do for us this is going to be an asynchronous function which is really important and everything that gets past this is going to be some type of data and this data is of the form data property so essentially it just takes the normal JavaScript form data that you're used to using with a form and it's going to pass that up to whatever this function is and this function to run on the server you just need to add the used server inside of a string at the top of that function and that's essentially saying that this function right here is server code and it's never going to run on the client it only ever runs on the server to test that I'll just console.log inside of here the text of hi and this should come from our server and actually get this create to do the work we first need to add the experimental server actions option that's because right now this is experimental so if we go into our config for next JS you can see here that we have a section for experimental we need to add so we can say experimental and inside of here I can say server actions and just set that to true that's just saying we are able to use server actions right now they're experimental which is why I had to add that and then just rerun your server whenever you change that file give it a quick refresh and hopefully that'll get rid of that error which is great we're not actually using this server action anywhere at all to use this we just go down to our form and where you would normally put an action of like a URL like Slash new in our case we just put that function which is create to do just like that now what happens is when we submit our form it's going to call this create to do function on our server which is the key here so if I click create you can see it logged out high in my console on the server and inside of my actual client if we check the console here you'll notice nothing gets logged out in the console here it all gets put over on our actual server and the other great thing is if I check the network tab here I go to just simple fetch request and I click create notice all this does is actually just send along a fetch request that sends along whatever data we have so here we have a title that is empty and that's what's being passed along to this it's super straightforward it's just making a fetch request for you but it's handling all the complexities of loading and errors and all that for you which is really really nice now inside of here we want to actually get our data for our title so we can just come in here and we can say cons title is equal to we want to get that from our form data what is a git function that you can use and all you need to do is pass it the name of the input you want to get now if we look down here for our input we give it a name of title so we just pass along the string title here and then we want to get the value of that so we pass along the value of function this question mark is here just because this could return to us undefined so it's just making sure it doesn't return undefined now you can see our title has a type right here which is going to be string object or undefined what we need to do is we just need to make sure we check to see if it is a string so if the type of our oops type of there we go our title is not equal to string well then we want to return here just like that we're going to return some type of error so I'll just put this inside of here and also I want to make sure we check to see if our title is of some length so we can start our title length is equal to zero we're also going to return and here I'll just throw an error status we'll say throw a new error invalid title there we go now if we have some type of error it's just going to throw that for us if for some reason our title doesn't exist or we didn't give it actual value then what we can do is we can just come down here and we can use Prisma to create that to do so we can say to do dot create we want to create a brand new to do which is going to have some data where the title is going to be equal to the title that we've passed in then complete is going to be equal to false really straightforward stuff there we can get rid of that console because we don't need it now what's happening is whenever we submit this form it's calling this function right here for us and what we can do afterwards is just redirect back to our home page we have the redirect function that we can get from next.js and this Auto input is incorrect here we actually need to change this to the slash navigation right here and redirect just redirects us to a URL we'll just redirect back to our home page so now we just created to do and I click create you're going to see what happens is it runs all these queries on my client or on my server I'm sorry to create a brand new to do you can see we have an insert right here then it's getting all of our to-do's redirecting us back to this page and you can see we now have both those to do showing up and we'll just do this again we'll say new to do click on Create and boom right there we have a brand new to do the great thing is all this code for these asynchronous functions they're all being run on the server so our client is much simpler because right now we don't have any you know Logic on our client at all it's just saying render out this code everything gets sent down from the server so it makes it a lot easier to write clean client code because you don't have to worry about loading States and all that other really annoying stuff and again to rehash these server actions really the key here is you put this use server string at the top that's just saying this is going to be a server function that's going to be an action make sure it's asynchronous because you obviously need to do things on your server like await your database or await some type of fetch request and then you can optionally redirect or do whatever else you need to you can even like return values from here whatever you need to do you can do inside of here usually it's going to be some type of redirect now we have the ability to create these to Do's but we don't have the ability to toggle this complete status because you can say I check them all as complete refresh and it doesn't persist any of that data so if we go back into our to-do item we essentially need to set up an on change for our input to figure out what happens when it changes so first we're going to set our default checked property to this complete property so now at least if our to-do is already checked we can make sure that it's going to be set properly also you notice we're getting a bit of an error that's because this should be a lowercase Boolean here instead of capitalize that's just my bad there we go that is properly set now we can set up an on change and this on change event I essentially want to toggle R to do so I'm going to actually pass in a function for doing that called toggle to do we're going to pass an ID as well as what State the to-do is in in our case is it a check to do or not check to do this is going to come in here from our props I'll go to do and all the way up here we're going to say toggle to do this is going to be a simple function that is going to take in a string or an ID and it's going to take in a complete which is a Boolean and it's going to return void I really don't care whatever the return type is so there we go now we just need to pass in that toggle to do so all the way back on our page you can see here we can pass in toggle to do to be equal to a toggle to do function let's just make sure I spell that properly there we go so essentially inside of our toggle to do function what we want to do is we want to run code on our server to update our actual code for our to do so update it inside of our database and we can just do that we can create a function and this is going to be a server function so we can say function make sure that it's asynchronous we'll say toggle to do we're not going to worry about what would pass into it just yet and inside of here we're just going to do some code but first I'm going to put use server because this is going to be a server function now I know here I have an ID which is a string and a complete property which is a Boolean just like that now you can see all of our errors have gone away we don't have any typescript errors at all and the great thing is is this toggle to do function is going to run on our server which is crazy cool now we are getting one error that's essentially saying that we're trying to use event handlers and we need to make sure this is actually a client component to do that so inside of here right now by default everything that happens inside this component is going to be a server component but we have an on change hooked up which means we need to have some type of interaction on our client we need to convert this to a client component so at the very top of your file just put use client that's just going to say hey this is a client-side rendered component so don't render any of this on the server all this interaction stuff is going to happen on the client and now what's going to happen if I go back to my main page here we just come in here we'll just say console.log I want to put the ID and I'm going to put the complete properties we're just logging out the arguments we pass here I try to toggle it to do you're going to notice down here it's actually passing that information along it's passing the ID as well as the state true or false based on if it is actually toggled or not that is so cool I'm able to hook up my client and my server so easily and pass this function around as if it's just a normal function that just does normal stuff the only key to this is that if you're passing around your code like this you can't do any redirects or anything like that like if I tried to do a redirect in here to go to like Slash new that's going to break completely and not work you can see we're getting an error popping up that's just saying hey you can't do a redirect because if you want to just call a function like this you can see here we're just calling this function just like a normal function if you want to do that you just can't do any redirects at all inside of your server action right here now in our case we don't need to do any types of redirects instead all we need to do is just take our Prisma database and update that to do so we can say to do dot update we want to get where our ID is equal to that ID then I want to update the data by passing in the complete property just like that so we're going to update our complete status to this based on the ID and now let's just say we toggle these three different things and untoggle this one and refresh you can see all of our data has persisted because every time I click on the toggle you'll notice down here on the left you'll see that this will actually call some type of update function which is really really great so it's super easy to hook up your client and your server using these different server actions and server components now if these cool next JS features interest you I highly recommend checking out my react simplified course I'll link it down in the description for you I'm currently working on adding all this next.js content to that course so if you want to be notified as soon as I'm done with that and it's ready to purchase just go down to the link down below and enter your email into the box and I'll give you an email as soon as everything is ready and if you're from the future and watching this video it may already be up to purchase so just go check it out and see if it's already available with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 356,983

Keywords: webdevsimplified, react.js, next.js, next.js 13, next.js project, next.js react.js, nextjs, next js, nextjs 13, next 13, next js 13, next server actions, next server components

Id: NgayZAuTgwM

Length: 29min 42sec (1782 seconds)

Published: Tue May 23 2023