🔴 Let’s build TRELLO 2.0 with REACT! (Next.js 13.4, GPT-4, Drag & Drop, Zustand, Appwrite Cloud, TS)

[Music] it's so good to be back with a Trello 2.0 build I absolutely am excited for this one it's something unique we've never done it on the channel we're doing drag and drop today new tech Cutting Edge stuff you know how your boy does it I'm not gonna disappear for a while and then come back with some old Tech we're going in hard today we've got the brand new latest next year's version we've got some new Cloud technology powering today's build we've got this stand for the absolutely simplest best State Management I've ever used honestly it's amazing roughly work on kicking uh let me know what you're watching from right now I'm so excited to be back and guys I'm not gonna stop these live streams every single week your boy is going to be dropping fire so make sure you like like the video right now subscribe if you haven't already already at 250 likes that's how we do it check out the Trello 2.0 a icon when lgbt4 get ready guys Papa found this how we do it boom 2.0 Trello look at this thing it's so flipping beautiful I love it the design is awesome let's go ahead and drag and drop oh my goodness look at that oh hang on What's That GPT is summarizing our tasks that's a that's awesome right and then we've even got a really nice model look at this and guys this is using headless UI so if you haven't already used head this wire this is how you do it what is up we've got some OG's in the house look guys let's go ahead and add a new to do let's say I want to crush this stream all right and then what you can even do is you can tap so now I'm literally tabbing through using the keys to go up and down and I can go undone I can upload a photo so I'm going to hide so that way you know I don't show anything that I don't shouldn't show then we get the nice little preview here you see right now we've got a nice little preview we go ahead and add the task that's going to go ahead and upload it inside of the upright cloud and then it's going to go ahead and pop in our done page so depending on which one you clicked on it will go ahead and pre-set that for us so you've already got that working look at that I want to cross this stream and you can go ahead and move it around this is persistent this is all on the database and we've even got such included so if I go ahead and type in podcast you can see we've gone ahead and released the podcast right you can go ahead and it's really fast really nice stuff welcome to the stream you can see how it filters everything out you're going to learn all of this today and yes you know how your boy does it it is responsive I wouldn't make something that's not responsive there you go look at that so this thing it works on a phone works on anything you can imagine and we've also got some nice cool tricks today I like how you can get this gradient effect in the background so so much stuff happening right now we have over 300 people let's go it's been a minute I'm hyped up wow this is crazy so somebody goes Sonny is insanely crazy let's go ahead and give a second to read all of the comments let's see we've got Egypt France Sweden India Czech Republic Taiwan Australia Estonia Greece that is what I'm talking about UK Canada America that's what I'm saying guys everybody is in the house that's what I'm saying there's a Spain Serbia I'll shout you out India Ukraine Kenya that's what I'm talking about guys good to see everyone here look at that what this is what I missed this is what I actually miss these bills are incredible it's because of the energy the buffer Farm no tutorial is like this it's just so oh man crazy let's go ahead and break down this build in terms of oh my God you guys are humble in me right now Jay look at that chat popping off wow if you guys want to see more videos you guys are making me like what I can't even express how crazy that is the chat is popping off wow I'll never get used to that I'll never get used to that if you're watching the replay turn the channel right now and just see what's happening that is crazy holy crap right guys let's go ahead and break down this build so we can get started for you all today this build is actually powered by the guys over at upright Cloud so this entire thing is actually super simple behind the scenes and it's actually thanks to the guys over upright so we're going to be building an incredibly fast scalable solution today so that way you can go ahead build it for yourself do it the first link in the description is how you can get access but they've got everything from databases authentication storage functions they're basically Cloud functions security and privacy real-time database functionality all of the good stuff and they've got so many examples here so you guys can see they've actually released their beta which is perfectly working right now so you're gonna see today how we can use it how we can integrate it and honestly a lot of this code is honestly it's like one line clicks so you can basically do a 1 online command to get something into the database we always like online stuff right so that's why we're going to be using this today it's definitely something that I would recommend and I definitely suggest that you follow along today get set up give it a play with and because there's so many features that I haven't even covered in this so if you want to see more videos let me know after the video is finished in the comment section below and I'll build whatever you guys want to build and keep on going so we're going to break down this build so you guys can get into we can get into things right now somebody says is there authentication in this build I've kept it down to the main functionality so also by the way I forgot to mention you can actually take the entire columns and look how they see through oh look at that oh my goodness and even look at how it turns green oh I just I love it it's so satisfying it's so so satisfying right now I just went a bit crazy that's why I probably got an error I think I I I serious use too many things around all right so let's go ahead and break this stream down so first things first we have the react oh okay one minute sorry let me turn music down a little bit all right so first thing to us we have next js13 so we got next JS 13.4 now I know there's so many changes lately in next year s13 uh 0.3.4 all of these different releases changes there is even something called server actions now which is damn powerful and I'm actually going to create a future video on that so don't worry if you're wondering is he going to use that today I'm not actually using server actions but I will create a future video on it but in Nexus 13.4 we are going to be using the brand new app API directory to create some endpoints so you've got some fun stuff to look forward to we then have gpt4 in the mix as well we actually have a few things today so we've got Tailwind CSS now Tailwind TSS I highly recommend you go ahead and get this sort of you know you get practicing with this that's how you're going to be able to build awesome responsive websites without the headache right honestly without the headache of media queries and all this crap but I hate this so in that case someone says are you wearing sun cream honestly I am because it's really hot so so I am trying my best to protect myself we've got headless UI now if you haven't used headless UI I need to turn off grammarly right now I'm live and it's popping up everywhere Jay help me out with that afterwards so in this case we're also going to be doing typescript so we got typescript in the mix as well so we're going to be building robust code that's going to be you know less error prone so somebody I'm answering your questions as it comes in Alfonso says typescript yep I've got you covered with typescript we've got some search sort of functionality so I'm going to show you how to integrate something like a search field and um we even have oh yeah and I've not actually done this in any other build so far we're going to be talking about the map object inside of JavaScript so if you've never used something like a map object I'm going to be showing you something like basically a map object today so I'm going to break it down we're actually going to do it uh in a really sort of cool use case and what I did here was you can call it over engineering I really don't care I'm trying to teach you a lot of different principles in these videos but I want you to come out of this knowing what maps are and how to use them and why they're a bit more efficient sometimes okay so we've got the map object inside and obviously we cannot forget that we have the drag and drop Library okay so it is called Beautiful DND so I'm just going to write DND and that stands for drag and drop now the crazy thing is the the library was actually um bought out by atlasan and atlasan actually bought trailer so thank you alexand for this video because that's literally who's uh who made it possible so that's really cool we've got the cloud powered by upright so we've got upright powering our cloud and that's where we're going to be using today so everything that we're doing on the back end is essentially powered by the outbreak cloud and that is pretty much well not of course I've missed out the biggest thing we have the stand so if you haven't heard of the stand this is essentially a very new bit of Technology now I am actually somebody who is quite skeptical when it comes to you know touching new bits of tech or like I will tend to use them but I will run them through coaching calls in my community zero to full stack hero the coaching Community you can definitely check it out second link in the description but I will go ahead and try these things out see if they're actually useful see what my students react to them see how useful they are in my production gigs and then I will actually go ahead and make a decision as to if I want to push you on YouTube now this stand is absolutely incredible it's simple it's so easy to understand and Implement and that is why I'm going to show you how to use it in today's build as a replacement for something like Redux so it is actually honestly it's gonna blow you away like I do so much cool stuff with this including handling the modal state so when you click on a modal it's going to handle that state so when we do this right here and bear in mind you can actually click out so I'm going to show you how to do all this even if I press Escape you can click out so all of this stuff's ready to happen right you've got all of this there's a stand then we're going to keep the board stay inside of that Global State as well and we've also got the user's interaction so notice how when I click on a to-do column it already highlights to do if I click on a in progress column it says in progress and if I click over here in the done column it's already highlighting done so you're going to learn loads of things like that right somebody says why'd I take off a bed I still got my bed what are you talking about craziness 300 likes already let's get that number up to a thousand you know how we do it right so a lot of people saying what do I use to write on the screen screen brush that's it right okay so let's go ahead and dive into today's build but before we do at any point if you get a little bit confused or you're not really short until you know if this is too advanced for you do not quit instead what I recommend is you check out all my free content and if you really enjoy the free content and how we do things then I highly recommend you check us out at zero to full stack hero this is our internal Community this is not only just a course it's a massive community of Papa Farm members you can go ahead to paparia.com the second link in the description click on enroll now and you'll literally head over to our page tons of stuff here right if you want to see what people are saying about our course check out the reviews tab on Papa react.com and you see for yourself right there's literally we've got so many members inside there and uh somebody because it looks like you get a haircut okay it distracted me but in this case yeah you can go ahead check it out we've got real members real people talking about the success and honestly it's just everything you need to go from absolute Basics to crushing it and Beyond right we've always got your back and this is a lifetime community so join it you'll be a lifetime member and that's how we work right we literally have a community where we help each other out we help each other level up we help each other do like professional gigs all that good stuff happens inside of that and if you want daily emails recording challenges then you can even feel free to check out the University of code on latest and greatest newsletter is at the top over on property.com basically coding challenges every day every single day to your inbox with the solution the following day so you can go ahead check it out yourself but all of that is available at poperia.com so make sure you check it out that is how we essentially support everything that we do so honestly it's a win-win we go ahead and help you out and yeah this is this is what we do and this is how I'm able to constantly go deep into topics that I can't always do on a stream right so I want you guys to learn the most so this is something I can help you out with you um let's see it's upright like super best opera is a full Suite of tools right so you've got everything from database to authentication to Cloud functions to yeah every everything you can imagine you you that you need in most production apps you pretty much have so in that case this is something I want you to go ahead and give out a try okay you guys are so funny okay we've got over 350 people watching this is incredible let's jump into the build if you're excited and if you're ready for this one make sure you hit the Subscribe button right now hit the like button and yeah we're gonna go ahead and Crush everything into today's build by the way that we are going to use is free so I want to make that very important everything that we are going to use in today's build that you see on the screen right now is free so make sure you do this make sure you go ahead and add this to your portfolio and keep this as a project because honestly it's a really nice project to have on your portfolio that's absolutely that's it we're going to get started with today's video so I'm gonna go ahead and show you what I like to use now I'm going to show you as if I was doing it from absolutely scratch so that way you can go ahead and follow along because I know a lot of the time some people are like how the hell did you just do that right so I'm going to show you literally as if I'm Googling it right so the first thing I like to do is use create next app okay so great next app oops iupp right to app and I like to do it with Owen simplewise right but this time we're actually going to use create next app the canary Edition right so I'm going to use a canary Edition you can use honestly quite like quite frankly you can use any one you want but this is how I would typically find it right so you can do I would say safe oh wow thank you so much I'm gonna turn the the volume come flying through my eyes we've got about with the 10 donation we also had a lovely donation from one of our other members it's gone now I couldn't see who it was but thank you so much earlier before we started it was kicking off so absolutely incredible stuff thank you so this is what we're gonna do MPX create next app at latest inside your terminal if MPX does not run then all you have to do is install node so Google node and you'll be able to install it okay so we're going to open up a terminal to get started let's go ahead and pull this up let's get into a flow State now okay so remember all of these videos are time stamped afterwards this is live right now but if don't worry if you're busy and you have to go in you want to come back you can do that it's all good okay this is all literally going to be straight up on the channel afterwards so we're going to go into I like to keep things organized so I'm going to go into my documents my builds folder good stuff and if you're wondering yes all of this is going to be available on the GitHub repo afterwards so you can go ahead and download the code all the links that you're looking for are in the description okay let's go in this so build right now let's go ahead and jump in we're going to say uh MPX create next app at latest you don't even have to put a title in right you can just go ahead and run that command and then it will go ahead and prompt you to ask you what you want to call it and everything you want to do after that so let's go ahead and see what that says and now it says is it okay to proceed we're going to say yes it's fine what is your project name we're going to go ahead and say Trello app right clone and I'm just gonna say YouTube but you can call it whatever you want all right would you like to use a typescript with this project I'm going to say yes I would like to use typescript which let's use eslint yes would you like to use Tailwind yes would you like to use the source directory no we don't really care about the source directory okay um you don't use the approach which is the new Nexus 13.3 I believe it came in or you know whatever it came in next year's 13 now let's say yes would you like to use the customize the default import Alias no and a lot of you are wondering or may have not seen that in Port Alias I'm going to show you today it's really nice this is like a little addition that they've added in the template you can see they're constantly updating this so if you're watching an old button you're not getting these options then don't worry about it you know they're going to change that command whatever the case just look at the migration the latest stocks adapt your code and so forth okay while that's loading we've got a few people asking about zero to full stack hero yes if you want today only actually there's a there's a coupon code podcast 10 so you can feel free because we've been pretty heavy on the podcast scene lately so if you want to join the active Community then make sure you head over to property.com use podcast 10 for 10 off on our platinum and Diamond memberships I hope you see this just because your Vlog videos about freelancing I was able to grab my first freelancing gig that is awesome man I hope I'll join the full stack Community thanks to my man dude that is sick that is awesome man thank you so much I'm glad it helps you out Henry says any reason to not use this Source directory not necessarily I just like it cleaner I'll be honest with you that's why I don't use it right so let's go into our directory so CD Trello upright clone YouTube and then I'm going to do code Dot and this will basically open up vs code with our project okay so then I can close this I can go ahead and I'm going to prepare myself by setting up my screens in the way that I expect it okay so I'm going to push this over here make this go over there close this up and now what you can see is if I go into my app mypage.tsx we have a bunch of stuff inside of it okay so command J opens up our terminal we're going to click on output and here I'm going to hide the first one and the last one so I just have my terminal that means we basically shifted over so we've got our project open the way we want it and we want to essentially just run this app now okay so first thing I want to do is I've actually taken screenshots of the old app so don't worry about it we have screenshots of all of this so you guys can actually you know we can run through it afterwards and I forgot to mention by the way this is actually using gpt4 so that's actually using the open AI API and it's actually going ahead and taking the to-do's that we're going to go ahead and format and pass to it and it's providing a summary of the things that we have to do today right and if I move things around it will go ahead and calculate another summary for the day right so it's pretty cool and this is an example of how you can use AI in a very simple fashion in this case it shows us what we have to do today so again I'm just giving you the tech the platform you can go ahead and run with it build some really cool apps all right so let's go forward and do what we were doing so heading over I'm going to go ahead and um yeah so here we're gonna go ahead and I'm going to cut my old up so let me cut that one off and we're going to say mpm because I've got package package Jason package lock if you had yarn lock then you'd be using yarn I'm going to say npm run Dev and this will basically start my app inside of a developer environment this is crazy guys we're at 300 likes that's not zero no 400 likes nearly and we're over 300 people watching I love you guys I actually really love you guys this is so sick this is so sick like for the first video in a while oh my God thank you guys this is the song I was gonna play in the beginning right so now we've got this open I'm gonna go to localhost now so I'm going to refresh my page and what we should see is the next JS starter template so we're gonna go from the next year starter template to this so this is what you should see right now so this is your starting point okay now what we're going to do is eradicate all of this so that way we've got a clean template to start building things command J to hide everything we're gonna go into the main tag and we're going to delete everything inside of the page.tsx and I'm going to type in H1 and say hello this is a Trello 2.0 clone right AI clone because we are using a bit of AI here and then I'm going to go ahead and get rid of that and I'm going to get rid of that okay now inside the app directory it's worth mentioning that Nexus 13 anything inside the app directory is actually naturally a server component server components means by default they're rendering on the server so some things aren't available to us out of the box unless we convert it to a client component so don't get freaked out by all of this just know that if you get some random error when you're trying to use State that's what's going to happen but we'll explain a lot of that in a second let's go over to layout.tsx this is the layout file which is responsible for your presentation logic right so we're going to go ahead and get rid of the font stuff we don't care about that we don't really need to change that right now we're going to keep it very simple the children is essentially where our page is rendered into on the layout itself okay let's get to a thousand likes guys over 400 likes already the videos are not even 20 minutes in and yeah we're definitely getting to a thousand likes let's keep going all right and we can go ahead and change the title with it like here we can say Trello 2.0 clone and we say generated by I the papa Farm there we go bam and then the final piece of the puzzle is globals now the top three right here are responsible for pulling in all the Tailwind utility classes all that means is it you know those little nice Tailwind classes where we basically write like text red 500 all that stuff is basically poured in here and they are called utility classes because they go ahead and actually translate to real CSS rules which can be read by the browser okay so we're going to go ahead and head over back to root delete all of this hit save close that now what you should see on your page is this and that means that we should have a very empty page and that is good because we want to have a blank sheet to start with okay so we're gonna go ahead and pull this out I'm gonna go ahead and move this over here let's go ahead and pop that to the side and now we've got a perfect starting point okay so the first step there's a lot of different areas that we're gonna have to build today right so I'm going to go ahead and just try and get a little bit of sense to this as to how we can go ahead and move forward with this in the most efficient way so what I've done is I've actually gone ahead and screenshot screenshotted a bunch of things and what I'm going to do right now is open those screenshots and then keep things up on the page that way we're going to refer to this as a design element and I'm doing this because a lot of you actually really like this approach okay so as you can see imagine we have a Okay so we've just started as a developer at the papa fam headquarters right this is our developer the designer documentation so a designer comes to us says I want to build this how the hell do I build that right so now we're going to break this down and build this entire app okay and it's got drag and drop functionality everything that you expect but we're doing it in exactly the way that it would be in a real life situation so hopefully this should give you some real world context okay so now we've got this screen so I say we break it up into sections we've got the header and then we've got the board right I think that sounds good I think in fact what we'll do is we'll consider all of this the header and then we'll consider the rest of it the board okay so let's go ahead and get started with that so the way I like to do it is I drop a comment simple as I say that this is going to be the header component and this is going to be the board component pretty simple it's going to be two components the header and the board that's it okay so just to get us warmed up we're going to start with the header component so I'm going to go ahead and create a header component now this is going to complain because there is no header component so what we're going to do is I'm actually going to close this go to My package.json Level create a new folder and call this the components folder this is going to be responsible for all the components now it's worth mentioning that inside the components folder we also have server-side rendered components so all of them are server server components by default okay oh my God that is that's absolutely beautiful John Anthony says hi sunny I just want to let you know that you are the reason why I afford to support my family your solo dude I am humbled that is incredible thank you so much for sharing that and uh yeah all right blessed that is amazing thank you so much we're gonna go into the component and we're going to go ahead and create a new component called header dot TSX and we're going to say rfce now if you're probably wondering I did rfcm my computer doesn't look like that well that's because you haven't got the extension that I'm about to show you right now so inside of your extensions tab I want you to go ahead and type in es I always forget it is it es6 es5 es6 Snippets yeah es7 so you want to type in es7 es7 um Snippets this one yeah okay I want you to type this in and install this extension that's how you do rfce and it pops up with everything all right so you want to install this one and while you're there I also want you to install the Tailwind CSS extension this is going to be really important for the Times where you see when you're adding in your utility classes it goes ahead and gives you all the options that you can go ahead and pop in like so it's really important honestly it makes your life so much easier I 100 recommend it okay and it's very good when you're learning how to do Tailwind stuff so now we've created our header component let's head over back to page click on the end of header and a nice little trick is if you press Ctrl spacebar you get this nice little import now I can go ahead and hit enter and as you can see it auto imported it now something which is really cool here guys is that you can see we've got this at sign now this new app sign is something which is not really that new but we just haven't seen it much because I don't really tend to do it in the buds unless it will set up for me because we're in a rush but the reality is this is called an Alias now what this does is is it says go to the top level or whatever we've assigned to that and I will show you how you can Define what that refers to in the path so rather than doing like dot dot dot dot dot so forth now instead you can simply say at to go to the top level then you can go into components then you can go into header that way no matter where you are you can just say at forward slash app at forward slash components and the way you do this is you go into TS config head over to paths and as you can see the at path simply refers to the top level so this means that the top level and then it's got a wild card for anything that you want to put in so this will correlate to this wild card and that's essentially how you do it so it's actually really simple to get that working but it's a game changer okay so now we're going to go into a header and we should see the header popped in like so this is great okay so I wanna okay can I can I not shut my grammarly off um I use grammarly lately it's pretty cool um can I just deactivate it when yeah there we go get off that's it we're good okay so at this point now uh yeah we are nice so I'm gonna change this to a header syntax we're going to be a little bit SEO friendly get rid of that we don't no longer need to say that it's um a header um import sorry and then the first thing we're going to do is we're going to go ahead and start styling out so let's go ahead and use this our reference we've got an image tag here then we've got a nice little Gap here so in fact this is going to be an image this is going to be a div which takes up all of this space and then we're going to have a search bar and a avatar on the right okay remember it says um there we go do you think so we're actually using just stand today for State Management and trust me it's so easy to do okay guys this is incredible we're nearly at 500 lakhs already if you're watching this and you enjoy the content you want to see more videos like this destroy that like button for the algorithm so that way this video gets out to more people I love you guys that is absolutely sick all right let's go to the image component so I'm going to go ahead and pop in an image right now so first up we're going to use the next shares image tag so next she has image tag like so I'm going to go over to control spacebar and you can see next image okay now what I've done is I've made your life a little bit easier I've added a source tag um which I've shortened into I know my own URL okay simply the trailer logo and this is complaining because you also need to say something like the Out Tag right so you have to give that now it's not just going to work like this you have to give it either a fill or a width and height so in this case I've given it a width of 300 and I'm going to give it a height of 100 and this is basically how next yes determines how to optimize and render it before you've done anything right so we got to the class name now now here what I want to do is I'm going to say width is 44 on a mobile view but as we hit a medium screen so this is called Break points then it's going to be a width of 56 okay I'm using so many different plugins that is super annoying right now there we go all right and then we're going to go into the padding bottom of 10. we're going to say on the medium screen we're going to go to a padding bottom of zero and then we're going to say object should contain itself that means it doesn't stretch out and look strange now as soon as I hit save we should see an error this is because next JS likes to optimize our images now we have to whitelist what image is we're actually allowing to come from and what domains they're coming from if we don't everyone could misuse this because they could you know be pulling in images Left Right send it from different domains and then there's a bit of a problem so we have to basically say we trust this domain how do we do that it's very simple look at the error message it says host name and it'll give you the hostname copy that hostname then head over to your next config next config is simply inside of here notice how I don't even need to say using the app directory anymore so previously we had to say app directory now we don't actually have to do anymore because it's now in uh it's working here we simply say images and then we're going to go ahead and type in domains okay and I'm going to pass in an array now I'm going to go ahead and pop it in like so links.popperreact.com now what actually happens now is it actually does restart the server for us but I'm you know I'm a little bit skeptical I like to play it safe I'm going to cancel this out with Ctrl C and then restart it again because I've had a few weird errors whenever I decided yeah right but they are upgrading it which is nice right so we go ahead and refresh and we should see that this disappears and we should see a logo at the top hey we've got the trailer logo okay so that's a good start next up what we want to do is we want to have a div which is going to include the search box okay so as I mentioned before we've got the left side and then we've got a div with the search box and the custom avatar okay so this is going to be the div next to it now inside of here we're going to have a search box and the Avatar which is the little circle with somebody's name in it okay now for the search box we're going to make our own custom search box okay so I'm going to go ahead and pop in a form and inside the form I'm going to have a input field and I'm gonna have a button okay the button is going to say search and but I actually want to hide this button so we can create some funky nice UI to it okay now at the moment we can't really see anything because it's kind of white and we've got yeah it's a bit hidden right so what I want to do now is also I also want to have an icon next to it right so there's a few things that we need to change here firstly in order to get that icon I'm actually going to use something called hero icons so head over to heroicons.com this is a you know a library that is supposed to be used with Tailwind because we're almost at 500 likes do me a favor destroy it and carry on watching when I hit the like button let's go to documentation go to on the there we go and then go down I mean it should show us how to install so for react we simply do an npm install we head over to our code command J to pull up our terminal and as you can see we're already running something here okay so what I want you to do is basically you can either do two options if I'm working on a bigger screen I actually split the terminal but in this case I'm just going to open up a second terminal so my first is running the app the second is going to go ahead and be my install terminal I always like to have a few separate ones running so we've installed the stuff that we need and then it tells us how to go ahead and use it so in this in this case I need two different icons so I'm going to go ahead and import them like So eventually we're going to use the user Circle but the magnifying glass is what I need now if you're wondering how did he search for it though well all you need to do is type in for example user you can go ahead and see for yourself here it pops up right and then you can go ahead and use it like so so in this case we've done the heroicon step so I'm going to go ahead and add in the magnifying glass icon now I'm going to go ahead and style this a little bit by saying it should have a height of six a width of six and I want it to have text Gray 400 oops my bad text Gray 400 okay and what we should see now is we get a nice little icon which is a lot better than nothing right now for the input type we should have a placeholder value that way the user can see where they're supposed to type in and it also allows me to show you the changes are happening as we do what we do right so for the form this looks horrible right now so let's go ahead and fix it up so I want to change this to make it look like a really nice form so firstly we're going to put flex by default naturally the children go into a row as you see the search is now next to the site um the magnifying glass then we're going to say the item should be centrally aligned on the y-axis we're going to give it a space between each other like each item of five that's why it's spaced apart then we're also going to say the background should be white the rounded the corn around the corners off padding of two give it a shadow of medium right and as you can see already it's looking pretty decent right it should be Flex one no so that's not going to be Flex one yet we'll handle that afterwards but I'll show you how we do that um yeah so actually it's true flex one because on a mobile screen I wanted to take up the entire width and then afterwards I want it to be Flex initial on larger screens so that way yeah it'll make sense once we actually complete that part so let's carry on we've got the magnifying glass here we've got that perfect the input field we're going to go ahead and give that a flex one rule and right now the flex rules here so if we do Flex one here it means that the input field is going to take up so you see right now it's not taking up the full width right if as soon as I hit save on Flex one watch how it takes up to four width that means because you're saying that child should take up the maximum space that it has yeah so that's how we essentially do it right and then also you see this ugly blue line I don't want that I'm gonna say outline none whereas outline none gets rid of that blue line makes it a lot cleaner and then it's too close together so padding of two a little bit of breathing room now now that's looking much nicer hey good Okay so we've got a nice little search for it the final bit is this button we give it the type of submit okay and what this does now is it acts as the enter key so when you're inside of a form and you have a button with type submit if I go ahead and type in a bunch of stuff and I hit enter notice how the page refreshed that symbolizes to me that we actually submitted that form okay so that's a good start yeah so let's carry on strong so now inside the div for the surrounding box we actually want to go ahead and you know before we carry on I want to just modify something here so we're going to go ahead and have a div that surrounds everything so inside the image and so forth so over this image over this div so let's have a div which surrounds everything yeah and this div is going to start having some rules we're going to say it should be Flex there you go and then um so what we're going to do is we're going to do mobile first design which is how you should typically do it right so we can say Flex column on a mobile view this means that it goes into a mobile view now when we go to a bigger screen it's going to become Flex row okay because basically as we're on a mobile view I want it to stack up like this but on a bigger screen you see I want it to go across like that right once that's done we can say items should be centrally aligned so as soon as we do that so now you can see it centers on the phone and over here it centers you can't actually see it because there's no padding but it trust me it does right P of five to go ahead and give it a bit of space from the corners and I'm going to give it a background gray of 500. now that's really strong so I want to give it four slash ten that is basically a shorthand for make the background gray five the shade of 5 500 but 10 opacity boom 500 likes that is crazy I think there's a record in 34 minutes we hit 500 likes let's get to 1 000 that is absolutely crazy right crazy stuff round the corners off so bottom 2XL now you can see I've got these nice little Corners rounded off by very subtle difference but these things are what caused that nice change to happen so look at that already looking pretty sweet now you see here how the Trello is right next to this right this is because if we were to inspect this these are only using up the minimum space that they should be all right so if we now go to my image and we basically say I want you to use up the full width so it wasn't actually that one it was um I'm gonna fix that afterwards actually so we'll do that after this one is uh yeah that's fine okay so let's do yeah that's it I got it right so this div yeah so the div surrounding the search field we're gonna go ahead and say class name and I'm going to say this is the flexbox and right now it's only got one child in there because we haven't got the Avatar in there so I'll tell you what before I do that I'm going to add the Avatar in so this Avatar new library so it's kind of fun right so this new library is called react Avatar right so it's pretty funky Library um I wouldn't I used it more out of convenience if I'm totally honest um but you can feel free to to use whatever you want so this is react Avatar we're going to install it and what I like the reason why I like it is because you can actually use a bunch of things like Skype ID GitHub Google Facebook ID and then we'll go ahead and grab your picture for you so I thought that was pretty cool so we're going to go ahead and just do that right now and I'm simply going to put a name in there so in this case npm so as I mentioned this will be on your portfolio so really what's going to happen here is it's going to be one of those ones that you put on your portfolio I'm gonna make it to a level where again it's just going to be statically for one user right you can go ahead and upgrade it and so forth as you wish I'm going to make a little bit bigger for everyone so hopefully that helps you out um mobix thank you so much because you've done an amazing job man well now with the podcast you have no idea how you changed my life I was so scared of using reactant typescript but thanks to you I'm about to launch my own website it's comments like that that make my day thank you so much dude I appreciate you right so in this case we have a flex so we've got the Avatar so now I'm going to go ahead and use the Avatar so here I'm going to say Avatar Avatar and you see how I imported it automatically for me so Avatar space name equals in this case I'm just going to say Sunny Sangha right you again you can feel free to look at the library and customize it as you wish right I'm just giving you the tools to go ahead and get things started off so if I do that you'll notice that okay that was not a great one I freaked out um Avatar name rounds okay let's refresh why is that freaking out let's have oh okay this is a client-side component okay so actually we're gonna do a lot of things here inside the header which is going to require State and a few things like that so what we're going to do in this case is we have to convert This Server component because in xjs13 everything by default is a server component so in this case I'm going to go ahead and convert this to a client-side component this means it is rendered on the client so basically the rest of the page which is a server component gets rendered on the server but this header component basically when the page loads then on the browser of the cloud client it executes the code right so that's basically what's happening when I say use client so it doesn't do it on the server it does it over here now what you'll find is that we should not get that error anymore there you go that's why so that's a big sort of thing that you have to look out for now as we transition into this sort of server component realm yeah so now what we're going to do is use the nice little features of this Library we're going to make it round we're going to go ahead and say the color should be a value and I've got this nice Trello blue right I should really give it a name but in this case I'm just using it simply I'm gonna go ahead and pop it in like so it's got the Trello blue and then I'm going to go ahead and say a size of 50 right so 50 like so and again you can change this to whatever you want you could say Elon Musk and then you see it becomes em and so forth right but I'm going to go ahead and say Sunny Sangha yep nice so now we've got our you know our easy bit there right um so you can Liam you can definitely render what you can on the server so again you can optimize it at so many levels I'm just showing you the base and then you can feel free to elevate it I'm just trying to show you a mixture of the things but I'm not gonna go so far and if you want to see me really optimize zero to four set hero in a coaching call as well I do that kind of stuff so again popularreact.com second link in the description and I will help you out with it all of that right so I would recommend if you really want to elevate the Diamond package is honestly the one that we get Raves about yeah so definitely check it out so we go to the div class name and now I'm going to say Flex items Center and as you can see now now we get this like really nice effect going on right so this is what I wanted to show you I want to space this out so SpaceX of five so there you go SpaceX five Flex one so what this will do now is if I make it a bit bigger here so what you're not seeing is that this is actually by doing Flex one so if I get rid of this I'm going to say BG red I just want to show I'll make a point to you BG red 500 okay so notice how it's only using up what you should be using all right so if I do Flex one boom it uses up the full width now okay then what I can do is I can say justify it right over to the end so justify to the end and then what it does is it froze it over to the side okay and then on a mobile device you'll notice how it's only small so what I can say is make the width four as well and as you can see now on a mobile device it's with 4 and on the bigger device it's going to be nice and snug in the corner and then obviously we can get rid of our red color that I was using for demonstrational purposes and then we go look at that I hope that was a good explanation of how we did that but yeah you can see how clean that was right so look at that it's really clean you've got beautiful UI and just simply like that little tricks that you learn over time and yeah you can do that yeah I'm that's perfect explanation yes used client is for things it can't be done in the server have to be done in the browser hence we convert it to a client-side component and then we use it right but I wouldn't recommend making your entire page client side just do the components individually right yes I loved look at the community this is what I'm talking about guys read the comments if you're watching this bag there's some really great stuff in there right now Okay so we've got the Avatar done okay that's great now after the Avatar so after this div what I now I'm going to do is have another div and this is going to be where the suggestion will be right so in this case you see this suggestion right here right so I kind of want to have this still as part of the header right you can really you know you can exclude this out and do it separately as a different command if you really want but it's completely your call here I'm gonna have a user Circle icon use a circle icon and I'm going to say something like this I'm going to say the class name should be an inline block right it should be a height of 10 height of a 10 width of 10 oops height of 10 width of 10. and you're gonna mix the music up a little bit let's go to some of the new tracks that we've got on the pubfan playlist again popular.com right at the bottom sign up to that newsletter and you'll get access to the entire playlist if you like the music that you're hearing right now all right guys we're almost at 600 likes let's go Papa farm that is what I'm talking about we're gonna say um height of turn width of 10. we're going to give the color of this um person to be the blue that I talked about earlier and we're going to give it a margin right of one so boom I know if you're wondering yeah I actually do listen to this um this music when I'm coding so this is literally my my playlist I listen to all right just go ahead and hit save refresh so you can see nice blue looking nice and then yeah that's pretty great okay and eventually we're gonna have it if it's loading that's gonna spin right so that's perfect for the P tag I'm gonna send to that P tag by saying Flex items Center justify everything in the center a nice little trick just centering a div and then we say MD padding y so only on medium screens or above I want to add a padding y so in this case you see there's no padding here but if I'm on a medium screen it adds the padding right so I want to do that just in this case okay now for this P tag I'm going to say that it should be text should be swatching up before I do any Flex here inside of here I want to have a suggestion as well so this is a P tag so I'm actually embedding the icon as part of the text and then I'll have a suggestion So eventually we'll hook this up to GPT but for now I'm just going to say GPT is summarizing your day okay so that way you guys can see so now you can see that this is slightly off character right this is not like perfectly aligned and the trick that you can do is as we have two inner children technically here we can actually do Flex we're gonna do items Center and notice how it's now it's perfectly aligned a nice little tricks right text small font should be light I'm going to do padding right of five and I'm going to say shadow Excel so that way he's got a nice little Shadow to it round the corners off with extra large core rounding I'm going to make it fit only where it needs to fit the background should be white it should be italic and it should be a maximum width ever of 3XL and I want the text to be on a fancy ass blue right that just there you go fancy boom there we go nice all right there you go look at that looking clean right something's off the the padding the padding is off all right so I forgot to add padding in the P tag yeah of course so here so padding of five bam that's much better right so now you can see GPT is summarizing your task for the day my right now obviously it's not we're gonna go ahead and add that in afterwards yeah so Guys these are absolutely crazy over 350 people watching across platforms wow thank you so much that is awesome just unbelievable actually unbelievable all right so at this point now things are looking pretty good I think so I'm happy with that that looks pretty nice now I'm going to show you the trick for the color gradient okay so you see this color gradient in the back now something that you might have not noticed slight designers will notice this right only the designers will notice this but that is not white that is great right so and what I'm going to do is I'm actually going to change the background color to a gray so we're going to go to page.tsx and we're going to start modifying the color I think I did it and yeah I did it in the layout so typically you should be doing that kind of change in your layout so for the overall body I'm going to say that the background color is a custom color now I've actually grabbed this from a uh a design sheet that I was working on so I've got a background color and as you'll see now it very slightly changed it but the nice thing is it makes the white pop that's why I like it right the only thing that's bothering me here is in the header on that P tag I simply don't have a little bit of pet I just need a tiny bit of padding on the phone there you go that's nice yeah it's tiny about padding and then it goes to a bigger padding on a desktop that's beautiful Okay so how do we get that really nice gradient effect that you see here because it changes up everything right so what we can do is we can go over to our header component so I'm in the header component and what we're going to do is we're simply going to add in a basically a hidden div all right so we go inside the div that's responsible for outputting everything and here I'm going to add in a like a hidden depth right so let's go says your projector made me understand the concepts clearly I love you Sunny thank you so much less code I appreciate you man all right so they're going to go and say div and this is basically an invisible deal that will act as a gradient now here's the trick we're going to say class name and I want this to be absolutely positioned across the entire screen that's what I want right I want it to be top of zero and what I'm going to actually do here is drop it down like this so you guys can actually really see what the rules are I'm doing right so top of zero left of zero that means it basically goes to the top left and then I'm going to expand it out all right so the width should be four so if you think about it now it's expanding the entire page starting from the top left right the height should be 96 96 it basically goes down to around this length which is perfect that's all I want I don't want to go across the entire screen then I'm going to say it should have a background gradient which is to the bottom right right so as you can see I save nothing happens because I haven't specified what the colors are for the background gradient okay so I'm going to say firm pink 40 to um and I've got the nice that blue right that really nice blue uh let's go ahead and grab it and again I want you guys to customize it and what I love is if you customize yours and then do a little screenshot send it to me on Instagram I'd love to see what you guys built out of this right so let's go ahead and hit save and now you can see boom we get that now as you can see everything's hidden it doesn't look that does not look like that how do we get it there right well very subtle changes all we have to do is simple we have to round the corners yeah and as you can see now we've got a nice little around the corner that's definitely not going to do it though right we have to say filter because we're going to add a filter to this right and this basically prepares the browser for what we're about to do then we can say blur 3XL now you can see oh get this nice effect going on then what we can do is we can say the opacity 3XL you say opacity is going to be 50 right now you can see it goes behind as in like boy it's a lot harder to see but we still have a problem here right it's like in front of everything so what we do here is we use something called Z indexes so I'm simply going to use a minus Z index of 50. everything else basically so Z indexes think of them as layering so by setting a minus Z index or minus Z to 50 it's basically going to the back right and then what I can do is if I really want to control things I can say minus Z 40 will go in front of that one and then go all the way up to Z 10 20 30 40 50 or whatever all right but the point is that you can then stack the layers As You Wish because sometimes you might have an issue where just like now you want something to go behind another element okay so um yeah hopefully that helps you out smash the like button if you learned something new about Zed indexes right oh my God this is crazy we've got 350 people in the house 600 likes on the ray that is sick all right this is looking great I'm very happy with this so now we are going to proceed to the next part so we've got that looking pretty nice so let's go ahead and do the start with the board right we're going to be coming back and forth moving around loads but this is where we basically get you know our hands dirty right so let's go to the page and here we're going to go ahead and remove this and we're simply going to go ahead and put a board in play right so I'm going to get rid of this like so now the board let's go ahead and create this component so I'm going to go ahead and create a component here board.tsx and then I'm going to say rfce right you can go ahead and get rid of this and then we have our board go back to the page simply import it like so so go ahead and do control spacebar bam we have our beautiful board right looks great right uh I love this and yes thank you Ryan for noticing that I'm I'm trying my best to break down every detail every step sometimes I have a habit of just flying forward so hopefully this helps you out okay um so this is looking pretty good right so this is going to literally be our top level page so you see your page by the way should always be a high level functional sort of element right it shouldn't be every bit of logic is it your page level should break things down into a way that is concise and it's just clear to see that is my header on my board that's my page and then everything goes deeper than that okay that's how you should be building your apps yeah so now let's go ahead and start with the board okay so the board lots of different elements here right we've got this nice to Do's we've got the different columns and so forth the library in fact that we're going to be using which I think we should begin with is actually going to be called react beautiful D and D so in this case let's go ahead and search for it right now so react beautiful DND and in this case you can see if I go to the actual Library itself who's at the sun which is actually the owners who bought out um they own jira they own Trello so yeah you might have heard of them right so here you go right before DND scroll down and you can see a nice demonstration of how we're going to use it so this is their demo I think ours looks way better though so we're going to build this instead right so why are you not using JavaScript instead of typescript so a lot of people get confused about this JavaScript is your language typescript is a superset on top of typescript on top of JavaScript so typescript is basically adding strongly typed power to your JavaScript coding right so it's not you can't do one you can't do typescript without JavaScript yeah so in this case we're going to build this so how do we do it let's go ahead and install that's the first step okay so we're gonna go to installation I'm going to show you like I said I want to show you all of the steps so we're going to go ahead and install this into our project right so come on Jay head down to use it sh boom and we install reactive beautiful DND now as you can see they've got prob don't get confused you know sometimes you're going to see different examples different tutorials always kind of craziness but the main thing is you need to import drag and drop context into your app that's the first step right um so we're gonna go ahead and pull that in so we've installed that command J to hide the terminal we're going to pull in the drag and drop context from Rabia from the ND now you can see it's complaining some libraries will do this when they do this I want you to go ahead and hover over it and a lot of the time it will give you this little command here where it says you can install the types because what's happening is it hasn't automatically connected the type definitions or the types the types from the typescript definitions um automatically when we did it so all you have to do is you copy that command and what this will do is it'll save the developer dependencies and all the types of this now most cases it will find it just like so and in just a second that will disappear okay so that's how you go ahead and get rid of that then what you want to do is you can go ahead and check out how you can use it so in this case this part honestly was a little bit sort of Hit and Miss I had to check out the get side the samples all this kind of stuff but I'm going to try and make it a lot more easier for you okay so you don't need to do any of this I'll show you how we do it so this is basically a nice little demonstration you have your drag and drop context then you have your dropable parent and then you have draggable elements within okay so you have to have your drag drop context at the highest level your dropper ball area and then draggable stuff within but remember we actually have two nested layers now what we have is the ability to drag each of the individual columns so I can get my done column move it over there I can get my progress column move it over there and so forth and then inside of that I can move the to-do's across each of the columns right so we've got a bit more complexity here so I'm going to go ahead and showcase how the hell we do all of that right I would love to see a marker being done live and then making it in reality I personally strong finger designs oh sure dude do something like that okay so you can go ahead and read this out if you want and check out the examples I'm just going to go ahead and start jumping into how the hell we build it right so let's start breaking this down step by step right first thing we're going to do is the parent the overall outside we're going to go ahead and say drag drop context all right so this is our parent then as I mentioned we're going to have a dropper ball okay so we're going to go ahead and put in a dropable cool all right so this is going to be inside of this we're going to say droppable uh dropper ball yeah now this dropper ball you have to give an ID right so in this case it's got the dropper wall is closed out there we go you have to give you an ID so we're going to give you an idea board okay then we're going to give it a Direction so in this case I want this is going to be a horizontal board okay so horizontal the reason why is because these this first dropper ball is basically I'm going to be able to grab all of these different things right so you see this right here I should be able to pull this entire to do list this section and move it over there right so we're not addressing each card yet we're addressing the entire columns so that's the first level we can move this column over here and so forth right so that's the first step so the first one is going to be a direction horizontal not vertical the type is going to be something called a column cool all right now what we're going to do is this gives you something called render props so basically a child of this is given to us so we can go ahead and get something called provided okay Mario's what is up dude how are you doing here's our OG in the papa Farm an awesome member inside the community if you want to chat tomorrow zero two star Heroes a place but oh geez in the house that's awesome man so you can see I've got provided here right now as you can see I'm doing parentheses this means that in my jsx block these curly brackets I'm returning something here so it's like an inner function really right so we're going to render out a div and inside of this div we're basically going to render out all of the columns okay so I'm going to show you how we're going to do it so this is basically going to be rendering all the columns right cool so at this point I'm gonna do a little pause because what we really need to do here is actually go ahead and prepare ourselves for what's to come right we don't have any anything that we can actually map through here right so what we're going to do is we're actually going to pause here we're going to implement the upright section of the build and then we're going to go ahead and um and then we're gonna pull from app right get our columns our board columns and then we're going to proceed okay so it's going to be a bit of a step but we're going to do it um so let's go ahead and do that right now so we're going to go over to Upright so you're gonna head over to your upright and simply type in app right Cloud you should see the cloud.apprite.io or simply go to the first link in the description to get started for absolutely free okay so we're going to set this up right now guys we're almost set at 600 likes that is incredible I want to hit a thousand today so let's get the energy back up and let's go right so first things first you see I have a first app over here I'm going to go ahead and create a new project so we're going to create a new project I'm going to call this one let's just call it the Trello YouTube clone bam hit create and as you can see we created our project now you can go ahead and they made it extremely easy over Opera to go ahead and get set up with our projects we're going to go ahead and add a platform in this case we're going to add a web app so I'm going to click on web app you have to give it a name so naturally I'm going to say something like Trello YouTube well and the host name now in this situation once we deploy this will be the hostname of the deployment domain all right Mario's goes love this song I love it too man yeah apprite is free yes a lot of people asking app right is free yes so you can use that bright Cloud beta for free yeah the host name here we're going to say localhost and we're just going to start off with this right then you can see we're going to click on next now you can see we can install so they make it really easy for us to carry on and get this set up so I'm going to go ahead and install at this point so instead I'm gonna pull up my terminal and store upright so npm install upright wait till that's done now in our true fashion the way I usually do things on all my stream I'm going to go ahead and hide this out and simply go to the bottom I'm going to close everything out another package Json level I'm going to create a file called upright tortillas all right and this is going to be where we essentially set everything up so I'm going to do an import of all of the things I'm going to need all right so in this case I'm going to end up using all of this stuff the account the ID database of storage and so forth we're actually not using the account today we're using all of these instead right I'll show you how you can initialize even the account right so that way it kind of in case you decide to use it you can use it so I need to go ahead and initialize on my clients so in this case const new client now how do we actually go ahead and get set up with it so you see if we click on next it will tell us how to set the project up in this case I've got a project ID you know it's open so I'm going to go ahead and copy this ideally I might have to you know create a new project because that's already shown by nus minor so we're going to go ahead and do this right now so const client equals this and so you want to go ahead and copy this and do it right here so in this case I've already done it was a set endpoint and then right here we're going to do https Cloud upright V1 okay so this is actually the the the thing that we're going to use right now okay then we're going to say set project and instead of doing a default value I'm going to say process.environment dot next public upright project ID okay this is actually going to be a public variable so next public symbolizes that this is going to be um this is actually going to be available on the client right if we don't have this it's only available in server render components and the back end stuff so we're going to go ahead and add this in and this is going to be something I'm going to say is absolutely there okay once we go ahead and set up in just a second then what we can do is we can go we can initialize everything off of that client so we can have the account the database access the storage or by setting it up like the following and then we can simply just export it like so okay ID gives us unique identifiers it's going to be pretty handy right Bobby says on the first salary I'm joining the page stuff that's what I'm talking about dude I promise you zero full stack hero is no joke this is how we do our thing this is literally how we work together all the time William says how will gpt4 fan we're actually going to be using it to provide that amazing sort of suggestions over it so it's an example of how you can use it so you pass it to do this it tells you a summary of what your day is right so now we go ahead and hit save this is great all right we've got everything looking pretty nice right now so what I need to do is set this up so I'm going to go into here I'm going to create a new environment variable so dot EMV dot local and inside I'm going to go ahead and pop in my project ID now my project ID in this case will be this one so I need my project ID so I'm going to go ahead and pop that in like so hit save and as you can see in my terminal if I go back to the first one it will say found a change in your config it's gonna oh sorry it was a environment variable ignore that we've fixed that one so that will be gone in a second but yeah we've done that there we go that's our project ID then we can go ahead and click OK and you're ready to go take me to my dashboard so they have a really great dashboard at upright that shows you all of your reads your rights your usage your storage your functions that you're running your authentication all of it is available here and you even have access to your API keys so a lot of this stuff is pretty much self-explanatory once you're set up right say Caballo says you are awesome bro Mexico in the house that's what I'm talking about with International in the proper fam Romania here as well that's what I'm saying guys let's get to a thousand likes Papa vanway this is how we do it right so next up we're going to go to the databases Tab and this is where we start setting things up the way that we need to okay so what I'm actually going to do just for my own reference is open up my other Cloud app right right windows so that way I can remember exactly how I set up the structure of the database because I don't want to mess it up and I want it to be very fairly smooth tutorial for you all so first things first we're going to create a database so let's create our database now this is going to be called our app database so I mean this could be really anything we're just going to call it the app database right so this is where everything is going to live right so let's just call it um yeah this is called an app database right up database doesn't really matter let's go ahead and click create so inside of our app database we have our collections right now the difference between this and something like Firebase is you can pre-define what the attributes are so that you protect what is added into your database which is something that I actually really like okay so at this point now what I want you to do is I want you to click on the collections and I want you to create a collection called to-do's okay so we create a collection called to do's and inside of to-do's now we are going to go to the attributes Tab and here we basically set up how are you know our attributes for each entry will look okay so let's go ahead and do it right I can't believe I can't believe people ask if you're live Ryan I know man it's crazy William says love life she's saying real coding and so much knowledge password thank you so much dude I appreciate you guys this is what it's all about all right so we're gonna go to the title here so we're going to call this first attribute the key title the attribute type so let's go ahead and we're gonna say this is string okay they can give it a value so the size sorry in this case the title of each one I mean you can really play with this yourself we're gonna say 512 okay and we're gonna say that the title is actually a required third so you see we've got some control here it's kind of a mix of no sequel but yet we have the SQL constraints all right then we go ahead and add a few more we're going to add the status this will be like in progress and done that kind of thing and in fact you can even make this an enum if you really want to so in that case what we're going to do here is go ahead and do enum and this is going to be this is gonna say the following is gonna say to do it's going to say in progress and it's going to say done these are going to be the three states of our app right so now we're going to go to the and we're gonna accept that so that's pretty happy right we're going to click create to us you can say it's required for that but I'm only yeah we'll see you I'm going to leave as I'm required for now and then we're even gonna have an image now the image is going to be essentially something which is not required but it will be something like a past value and that's basically going to be the storage location once we upload the image to Upright cloud storage right so in this case can be image it's gonna be a string as well in this case I'm just gonna give it a 512 and we're going to leave it for that for now so now we've got our initial setup okay so what I want to do to get set up with this as I want to go ahead and just add a few test things right something which allows me to go ahead and get started with things in a nice way so I'm going to go firstly start off with create document right so sorry I'm completely gone blank yeah so I'm going to go ahead and say create a document and the first one is going to be something along the lines of let's just say take the dogs out for a walk select the enum see to do in progress done I like that right very simple okay so let's go ahead and do that right now to do and then remember all of these by the way we can go ahead and protect it in typescript in our code as well all right so let's go ahead and do the image we're actually going to leave blank for now and we're going to click on next great and that's fine now for this tutorial I am not enabling you know security rights whereas in this case I'm going to say update permissions I'm going to say we're actually going to allow anyone to create read update and delete but you can add authentication and then protect based on the user who is logged in similar to how we do it like Firebase rules other platforms and such for so you can have that functionality here as well right so now we've got an example of a document take the dogs out for a walk it's a to-do right okay so that's the to-do's setup for us right so now the next step is and that's our basically our our structure of our our to-do's are going to be stored okay the storage bucket so let's go ahead and prepare our storage bucket so our images that we're going to store inside of the app you see the images here for example these are going to be stored in an image bucket so in this case just create a bucket called images all right so there's gonna be images create the bucket and inside of here we're gonna go ahead and you see we're going to basically have let's go ahead and show you if we're in the settings we're going to have permissions and any and in this case again as I mentioned I'm just going to allow anyone to be able to create read write update and so forth but eventually you can go ahead and feel free to extend this build add authentication and protect this not only when you're logged in you can modify yourself alright Sunny will never will you ever stop sharing all these amazing Services your values endless no do I'm gonna keep going until until I can't keep going anymore you can you can trust that I'm gonna be about right so you got me around for a while so in this case we've got the images right here so we've got the images and database set up okay so let's get started with how we can actually go ahead and integrate this now so the first things first as I need to go ahead and take reference of the database and collection IDs okay so in this case I'm going to go ahead and actually I'm going to hide something here I'm going to show you how you can prepare it and then I'm going to hide me actually adding the values because I don't want to show certain values in case we get spammed and so forth okay so in this case I'm just going to go ahead and pop it in there so the first value I want you to know about is the next public database ID okay then we're going to have the next public to Do's collection ID so where you get these from is very simple inside of app pro at the top of the app database you simply copy the database ID and you can simply paste that in so that one is fine I can share that inside of the to-do's we can click to copy or you can go ahead and click in and you can copy it here so what I'm going to do is I'm going to copy this in and I'm going to paste this here and then I'm going to go ahead and hide this a save on hide the environment file screen okay so I'm going to go ahead and actually show my face for a second paste it in hit save I'm closing that file so now I've got all of my environment variables in the right set right so we've got access to all of the variables that we need to basically make a connection to when we fetch our information okay so next up is we need to go ahead and handle the board logic right so I just need to figure out where I'm fetching again in my in my flow so in this case okay I understand so this is where we start using some form of State Management so what I want to do is when this board loads right so when this loads I need to go ahead and essentially so firstly this is going to be a client component so this is a client-side component because we're going to have an element of client-side stuff happening here okay so we're going to use a user fact and if you didn't make it a client-side component you will not be able to use it something like a use effect any hook you won't be able to use okay so at this point we've got the use effect and this is where I'll essentially be calling something like get bored okay now this get board now this okay so this this describe our problem that we're about to face right firstly smash that live button where we're nearly at 700 likes so the problem whereabouts face is I need to fetch the board there then I'm gonna need access to this all around my app so I need to basically access this board information you know all around different places of my application okay now by the way if you do get stuck on the use effect part we have a huge tutorial on this on the channel just type in sunnysango use effect on YouTube You'll see a great tutorial which explains the rules of hooks how you can do use effect and so forth right it's going to help you change your life all right I promise you when you understand use effect it's great okay so at this point we need something which is going to fix the problem of allowing us to fetch the board here but use the board in any point of our app okay so this is where you introduce something like State Management right so State Management Library typically include things like react context API or something like Redux but there's a game changer now and The Game Changer is called the stand right this stand is is sick I actually I was told to buy it from a friend of mine but now oh my God it's it's it's really good right it's so good somebody goes Sunny's Barber must be on fleek and I think thank you so the stand you if you head over to the stand uh Google it you'll find this time you'll find this now it's literally this is the amount of code you need to write a store like what it's crazy it's so good it's so good like I'm not joking it it's so so clean all right and it's I like I couldn't believe it when I first saw it I was like no it's not gonna be that good then it's surely nothing's that easy to set up and that good but yeah it really is so we say npm installs the stand okay now let's create our first store so I'm gonna go ahead open my folder up I'm gonna go here I'm gonna create a folder at the top level called store now the first bit of information I'm going to install now typically what I always say is when you have something like State Management Library you should have different slices of your store so that way you can contain different bits of information at different areas so first thing we're going to have is containing most of the information about our app we're going to have something called a board store then we're going to have a modal store for keeping track of if the users opened or closed a model so at this point we're going to open that up and we're going to Simply say Board Store dot TS okay now inside of our board store we can basically go ahead and start reverse engineering what that demo tutorial tells us so I'm going to go ahead and show you right here first create store so I would I want you to just simply copy an example like this simply like put like that right then what you're going to have is you're going to have a bit of a complaining issue where it's like oh no you need to set up and blah blah blah and do that kind of stuff right so I'm going to show you how we can correct this because we're using something called typescript now they have got an example down here I believe where it's typescript and it shows you how to do it so here you go so when you use typescript you actually can go ahead and pass in the state but I will go ahead and make this a lot easier for you to understand so you don't have to worry about all of that all right so first things first right let's go ahead and create our source we're going to say use modal store I'll use Board Store sorry within the board so first okay then I'm going to create an interface which is basically like a type definition we're going to say board state and this is going to be everything that we basically contain inside of the board right the yeah board so in this case we're going to have a few things inside of this we're going to have the board itself the board is going to consist of you know all of the information is here the different columns with the to-do's inside all that good stuff so that's going to be the first thing this is going to be bored and this is going to be of type board which we haven't got yet right I'm going to create that afterwards all right so this is gonna be out of type board then we're gonna have the get board function okay so we're going to start off with these and this is going to be a function which is not going to return anything okay so let's go ahead and just simplify this now so we've got a board and initially this is going to be a uh let's just start with a no value and I'll fix this afterwards okay we're going to say the getboard function is going to be a function that does something okay so now you can see the arrows have disappeared except for this so we need to Define what a board is right so in this case we need to go ahead and do command B and I'm going to go ahead and create something called a typings dot d dot TS file inside of here we can create some type of typescript definitions right so inside of here I'm going to say typings.d.ts now here I'm going to say interface now welcome to the world of map objects so I'm about to blow your mind if you've never used not my object I thought it'd be cool to do that you can actually do this build probably simpler with an array like the the library is built foreign things and change things and change an array and map through it map through an object and in so many ways and yeah I want to make your life a little bit difficult at times so you learn okay so in this case let's go ahead and show you the hardware right I could have done this with a raise easily but I want to show you the harder so you understand how to do this because honestly you're going to come to a point in your career where you need to know how to use a map right so we're going to say that a board will simply have a map inside of it and a map you can basically specify what the key value pairs are so I'll explain this in just a second right now inside of here you can have something like a string string right now if we were to do this all this means right is a map it's very simple right a map consider it like a bunch of entries right so you've got basically a list so think of a list right a really easy list each item in that list has a key and a value so the key could be like you know sunny and inside the value could be like all the details about Sunny then it could be J and then they could have all the details about J and I can yeah you could have whatever key you want and the best thing about map is which is kind of cool is the key can actually be anything it could be an object it can be a hash it could be a string it could be a number it can be anything you want right so it can even be an object the key right and the value can be anything as well and it's really cool because once you interact with these it's quite efficient because you can just they get to this exact key see if we've got something in there and that way you're doing a direct index check right so now what I want to do is I want to customize the two types so the first thing is I'm only going to have three types of keys right the types of keys I'm going to call them typed columns okay and this is going to resemble the to do the in progress and the done so in this case the type column is going to be basically an enum so it's going to be a to-do it's going to be either to do in progress or done and this is not going to have a space it's going to be very simple so it's either to do in progress or done and the key is going to be a typed column so the key will only be to do in progress or done ever done okay and then we're going to have a column inside each value all right so this is a powerful part about typescript so let's go ahead and type out that definition so in this case I'm going to say interface column and now this will have an ID and the ID of that will be a typed column oops sorry type column so the ID of all columns will either be one of these it'll be a to-do and in progress or a done and then inside of there we're going to have an array of to Do's okay so we're going to specify an array of to-do's which we haven't specified what to do really is yet so we're going to say the interface they have a to-do and I've defined this structure based on the response that you will get back from upright that's why we've got a few dollar signs and all that kind of stuff here right so in this case we can say dollar sign ID string and we're also going to get back something called the created app timestamp and this is going to be a string we're going to go back there and then we're going to have a few of our own values so we're going to have the title the status do remember we set this up we have the title we had the status and we have the image and the image is actually you know it could be an image or it might not have an image right so in this case some have images some do not have images okay and so forth so in this case we've got our interface then we can go ahead and do interface image some people asking yo when should you have an interface or a Time interfaces can extend pretty easily so you can say like a column extends a to do for example and that's when you typically that's very simply put that's how you can do it right so if you want to extend something just use that but yeah you can use either or I like to say in these situations use a type in this case for main objects I'm using interfaces right so interface image you're super awesome sign thank you so much yeah I appreciate you for the image each of the images are going to have a bucket ID which is basically going to be the ID of the bucket so remember that image is storage container where we set up just a second ago and then each of them it's got its own file ID that's how we locate the image okay and this image is actually going to be referenced here sorry I messed up the status as well should be a typed column I went into autopilot right so the status of each studio is going to be either to do in progress done the image itself is going to be one of these types so now you can see we've got a really nice set of type definitions and this will protect us from making a lot of errors okay because it will scream at us if we screw something up so now we've got the board right so let's go to our board store now now what I want you to do is inside the board store yeah what we do is we can initialize the board when we set up the used board store so this is basically the type definition and all we do here is we say create and we pass in our board state right and then they will know if you're setting things up correctly so now I'm giving it a value of no to begin with and it's saying whoa whoa whoa you cannot do that because that's not a board state so all I'm going to do here is Define something which satisfies what our board is so in this case we have the columns filled and it needs to be a new map and remember what I said guys a map is a typed column and a column type right so the key is a type column the value is of column type okay and then we're just gonna invoke it so this will basically go ahead and create a new map for us with type column and column inside okay good stuff now then we're going to go ahead and create a function for getboard this is going to be an asynchronous function inside of here I want to go ahead and get the board so I'm going to say get constant board equals await yeah and this is where I basically perform a fetch function okay so in this case I need to do two things I need to fetch it fetch the information but I actually want to fetch all of the to-do's and I want to group them so I want to actually group them by the different types okay so in this case I'm going to create a helper function called get to Do's grouped by column and what will this look like right what the hell would this look like well the goal here is that eventually we will have something like this we'll have something like a map so it looks something like this okay that's horrible what am I doing um here so we have this okay ignore me okay that's not working yeah I'm gonna just hack this away but okay so say we've got this so one of our keys for example will be to do and then we're gonna have each of the to Do's inside of this this uh field right so we're gonna have all of our to-do's inside of it right and then it's going to be grouped accordingly so you've got your to-do you've got your in progress and so forth so this one will be in progress and so forth and they should all be grouped accordingly okay and then that way we can do the information that we want to do and we're basically going to pull from our database to handle that information right guys we're so close to 700 likes come on let's get it to 700 destroy that like button let me hype the music up a little bit more so that way we can get really into it into his arm all right so get to do is Group by column let's go ahead and do so and what I like to do is create a lib folder which is for utilities friends can we create a folder in the top level sorry so top level folder lib lib is like util folder same thing right and we're going to say get to do's grouped Group by column dot yes um done okay and now what I want you to do is go back to board store eventually this will give us back a value and then we're going to use something called set board and what set will do is it basically sets the global State here like so okay so it sets the global state for that value so in this case it sets that that piece of information then you can pull it wherever you want okay so let's create this function so I'm going to go ahead and go to my get to Do's groups by column and now we're going to go ahead and set things up so the first thing I need is to basically create a function so we're going to say x more const get to Do's by column right and then we're going to go ahead and this is going to be an asynchronous function which takes no arguments okay cool stuff easy as yeah fairly straightforward so far now I need to pull from the database so you see the database that we set up earlier so this database right here I need to pull the information from here guys right so I need to pull all of that information into how the hell do we do it well we made our life a bit easier earlier we can simply say const p and p is basically a promise so we're going to basically return all the data let's call it and we're gonna say await right and all I do here is I type in databases and we've previously set up our databases through our upright.ts file so I'm importing that like so then I say dot list documents now here it's really straightforward all I do is I pass in the database ID and the collection ID you can even pass in queries and so forth afterwards and you can fetch the information just like that so now what I can do is I can go ahead and say process.environment process.environment.view no way when I use the view all right so I'm gonna go ahead and do this so I'll say process the environment next public database ID then we go ahead and hit color and then I'm going to do the same thing for the collection ID and we set these environment variables up earlier okay next thing I want to do is I simply want to console log the data so that way you can see what the hell is going to be on the screen well actually you're not actually going to see this right now because this won't actually be on the screen so what we could do to test this is we can go to page we go to board we can actually go ahead and just um just put in hello uh we can sort of just comment this out for a second and then we can call our get board function so I will show you how we can actually set that up right now so we can actually test out what we're doing right so in order to get access to our board functions like get broad all we have to do is very simple hook right we just say const get bored equals use Board Store right and have I exported it I think I have no I haven't okay um I believe we just got to do a simple the export here which is why I have messed things up yep so we should do export my bad export const use board stuff there we go and we're actually gonna even go a step further so yeah we can import that there we go and then what that does is it gives us the state and then we can go ahead and say State DOT and then you see we get the board or get board so now I'm mapping this to a available function so in this case we can go ahead and pass it now because we are using get border we actually have to include that as a dependency but in this case we do that now we should see is we get this right now you can see we're actually getting an error right now because we're not we haven't defined the get to Do's Group by column so let's go back into our Board Store like so and I want to go ahead and import our helper function okay and this is obviously going to complain because we haven't got the right value so we're just testing right now okay so at this point now inside of my get to Do's I should see some data here logged out on so somebody says is this going to get executed on the server well actually um we're instead gonna go ahead and I'll drop it a little bit yep no worries the background music so in this point you can see the um we have the get to Do's Group by column mine so this we go here and we simply are logging out so this is actually going to get executed um on the client so you see here we've got the object and by the way this error that you're seeing I've got um oh no that's actually fine to be honest for now that's because we've got that error that we just had set up so yeah there you go so total and you can see this is what came back guys look at this take the dogs out for a walk hey that's what I'm talking about sick right that's exactly what we wanted and you see what I mentioned before there was there was actually more properties so you can feel free to add that in but I wanted to you know I just kept it very simple but you can even add in like permissions updated that collection ID and so forth into your type definition site where you can be sure that you get it back right and I reckon you can even go as far as to add get those exact definitions from um the guys over Opera as well so I just didn't go that extra step right but you can't all right so I want to show you a bit of manual stuff as well so at this point we've got the documents flowing in which is great right so at this point we've got the data now we need to do some core manipulation to you know mess with the data that we needed so what I'm going to do is p dot documents so the data here that comes back what I'm going to do is I'm going to say const to Do's equals data dot documents okay so that's all my to do is now so inside of here this list will be all my to-do's easy as now what we can do is if you actually go ahead and highlight over this models.document so you can actually extend models.document and then if you really wanted to you could do it your typing that way so you could actually go ahead and do something like this so interface to do extends model document and now your to-do class actually has model document inside of it as well so if I was to do something like const a um to do equals something like this then you can go ahead and see for yourself that to do we'll actually have a DOT um the stuff that we wanted inside of it oh actually it didn't do it properly but yeah anyway I need to import it and do that stuff properly I just kind of Rush that step so in this case models.document you would have to pull in correctly but anyway you could do that right so heading back over to our yeah yeah let's carry around so first step I want to basically map through and get the all of the so right now we just have this list right there's no coordination here so I want to basically rearrange this this so it'll become a key value pair where all the statuses are grouped together so all the to-do's all the end progresses all that good stuff so I'm going to show you a nice little map function and again if you find this confusing then be sure to join zero for zakira or just check out some tutorials online but the point is we have loads of tutorials in the course that will explain how to use things like the map reduce functions and so forth right so I'm gonna have a quick little water break and we're doing amazing for time right now we have a lot of work to do so I if you're finding this you know crazy fast then don't worry you can just take your time afterwards watch your replay all right that's my first water break in an hour and a half that's crazy all right let's keep going guys this is absolutely crazy if you still have 300 people across platforms incredible stuff right literally 700 likes inbound somebody somebody get it there somebody get it somebody likes let's go right so at this point we're going to say const columns right const columns equals to Do's dot reduce and reduce is basically an accumulator function so what it means is you basically take you know your array and you're going you're going to reduce it down into another form so even like let's just say a very simple example you've got an array of numbers you reduce it down into a number for the total but we're going to do a bit more of a complex object right so in this case we're going to do a reduce down to a map okay so you're probably wondering oh I don't know how that works I know you do that right so in this case what you do is every single time you iterate over you get a bunch of things so the first thing is you get something called an accumulator value this is going to be the value or the previous value basically that's gonna it's gonna rack up and build up so this is going to be the map object right it's going to slowly grow and then each time we map through we get the to do itself okay so now inside of this function we can do a few things so basically oops look at that so after all of this we do a comma we can give an initial value and this is the initial value that we want to start is is with a map okay so this map is going to have again a typed column and you can I guess you could just say you know you could actually use the the board column the Border definition if you wanted but in this case I'm just going to say yeah new map with type column and column right so in this case now the accumulate value starts off as a new map right so what we can do now is we can access it we can say if there is no so we can access the um the map and we're going to say get to do status so basically what this is doing is this is an empty map right now so it wouldn't have anything in there so this would actually be satisfied basically it would find this first to do and it'll say is there a to-do I might not be like no there is no to do right so in this case what we're going to do is we're basically going to create a key inside of that map so we're going to say account.set to do dot status so what I'm doing here is I'm basically setting the first key inside of that right so I need to say yes and then we give it the to-do's itself so in this case to Do's is an empty array so what we're doing is now the end goal would be you have something like this so you would have something like a object which is going to have I'm not sorry a key value pair so every single one is going to have that for example to do and then inside of to do you would have key value pairs so loads of key value pairs here and then for example this would be all of your like I'll show you after this I'll map it out right it'll be very easy to understand right but this will basically grab all the to-do's together and it creates an empty to do and then once you've done that step once the next time it comes across the status with to do we're simply going to push it inside and I'll show you how to do that all right so here we say ace account or like the accumulator dot get to do dot status right to dot status to do dot status I'm going to say that it is there because it should it will be there because we've literally would have created it here and then we're going to say dot to Do's so it's going to access this empty array to do this dot push and then what we're simply going to do is push in we're not going to push the entire to do in but instead I'm going to create an object out of it right so we're going to say that the ID is pushed in so to do ID the Creator that if I do control space you can actually see we've got already got our perfect functions here as well as in our perfect attributes so we're going to go ahead and add in the title as well so that to do title we're going to add in the status which is going to be the to-do status this again is being pulled in from the back end right now the final one is actually interesting so what I'm going to do here is as I'm pulling it in I'm going to do a nice little spread trick okay and what we're going to do is we're only going to fetch the image here in this object if it exists from the response okay so the way you do this is simple you basically say spread right and then you have a condition so now this is exactly this is actually perfect yeah we say to do image and and image to do image so basically what we're doing is we're saying if the response that we're mapping through has an image because remember some things may not have an image inside right then we're going to go ahead and append this inside so basically imagine it's doing this and then it's spreading it so it basically pops it so you're basically taking this if there's an image you're taking it and adding it there like that that's exactly what's happening if there's an image okay so in this case this is how it works now when we push the information into the database I will be storing it as a Json string of wired value for the image stuff I'll get to that later but for now when we do eventually pull it we're going to need to pass that information back into its full object okay so at that point we simply go ahead and close things off right and then what we do is we return the accumulator function okay so now with all that done what we can do is we can save and I will show you if I simply log out The Columns now what you'll see is we go from this horrible looking thing right the response to a map and you can see look the map has a to-do entry and you can see the to-do entry has one value inside of it which is the record and it has a value with the to-do's inside and then it has everything in so what we've done is we've transformed data so we've taken an array response and we've transformed it into a map and I'm going to blow your mind now by adding another to do I'm going to add a few to-do's here and show you just how powerful this really is so crush the live stream I'm gonna say this is in progress because that's exactly what we're doing because we just broke 700 likes that was smooth don't even realize like like that video now right and then we're going to go ahead and do next great and we're gonna do another one so we're gonna say uh create document and I'm going to do another thing here just like so I'm gonna say um let's just do Finish the build Finish the build and this one will be in progress right so we've got two in progresses one task so that way we can test this out so create Okay cool so now we've got a bunch of stuff in there so if I refresh now you will see that we have a map of two right but I'm going to show you what we actually ended up transforming here so as you can see this is the the app and then what I'm going to do is I'm going to first console log the response so if you see now this is the entire response that we get back so I'm going to go ahead and refresh so the first one is the entire response we get back you see look this is literally what we got back right it was just a bunch of like to Do's from the database all right and there's no you know there's no actual mapping here of really like what status is this and what status is that now what I've done is I've grouped them all together and I've got this nice map so you see my first entry the key is to do the second is in progress and then what we're doing is we're grouping them so now you see the value here is an array of two and in this one there's one array for the to do and then in progress we have two to Do's so if I go inside now you can see I can see all of the to-do's inside so this is called transmit that transforming data and it's really important when people ask about data structures and algorithms and stuff like that this is basically how your you should be you should have an understanding of how to transform data and don't worry if you don't again this is why I have a lot of this stuff inside the course that's where I can teach you at like in-depth level so zero to force that curl we do this we teach you and inside the coaching course and module content we have a mixture of ways to get you to understand this in a really Crystal Clear way so all of this is fairly straightforward okay so absolutely killing it let's carry on so at this point now we have our columns okay now I need to do one more thing right I need to basically say okay now we always want to have all three columns shown but what if I for example now I've got to do and I've got in progress but I don't have anything in done okay so what I need to do now is I basically I'm going to create a little function here which is going to ensure that we always have you know each of the The Columns where they're empty to do array inside of it so it's always going to have a populated empty to do array so what we can do is I'm going to go ahead and get rid of this now we don't need our comments here and I will show you how we do so if the columns doesn't have an in-progress to do or done add them with empty to-do's right because what happened is what might happen is you delete everything and then you need to go ahead and do it so let's go ahead and do this now so I'm going to go ahead and create an array of all of the different typed columns so in this case to do in progress done okay and then I'm gonna go ahead and loop through them okay so I'm going to say for each so I'm going to do an old school map here you can do either or I'm going to say for each column type some type of all of the column types we're going to map through you can do a four each you can do whatever you want so we're going to say if there was an if there was no and that's perfect actually that's exactly what we wanted so that's exactly what I've got written as well so if there is no column so basically in this case remember we had it to do we had it in progress but it wouldn't have found it done so it would have basically satisfied here when it hit done when it looped through then it will basically set the column so there is now a done and then it will show the uh to do it will set a to-do's that way when you map through it won't it won't break it will be it will be able to render out that column all the time okay so now that we have this in place what we can do is the final step is I always want to show them and this is this is kind of up to you now all right in my tutorial I always want to show to do in progress done then you can rearrange it but when you whenever you come on the page I always want it to be in to do in progress done I always want it in that order okay so I'm going to go ahead and sort them in that order right so in this case this would have manipulated that array previously so now we've got all of them so if I was to even console log The Columns now you'll find that we have a always no matter what we will have a map of three all right so let me refresh you will always have a map of three yeah so now even if you've got done you see inside I've done we still have a to-do array of zero so now we've always got all three perfectly like so okay so this is exactly what we wanted now after the columns we're now going to sort the columns right so I'm going to sort them based on the initial order that you see here all right so sort columns by the column type so I'm going to say const sorted columns equals a new map and what I'm going to do is I'm basically going to generate so this is going to be a sorting function again we cover all of this inside zero to full stack here because it can be a little bit scary right the first step I want to do is I want to convert my column entries into a um so there's two ways to do this right if you want to convert your end your your map you can do something called dot entries which will give you all the key value pairs in an array so what we can do is we can create an array like so yeah or you can say array from there's two ways you can do you can say array from or the real es6 way is you basically create an array like this then what we do is we spread out the columns which basically means get all the key value Pairs and create an array from it alright so now what it's done is is it's got all the key value Pairs and then they spread them out and then tell you what that's why I didn't do it last time yeah so array Dot from columns dot entries all right this actually is a bit easier to understand I guess as well right so you've got we're creating an array from all the column entries and this will give you again all the key value pairs uh in an array format right then what we can do is we can use all that we can use array sort of mapping functions to go ahead and do all of our stuff these are all array functions now so now we can say sort now with a sort what you do is you get a B so a b is basically the comparison bar now A B refers to every it will Loop through two items at a time and every single time it does the first time is a second item is B and you can do a comparison where you basically say if this is that and blah blah and then basically you can move around you can sort the objects in whatever way you want the what I'm going to do here is make life very simple I'm not going to do the curly brackets we're going to do something called an implicit return so basically I'm doing parentheses and then because it's a one-liner I'll get rid of the parentheses and what we do is we simply say index of so column types so this one right here if the index of this right so the first value this is the key of the first value is like basically this is doing an um like a string check so it's basically checking if this value is less than this value and so forth and basically what it's going to do now is it's going to sort them in this order so if they're not in this order it's going to rearrange them to hit this order okay so now for example if it fetched all of them in different random orders now or you moved them around it will always fix the order when it refreshes okay and then what we simply do is we say const board so we get the entire board as a board object we go ahead and a board object simply has columns inside of it and then we give it the sorted columns okay just like so and then we return the board so this has been our helper function this is our helper function which gets us all of our stuff that we want so now this will always get us all of the data and make sure that we always have those key value Fields populated with the to-do's empty if there is nothing inside of it to do so we hit save now go back to board saw and you'll see it no longer complains because it is getting a board back that's great now what we can do is we can go back to our board.tsx and over here what we can do is we can control log the board and you can see now oh we don't have the board how do I get the board now how do I get the board from the original Board Store well I need to do you could do the same line again and do you know something like this and board dot state DOT board I guess you could do that but that's you know who wants to do that when there's probably an easier way right so in this case you can actually combine so every time you want to get something more than one thing from the same board store or same store in in the stand you can make an array and you can basically say I want the board I want the state and so forth so in this case I'm on the board and I want to get bored and then all you do is on the return you simply make that an array and you simply say state dartboard and now you can basically have this beautiful set of uh we've got to save the HTML now you can basically pull in multiple things get it back and then we come to log the board just to see if we're actually getting something back simply hit refresh and just like that guys now we have our columns into initial arenda with zero because it has to fetch then we do the columns and as you can see we've got our columns we've got our arrays being pulled through so now we have the columns to map through the objects that will be shown on the screen okay so let's do it yes you can you can do it loads of different ways again you really mess around and do whatever you want I'm just showing you a way to do it right so now we can uncomment this out and we can carry on from the drag and drop perspective so let's carry on with this so we've got the div inside right remember we are now we're going back to the beautiful drag and drop example that we were talking about earlier so let's head back over to this example and as you can see we've got this situations we've got the drag drop context then we've got the dropable Zone which is this then we've got the draggable elements inside okay so we've got this thing called a render prop so in this case we're going to render out uh every time we run through it you also get something called snapshot so here you can use something called snapshot and that's basically if you're dragging you can change the color and so all that kind of stuff I'm not gonna go too far into it but now what we can do is that map so that column that board sorry what we can do is we can actually say array from right because remember we can't actually simply map through a map as in like literally you can't Loop through a map easily you have to change it to a bot so in this case you say board board columns uh entries so we go through all the entries and now we can map right so now we can say map and then what we can do is Insider there remember you get key value pairs so it's not going to just be like this it'll be like it won't be like something like that it'll be your key value Pairs and what we can do is we can do something in es6 called destructuring so we can destructure the ID and the column and then the second argument will always be the index okay so in this case it's always going to be a second argument there and what you can do is you can wrap the entire thing in parentheses like so and then you have an arrow function and then you can return something that you want to Loop through okay so again just take your time with this step and understand what's happening with converting the board columns into an array or creating an array from them we're then mapping through all of the key value pairs I am destructuring so that way I've got the ID which is a type column and the column which is a column remember that map it was always type column column then we get the index which is basically a startup with zero one two three four as it Loops through then we're going to map through a basically output a column so in this case if I was just to do an example here and do uh let's just let's just start into it let's just do a column okay so this is where our column is going to go now the column itself we're going to build right but it takes a few arguments it's going to take the ID and then we're going to pass through a couple of variables ourselves so we're going to have an ID that we actually need to set it's going to have the to Do's itself which is column dot to do's and then it's also going to have the index itself okay so in this case that way we basically we need to go and create that right now before we hit save and continue on we need to ensure something happens so this div here whenever we have a dropper ball right the first child of that droppable and we when we actually put out something we have to go ahead and spread certain props so what I can do is I can say dot dot dot provided.droppable props and then we also have to do dot dot dot provide um sorry we have to do reference equals provided in a ref okay and this is basically how the drag and drop is knowing what the hell is going on okay so for this column now this will eventually have a arrangement of grid right so we're going to have it on a mobile view be one grid so literally be all these will be stacked up on each other like going down and then on anything past a um I guess a medium screen it will be a grid of three okay so this is where we Define that so here we'll say class name grid grid columns one on a medium screen you'll say grid columns two uh three sorry and then between all of them we're gonna have a gap of five the max width will forever be a 7x on we want to center it all right so MX Auto there you go hit save cool this is complaining because you need a special function here called handle on on Dragon right so here let's just go ahead and satisfy this quickly we're going to say on drag end and we're simply going to create a function called handle on drag end so over here underneath the use effect I'm going to say const uh handle on Dragon right and this one is basically gonna have something called a drop result so this one right here if you in case you're confused if you hover over this you'll see on drag and responder but if you do a little trick here and do e Dash you'll notice you get the type definition you can paste that type definition simply import it like so and then you can get rid of the E so that's a nice little typescript trick if you didn't know so that'll get rid of that so I'm not going to show you we're going to build out this afterwards now that's basically what happens when you let go of a drag and drop operation okay so right now our app is in this weird State because we haven't built the column we've got a lot of things overhanging so let's build out each of the columns now right and this is going to be the dropable and draggable elements and so forth right so I'm going to go ahead and get that done so again we've got a lot to build so we're going to move fairly fast so again this is going to be recorded so feel free afterwards to rewind take your time and go through this afterwards rfce okay so now the column uh it's almost a two hour mark very good and we've also still got 250 people what the hell let's get the likes up to 800 guys the goal is a thousand today I believe we can do it right so inside the column now we're going to start off by saying that this is a draggable right remember if we look again at beautiful DND this is going to be one of the columns is going to be draggable right so we were previously in the droppable which is makes sense and then the column itself is going to be a draggable which makes sense okay Dragon Ball like so okay now inside of here we have the same logic we have it provided and this will have a render right so this is going to render out a div and inside of it we basically do a bit more stuff so this is basically inside of here we're going to render our dropper ball render dropable um this is going to be the internal droppable um section so another nested dropable section for the to Do's in the column okay so that's basically what's gonna happen there oh thank you so much for zad you got the coffee on me I appreciate you did awesome stuff and again welcome to everyone in the news tuning in I see a bunch of new names awesome stuff right so the Dragon Ball now we passed in a bunch of props right when we did this you see these props key ID and so forth so let's go ahead and firstly set up our props so it's in the correct way so those props were as follows it was the ID it was the to-do's and it was the index all right so we're going to Define these type definitions like this we're going to say type is props and then we're going to go and say the ID is a typed column so you see now how typescript's starting to protect us right we've got lots of protection happening here so we're not you know messing up on in in any shape or form it's going to help us correct errors beforehand and then we're going to say this is going to be a type of to do and then we're going to say the index is a number cool right now we pass in our values so this is really nice and then what we do is remember your first child of Your Dragon Ball element should be passing through all of the required props so this one will be dot provided draggable props and then we've also got something called drag handle props that we have to pass through as well okay and then we've got the reference so in this case it'll be reference um there we go Rosanna says I'm digging the podcast I love that I'm glad you're enjoying we have some awesome ones coming up right we have the provided dot NRF so that allows us to that basically tells the drag and drop Library what the hell is happening okay then we basically have to render the dropable to-do's so that section okay so now we're going to do the same essential nesting as we did here but this is going to now be for the next section which is going to be the internal bit so what we did just now before we set up a dropables on for the entire thing and then each of the columns were a draggable element right and then what we've done is we set up a dropable zone for the entire internal column and each of the to do cards are going to be draggable elements inside right so you see how we're working with this now okay so inside the column let's go this is going to have a few things it's gonna have a draggable idea we're going to use the ID that we passed through to do so it's gonna have an index as well and we're going to pass in the index these are the two required props now let's start rendering out the to-do's dropable zone right so here we're going to say droppable and this dropable ID is going to be the index so the index dot to string okay so it needs to be a string value so we can say index and this is going to be type of card like so let's render that out there we go and then we basically do the exact same thing we have a provided oops this is gonna be a jsx block provided and then we basically wrap this up oh God damn it yep I remember I said you also get snapshot oops snapshot so remember when I was dragging one of the cards over to another one notice how it went uh green every time it went like went over it went green what we were doing is we were using a snapshot object to go ahead and tell when you're dragging over a certain element and I'll show you how we do it basically create a div inside anytime that you have this provided you have to pass down and connect that div so what we do here is we say dot provided dot droppable props we again connect the reference trust me once it's set up it's actually really good and it's it's honestly so cool especially on your project tab and then we're going to use a bunch of class names now what I'm going to do is I'm going to give each of the cards or the background of the card a bit of styling right so I'm going to do first thing I want to have some Dynamic values here so I'm going to do back ticks so notice I'm using back ticks I'm going to say padding bottom of two I'm gonna say that he should have a few things like panning of two all around um rounded 2XL so that's kind of overwritten that I guess empty round into XL then we're gonna say shadow small now I'm gonna have a dynamic value and now here what I'm going to do is if the user is dragging right so now I can just dollar sign Open brackets oh sorry we've already done that so I can say snapshot dot is dragging over okay and if it's dragging over the background will turn green yeah so this is really nice how this is going to work and then we're going to say if it's not Dragon over it's going to be a background of white with a 50 opacity so notice how the background is normally a 50 see-through kind of glass View and as you drag over it's going to turn green on the field that you're dropping it over okay so then we've got that set up okay the next step is we're basically going to Define The Styling for the to do and so forth okay so now what we can do is we can say we have a H2 and inside of this H2 I'm actually going to have the ID itself so in this case I'll show you how we do it we say the ID now you'll start to see inside of our app is if we go inside and we refresh we should okay so the column is not defined we haven't saved this file let's save this one let's go over here now you can see look we already have some stuff happening so it's not working yet but it's almost there right you see how things are happening but it's not it's not saving and things like that right but we're actually getting to a point where something's happening okay which is good it's very good right so now what we're going to do is we've got the ID so forth this looks ugly I wanted to say to do in progress the correct way so what I'm going to do is I'm going to create a mapping function up at the top simply go ahead and say const ID to column text okay and this is basically going to have a set mapping of the key is going to be typed column and it's going to Output a string and what I mean by this is it's simply going to be an object of mappings if it's easy to do it should write to do if it sees in progress it should see if it says in progress it should say in progress if it says done it should be a capital D done now what I can do is I can simply pass this through and say just like that and now this will change to to do in progress done that's a lot nicer I prefer that right so now this is this was already getting there it's pretty pretty nice right so we've got the ID to column text and then I want to have the length right so I want to have you know two four three however many to Do's are in there I want to see how many to Do's are in there so now what I can do is I can say to do's oops let's just have it um let's do it in a way where I basically say I'm gonna span an element here so I'll spend I'm gonna say uh to Do's dot length okay so in this case that we got one to do improv uh one to do in the to do column two to Do's in the in progress column right all right so then we're going to go ahead and start this out we'll say text should be gray 500 background should be gray of 200. then we're going to say round it off surrounded full font should be normal we don't really need that panning X I have two padding one of one and the text should be small there we go attack should be small hit save and now we've got these nice little circles okay and I'm simply going to make the two children inside it be flexed justify the space between them um I'm gonna make it font should be bold the text should be extra large and the P2 there you go and the reason why I did yeah that's why so here I did font normal because I don't want that to be bold for normal and just like that look at that already getting there all right looking pretty decent so far and you can obviously customize that however you wish change it up yeah planning y should be tired one that's it I wanted a bit more circular that's it looking good hey nice all right and you see how it look it's in this is exactly how we wanted it to look right So eventually it'll be like really sort of clean now notice how they're sort of swiping all over the place is horrible right this is because we haven't set things up correctly yet right once it's done trust me I look really good okay so now what I want to do is I want to go to the um so underneath my H2 let's change the music up and turn that music all right so the h2 tag oh almost 800 likes let's go Zach All right so we've got a div here we're gonna say space class name space uh y of two so this is going to be um basically all of the to Do's are going to come through here okay so what I'm going to do here is I'm basically going to check though so I'm not going to do the set string we'll do it afterwards here I'm going to say oops that should be space x sub 2 Okay cool so now what I want to do is I'm going to say return inside of here um well I'm not actually doing that yet uh I'm actually going to be doing just the draggable elements so I need to map through them yeah so that's right so I'll say to Do's dot map for every single to do I want to return the following right and then here I'm going to create a component called to do card and I'll show you how we do it but before we do that it's going to be wrapped in a draggable element so this and this one's gonna be draggable okay he's gonna be draggable Wireless again we go back to this same logic we were nested in another dropable element so now we have draggable Okay so we've got Dragon Ball and then here it's going to be the key the key is going to be the to do ID um the Dragon Ball idea is going to be the two idea and the index is simply going to be the index okay inside of it we're going to do our traditional provided render prompt which we are we again we have to use and then we're going to render out a to-do card which we are yet to build okay now this to do card will have a bunch of things inside of it it will have the draggable props the inner reference all that good stuff so in this case I'm gonna just save us a bit of time and pass in those values from that provided down into because eventually the div inside of there will need that so we're going to pass that in as well okay now this is freaking out why exactly because we have this this is here and then we need another one there we go yeah so what we need to do now is go ahead and um yeah we need to basically create a to-do card but before we do that the final step here before we carry on is after all of this what we have to do is something called a provided placeholder now what this does is is when I drag something across to another column it creates space for it otherwise what will happen is you're dragging it over the column and then it's just like there's no space for you to put in the placeholder basically it says if I'm dragging over it makes space for me so it looks like I'm dragging in it creates space it's really nice very nice effect yeah so we got the provided placeholder and then at the end of all of that we're gonna have a button which allows you to basically go ahead and click to add a to do and that's going to be the modal portion of this build afterwards so inside we're gonna have a different button inside and this one is going to have a plus Circle icon all right so in this case let's just hit save so plus Circle icon this will be class name of height and width of 10. so height and width of 10. and in this case the text Gray I don't want it that's fine right so the button itself will will have a few colors to it so let's go ahead and start this up so class name bam uh like so and then the div itself will be a centered button I just want it to be very easily it's going to be no sorry towards the end so items end it's going to be justified towards the end as well of its section right now before you're going to see that that's basically responsible for this so you see how that's got a little Gap and then as we justify it to the end right so let's go ahead and create the to do card and then trust me it's all going to come together real quick and I cannot believe the retention on this video is absolutely incredible you guys are so focused I can tell this is incredible all right we're going to go ahead and create the new component let's go ahead and drop it in so we go and create file to do dot to docard.tsx rfce um we'll pop that in like so and just like that now inside we're going to expect a bunch of props so here we're going to get a bunch of different props come in so I've saved us a bit of time I've already wrote the definitions for them and I've saved you a bit of hassle as well so in this case we've got custom type so you've got Dragon Ball providerable draggable props and then this one drag handle props can either be no or undefined so I've already saved you the hard work of figuring out what's what alright so these are going to be all the different types that we need and then you simply pull your props through okay this will be all the props that come through someone goes I'm coming along that's why I can't thank you as awesome I must have possess Sunny the tech hero thank you man for the effort from Egypt I appreciate you do tuning in that's why I do what I do so you guys are what makes this happen right now this is going to be a client-side component so we're going to Simply say use client right now for this to-do card we're actually going to have a div now remember when we have a provided parent you have to go ahead and pass down the props now like the draggable props in this case we passed it over as a prop through right so in that case we can do it like this then I'm going to have a class name and here I'm going to say the background should be white rounded MD so these are all the cards now by the way I'm styling these cards yeah just so you're very sure uh oh thank you ashcan appreciate it yeah randomly let me say space between all of the cards or all the items inside the card and we'll give it a drop shadow of medium cool right hit save and now what I can do is I can go back and obviously this isn't going to say I'm just gonna say H1 hello I just want to show you for a second let's go back here and fix this up and boom import that at the top and what we should see now oh look at that guys now obviously right now you can see look at that look oh that is clean so right now obviously the the logic for it to stick is not done but right now look at that it automatically gets it over there oh man that's so cool look at that oh clean and look how smooth it is as well guys look this is how you do like a crossover drag Drop Zone sort of situation right I thank you request I appreciate you man so at this point looking really really beautiful right so let's go ahead and oh I've actually okay that was fine yeah I guess I played another thing I've done something about muscle memory all right so in this case to do card now what we're gonna do is head over to the H1 hello we're going to replace that with the actual to do so this is the fun part right now we're getting now we're getting somewhere guys let's go ahead and put this in so let's go ahead and now we're going to pick up some speed so we've got the div inside of here we've got a P tag and we've got the to-do title so to do dot title and look at typescript it's just so nice like this is why we do it because it honestly helps you prevent so many problems X Circle icon is basically going to be resemblance of this cross that allows us to delete a to-do from the screen right so that way we can actually Delay from the database so this is going to have a margin left of five a height of a oh this one gets me uh all right higher rate and then we're gonna have a width of it as well right and then there you go you can see like a little nice little thing and that button is going to be text Red of let's just say 600 or 500 but when you hover over it I want it to be text red 600. and this gives us this nice hover effect yeah and then the P tag itself so the entire div surrounding it all we're gonna say Flex justify between items should be centrally aligned with a padding of five hit save and boom let's get in there guys again this is good I love it when it comes together every time all right and then what we'll say is if there is an image URL right so we're gonna basically prepare for when we set up images if there is an image URL um which we haven't yet set um so right now we don't actually have this and I'll show you how we do that afterwards actually we'll do the image URL afterwards I'll show you why all right um the reason being is we have to do a use effect a bunch of stuff to handle the fetching okay so we need to add image yeah afterwards as far as afterwards okay so that's good all right so now just at this point we've got this down pretty good so we've got different steps that we have to approach now the first one is we need to handle what happens when we drag and drop something on here so let's do that logic first then we'll do the plus Logic for the modal then we'll do the delete logic then we'll do the image thing and then we'll do the search so you see there's a lot of work right there's actually a lot more work than I expected this is what I was telling Jay I always underestimate these builds but um I get carried away and I start building like crazy so quick little water break but we're doing damn amazing let's keep moving we're about to hit 800 likes on the wall break that's what I'm talking about guys that's what I'm talking about let's go all right so what I want you to do now head over to board and at the handle on drag and function this is where we go ahead and set things up all right so handle on Dragon so first things first and whenever you drop so this is basically going to be resemblance of all of the drop interactions so if I drop here if I drop here for example it's going to handle everything so the result contains a bunch of information like the source the destination and the type of drag and drop that I did so in this case what we're going to do is we're going to destructure the result okay and if I console log this I will show you very quickly what is happening Destination type right so now if you see for yourself when I refresh let's go ahead and right now yeah I've messed something up there but we'll fix it afterwards right so now if you see when I drag and drop it shows that the source the destination and the card The Source will say the index of where you dragged and dropped it from so in this case let's have a look again so let's drag to do over so from zero to one so in this case you see how the index was Zero from the Star and we dragged it to an index of one and the board was dragged right if we drag this one it will be a card so you see the card was the type of drag and we're saying which point we dropped it from so in this case if I drag from here to to done it went from droppable ID 0 so this column to 2 over here and the index resembles which place it was in that list right so you can get a little bit confusing but trust me just take time with this I'm gonna move through it fairly quickly but take your time afterwards re-watch it and just really log out things and understand how it works okay but I promise you I can't spend too long on this section but I'm going to show you how it works and explain it the best I can in the time we have right so the first step I want to do is I want to check if the user dragged outside the box like over here if they do that we don't want to do anything period right so Christopher Cole what's up man my G Sunny best feels on YouTube Matt G's always dropping them sick comments thank you so much dude I appreciate you so if the user drags the card outside the board all we have to do is say if the destiny if there's no destination return that means if you didn't drag it to any of these destinations forget about it right so in that case we can basically now it won't do anything period okay so that's the first easy step then what we want to do is handle a column drag so a column drag is basically when I drag the column to the entire column when I drag this entire column like so I want to handle that and then basically do what I need to do from it so the way we do this is we simply say if the type of drag is equivalent to a column okay so if this is the case then what I do is I say const entries equals and I make an array from the board columns entries so basically we did what we stepped we did before we're converting the key value pairs to an array now what we do is we splice so this is basically what I need you to pay very close attention so I already have the source index so where you took it from okay so I need to take from that into that column so now what I can do is I can say const oops okay what the hell is that cons removed entries dot splice Source index.1 okay so trust me the logic I've worked a long time to figure this out but basically what we're doing here is we're taking away from this so if I drag it out of here I'm basically root taking this so this is the removed element I have in my hand okay so now we have that stored in removed okay then what I want to do is I need to splice it into the destination so splicing means I'm basically pushing it in to the destination to the correct destination and then it's going to be in the position the correct position so I don't want it to be like over here like and then it randomly shows here it has to be in the correct position right so I'm talking about the column by the way sorry yeah I completely messed up it should be the column like the exact column that you've dropped and dropped into so the way we do this is we basically say entries dot splice and we say destination dot Index right we do zero which basically means we're not going to delete anything we're simply going to push the removed item into that column all right so now we're basically taking its place all right then what we do is we create a new map of the rearranged columns so now we say we've got the rearranged columns from the more modified so what we've done here is we copied the columns entries into a new variable we modified it because splice is a direct modifying uh function then we stored it into a new rearranged column and now what we're going to do is we're going to set the board stay to that new state and what we need to do here is go over to our board store right so now we need to create a very special function called set board state right so this is going to be a very important function that we're going to use a lot right so what this will do is this will take a board object and it will basically set the state for it okay so we're going to set this date so I'm going to go to my set board state so down here for example I need to create the function for that so set board State and what I'll do is I try and space these out so you can see it's a step board same and this is going to be a um basically the following it's going to take a board it's going to set the variable in a global State okay so then what we do is we basically get that function now in our array so we say set board state and then we basically get it all over here so we say stepboard state state DOT oops sorry guys State DOT get set board State okay so now we have this variable and we can pass in the rearrange columns which is in the correct state so we can say set would stay um and basically what I'm doing now is I'm only change the columns right now remember boards have columns inside of them so what we can do is a nice little es6 trick here we can say keep all the current now keep will keep everything basically and then change the columns field which is the only thing that really inside to become the rearranged columns okay so now what we're doing is we're modifying the state and with that done we can actually persist so look at this look at that oh look at that nice look it works and I hold this value and then I remember when we set things up we actually had it in a way that when we refreshed it set it back to its original state that's clean so nice right that was so clean and now we've done the column part now we've got the more tricky part which is the nested part which is basically how do I move a to-do into the crap one let's take this took a little bit of calculation but I'm going to show you how it works okay somebody says how are you I'm doing really well thank you dude all right so this one I need you to to just pay attention with me stick with me trust me I promise you the pain will be worth it okay so right now remember the source and destination it was only numbers it only said like you went from index zero to index one and so forth so what I'm going to do now is I'm going to basically create a copy and then basically I've slowly like left comments all around the place to help you guys out okay so what we're going to do is this step is needed as the indexes are stored as numbers instead of IDs with the DND library and because we're now using the um as I mentioned because we're now using the um the map right we need to basically convert it over to the array format so now what I'm going to do is I'm going to create a copy of my columns right so what I'm going to do is I'm going to basically create a copy of the columns and then what I'm going to do is I'm going to say the starting column index is the following and the finished column index is the following so watch what I do here so what I've done here is the source dropable idea will go into the columns and get me the correct column right and this one will get me the correct column for the finish and that means when you dragged and dropped in the correct way you're basically going ahead and rebuilding from a zero to the object in your store and I'll show you what I mean by this right so from those values what I'm doing is I'm rebuilding the start column and finish column okay so now if I was to Contour log the start column and the Finish column what you're going to find is someone says suddenly step up and make a framework I know man honestly we'll see in it we have to do it um so now you'll see if I was to go ahead and drag this over here for example you see now how we've got we went from in progress we went from the in progress column to the done column so you see how we've we went from the just previously what I told you before I showed you before the source and destination of zero one two three now it's actually found the columns rebuilt there with the correct arrays and so forth now I have the objects that I need to modify right so I have the start column I have the finished column so now what we can do is if for whatever reason you didn't get the start column or finish column we basically return we're protecting and then if for whatever reason you basically drag and dropped in the same location exactly so not the same position but the same exact location we should then do nothing as well okay so um no Muhammad period all right so Source Disney destination that start column finished basically what is it saying is yeah if I drag and drop and to the exact same position it was in do nothing okay so if the source index is the same as destination and the start column is the same as the Finish column don't do anything okay so now what we do is we create a oops sorry guys uh we create a copy as we say new to-do's equals um start column to Do's right so say start column dot to do's okay so again this is a lot of data manipulation then what I'm going to do is I'm going to splice the to do to move so basically what I've done here is whatever to do I take I am not splicing it from and the reason why we're doing an array destructuring here is because it returns an array the splice function and then we basically destructured to get the individual thing out so whenever I grab this now I've got the to-do moved okay now we've got two cases where we need to manage how and what happens the first case is going to be if we are dragging and dropping in the same column okay so if we do this and you can actually eradicate this but it's more efficient if we do it this way so the start column in and finish column ID right so if this is if this happens you're basically doing a same column task drag and you're not doing it in the same position because we already eliminated that here okay so same column task track else you are dragging to a different column dragging to another column okay so the first one let's handle it so first thing we want to do is we simply splice into the new location in the same start column right so in the same new to-do's the same column because we're not changing column we basically splice it then what we do is we create a new column right so in this case we splice it we create a new column object and then we basically create a copy right so what we're doing this is basically an immutable pattern right so we don't want to always manipulate the initial object so we create a copy of board columns I'm then going to modify so new columns dot set and basically now modifying the start column ID so the idea basically of where I um I'm basically so I've spliced out the to-do's create a new column based on that value and then I'm setting I've created a copy of the map and I'm re I'm setting that ID to become the new column and then what we do is we simply set that as the board State the new board state so we basically say set board state and this in here will basically be the exact same procedure I did before so board and then we say columns is now the new column so columns is now the new columns like so okay so with that said what we've now done is we've handled the same drag so you see that now it works inside the same column so now it's working inside the same column it doesn't work yet for another column you see it just disappears all right so we need to fix that right so right now it doesn't work if we go outside the column so we've done it for the same column so let's get it done for another column now so what we're going to do now is the First Column was fine it was very simple because we just had the start column yeah we didn't we never went to the finished column but in this second case we have the finished column and we need to modify the start column and the Finish column okay so I'll show you how we do it because technically what you're doing here is you're taking something from this column and you're adding something to this column so you have to make the correct changes in each of the columns to reflect that interaction okay so let's do that right now so what I'm going to do is I'm simply going to say make a copy of the finished column and I'm going to splice from the finished column the destination right so in this case now I'm saying that we're going to basically in this one we done it to the destination but the destination was still the same place right but in this case we're going to do to the finished column so they're finished to do sorry and then what we do is we create a copy it's a very same like simple step here same step exactly as what we did previously yeah so this is essentially the same yeah here and here okay and then what we do is we just do two slight changes here so what we do is we say new column new columns dot set the start column ID as new column so this is going to be the new modified value and then the um previous the finished column we set to the uh the new modified finish to Do's okay so you see the finished ID so now what we've done is we've modified the first thing that you took it from and then the second argument here the second one is basically changing this this area so it's changing this and adding the to do that so you see how it removed from there but it didn't add that this is what this is going to do okay then it's very simple we just simply go ahead and um we set the board state to the new columns done save okay and I've also got a function here I'm just checking what I did for that one because I can't even remember what I did for that what the hell is that that is oh yeah okay go ahead so in the database that's changing the value yeah so here we need to update in DB I'll show you all right so I'll explain that so now firstly let's check the Logics we save and we should have everything working if we have I want you to destroy that like button so ready for this yes look at that and it changes the done as well look at that guys absolutely beautiful and look it works just as we expected great stuff as I mentioned before that can be a little bit confusing what we just did but what I want you to do is when you watch your back and code this along I want you to stop at certain points and console log it and really listen to what I was saying and then see for yourself the exact changes that are happening again all of this stuff is really about getting dialed in with the fundamentals of different data structures arrays Maps objects all that good stuff again if you want to go ahead and really learn and master all these things I Do cover it inside of zero to full stack hero so make sure you check it out over at papareact.com and then you can see for yourself why it's basically the place to be for learning all of this kind of really intense stuff right so I want to go ahead and Shameless plug but I want you to go ahead and you know if you do get stuck and you really want to dial in then that's the place where you're going to go ahead and cover the gap of maybe feeling really lost in what I just said versus feeling really comfortable and confident in what I just said okay so let's carry on strong we just finished off really nice with that okay that's really great so now what we're going to do is we are going to um we've got this done so now we've done all the drag and drop stuff hey great stuff all right so now you can see you can drag over here oh that's actually because I've got the horizontal that's fine we'll fix that layer so there you go boom that works really nice I've got a little arrow here because the stock column index of zero I believe I messed that up here where is that start column index board 43 was here so Stockholm index.43 [Music] okay so I think I got an edge case there to be honest with you zero zero one zero one yeah that's fine okay it's okay okay so at this point now what we can do is I want to go ahead and do one more step there which is updating the database so if you notice when I refresh it's not remembering where I put it right so what we need to do is simply make a function that will basically update the database so let's do it right now very simply all we gotta do is go to our board store and this is what I like about the board so as you can actually have more than just State Management you can do other stuff inside there so here I'm going to create a function called update to do in DB update to do in DB okay and this is going to be a function which takes the following it's going to be a function which takes e to do and the column ID and then it's basically going to set the to do to that column ID when you when you pass in that function so I'm going to say update to do in DB and that will take a to-do on column so where am I right now I'm getting so lost okay yeah so update this oh I'm gonna make it an arrow keep it consistent okay and this will be an asynchronous function and then here what I'm going to do is I'm going to say await databases so I'm going to pull in my databases object from upright the one that we initialized earlier and this is where I do something called update document okay so what this will now do is it will update the document and all I need to do here is pass in a few things so the first thing is if you look at this it's the database ID The Collection ID I already have them and the final thing is the document ID so what I can do is Luca says hey Sonny is this report available yes right off this build I'll be pushing it into the repo Jay just dropped the link in the group chat or it's the papa gear repo over at links.popperreact.com forward slash GitHub so all the links are in the description as well so here I'm going to go ahead and pop this in so to do ID and then you pass in what the updated information is so here I'll say title is going to be the to-do title that I want to change and the status will be the status that we passed in so it's going to be the column ID okay so now we've got the correct function done so that's basically the update set then we go up to our board and we basically pull that function in so now what we do is we simply pass that in so update to do and we say State DOT update to doing DBA and then at the point where I had my comment all I want to do is if you were to go ahead and drag to another column that's also why I split it up because if you drag in the same column I don't really right now I haven't persisted the order but you can you can extend it if you want to but I'm only basically updating the DB or making a request to DB if you cross to a different status right so let's go ahead and you could honestly just set it based on updated that you can move it based on that if you really want to do that so now all I do is I simply say update to do in DB to do moved to the Finish column ID done and now a quick check to see if you've done it correct when you get to this point what I want you to do is refresh and to make sure that you've actually changed the state in the database you see this is loaded from the database so if I grab this and take it to done what we should see now if I refresh this should be in the done column and just like that it's done perfect so if we move everything over here now you'll see everything is in the to-do column perfect so that's actually changing on apprise database yeah amazing stuff and also remember what I said about the placeholder you see how it's creating a placeholder for me that's really nice right so it shows you what it's doing uh nice good stuff guys this is awesome now what I want to do next I want to actually go ahead and maybe implement the search functionality before we then do the modal and then we focus on deployment and I think we're golden at that point right so let's go so the next step is let's do such so right now inside of the header.tsx I want to go ahead and because now we can really like Elevate the speed on what we're doing so at this point inside of the header I want to go ahead and set up something called a search string and again this is going to be something which we're going to set up in our board store so let's head over to the board store and we're going to have two new pieces of data the first one is going to be called a search string so in this case let's go ahead and add that in this is going to be a search string okay and the second one is going to be set search string which is the function to modify the search string okay now the search string is simply going to be like we're going to initialize it with a blank value so over here we're just simply going to say initialize with a blank value and then the search string itself is just going to be a very straightforward search string that we pass in and then we set it as straightforward very easy to do okay now what we can do is we can go over to our header and as we type in here just like we would do with something like State we can do the exact same thing with the stand except now we're modifying at the global layer okay so over here now what I can do is I can say const and I can say something like the search string and set search string set stream equals use board store and I basically get the state like so I will go ahead and get my parentheses like so and then here I can say state does search string and state DOT set search ring I can then go to my input field and I can set the value here to that and I can say on change so every time the user types in you can simply set the E dot target.value2 set that Global State instead of something like you stay so to test that this is all working all you need to do is simply start typing in and if you're still typing in you've done it correctly right otherwise it would freeze there and it wouldn't work so now we're setting up every time I type in I've got access to this at the global level now so if I need it somewhere else I can actually go ahead and change that accordingly right and we also got to do API GPT stuff so it's crazy we're almost not a thousand likes but I've always a 900 just go honestly we're going to hit a thousand ten I know it right so now what I want to do is implement the logic to filter out okay so where I do this is the board I believe it's the board or actually I think it's a column uh I do out I think I do at the column level yeah I do at the column level so each at the column level so what I want you to do now yeah column level I thought so makes sense all right so at the column level now I am going to go to my column and what I want to do is I need to basically first get those values right so I need to get the search string itself so let's go in there right now so I'm gonna say const search string and I've done an array here because I'm going to need that afterwards use board store and I'm going to get this state DOT search string there we go and then we've got the search string here and then what I can do is when I actually render out the to-do's there's a lot in the end of the day there's loads of ways you can do this I'm just showing you one way okay so we're here we're doing an implicit return all I do is I simply add parentheses around the entire thing and all that was doing is basically that right so that fixes it if you don't do that but then what I'm going to do is I'm not going to render it if how can you learn notification via Squad I'm not sure what you're talking about um the hero I'm gonna say if the search string exists and if the to do title includes the search string okay and what I can do is I can actually do title dot to lowercase to lowercase uh to lower case there we go includes the search string to lowercase that way you never get some annoying Edge case then I want to return no okay so if I if that comes across then I would simply return no so this is basically not showing it if it's there right so now what I can do is if you see live look at that oh dogs and build nice but you can see how each one is still saying one one one so I'll show you how we can get rid of that so already we've got that bit done so that walk there we go stream done right because this is local there it's fine to do it this way it's really not that bad right so now for the count again I'm gonna do an inline I'm going to show you a relatively cheeky way of doing it I'm going to say here where we show the length and we're going to expand this and say if there is no such string okay then you should show the to-do length so very simple if there's no search string show the to-do length else I want to show um the follow-on let's say to Do's dot filter and then I basically I'm going to map through all the to-do's so to do to do and I'm simply checking if to do dot um let's see to do title so basically the same thing that I just did before yeah to lowercase there we go so uh why have I got this issue now so to do a DOT length yeah that's right okay one second let me just write this out so we've got the two dot title Dot includes search string there we go I don't need this part and here I'm going to do the same to lowercase check to prevent it from happening and yes you can honestly go ahead and you know make this all like refactored and really clean this over this Amazing Project man thank you so much dude so now you can see we've got the so if you pay attention to these ones if I go and say live right so you see that it shows only the the number only counts up for the one where it's in so build and so forth you see now it's a zero zero but one all right it's nice perfect right um yeah I'm not sure but I think it means you shocked yourself like on this project uh Germany announced what is up so this is looking good so far so we've done the search so just like that we've got the search right so yes um ashcan it's a very good point and I was literally thinking as I was building um but it came to the point where it came in my head today so yes ideally what you would want to do here is do something called a debunk right debunk sorry a debounce um well basically as soon as the user stops typing like after like 500 milliseconds or 200 milliseconds then it executes search right now it's on every letter which can be very intensive but you're just not seeing it but yes you would want to do something called a d bouncer on the search that way it doesn't always happen or you can do it on search where you hit enter yeah but I just wanted to show you now I'm doing it perender which probably isn't the most but very good for noticing that yeah so at this point um but that's why it's good having this community chat honestly it's amazing right okay cool so next up let's move swiftly on let's do GPT and then let's do the modal okay so GPT is up next and then we're going to go ahead and do this modal for adding a new type mask and then we're going to add the images and so forth right so we've got quite a lot to do so I want to move fairly quick okay so GPT let's go ahead and do it so first things first I want to prepare my endpoints so that way we can work in a fast fashion fashionable way so at this point inside of the app folder I can create the new API folder right so this is a new nicer API that we can use right and don't worry if you're confused it will take time you know you can watch us back in the replay and everything right so in this case we're going to say right now we're going to create this bit where it says hello Mr Sunny welcome to the to-do app here's your summary you have four to-do's two in progress three done and so forth right tsuki Singh says I'm a full stack developer Australia you're doing an amazing software thank you so much dude I appreciate you guys to the moon and back so thank you so much for that all right so inside of here I'm going to create an API endpoint called generate summary and then inside of there I'm gonna have a root.ts file this is the new syntax for um the new root in the next js13.203 I believe right it came in right but that's how we're basically doing it now so we've got this really nice and you can basically choose if you want to have a post or a get or whatever case right in this case we're only accepting a post at this endpoint so this will be forward slash API forward slash generate summary okay so now 13.3 there you go thank you papicha right so what we're going to do is we're going to basically pass in in this request the to-do's in the post right so this is going to come through here then what we can do is you can log out for you know if you're debugging it you can log out there for example and then we're going to we're going to basically communicate with open AI communicate with open AI right so GPT so in this case I'm going to show you how you can do it now you can use gpt3 for Turbo all that good stuff um and in this case so we're gonna actually go ahead and install open AI right now so what I want you to do is basically go here go to open AI API and then go to the API reference okay so what I want you to do is you have to create an account right with open AI I'm going to do npm install open AI into our project so let's do this command J go to the second terminal npm install open AI I've now installed it into the project then we have the authentication and all this good stuff so you can ignore this for now what I'm going to do is we simply now we have to add in a process.environment.openai key so I'm going to show you this one all right so what we need to do is go to our environment.local file and I'm actually gonna add in something here so let's go to our environment look file I'm not going to show you the screen because I have all my keys here right but what I want you to do because I don't trust everyone on stream that's the truth I'll be honest I've learned my lesson in the past so I've hidden all my keys for a second so keys are down here we're remaining keys are down here so I've hit another keys for a second oh papa found that deserves a like all right oops okay so now in the open AI this is so stupid I have to do this but the keys are down there right they're all down there but the open AI API key so I need an environment variable here so what I want to do is I'm going to go to our personal view API Keys now I've already I've actually set a billing account here so I'm actually using this for a few things pay as you go I believe you can use a free amount on the turbo 3.5 gpt4 is paid um but I believe you can use a free one but in this case I've added a billing account you can do it for yourself it's very simple and honestly I think I was I was like going to town on this thing and I think I spent like what was it yeah 49 cents so honestly it's really not a problem right so I was going crazy on this thing and then I did that so yeah 49 cents is honestly after going crazy at the thing so I'm going to create a new secret key here so I'm going to click this and I'm going to name it so in this case I'm going to say this is called it Trello YouTube Key YouTube key and I'm going to create a secret key all right so I'm gonna basically go ahead and do that right now and I'm not going to use this key but I'm going to show you what we'll do right so you can create a secret key here and copy it right so you can copy that key now I'm going to delete this key because you guys just saw it but that's basically once you've copied that key I need you to go back to your code and paste it in now okay so I've already got a key that I'm using so I'm going to go ahead and paste it in right now and then I'm going to pull all and I'm going to pull up my my environment my variables and then there's so far so I'm pulling on pulling that in off what I just had it on the screen it gets tricky guys trying to hide all this stuff all right so now I've added in my API key so you should do the exact same thing so you should have four open AI key open AI API key and so forth okay save and close okay now I have my key like everything's up cool so now what I need you to do is go over here and create a new file called open AI dot TS at the top level at this level I'm basically going to create a config for our environment right so in this case this is how we're going to go ahead and configure our API so we do a very simple import we do configuration equals new configuration pass in the API key like so then we basically create an instance of open Ai and we definitely we export it so now we're using the same instance every single time yeah that's exactly how I felt and then here we're inside of the generate summary now what we do is we say const response cons response equals await open AI okay so we do the import from our open AI dot create chat completion all right create chat completion and then here what I want you to do is you can pass in the following information right so the first few things are I'm going to use GPT 3.5 but you can so I can right now I've got access to gpt4 so you could do that the reason why I recommend you don't is because it costs a lot more to run gpt4 and that's my honest truth and if you're doing this as a portfolio piece I'd highly recommend you don't unnecessarily add yourself that spend there's no point really unless you're really demoing this to like a bespoke user or something and then you have the messages array okay so these are the messages that you want to go ahead and send to GPT so the first one is going to be a system message Indonesian house was up so the first one is a system message and this is basically telling gpta I want you to always do this so when responding welcome to user as Mr Sunny so you can say welcome to use as Mr Jimmy Mr J Mr Noodle Mr Sota all that good stuff yeah and GPT is also slower yes and say welcome to the Papa Farm to do app limit the response to 200 characters okay so that's fine and then your second one is basically I'm pretending to be the user okay so I was like Hey provide a summary for the following to do is count how many to Do's are in each category such as to do in progress and done then tell the user to have a productive day here's the data and then we do basically Json string of Fire like so okay now once this comes back you get a response from chat GPT right and what we're going to do is we're going to destructure the data from the response so from the response okay oops from the response so that's great right so once you've done that step what I then want you to do is you can actually go ahead and log it out so I'm going to show you what I would do for debugging purposes is you basically want to go ahead and pop it in like so right so I'm basically say there is there and this this is what I would recommend when you're getting started because it can allow you to debug see what the hell is going on and basically the first response that comes back from GPD remember I'm only doing n equals one so it's only giving me one response back data choice is zero message in this case it will return the message back to us okay so now we have the API endpoint done so the API end points down we have our API key right so this entire route is pretty much set so now all we need to do is make a call right so I actually forgot how we did where I did that so it was in the header I believe yeah so the header is where we're going to do this so inside the header what we're going to do is we're basically going to have a fetch suggestion right so you can use use that subur as well you can use anything here I'm just going to show you how you would do it in a typical use effects fashion okay so here we're going to go ahead and say I firstly need access to the board all right so I need the board here so I'm going to go ahead and get the board so I'm going to say state DOT board and again you see how nice like the stand is right it's really easy once you get the hangover so we're going to go and say use effect right I've imported it from react and then we've got the dependency array and inside of it I'm going to be using the board so I need the board now I'm going to protect so I don't want to fetch a suggestion from chat GPT if the board columns are zero so if board dot columns dot size is equal to zero and you're probably wondering its size well since when was that in there already well no this is a map remember right this is a map so it tells us the size as a function so if it the size is zero then we're simply going to return yeah and then what we're going to do is we're going to set loading to true so um in this case I'm going to have a local piece of State here for the loading okay now because I don't necessarily need to have Global State for the suggestion in my instance I'm going to have a loading piece of stay which is going to be a Boolean so this is basically just preparing it I'm also going to have a local suggestion now if you want to you can lift this into you know a used AI state or AI store or something but in this case I'm just doing this it's local it's fine yeah so I'm going to set the loading to true and this is again a reason why you can use user use SWR would eradicate this for you so yes you can use it um and we'll say const fetch suggestion Funk right so if you want to do anything asynchronous you have to wrap it in a sort of asynchronous wrapper function so then what we do here is we say const suggestion equals a weight and we're going to create a helper function called Fetch suggestion which would take oops no that's a recursive we're going to take the board right so we're going to make this function which accepts the board as an argument and then when we get the suggestion back we'll set the suggestion and we'll set loading to false and then what we do is we simply execute that function okay so let's go ahead and create this function now so inside of our lib folder I'm going to go ahead and create a file called Fetch suggestion.ts right good morning from Mexico Papa Farm a Nigerian house as well let's go uh negoian says let's go another detailed tutorial huge thanks from France I love you guys honestly international Man it's so cool guys we're so close to 900 I really want this build to get over a thousand likes in this life so let's go let's get over a thousand right so um I'm gonna go ahead and create a function yeah we've done it so here what I need to do now is I'm gonna go and do the pharmacy const fetch suggestion equals an asynchronous function like so and it takes a board object sorry so it takes a board like so okay now what we're going to do here is I'm basically going to do the following so I'm gonna get the to-do's from the board but in a way like so so I haven't created this function yet but right now we have a map object now I want to make gpt's life easier I want to format it before I send it to the API whereby I literally strip it down to the amount of to-do's in each so it basically is very easy for GPT to figure out you can go ahead and ask GPT to figure out itself but it sometimes messes it up and I'm just going to show you a lot of transformation in this in this video okay so what I want to do here is I basically will create this now this will do an a API call afterwards and we're basically going to pass the to-do's that we have formatted after in the body right once we get that back we're going to go ahead and do the following we're going to pass the response with reds.json that's the GPT there we're going to get the content from it which is the response the GPT shouts us and then we're going to go ahead and Export default um first suggestion now we need to create this helper function format to do is for a AI so inside of here format to do is for AI dot um TS and this one is basically going to be a function that looks something like this right we also have um Hassan says hello from the UK currently working whilst watching the awesome stuff you can ask akil's got the positivity because you get a million views for sure I hope so that's it exactly man um I was thinking somebody's taking you add subscriptions and stuff yeah I will definitely do that in a in a different build thank you for the suggestion all right Jay's always taking note of them as well so it helps out so we say const to do's what I'm gonna do here guys is very straightforward I'm basically creating a copy like we've done previously from the board column entries right so I've got an array now version that I can go ahead and do it now remember what I said right what we want to do is so I you can do it two ways right this first function will reduce it down into a flat array so it will basically this first one will reduce it down I'm going to keep it very short to kind of keep it simple but this one will go ahead and make it a flat array which will basically have the key so it'll be like to do in progress or done with the to do array attached to it or array of to-do's attached to it that's good and you can send that that itself to um to uh GPT right you can do that I would recommend you make it even easier for chat GPT and you basically do the following where you basically reduce it to Key and length right so in this case what I've done here is I've taken the flat array and you can probably do it even simpler than this right you can do it simpler than sorry you don't have to have this intermediate step but what I've now done is I've just made it so you've got your key so this will either be to do in progress done and then it will literally just be so imagine you've got an array of three here and it'll say to do two in progress one done zero that's gonna be the arena so it's a flattery right so it's a very easy array for chat GPT to figure out the hell's going on right so that way it's less likely to make errors because I did trust it initially to be like oh yeah you know figure it out and it kept making mistake so I was like ah it right so screw it okay so in that case um so I'm gonna go ahead it slips out sometime my bad all right so let's go ahead and import this and now we've got the to-do's like so so if I console log the to-do's what we will see when we do this I'll say formatted to Do's to send well I'm just going to go ahead and do something like that for now and just as a debug message okay now after that's done we go back to our header and we simply import the fetch suggestion okay and now we have our suggestion here so what I can do is actually inside of my header where we previously had summarizing your tasks for the day I am now going to basically extend this and modify this so I'm gonna basically firstly make this class name um back ticks and then all I need to do here is basically say if it's loading I'm gonna say if loading if loading and animate Jay's laughing yeah I know Clips so if loading then I'm saying anime spin okay and this is freaking out why exactly um oh yeah so in this case loading animate expensive Wireless loading it'll spin the little head all right and then what I'll do is I'll say if it's now got a suggestion it was it will show the suggestion otherwise it will simply say summarizing your task for the day so now what we should see is it all come together nicely right so the GPT is summarizing your task for the day oh there we go and then wait for it let's see if it comes back with a summary is it gonna work first time is it gonna work if it does smash that like button guys they even done a quarter to the back end let's see uh let's go to this one you can see hello welcome Sunny oh it is but it's not saying it so let's debug what the hell is going on so let's go ahead and refresh and let's see for ourselves for my attitudes to send you can see like this is what I was talking about it makes it very easy so it sends back that in that object and then we can debug it I'll show you how I debug so that so now oh yeah look at that hey welcome Mr Sunny welcome to about you're currently have one task to do one thousand progress and one task is already done thank you for keeping track of your tasks have a productive day and if I go ahead and do this because it's attached to board it will go ahead and regenerate the query so GPT is summarizing your thoughts it's an example guys right so now it says there is one task typically a zero toss in progress and two tasks already done nice if I go ahead and pull everything over there so in this case we've got this one let's see if I dupe it up it's basically going to make several requests but it's fine man you've got two in uh two to Do's in progress zero and down one keep up the good work and have a productive day ahead and if I go ahead and do this we should see three interviews and none in in progress and done look at that guys pretty cool right pretty cool right so let's go and see obviously you can make it whatever loader you want I've just done it very simply for now uh one I'm live I guess it's always being a bit of a headache but in this case dizzy gonna see it where is it so that you see where we're logging out right you can actually see for yourself where it's happening honestly the demo gods are just against me right now but it does work I promise you uh okay so that actually was a weird failure let's try again there you go okay so it's a few edge cases but for the grand scheme of it it works right so in this case there you go so now what I want you to do is go ahead and obviously you can handle negative cases if that was to ever happen sometimes GPT can you know it can error out for some reasons right so um five fat French initially has an auto deduping function built in it does you're correct yes so um yeah you're right actually but I'm saying if I was to do this like drive it crazy now it's making several requests all over the place and what you'll find is it will it will pop in in a second so you see that it pops in so that it pops in Pops in Pops in so it actually I mean it came to the right right end point but that's what I mean right the spinning user icon is everything I know it's so good so in this case look we're making good progress guys right so I guess the next thing that we have to naturally do is to delete let's do the delete first then let's do the modal and then we are virtually at the end and we're going to deploy this thing so Jay I thought this was going to be a two-hour build definitely definitely more than I anticipated we got this right quick water break and then we're gonna power through headless UI is this build like you know is this gonna excite them I'm I was wrong you guys love this stuff I love it all right so let's go so at this point now for the delete function right so we're gonna go over to the to do card boom like so and then here so the to-do card let's go ahead and do the X Circle icon so I want to make it so that way when I do the X Circle when I click on it it should delete the task right so I'm going to create a delete task function inside of the board store and as I hope you can see that you can do a lot more in the board store than just simple manipulation in your data right you can actually have like fully functional things happening here so what I'm going to do is oops is I'm gonna go ahead and have the um thank you so much you're welcome dude so in this case delete task I'm going to create a function for it so here delete heart script so this one here is going to take a task index a task to do and the ID itself and then what we're gonna do is we're going to manipulate the the database in such a way so in this case I'll show you how we do it so we'll create a delete task function and this will be an asynchronous function so I've got the signature here to save a bit of time so delete task is going to be this like so oops like so and then inside of here I'm going to make a copy of the current um current map and this basically get a getter will give me access to the current state and the way we get that value is you actually go up and up to the point where we had set and you actually get a second argument here called get simple as right so here we have two columns yeah and then once you have the two columns we're going to say we're going to delete from The Columns right so it's very simple actually all you do is you've already got the ID of the the tasks that you want to delete so it's fairly straightforward so we go into the column itself the ID of the column then we go to the to-do's and we splice the task index the current to do out of it so what we're doing here is we're changing the existing state we're then going to modify it so it seems like an optimistic update if that makes sense right so basically what we're doing here this is all on the front end so we're basically just spicing it and then we're replacing the board with the new columns so this will basically show on the front end there's a media okay and then what I will do is I will basically have the following involved so I'm gonna have a delete uh for the image as well right so if there is an image so I'm going to import this from store storage that we set up earlier from approach if there was an image inside the to-do it will delete it from the storage bucket so this is how you delete from Storage bucket so if there's an image on that to do it we'll delete that image as well and then I'm deleting the actual document itself so this is how we do it okay keeping it locked Nairobi Kenya Alex thank you I appreciate you dude all right so we've got the delete task function done so now we go to our to-do card let's go over to the button here and here we'll say on click right so on click equals and this will be delete task right so what I can do to make this actually a lot smoother is I'm gonna have a uh the following so I'll have forensic parentheses like this Arrow function delete task and then this will take in the index the to do and the ID okay and the delete tasks we have to pull in from our board store so this is going to come in from we only need one thing so I'm basically just going to make it a simple straightforward pull in like this so we import the board store and we don't need the array because we're only ever going to use the delete task inside the to do card at least okay so now with that said what we're doing is we should see so I don't have to go to Upright to show you how this is going to work basically if I delete this you should see a UI change so that UI change was the local state now if I go ahead and refresh you'll see that it's no longer there from the get-go which means I actually deleted it from upright right and I can promise you it did it because if I go to Opera and I refresh we should see two to-do's here instead of three and they should only be in progress there you go perfect right so as you see everything is working really nicely the way we want it uh this is a an old localhost window that's why I said right cool so now the next up what we're going to do is the Headless UI integration so headless UI is this beautiful pop-up and this beautiful pop-up is going to have a bunch of things involved in it so headless UI is actually a really great Library it's basically built by the guys from tailwind and they're fully accessible UI components which means when you're on this screen if I click outside it closes it if I if while I'm typing in here if I hit tab I go to this part if I hit down and up on the Arrow key it goes through and then if I tab through it goes to the image if I hit enter it opens up the image picker then it will go ahead and show this I can tap hit enter adds it to do so you see the point if I hit Escape at any point it closes the model so this is what we call accessible right so this is what we're going to basically be building so what I want you to look at is the dialogue the modal that's what we're going to be doing so this is exactly what we're essentially doing here right so we're going to go ahead and npm install headless UI react okay so we're going to go ahead and install this command J bring this in goes like this and do the following and then while that's happening I'm going to go to my API generate summary and I'm just going to stop logging everything out because we don't we know it works now I'm going to keep our code a bit neat there we go that was more of a debugging step okay and then what I want you to do is you can see the example here now I don't need to basically dive so far into this because their documentation is actually fairly pretty like it's pretty good all right so what I want to do instead is I want you to look at this example and as you can see they've got this dialogue and then you've got dialogue panel title description and then you can basically build it out accordingly now I want to go ahead and use something called a transition so there's actually a transition here so this one right here so you've got Transitions and then you've got dialogue panel and so forth right so we're actually going to be using the transition and we have the transition child as well so it's this example right here so if you scroll down to Transitions you'll see this block of code and again the reason why I'm showing you this is because it saves you time because you don't have to do it all yourself right so what I'm going to do is as a step one I need to make a new function called a modem what I'm going to do here just to make life easier is pop this onto a new screen like so so we can kind of scroll between it so I'm going to create a new component called modal.tsx rfce to pop open our model guys we just blew over 900 likes Jayden tell me what the hell that's crazy oh my God we're near a thousand likes there's goal that's so sick oh my God right so now we've got the model so what I want you to do is I want you to basically grab this block okay so grab the entire block right so we're going to be used to using so I want you to pop that in and also at this point you can really yeah it's okay I'll show you pop it in go to here my dialog will become modal okay and as you can see that this is going to be a client-side component so this is going to be used client okay so to save us a lot of time right because that is honestly we're basically doing the exact same thing that they're going to be doing except we're going to refactor it so the state of the modal is stored in the uh use modal store which you haven't yet set up okay so right now we can't determine when this is open or not right right now it's just a random bit of stuff that's going to be there so I want to basically refactor this a little bit so we can do something cool with it so right now I need you to export default model so we can access this object that's cool and then I'm going to create a new store now which is basically going to keep track of the modal stuff so in this case we've got broad store but we can do another step and we can have something called the modal store so here I'm going to say modalstore.tsx.ts sorry and then I'll show you in short what we are going to do this is the entire store we've got the state there's three things inside of it is open and then we've got like uh open model closed model Master oh my God how are you able to go for three hours non-stop honestly it's practice it'll come with practice sorry yeah then we've got the use modal store here create the model state so it basically pops open here and then we initialize is open by default with false because we don't want the bloody mode to open straight away then we've got openmodel which basically sets it open and we've got closed models it's just to false right so basically in a nutshell that's how we're doing it now I can use this the exact same way as we were doing it previously right so honestly I'm not joking if you want to learn how to do all this and kind of you know get on fire like that level we I honestly ask people in like by picture in the community chat they're trying they're literally in the chat right now this is how it is inside the papa Farm in the coaching course in the community I'm teaching you this stuff every single week on coaching calls so there you go guys all right so ask yourself that's why I recommend you join zero to full stack hero second link in the description join us at the best your best family period of developers right lifetime access is amazing all right so now here we're going to refactor this from that Year's open to we're gonna say um const and yeah we're going to say const I'm gonna say hey is no sorry uh I'm getting so blank here one second yeah cons is open is open and we also have a closed model inside of here close model from use modal store State and then we basically need to get the two things whether it be state DOT is open and state.close modal parentheses close we can then get rid of this and as you can see is open is already working the way we want it but on close all we need to do is simply say close modal and that simple refactoring allows us now to basically use Global State instead of the state that they've used right you can feel free to take a look at all their Transitions and stuff but right now we're just going to get this set up right quickly yeah so on the to do on the column now we have the plus the green plus which was here plus Circle icon so on that column I want to be able to open the uh the column when you click it okay so what we're going to do is we're going to go up to the top where we have our Imports and I'm simply going to go ahead and pull in the open modal from or use modal store now simply put all I have to do let's go over to my plus Circle icon and on click I simply pop in open modal so what this does is when I click the green button now it will open up the model now as you can see I think I need to just change one more thing I believe I think we're good actually yeah so let's go ahead and try it out okay so let's go back over so now when I press my green button so let's go ahead and make this full screen green button let's refresh I don't think I'm rendering my Moto anywhere though that's the thing yes I'm not rendering the model anywhere so I think I have to play it yep yep there we go so my bad uh don't do that uh of course the model is not actually rendered anywhere yet so what we've got to do is where we render the children at the top top level I want my model to appear right so modal like so you can have nested models whatever you want to do I in this case I'm doing it like this C1 modal okay and then now what we can see is if I click on plus oh we get a deactivate account right and obviously that's not looking very pretty so I haven't got the styling here so I'm going to show you but as you can see it's almost something it's something it's almost something right but you can see here like I've got if I press Escape my model is opening and closing so if I click I can click out I can press escape and it's there so let's get the styling done now as well right so let's get the The Styling sort of nailed in so we can make this look beautiful okay so I'm gonna go ahead and show you how we can change this entire thing now so the transition we're going to say up here oops sorry um so a few changes need to happen so transition should be up here okay the dialog is going to be um on close sorry that's my bad and then we're gonna have a uh This is Gonna render as a form okay this will be a form that we're going to basically pull up right and then we've got a class name this is going to be relative relative and this one's going to be Zed of 10 because it should come in front of everything okay we've got all of our Styles accordingly we've got the fixed in the set and I'm going to change the div style here right so this div I'm going to change it to be the following so I want to have that one instead fixed instead black background black with the opacity 25 so it basically dims out the background a little bit yeah the background and then where we've got transition child so here so this is where mine's different to this yeah so I I can't remember where I got my example from but I modified it heavily um I believe it was styling the dialogue yeah it was a mixture of this so if you go to styling the dialogue you can actually get the Styles right so yeah I actually had this in there as well so what you can do is on styling the dialogues I kind of want to show you so you can just copy this as well so right here so I want you to grab this one with tech center P4 I'll tell you what I'll tell you what I did I'll do it this way so let's have I'll show you what I've done and you can just pause the video and just add it in yourself that's that way you can you won't miss out okay so on the transition child fragment I want you to go ahead and just pop in the following so see this div so we've got a fixed intercept and then I need to go to the surrounding transition child so when I mean surrounding transition child I'm talking about here we've got two why have we got this we're gonna need this one we get that one get rid of that we're gonna have a div after this one so after this transition chart we're going to close out the div we're going to close out this div hit save okay and then inside of the transition child we have the following so yeah that's correct no dialogue form yes okay that's correct okay I now know what we're doing yes all right so mixed up for a second so you want to have a transition child for the backlog backdrop yes that's right so you wanna one transition child with that background opacity and then your second one is for your container which makes perfect sense now because this one will be the one where you basically have the panel and everything displayed that's right so then we have the dialog panel okay so the dialog panel now is going to be so what what I would suggest you do is I'm trying to find the best way to explain this to you so let's have the dialog panel first okay so this is a dialog panel and I've I've applied a bunch of styling here you can feel free to just take your time and copy out then we've got the dialogue title and I've started this out for you A lot of it is all around making it centered all of that good stuff okay so here at the top so I just want to show you we've got the ad exhaust button and so forth and then I'm gonna have a div with the ability to add some information inside as well I'll add that one after this but right now let's just test this up so let's go to Trello 2.0 clone let's go ahead and refresh and that's hard add in so you can see there we go there we are that's another spell so one of the transition chart was for the backdrop the other one is for the center that's exactly what I wanted yeah and now we are basically gonna go ahead and add in the input field and all that good stuff so what we're gonna do is we're gonna have a input type of um set task so new task input so this one is going to be the task input and this is going to be in the global store because we need to know that beforehand we need to have access to that so I'm going to add that in Here and Now new task input we're going to create a piece of State inside of the board store so let's go into Board Store and let's do it here so set task input so new task input is going to be here like so and initially this will be a blank value and then we have set new task input and set new task input there's no reason why I'm putting it wherever I am you can honestly mix and match them so I'm going to put this one down here just separate some of it as you can see yep sent new task input and then go down here and this one is basically going to be a function like so so it'll be just pop it in there so this one's basically takes input sets the new input done okay then we go here and we need to import them in from the board store so that's the modal store so now we need to go ahead and grab it from the um board store so uh I need to get a bunch of stuff actually from there so let's go ahead and just add it in one bonds with your coins new task input new task input set new in task input and we basically map it accordingly like so uh it says it's not there that's interesting what have I not done so oh okay use a board store see typescript Saves the Day and then that will know all right so this is looking great guys we're almost at a thousand likes let's go oh my God right so now you can see as they enter a task so that's great if I go ahead and do at oh look at that nice if I type out now you'll see it's part of the global store so it's still there right so this is looking great Marcus says goat that's what I'm talking about dude all right so now we've got that that's looking perfect so the next thing is we need to create this radio group right so this radio group being here I need to have this really nice group yeah so we're going to create a component to handle all of that right and that's going to be in global State as well so it's gonna be a radio group radio group I'm gonna call it the task type radio group okay and again these are all coming from headless UI so I've got examples and all that good stuff so again if you're wondering how did you get this code blah blah blah one it will be in the papa repo and two the documentation and have this UI it literally has these examples so you can take them okay so I'm gonna go ahead and make a new component air called task type radiogroup.tsx sorry my bad or TSX right rfce and then what we want to do is basically go ahead and create this so uh I've actually got an example let me see if I can show you the example so if we go to headless UI and we go to Radio group here so you see this right this is an example very similar to what I've done right so here you've got your example and so forth so I want to actually go ahead and change it to what we have so uh you know that's great I'll show you my one instead let's do my one um [Music] so what we have is I need to create a type of all the different options are going to be available to us right so the first thing is we've got the three types we've got types is an array and it's going to be id2 to do name description and the color the color will represent the color and you've got the title description and then the ID and that's going to ID is going to correlate to what we go ahead and map okay you can you can go ahead and do that yeah so the UI looks seamless yeah it's really nice honestly yeah so now we've got this looking pretty soon like solid and then this will actually be a used client component because it's already rendered but by default it will know that because it's being rendered in yeah the first the rafc does a react functional component okay then what I'm going to do is pull in the use board store so the task type but now what we're going to do is we're going to store the user selection so this we're going to refer to in the board store as task type right so new task type so what I'm going to do is I'm going to set it up for us so we're going to use board store so I need to create a set new task type and new task type inside of our board store so let's go over to board so go to the top both a new task type will basically be I believe it is a typed column yep so it's going to be a typed column and then we've got this set new task type which is going to take a column ID like so okay now for the set new task type we're going to have a very similar approach to what we previously did was the other one just put under there okay and now you can see we're good so what's freaking out here new task type oh yeah I need to give an initial value so if we go to the top here boom like so new task type sorry there you go and now this one's freaking out because we do not have a new toaster oh that's because it needs to be my bad it needs to be one of these so to do so we'll start off with the to-do Top Value so that's great now we've got the values working over here so now we can hook it up in the way that we expect it to so what I would recommend is you can honestly go ahead and take this and like basically change it up as you need it but what I've done is made your life always easier so we've got a I'm gonna have two divs so let's just take this out the equation and I'm going to have two surrounding divs and then I'm gonna have another div here okay and then in that middle div it's going to be where we basically Nest all of these options right now inside that middle div what we do is we have something called a radio group right so in that radio group I'm just going to keep listing out so radio group we have like so we import radio group from let's go here from headless UI and as you can see we've simply on the change of the radio group selection it will modify it okay and then headless UI handles all their complex stuff there you know they're really kind of cool quirky stuff so inside of there we're gonna have a div yeah and this div will have a space so class space y of two now here we're going to map through all the types okay so all of the different types here we're going to map through so this is quite a big chunk to be honest um what I will do is I will show you the entire I have two options here I want to show you I kind of want to just dump it in and show you because a lot of it is just styling yeah I think we're going to do that I'm going to show you all right I'm going to chop it in because honestly it's just a bunch of styling and I can explain the whole thing so between these two divs I'm just going to add a bunch of cards here so I'm literally just mapping through with a bunch of styling okay so I'll show you exactly what we've done here so we're mapping through all of the types we're mapping through all of these three types this one this one and this one each one is a radio group option the key is type ID the value is type ID and then it's got a class name and you get these render props called active or checked which allow us to know if that group or that selection is active or if it's been checked or not okay so what we've done is we've dynamically started accordingly if it's active it will have like a ring around it a bit just a bunch of styling and then we've got a relative bit of styling around it okay and then what I've done is I've rendered a inner thing so this is that's the actual option itself then inside of the option I've rendered the actual label so this is going to be the name the description all that good stuff and then the circle icon I'm actually going to go ahead and pour this in as well so now if you basically go ahead and checked it it will have a circle next to it okay so now we can go ahead and enter that so in a nutshell you can pause it take your time over that but I'll be honest with you that's just styling and a bunch of other stuff and it renders out as a P tag as a span and so forth okay so I didn't really want to spend too much time on that but you can get the access to the code in the public get our Repro and we literally show you all of it okay now inside over here I'm gonna go ahead and just bring my lighting a little bit up because it feels really dark there we go that's about now what I'm going to do is I'm going to go to my modal and I'm going to basically pop it in all right so this one right here import from our thing and now if we go over to our trailer 2.0 oh look at that oh my God it just surprised me with Beauty look at this wait for it so we go ahead and press this oh lovely yeah and look if I Tab and I press down look at that guys so beautiful and if I hit enter it might not nothing's happening because I'm going to submit yeah but we can type in this file you saved and just to show you you see that it's actually saving that value we wanna we're eventually we're gonna do it so if you click to do it or what I'm actually be on to do if you click done it automatically undone and so forth so I'll show you how we do that as well right so yeah that's cool that's that bit done which is sick um we can go into the modal and we're simply going to have the file input now as well so the file input so here this is where you can have a file picker option okay so here this is crazy it makes me think how much code do I write sometimes damn okay so here we're gonna simply have an upload button for the file so this one is basically going to be this upload image button okay so what we're doing here is we're actually going to go ahead and hide a um an upload button so like an input field right so there's a special input for like a special trick to going ahead and hiding something so what you do is simply pop an input fill it in like so and we need to create a reference to it we make it hidden but we make the type file right and then what you do is you say on change and then you can basically do a bunch of stuff with it so I'll show you exactly what we're going to do here firstly we need to have an image that we store in the global State and we need an image picker ref locally that we can attach to but basically the goal is that this is essentially a UI element when you click here I'm tricking it by using the same ref to click the input so it thinks it's clicking so basically you're clicking up something else but it's reference is clicking the input the hidden input right and then it basically opens the file pump so it's a very nice little trick inside of this right so what we can do is just firstly handle the reference picker so you can go ahead and do the following we import use ref like so go over here handle elements trigger we've done and then set image is we need to go ahead and do so in this case we're going to go to the board store and we're gonna add our image we're gonna say image and this one I believe we do have an image no so it's a file or no it's not a cleaner way to do that to do what part sorry oh to do the hidden the hidden image thing uh the input no I mean that's the way I would say do it but you can do it in many I'm sure there's another way but like I've seen that in production builds a lot like people do that because then it's also web scrapers are seeing that as an input which you can select right so that's why sometimes it's kind of good to do that um so let's go ahead and pop this in here and then for the set image I'm going to go ahead and make it very simple it does make sense now no problem dude good question so in this case I'm going to pop it in here and uh set image and then the image needs to have a default value the image can be null to begin with this is a file so it's fine with no value there you go save um that wasn't oh that's that's strong thing as uh we've got some strong members in the course that would highly deny that so in this case um I don't like the negativity here out out of here all right so in this case we've got this we've got members in the course who love it right so honestly Drives Me Crazy Jay keep on it so in this case we can add a task you're always gonna get haters in any and any thought you're gonna get here so here's what it is but we don't tolerate it why all right in this case we're gonna go ahead and do uh I've lost track now while doing set image yeah so set image we're gonna go ahead and do uh use Board Store we're going to say image set image State your image um papizzi because it's funny to see honestly I know right it's crazy because Papito is a proper member in the bubble fam so me is remember like it's crazy to see like as in speak to real members guys it blows my mind when we hear stuff like that but yeah I don't I've never even heard of that guy right Sunny is one of the few YouTubers that can actually survive as a Dev that should say oh thank you Ed Harris I appreciate that that is what I'm talking about you know as in I've done production we do production work that's what I'm saying like because I I my teaching comes from a lot of real pain like a lot of pain in the production environment so I am literally talking from the stress of day-to-day coding so yeah it's funny but yeah we're popular way stronger than that right so now we basically set the input so this is a hidden input now so now we can do some magic around it so if we go to the modal and we do the following [Music] um import what is it yeah so now I'm gonna basically say where we have the button in the UK we call people like that a waste man so I'm gonna pop this in there and then I've got my sorry I'm gonna put it inside the input there we go so this div right here we are this is why I basically check and say if I've got an image then I want to show like a preview of it right so I'm going to use the next JS image tag to do that so I'm going to say next year's image tag source and I'm going to basically use a URL create object URL from the image now this is going to be important because we're going to basically we are going to use the image that we set later I'm going to still set fix that step up but um yeah this is going to be something that we need to do in a second but I'll show you that in a sec right so we've got the image here and I need to go ahead and do this hit save thank you so much Evan appreciate it all right Ed Harris you can tell you've been through the pain during honestly man I'm one of us exactly dude I love it that's that's the true you know you know you're speaking to devs when you uh you can relate on that level okay what's happening here why is why is this freaking out what is missing all right yes because now I've approached property is this okay there you go bam I didn't import the right thing so that will obviously break because it will be asking me um you haven't whitelisted you know at the Domain so I'm gonna do on click here and then I'll say this one should set so basically what I want to do is if you have an image here selected it's gonna when you hover over it it's gonna become grayscale with like a no cursor not allowed icon but I've basically done any UI sensor if you click it and then it gets rid of it right so that's how we're doing it so set image of null and then um yeah that's it yeah cool that's good yeah so basically when you click that image it's gone yeah that makes sense we're done then I think I haven't got the current fancy looking upload image button that's what I was missing so my div here above my yeah here there we go this this bit was a bit of a tongue twister in my head to get around so there we go so upload image upload image I'm also gonna have a photo icon next to it so photo icon and this one can have a class name of height of six width of six and margin on the right of two so it's not touching inline block now you're probably wondering is it touching because this I'm gonna make a flex so this one's going to be a table I'm Gonna Save myself a bit of time here because we've got a lot left so it's a bit of standing for the button to get to look like you see here that right there so uh that's good now when you click this fake input button basically what I'm going to do is I'm going to say on click right and this one is basically going to say the image picker ref so image pick a ref dot current dot dot click right so basically what this will do is you can basically protect yourself with this optional chaining but now what this does is it essentially clicks that hidden one that hidden file picker so that way you don't get the ugly file picker you get this one right after episode how do you do so much coding that's what I'm saying it takes time and practice right like man if I was faking it I swear to God I would be so that would be so much effort for the gain right all right so in this case there you go so now if I click the upload image we should see a file picker I'm not gonna show too much there we go I'm just gonna hide it a bit um so I don't want to show something I shouldn't show okay but the point is it works okay so if I was to go ahead and show you that so if I click into this trust me that works I just did it right so I'm going to do it and now and you show you'll see it that it okay anyway the point is at least it's there it's it's there all right we have it right so you can see a file picker I just don't want to show my my stuff and it keeps going to the same folder which is been annoying so in that case that works right the file picker so let's go ahead and I'm just going to pick a image right now so screw it I'll show you something once again um so I'm just gonna pick the Trello clone which is a thumbnail and you see it closed right the reason why it closed is because it was submitting because that's the only button there so what it does is it by default thinks that that's the submit button so you say type a button and it does it that way right oh Christopher's first live show glad I could make it I'm glad you can make it too um yeah man live streams are hard I'm telling you like that you gotta it takes a lot of time man yeah I mean it takes a lot of time to get this down um and it takes practice and yeah but I appreciate you guys that's the main thing all right you guys are absolutely awesome so close guys so close so let's go ahead and check out so in this case now if I was to upload so in this case if I upload Trello clone you can see now look I have this and if I click it it goes away so that way you've got this um they're all the thumbnails anyways it's fine yeah so in this case it pops up and as you can see now we've got that so my decision now is if I've typed in a title I wanted to go ahead and show add task right um thank you Ed appreciate it so in this case we've got the underneath the div I'm gonna have another div with a button inside of it and in here I'm going to say add task Okay add task now this one I've got a load of styling on it because it's got different states and focuses and everything so I'm just gonna show you what I end up putting in but it's fairly straightforward like because then if you actually just take your time and read it it's inline Flex just five seconds with a bunch of basic styling here but when you hover over it it's got an outline and when you focus means when I basically have like when I highlight it so now if I show you this you see like if I tab tab tab you see when I tab it's got the focus ring that's what the focus visible ring part is okay now for this part this button should be the submit button so if I wanted to submit it should be that one right and then we want to say disabled if I do not have any task input okay now you can see if I don't have any task input it disables that button okay so what's awesome about this now guys is not only is this looking pretty good right so if I go to the top div something's bothering me one second you get you know you get OCD about things when there's things like this like that you can spot from a mile off so class name margin top uh two and there's also yes I want to see some unit tests oh God damn it you sound like my um my old uh my old project manager now I I will I'll make a video on on unit testing Cyprus I do it in the course actually to be honest with you you know so in this case now so you can see if I was to type in like sun that take dogs for a walk and then if I do tab the up and down arrows tab upload image Enter key click on something tab Enter key bam you see what it did it's submitted which is wrong I'm gonna change that logic but the point was is that it's fully accessible I'm using keyboard shortcuts to navigate that so this is why headless UI is really good um just as a heads up okay heads up okay so that point people are like Sonny you've been coding too long so what happens when you go too long you get weird all right so at this point we've got the dialogue and then I'm gonna have the on submit that's the final part here so we've got the on submit so as form here I'm going to say on submit handle submit now this one handle submit I'm gonna go ahead and make a function at the top say const handle submit equals e and then basically I've got a nice trick here so and this is my coaching students love distance zero to full stack hero where basically if you don't know the type definition here's a here's a trick though I promise you will change your life yeah so look go to here type in e because then make an arrow function hover over it and now that's the perfect on submit as in like every time you don't have to do the manual work and headache of it and all that stuff you just grab the form event and now I'm comment this out and boom do the relative like the appropriate Imports and now you have the perfect type definition you don't prevent default to make sure it doesn't you know do anything like that we're going to do some defensive coding so if there's no inputation do anything anyway and then we're going to have an add task button set image to no and we're going to close the model so I'm going to go ahead and pop in the final part there set image to know and close model but here we're going to do an add task now I need to create the add task which is fairly straightforward we just don't have it yet so what I'm going to do is I'm going to create eventually it'll be something like this it'll say add task and then this one will be something like add um let's do it here so state DOT add task groups add task okay why is that freaking out now um yeah there we go okay so State the add task use board store I'll go into my okay no that one or store and here where we have delete task I'll edit here so add task is going to be containing the following so it needs a bunch of data and this is basically going to push it into the database so you can see we've got the add task function here that's the signature I want to use and then we're going to have a bunch of data to basically push this in so this is probably the bigger the bigger chunk yeah this is definitely a bigger chunk of what we need to do so let's go into the the bottom I'll play right at the bottom so here I'm going to say add task now inside of here is basically going to be responsible for quite a lot right so this is going to be responsible now for the image uploading because basically if you have selected an image now we need to upload it to the correct storage bucket and then we need to get the URL and put that inside the image and then we need to upload that then we need to update all the UI in the on your Global state so I'm going to show you how to do all of that it sounds really complicated but I promise you it's not actually that bad all right so at this point we've got um that file equals image or undefined so when you've got a file here and then basically I'm going to say if there is an image we need to do an image upload so I'll show you this and I'll explain each chunk okay so if there's an image file uploaded equals a way to upload image now this upload image we need to go ahead and actually create this function all right so I've created this helper function for us so we're going to pause here I'm gonna go into our lib we're going to create a upload image TS uh oh my God we're nearly uh firstly how can so many people store what is it's not yeah secondly we're like nine likes away from from uh damn uh somebody says don't forget to add to the end of the function that you assigned to click listener Sunny uh which which function was that by the way let me know let me know because I might have slept yeah um upload upload image let's do it here so upload image you're right actually yeah you're right um that was in um where was I just at I've completely lost it if you can tell me it'll help me out all right so at this point I'm gonna pop in the function and explain it so this all this is doing is it's basically a function that will oh guys I have to say it I need to say a thousand likes that's what I'm talking about I have to celebrate every time because it's just it's so nuts like I honestly can't believe you guys I thank thank you so much you guys are awesome honestly I say I haven't bought my own heart all right so this is actually that is a huge a thousand likes in the Stream I didn't expect that that's huge thank you so much guys all right so at this point this file uploaded is actually the I forgot to make this a environment variable but in this case I'll show you like I don't mind showing this one so I mean you would set this as an environment variable to be honest so let's just rather than do that I'm just going to set this one manually to save us a better time to be honest but here to do storage what you do is you go to your storage and all we need is um yeah I I got your idea so you copy the bucket ID okay so this one if you hover over it you'll notice it says bucket ID so this bucket ID in this case was that then what I'll do is ID unique and then we pass in the file so I wanted to have a unique ID which is passed in from upright and then it will return us the file after it's been uploaded so it's fairly straightforward inside of here this is where it was so it was here thank you dude there you go my guy thank you that's what we're talking about that's how I know you guys are focused so in this case upload image and now you can see what happens is if there is an image cons file uploaded this will basically go ahead and upload the image now what will happen is um oh dude that's huge Peter Wilson says thank you for these videos I'm finishing my unit my software University and software engineering degree but your videos have taught me more about industry knowledge than five years of University have a great stream Jay screenshot that that's huge thank you so much dude that's an amazing comment I'm blessed that I could help you out of that way so thank you so much for tuning in man that's huge if a fire was uploaded successfully we're gonna basically take our variable which was either an image or undefined and we're gonna set it up in this way remember bucket ID file ID that's what we went ahead and set up right so that's basically handling the image uploading section and now what we do is we can handle the next part so I would have uploaded an image then what you want to do is you want to create a document okay so creating a document is fairly straightforward right so the next part is we need to add it to do what we do is we pop it in like so away databases create document we can import the ID from app right and we've got the database ID collection ID this is the to-do's collection we're saying add a new document with a unique ID this is going to be a title status and remember we did before the same trick with the file we're saying if it exists then I want you to add in the file the file being the image all right so this is actually the image here okay the image is it the one that we passed in but I didn't want to mix it up so it said file so then that way you basically will get an image attached to and we're stringifying the image remember so this will be like if there's an image we're stringifying the backyard IDE the file ID all that kind of stuff because it's just text right so it's easy to do now what I'm going to do is I'm going to destructure the response to this with the following so we should get the ID back so I need the ID right so once we've added that now what I can do guys is I can go ahead and set the new task input as blank firstly so that way uh when you open up another modal it's set in the right way then what I want to do is basically have the um the front end react accordingly okay so what I'm going to do is I'm going to set the state to be the correct um the correct yeah the correct thing I need so basically I'm going to do a big set statement here so we'll do set like so boom and inside of here what I'm going to do is I'm basically going to make a copy of the columns remember a mutable pattern we don't like to modify existing objects we should always do a you know a better way then we're going to grab the to do that we would have added so this is basically making our own optimistic update so this is where the front end is going to go ahead and update and so forth right you Camille said yes and remember I remember learning with you dude I remember as in I remember Camille popping up on stream uh three years ago and now I'm a senior there that's huge man thank you so much for sharing that that's awesome Jay Jay screenshot that that's cool I actually remember a camel popping up on the chart um so what we're going to do is we're going to get the column that the person has entered the to do into so in that case if it was in progress or so forth and then if there was no column then it's going to set the column ID and add the to-do otherwise it will get the current column and push in okay so in this case we actually already do this to be honest with the first set but it's like a it's like a a backup if that first step failed right so when we fetch the to-do's we actually were fixing this Muhammad thank you so much for the five dollar donation appreciate you man that's huge so once we've got the new columns all set up we're simply going to return the board itself there you go it's coming in there nice and then we will pop in the new columns and themselves okay so now what we should see is the ability to upload an image is successful okay now before I test this out I want to make sure that we um because I want to do something like I want to be very ambitious here make sure that it kind of all works in one go basically we've got the ability to add the new task so first things first I need to actually go into the modal and I need to enable as in I need to connect it up so add a new task is basically here so now it's going to add the task like so so we're basically pass in the new task type the new task input and the new task type the new task type I can get from the following here so task type and here we can say state DOT new task type whoa you know thank you so much tly 220 donation I'm not sure what then uh what currency but I mean thank you man that's huge um keep up the good work mate Green from Turkey oh Turkish lira oh nice awesome stuff man thank you so much thank you man I appreciate you guys so much honestly I had new thoughts type it makes me really like on so many donations today wow the energy today has been off the chart honestly it's so sick it makes me I'm coming back stronger than ever like honestly I'm gonna be back on these streams I missed you guys so much such a good vibe and now let's go ahead and test out yeah so let's do our test there's no wait no so we add it so this will successfully add it and it should um update the the UI it was what we did in um in the board store now the only thing that we have to do that's roughly 10 bucks damn thank you so much um the only thing we have to do now is on the to-do itself I have to show the image so I want to do that now and I want to whitelist all the domains that we have to do that's the final sort of part I guess so what I've done here is I've actually created another helper function which actually gets us the correct thing so Sunny energy is top-nosed thank you so much yeah I appreciate it in this case okay so what I'm doing for the to-do card is I've actually made sort of a helper function to to sort of get us the URL in the correct way so basically okay let me let me show you how we do this so I'm going to create a basically the URL we we store the image bucket and file ID now the problem is that doesn't give you a URL to render on the screen so we have to create a function called get url.ts which is my helper function and what this one will do is it basically uses the storage um module and then basically we take we pass it our our image we give the bucket ID and the file ID which is what you need to get the file preview and because our you know access permissions are open right now it will give us a file preview URL and that will allow us to render something out as a URL okay so that's how we're basically gonna do that part and then what I want to do is the to do card I'm basically going to have a use effect whereby when if the to-do image exists it will basically fetch the image and then it will like upload it on itself so I'll show you how we do it so we've got the to-do card we're gonna have a piece of state which is going to set be resemblance of the image and by default it's going to be null okay now when that image when that to do card mounts what I'm going to do is very simple okay all I'm going to do is I'm going to say that when to do you know item you know we renders this code should we render now if there is a to-do image okay if there is a to-do image what I want to do is have a fetcher function inside it's almost a fetch function so a fetch image equals an async because you can't run asynchronous code unless you have a wrapper function inside of a use effect So eventually we'll call this function there you go then what I want to say is const URL equals get URL so I'm going to say await get URL a weight or like song This Is My Jam when I say away get URL and then I'll say to do image right and then this one's freaking out because we haven't imported it so we're pulling that in and you see this one's not applicable because type is undefined now the thing is I've already done a safety check here for some reason it's not picking it up so we're going to go ahead and ensure that it's there okay then what we can do is oh Jimmy in the house what's up that's all man I love this man you got OG's in the house Papa fan members are all here to support I love it uh matzu says just subscribe is amazing thank you so much you know I'm glad you enjoy it right so I'm gonna say if there is a URL right from this then I will set the image URL so locally so basically What's Happening Here is when the to-do card mounts this one's URL to string because it will actually come back as a uh as a URL value so this will be an actual URL which we can't show on the screen it has to be um a string value so when the to do card mounts it's basically gonna unmount it's gonna if there is an image it will fetch the image add that to the state of that to do card component okay then what we can do is we can basically say if there is an image uh there so if the image is there now we can go ahead and do the following we can say div and I've already got some idea of the style here two audio I'm just gonna pop this in because there's some the species is what I'm gonna do anyway bam so I've got my div and right now my image I need to import from next.js so we're basically relative height for width four uh it doesn't need to be relative I had that before because I was trying something else but with the 400 height of 200 to make sure it renders you know efficiently we don't need any bigger than that and then I'm basically making it take the entire width and height of its where I'm putting it now in this case object contain means it doesn't shrink or act weird or liquid now if I've done this all right this will be crazy but what I need to do is I already know that it's going to freak out about the um pulling images from a you know a domain which we haven't whitelisted now we're all pulling all of our images from the outbreak Cloud right so in this case we're going to whitelist that domain so now it's the Moment of Truth guys are you ready to see if the add toss worked because honestly I've done a lot of changes there I didn't test out so I I'm pretty confident in myself but I think you know anything's possible it could it could fail at any point so right now we should have put everything all the pieces is a puzzled together in a way it will allow us to open the model add everything to the model let's click add and then it will basically add that to the back end and it will upload the image if there is an image that we put there and then it will re-render because we change the global State and then it will show the image on the screen because that would have triggered the use effect on the to-do card which would then fetch the image which will load it so all of that should happen fairly I mean no stress right no stress um the only thing I need to change is the to do so so you know when I do this right when I click done I want it to automatically highlight done so that's the only thing I'm being very fussy now so in column I want to do that last thing because that's that's like that's that's clutch that's really nice to have so when I basically handle add to do so when I press on on the column so right now yeah so here so I'm gonna basically change open Moto to handle add to do and I'm going to create a helper function at the top const handle to add to do it's going to be a little arrow function and I want this one to basically open the model but I actually want to set the type we already have the type new toss type here as well so I can basically go and say you set new task type I can pull it from the board State um no no no no no no set new cost type and then I'm going to basically say set new task type to the ID right now what will happen is it will modify based on which one I clicked so if we've done this correctly guys when I click on to do it should have to do selected cool if I click on in progress hey look at that if I click on done nice that's what I'm talking about right so I don't know what happened there I don't know what I did right but if I go and type in if I click out of there okay that's weird all right so let's type in this um take the dog oh this just say build a Trello 2.0 app upload an image trelloclon cool add task okay so it should have oh okay ouch um oh because I didn't restart I did do that God damn it I did do that I did do that all right I'm gonna go ahead and restart my server I told you it's a little bit buggy when it does that yeah but in this case it's fine it's fine I'll take that I'll take that I am pretty confident that that will work now yeah let's try again so firstly I mean it's gonna go ahead and see let's see now so is everything's okay Augustine says Kudos using you're one of a kind thank you so much bro all right let's see oh oh that's what I'm talking about look at that and you can even move it over over there so let's go ahead and move that over there and let's create another one and let's call this one create a core app upload image whatever apps have I got I've got like uh the Dali 2 and GPT cool um boom let's go ahead and add that now let's see oh yes let's go let's go look at that that's sick that's sick all right and if I go ahead and infer over there then this will show that everything's persisting and if I was to just put the icing on the cake let's for example delete this one move this one over here move this one over here now we should have tested all of our functionality if I refresh it should persist in that exact State perfect and then if I type in Trello boom just as the beat dropped that they couldn't have been cleaner couldn't have been cleaner that was nice look at that you got the you got the GPT work and everything else obviously right now I've done it so fast the GPD didn't catch the catch the board exactly but that was cool that was cool so in this case now it should say oh no no it was right it was right it's because I had Trello yeah it was I knew it I knew it was right yeah now he says since the LinkedIn clone uh me and my team learn react from your videos now we find our own way to deal with our work it's a shame we can do nothing for you but thank thank and smash that like button bro honestly the biggest thing you could do is be a support that's it that's what the proper fam is about that's why I'm doing what I'm doing that's why I'm able to help you guys so I can help you guys so you guys are awesome so thank you so much for just like you know yeah period you don't you guys turning up that's enough that's it that's it I'll keep bringing this as long as I can help you guys become Muslim developers that is it but look at this guys such a cool build honestly yeah there will be kind of edge cases where you know GPT might freak out or fail that's GPT right now it's still a bit battery but right now I think the only thing left to do is get this out into the development environment so this is probably it's lagging yep there you go it's lagging CNN yeah because right now I've got it set in the correct way it will work all right so yeah see something here is yeah it's a GPT where I spammed it and moved everything around was just a bit crazy um but let's deploy this right let's get this out so I also have loads of things open so it's probably getting confused right let's get this deployed so what I want to do now is I'm going to show you how to deploy in the cell right so I've got a few tricks to this um let's go over here I'm actually going to cut my app right and I believe that's all the features done yeah I'm pretty sure the real purpose of GPT in this world was honestly it was a it was it was to demonstrate how you can basically pass information to GPT to provide a summary in this case the summary was very basic but the point of it is is to provide the platform show you how you can use nextges API to send data like the to-do's in a to-do board to the open air API and then you can basically get a summary of it right but in the end of the day you can really take like that's the platform and that's the approach to do it then by knowing it you can actually go ahead and really customize as much as you want but the point is once you know how to do that simple step like I say simple once you not to that step then it's uh you can really customize it however you want to do so I hope that helped yeah okay so this is sick final push let's go Jay uh let's go ahead and um do a deployment now so we're gonna say the cell right so this is so if you haven't already done a deployment in Brazil it's actually really slick so you need to install the vessel CLI right or you can do the GitHub approach I'm going to show you the facility so I've already installed the vessel CLI so just Google the cell CLI so the cell CLI also if you haven't used the cell we have a very special link and if you use that link Jay will share it now in the chat and we'll also pin it as a comment I believe it is in the description but Jay if you could share that link that would be great um but yeah we have a special link in when you're using the cell it would mean a lot if you use that link because if you go ahead and actually you know continue to use it it supports the proper fam and yeah it's just a win-win uh and it's free for you to use so Link's gonna help everyone out um so Jay share it in the chat and then we will pin it as a comment okay so the facility you can go ahead and do and Nico says will the code be available on GitHub afterwards yes it will so Jay just dropped it in the chat vessel.com ambassadors forward slash Sunny Sanger alright so feel free to hit that up and you can go ahead and check out yourself okay so now you can go ahead and see oops no I don't want to do that one again okay oh this freaks me out all right so let's go ahead and do it so facility allow you can simply import it and I've already done it and then you do the cell login I've already logged in so now you can do the cell to deploy so set up and deploy yes it will ask me which one so I'm going to do Papa react that's my account link to the existing project no okay then we can say what's your project name I'm going to use the basic project name which code is your code which directory is your code located so this one setting up your project okay so in this case now we can just let it do its thing modify nope it's very simple to set this up and then there's two steps we're gonna have to do now so this will fail I'm telling you now it will fail because it has no environment variables so this will actually fail right now so what I want you to do is go to the upright clone here settings go down to environment variables and here so now what you want to do is open up your code go to your environmentm.local oops what am I doing no no no no no no go to your m.local and I'm going to hide my screen but I want you to click it okay so click inside it here yeah and copy everything so control command a copy all inside your environment file right now once you've done that I want you to go to the um what's it called I want you to go to the project settings page here and paste so I'm going to paste everything right now so I'm pasting right and then I click on Save right and as you can see literally if I press Ctrl V paste it pastes it in and it comes like four blocks here and then it adds and then you click save and it will add over here then once you've now that you've added there what I want you to do is basically cancel this build and do the cell once more okay and then I don't I'm not I don't know if I'm gonna make this uh the the I'll share it a little bit but I'm gonna show you a little bit because otherwise it's connected to an actual Billet build or open AI I can't it's gonna get a little bit crazy right so but yeah you guys can see so right now it's doing the inspection so you can click it and now we're redeploying with the correct things in place now this might fail on based on some silly reason but we can check ourselves so you're gonna let that do its thing and if that all goes through then you'll see a deployment complete right so in this case we can go ahead and check now in the meantime I'm gonna read some of the um the comments right so let's see all right so instantly in the beginning use the shortcut to show us the responsive website on different breakpoints and see what you use yeah so when I'm resizing a lot of the screens I'm using something called I used to use spectacle and I think it's called rectangle now it's a rectangle yeah rectangle I'm using something called rectangle so type in spectacle Pro or spectacle app and then they basically changed it all to an app called rectangle that's how I do it okay it's deployed right it's deployed I just want to test it and see if it is okay so this is good yeah say it's good so now you can see it deployed but nothing shows now the the final step to getting it working is this is the URL so what I want you to do then is go to your um where was it go to your upright settings and now here in your app right settings you need to go to overview oh sorry settings down here and you need to go to your domains whereas the custom vans no it was what is that setting on uh it was very easy to find databases is it here settings no okay where is it okay I found this literally a second ago and it's gonna drive me crazy if I don't find this okay where is it here it is in platforms click on platforms there you go localhost here if you want to paste in your your domain so you want to do this and then you probably need to get rid of https so that's the one yes you want to do that and localhost is always protected by the way so you can use it all right but now if I go back to my app there you go boom you can see it right now this is gonna go crazy if everyone starts going on it so obviously I don't want to do that but yeah you guys I'm not going to give the URL but it works okay now I don't know I'm gonna hide that screen because I just don't trust I've learned from experience I don't trust people all right with with YouTube stuff and they're gonna go crazy and stuff so um you guys can feel free to check it out yourself if you caught the link in time but yeah this is actually it so I'll tell you what screw it up I'll share it I'll share it there you go bam I don't care have a look right you guys are probably gonna go crazy on this I need to deactivate that key but afterwards on GPT but it's fine you can have a little play around so sahib Singh says Hey Sony do you update content in your course yes I do I am always updating content in the course and again if you want to join the course zero to full stack hero we literally update it every week because we have weekly coaching calls inside the community so every single week those calls are getting recorded and added back in and plus I'm adding more module content I'm shooting literally all the time I'm adding more and more content everything I ever learned I go ahead and put it back in so you can feel free to go ahead and keep on adding things in um sometimes it never trust the internet something I swear dude I've learned too many times so all I recommend is guys if you are on the fence and you kind of you know you're not sure if you want to join something like a zero zeros to zero to full stack hero Community course right whereby you have not only the course aspect but the entire Community the support all of that stuff then I recommend you go to popular.com and you just give it a watch watch for yourself students and hear for yourself these are our students these are real students and this is what the course is about it's a family of developers who are just honestly we've like nailed how to get students from xero to their jobs like we just we know how to do it now we've done it really well we know how to get people past their sort of you know the things that they're stuck on all that kind of area so we've pretty much put everything our heart and soul into this course so make sure you go ahead and check it out pop react.com forward slash course give it a read check out yourself and for a short time only podcast 10 gives you 10 off because we're going crazy with the podcast lately and I hope you're enjoying it and I hope you watch that stuff so as always this has been seriously Next Level this build I didn't expect it to pop off like this it's been absolutely incredible and fun and awesome um you guys have actually added a bunch of things glad I didn't make it responsive but as in real time so right now as you guys can see this is all you guys adding it this is lit that I can see you guys adding stuff here this is cool man thank you Sunny awesome I love you I love you guys too thank you so much I'm gonna hide it for now but yeah you guys can see for yourself and again once again if you want to join us join us check it out and also don't forget we have got the University of code where you get daily procoding problems sent straight to you um so yeah this has been a game changer for our students we basically want to have daily challenges so you basically send you you a daily problem into your inbox and then straight up the next day you get the the solution to that problem and it's like a Sudoku puzzle to constantly keep your coding skills evolved alright so me and Jay welcome that to the point where sometimes I don't even know the challenges so it's really cool I even idea right I actually did it on my own thing so it's really really fun uh fun so we need a website but thank you so much guys this is awesome everyone thank you so much for tuning in I'm gonna give a quick rundown as to what we did in this app I'm going to make sure nothing else is badly hidden so I mean somebody swore on it so I have to delete that one but he said a good thing but he swore so I have to hide it right so in this case what I'm going to do guys is I'm gonna just give you a quick rundown of the build in the way that we know how to do it where's where where is the right song where is the song at right it's been a lot of fun today honestly I have to admit it's been like one of one of my favorite builds and I and I I'm shocked uh because it's been such a sick Lord where is it gone oh my God where's the Papa fam theme song all right I need to I need to find the song all right let's let's we have to end there right oh there we go all right there you go guys also if you want some good news for those of you stick around it's like the post ending credits to a film right I have some incredible news so if you haven't already or you've been excited for it because you stuck around for this song I tell you right now we have a huge I mean huge five day challenge coming up so you guys have wanted it you guys have wanted something bigger better we have so many freebies that we're gonna give away to you we have a five day AI Next Generation developer challenge which is going to include all of the latest stuff you guys have seen the level of the the level of things that these girls are coming me and Jay have been working so hard behind the scenes to make sure that we still get these videos out so that we can get you guys more and bigger and better things so five day challenge is coming out very shortly stay tuned thank you for tuning in like tuning in always this has been the Trello 2.0 clone that's been your sneak peek to the challenge and I hope you've enjoyed it we learned a bunch today next JS upright Cloud powering the entire thing we have the beautiful drag and drop functionality we had GPT behind the scenes so so cool guys honestly you guys know how it is right we're trying to always keep up with the new tech and as I mentioned like some stuff works some stuff doesn't the main thing is is that you stay on to what the market wants and you become a valuable developer and that is what we are doing here at the bubble Farm we're creating developers in the world helping you transform your everyday life with that said love you guys so much I hope you enjoyed this video and as always like comment and subscribe if you're watching the replay and yeah just thank you thank you so much guys uh yeah on that note I'm signing out I will see you in the next video peace I Wanna Be With You I Wanna Be With You [Music] [Applause]

Channel: Sonny Sangha

Views: 117,017

Keywords: react, developer, reactjs, html, css, js, javascript, papa, papareact, papa-react, tutorial, frontend, webdev, web-dev, clone, fullstack, backend, motivation, reactnative, react-native, redux, typescript

Id: TI2AvfCj5oM

Length: 247min 32sec (14852 seconds)

Published: Fri May 26 2023