Build a full stack project with React and Appwrite

all right hey there everyone Hees here back again with another video and welcome to the continuation of our react Series so far we have studied quite a lot about the react quite an indepth series about how we can build applications with the react how the react internal works and pretty much a lot of things now from this video onwards we are moving into a journey where we actually utilize all the things that we have grabbed so far and put this into a use of building a software building or using the development skills this is exactly what a lot of people miss that how to actually transform your learnings and knowledge into the development skills and this is known as development in this video I'll walk you through what we are about to build and what all skills you are going to be learning throughout this one by the way we are building a full stack application using react and for the backend we are using everybody's favorite and open-source app right so I'll walk you through what the idea behind this application and I'm I will be focusing more on the generalized knowledge this means after watching this entire few videos and the entire project you'll be able to build any kind of social media app you don't need to watch any other videos after this you'll have full knowledge by the way just imagine what is Facebook just some text and images that's basically it what is a Twitter just some text and images so it doesn't really matter how the website looks like end of the day it's just a social media which is empowering you with some kind of text and some images the same goes for the blog article so if you know the ins and outs of how to build a Blog application with some text and some images uh you pretty much can build any kind of social media app as well definitely on top of that there could be so much more that you can do but at least a basic building block could be ready and that's exactly what we'll be learning in this video so let me first show you what we are going to do so let me share my screen so this is where we'll be building by the way in case you haven't noticed we are already on the 10th app so we have done with that this one is going to be technically our 11th app but I want to show you something more uh first thing uh although you have completed this series I expect that you have completed this series in all the playlist manner that I have uploaded so quite a lot of long playlist that we have gone through with a long videos uh 26 minutes to 40 minutes there's a lot of uh range in that only recommendation is if you're watching it in the continuation uh I'm not sure that whether you have seen this video at the very end or at the very last wherever you're watching it after finishing up your context API go and watch my Redux toolkit in 1 hour this is a crash course on Redux where I've talked quite an in-depth about how Redux toolkit works and the setup of it different ways of handling the situation uh this is going to be a little bit requirement so in case you haven't yet watched it go ahead watch it in the playlist if you're watching this entire video in just one go go ahead and watch this one as well and then you can move on to this video which is obviously the next in the playlist so what we'll be building up uh we'll be building up this small application and again our focus is not not on the UI part but rather more on the functionality part in your UI there might be two cards in one row in our UI it might be four cards doesn't really matter this is exactly the functionality we are looking up for this is our homepage where there will be a display of the card which displays the title as well as a preview of the images not the actual images this is something which is given to you by aight as a kind of a easier way to handle images so that not the entire image is being transferred to you but a preview version of it which is little bit of a lesser quality uh once you click on this any of this AI or anything wherever you want to visit this this gives you a full-blown image which is larger and that's why the bigger one because I wanted to show this exaggerated that this is a larger one and you can see this is where we our have our text Data our Text data is very very small I just wanted to show you that you can actually store the way how this is being bowled out so yes this is also done not only that this project has some the issues which are intentionally left in this one so that you can actually work on them and work on that so that you saw that briefly log to read post so this there's a intentional error being shown there and I by the way I will give you the entire list of where the bugs are and how you can fix them entire walkthrough will be given to you but these are the things that you have to walk through and you have to learn through I've seen that uh when I recorded this entire Series in different language and people actually appreciated that okay now we have some work to do and they got excited and if I click on this latest one you can see this is uploaded by me so obviously I get the edit and delete control over that not for the other people so that's a great idea of how things are done here we can see we are storing more information like there's a color control there's all of that so we have a full-fledged editor that we are going to be using uh along with the react of course we have the log out and sign up functionality and signin functionality powered by app right I'll walk you through with that as well when I click on the ad post we can see that we have this ad post that we have uh we have the full control of Vig editor what you see what you get kind of editor we can store that we have a slug which works automatically uh we can have a nice slug which automatically converts uh whatever the URL or our title is into a URL format with the dashes so there's a little bit of logic writing that you'll be learning in this one so quite a lot of uh intriguing details are there uh for this entire one we are using aight end to end this entire things are stored in the database like this I'll walk you through how the database are being created how you can use them authentication features end to end the full back end is powered by the app right it's free and we will be using that so if I click on on this uh this is where we have entire authentication details uh we are having all these four five random names of the users but if we wish we can go ahead and use other services for this for example in the settings we have lot more options just have to click and enable uh small pieces of code that I have to inject and that's it it supports so many crazy how much it supports and we will be using authentication we'll be using database Services we'll be using the storage Services as well so this will give you enough of idea that how to use storage how to use authentication and how to use databases uh rest of them I don't think so there is too much of tutorial required once you know how to do a b and c in one format you can figure out how to do the D1 so that's the that's the goal of this series so again I'm super super excited that we are going to get started and we are going to build this one again my recommendation is we will be focusing more on the functionality part the UI part it's purely purely based on the Tailwind I highly recommend you to give it a different look that what I have given you a lot of other students have done that and they have found that it's a great result they have learned so much more just by modifying the UI it gives them so much of confidence of course I'll be giving you assignments as well but I'm super excited to get started with this one so in the next video we'll set up a simple boilerplate react template we'll connect our app right with that we'll start everything from the scratch and the fresh and I'm pretty excited that you are also following this up so far and I'm pretty sure you'll be following in the next one as well in case you are enjoying these series please share them on LinkedIn and also do hit me in the comment section as well just a model support a heart would be really nice so that's it for this video let's catch up in the next one hey there everyone a here back again with another video and welcome to the continuation of our react Series so in this video we'll just create a fresh app we'll uh peek into a little bit of the documentation of app right and it's actually surprisingly good that their documentation was already good but they have still Rewritten the entire one and I'm loving the new one so we'll go through with that and the entire documentation study that we are going to do and with the code that we'll be writing is going to be 100% reusable so whether you are building any app in flutter or maybe in react native or anything else that you're going through the concepts will remain same if the programming language changes then obviously you can find the things equivalent in your language as well but in most of the case anything related to JavaScript types script they are going to be very very same so so let's go with that and let me share the screen and walk you through with that so first let's go ahead and create a new app so obviously we are using V so npm create V at latest that is what we have been using and that's exactly what you're using by the way with this one I'm targeting the people who probably might have not watched my previous videos that's also fine if you're just starting from here that's also fine there will be a few Concepts which I'll Point towards hey this was covered in previous video or something you can watch it at that time otherwise it would be a fantastic experience in working together and building a full-fledged application a full stack application so let's call this one as 11th app uh that's basically our 11th app but hey let's go ahead and uh start my uh terminal here uh we have a lot of one here uh we'll be just going with the create vat latest I think that's good one and let's call this one as 11 blog app blog app yeah fine good name we'll be using of course react and and yes no we are not going to be typescript in this one yes I know I do have a series on typescript on this channel it got really popular on the free code Camp as well but we'll be going with JavaScript in this one and what I want to do is I just want to kill this terminal and I want to open this up right click and open an integrated terminal that way I don't have to do CD and all those stuff and I'm into this I can just do an LS and I can just say npm install this is going to obviously install everything for us and we need uh we need Tailwind for this one as well so let's go into uh Tailwind CSS quickly go into the dogs that's how I always recommend everybody to just go look into the docks figure out how things Works in this one we have already done this kind of a thing so we'll be going with this command now so let's go ahead and copy this so that we have the Tailwind setup being done so this is the part one of Tailwind setup the part two is to have the configuration file and set up so that it knows where probably you'll be right in your tailent files or tailin commands utilities wherever you see that all right so in this one I have the tailin config go ahead and change the content part don't forget the trailing comma this is pretty important so go ahead and do that once you're done with this then in the index.css we need these uh directives being placed yes with the adorate they are called as directives so we'll go into the main file where all of my CSS is there in my case it's inside the source and I do have index. CSS we'll replace everything and place our directives there save that and that's it now I'm technically allowed to run npm run Dev to have my application up and running we'll be doing that but uh that's the basic configuration the next step is to have app right being installed now installing app right is pretty straightforward there is nothing too much to discuss on that it just says npm install app right and that's it that is the easiest part now you might be wondering that we are into react which is pure front end so what does this aight is going to do this aight package in itself will allow you to talk to the backend part backend as a service which is aight this is a very common thing in case you have used any backend as a service in which we focus majorly on the front end part not on the backend side so backend part is handled by the app right but in order to talk to that we need the app right so that's what we have let's quickly check our package.json so that we can verify things are doing good and we are okay with that all right so in the dependencies we have have aight that's exactly what we want and in the dev dependencies we have tailwind and all all of that we are happy with that so aight is the only thing that we require right now now we'll be needing a couple of things here so inside the blog uh I'll be just creating couple of new files let me go ahead and first create that first is going to be EnV that's my environment variable I'll walk you through that how you can deploy this application on worell or netlify what whichever works for you I'll show with the warell so these environment variables are very important at that point of time so that sensitive information or data is not exposed in the GitHub and all of that I will also create another new file because I want to give all this uh data to you so I'll be saying thatv and I'll be creating a do sample so this is a sample file which is meant to be given to you uh so that you actually work with that and what I'll do is I'll just actually uh go up into this one and this environment variable I can just right click and add this to get ignore so that that file never goes out to any GitHub repository because this includes some of the sensitive data that I'm about to add in here okay uh what kind of sensitive data you'll be requiring that will come from the app right itself so go ahead create an account on aight if you haven't yet it's cloud. aight. pretty straightforward pretty basic and if you just scroll at the bottom you'll find the docs one here uh by the way you can just get through the docs simply by aight. i/d however you want and let me walk you through how to study these dogs that's an important aspect so on the left hand side you'll see that what products they offer and they have authentication database functions and storage these are four major Services there's a lot under these categories but these are major four categories that they work on in this project we'll work on o we'll work on database and we'll work on storage so that at least three of them are completely understandable by you and you can explore further things more in the database I'm not just talking about touching the database I'll also walk you through how you can make queries in the database so that whatever the application you are building you have the knowledge so that you can explore things on your own so we'll be going through with that now if you go on any of these product like for example if I go into the O now we can see that there are journeys and there are references now Journeys is something that what do you want to implement in your application and the apis are what all the things I can do in that for example in the email and login if I just click on this it gives me the entire that hey what do you going to to need the entire project is itself there so entire source code is there and you can just see that so here we can see that what we get is a promise but what we are using is an account which gets to us by this account from the app right just like this and further this we can actually provide a user ID if we don't uh aight will give us one and we can provide an email and password uh to create an account of the user so this is all it requires and further if you want to do the login the same kind of a guide is provided to you but if you want to do more with this account API uh you can just click on the account API and can see that I can get an account I can create an account update an email I can create a JWT token update a username pretty much whatever I want to do delete the sessions list the sessions uh there is an endpoint given to me so that I don't have to worry too much for example uh if I just want to see that how to delete sessions all the sessions I can click on this and this gives me the method that okay you can use simply delete sessions as with the end so that it deletes everything and that's it that is going to delete so it saves me so much of the time if I know how to navigate properly it doesn't really matter if you're using a react native react or you're using something else it just it just is the same so that's your brief overview of how to actually study the newer documentation and I find myself I can find exactly what I need in a much quicker time with this pretty much fantastic documentation here okay once now that we know that how the docu mentation and how we can Traverse through them I can go into organization uh which it gives to everyone the first time we create the account this is what they call account as an organization I am supposed to create a new project so let's go ahead and create an empty project I can import a project as well but that's experimental they are always very fast in doing the things they always keep on doing some stuff I'll create an empty project and let's call this one as YouTube blog I think that's a pretty good name it also gives you a project ID we need this project ID but I don't want to edit it although you can if you wish you can add your own custom IDs I don't want to do that I'll just simply click on Create and this is going to create a project for me and in a few seconds hopefully my internet is oh some of the things are actually uh getting uploaded so I'll just copy that stop that for a minute and this is what I need so I can just click on the copy and this is something that I'll be needing okay where do I need this all of these things go ahead and follow along with me these are some required stuff from your site so okay Postman no I don't want to do any of that okay in the environment variable we need some variables to be put on so I'll be just adding a reactor app and then I'll say underscore app right if I wrote that correctly appcore URL and that's going to be my first variable name and similarly we will be having coule couple of others like app write project ID as well projector ID and this is my project ID so the what we get as a project that's exactly my project ID that I have now once I have the project ID the next thing is we have uh not worked on one thing which is the project URL now the project URL is actually constant for all the app right because the app right is hosted up here in the cloud by the way in case you want to do and find it out properly then click on the uh web this is where you add your project you can add multiple of your project so my project name is uh we called it what uh we called it as let me just go into package.json we called it as 11 blog app let's use the same otherwise it's not really compulsory uh this is really important right now we want to use a local host here uh but as you upload this exact project on versell netlify wherever I use something similar to this so any subdomain which is is coming up from varsel any subdomain that's come from netlify if you're not going to put this properly then there are 100% chances that you'll find yourself messing up with the course error so this is something which resolves it 100% necessary please pay special attention to this one uh for the Local Host it doesn't require any port or something you just need to get Local Host notice here uh it actually gives you a suggestion I hope it's visible in the screen recording yeah it is it is so just add a local host so just go ahead and add a local host that that's all it is required once you're done with this now any request coming from Local Host will be accepted in the server and it takes time not too much but I have noticed it takes 2 to three minutes to propagate these changes sometimes when I'm back toback recording it sometimes takes time so 2 to 3 minutes is usually the things to propagate these changes let's click on the next now npm install app right we have already done that uh this importing of the client in the web sdks and stuff we will do that but not right now let's go ahead and click on the next uh this is the end points and set project so notice here project is 736 this is exactly the same ID that we have got in this one uh so 76 uh 763 that's the same ID we have already got and there is the end point being mentioned here as well that is exactly your aight URL you might want to copy this and by the way this is exactly same for all the projects yes I worked with a lot of projects of aight and this is exactly what you needed here okay uh once we have this now we can click on the next and it says hey go to your dashboard and stuff yes I'll go ahead and do that this is one of the most important thing please do not skip that otherwise I've seen people struggling into the course error so these are the two things that you need and your project now now you have a unique ID you can talk to that and that's where the app right SDK comes into the picture but there are a couple of more things that we are going to require so project ID is great uh I'll just remove this one but apart from the project ID we need the database ID as well database uncore ID we'll work with the database as well once you're into the database that's a generalized database in each database you'll find a lot of collections as well so I'll just go ahead and have a collection ID as well and by the way from where to get I'll walk you through with that as well don't worry and we need the bucket ID as well so I'll just go ahead and add a bucket what do you mean by bucket bucket simply means uh the storage that we'll be using so let me walk you through how we can grab that so I'll simply go ahead and have this one so what I'll do is uh simply go into the database so our app is completely up here now here we have the databases just go ahead and create a new database and enter the database name let's call this one as YouTube whatever you want to call you can uh go ahead and call that I won't be giving any ID it will be given to me uh automatically so I'll just go ahead and click on create so that's what this is so this is your database ID so go ahead and copy that that's exactly what we need so this is our database ID that's it and once we add into the database ID then obviously we need to create a collection so that's the next step I'll create a collection let's call this one as blogs articles whatever you like I'll just go ahead and click on Create and this is my collection ID so blogs notice here how easy it is to just go ahead and go with the flow and copy The Collection ID so that's all what we need now in here we are going to need to add some of the attributes what kind of data is going to come up in the collection since we are here already let's go ahead and add those attributes so let's go ahead and click on attributes and click on create attributes and you can create attributes of type string integer float Boolean there's a lot of types I'll be most of the time we'll be using the strings once I click on the string uh what is the key that you want to use I want to go with title if I can write that properly there we go uh what is the size totally up to you you I'll go with 255 go ahead and use whatever the type that you want to go with that so I'll just go ahead and add 255 so use that or use the scroll ones you can add a default string value if you wish I'll be requiring this so I'll just say hey this is a required string I'll just go ahead and click on create that that's it so you need to provide a structure of your data that how this data is going to come up in the collection so that anything uh which is required can be treated like that uh let's go ahead and add a few more which are are going to be useful for us so we'll be saying content this is where this is how my content will come up I'll go with the string again 255 if you wish more then obviously add more numbers here these are character sizes so go ahead and use more I'll say the content is also required for me I'll just go ahead and click on create for this one all right so we have content uh title let's go ahead and create one more and that is going to be my featured image featured image now this featured image is going to be a string size I think 255 is good enough I'm not storing the actual image into this one rather I'm keeping the long string URL that I'll be uploading in the DAT in the storage service of aite once I store an image in that it returns me back as a promise of a long string URL that is what I'll be keeping here and I'll say this is also required so give me this image this is pretty important for our application let's go ahead and create that uh now I hope it gives you an idea that how these things can be done uh you can work with that so I'll just go ahead and create uh more attributes one more string so I'll just say hey I need one more which is status now it's up to you you can keep this as a string or you can keep this as a Boolean value I'll not keep this one as required because that's a status of my blog whether it is active or inactive I can just do that on the go uh but if you wish to have it as an enam Boolean it's totally up to you I'll have one more which I'll talk in a minute uh but this one is actually user ID so so I'll be adding a couple of not couple just one user ID for each of the blog that we have so this is exactly for that uh 255 is good enough that we saw while building the demo of this application uh but this is required field when we create a collection of this one let's go ahead and create this one okay so there we go we have now the basics being done uh pretty good now what we'll do is we will learn how we can make some queries with the databases as well in order to make some queries we need to have some queries other than these basic Fields like title or something uh what you'll study is when you have an index is being placed on any collection it's much more optimized for the searching purpose I'll probably talk about more of the database optimization stuff uh probably in some another video right now let's go ahead and learn how we can create an index so all you have to do is create an index is provide a key for that one so I'll just go ahead and say that hey the key we are going to call this one as status that's my key uh the key key type is you can have multiple keys I'll just go with the keys uh what is the data attribute which will be responsible for this one I'll just go ahead and use the status for this one and that's it I'll just create this that is how simple it is to have a key uh being assigned so there we go now we'll be able to make queries by the way we can make queries just based on attributes as well but it gives us a little bit more Advantage we'll study about them and I'll walk you through give you some resources more on that so there we go we have now all the values being added up here uh since we were already already here we set this up now coming more onto this one so we have the Au service we have the database service we studied about them we have one more thing which is the bucket ID now in the documents uh if you'll just come up onto the documents and we were in the attribute section go into the settings section this is where you can see that who can actually have the permission to add these documents this is the most important thing not anybody can come up and write into your uh documentation you need to give a role to that that who is allowed to that anyone is allowed all the guests are allowed all the users are allowed uh any guest anybody who will like to that I'll say that any user is allowed any user is somebody who is already uh using my application already logged in or something so all the users are allowed of this application so it will automatically wire these things up with your links I'll say that all of my users have the ability to create a read update and delete my application whatever the role you want to give you can have the RO based access uh within this database as a service I'll just go ahead and update this so there we go our permissions are updated this is the most crucial one I have seen people struggling with this quite a lot so make sure you are worried about your settings and who can access the application now we'll not talk about the functions in this video probably some another video let's go into the storage so this is where you set up your buckets and everybody calls this storage as buckets let's go ahead and click on the create button and what do you want to call this bucket I'll call this one as images doesn't really matter we never actually uh we never reach it out using the name we always reach it out using the ID so that's what we need so let's go ahead and create this and we'll see the bucket ID go ahead and copy this and that's what so there we go our setting is all done now I want to copy this and I want to give this you into environment variable as well uh obviously these things will be changed by the time you'll be watching the videos so I'll be obviously rewriting them it's important for me to rewrite I'll be giving you all of that but you know what values and what variables to look up for so that's the step one of how to grab all the environment variables and what the settings we need from uh this one now let's go ahead and set up a little bit of our application as well and show you some of the best practices that probably will help you to optimize these application so first thing that we're going to do is inside the source I'll create a new folder and we're going to call this one as uh conf uh this is for configuration and we'll be creating one more file file into this one known as conf.js conf.js now what we are going to do in this configuration what we're going to do majorly and you'll see this as a common production grade setting and practices being used is you simply go ahead and create a conf or conf just like this and this is usually an object and you simply go ahead and Export that export default conf now why we are doing this this is being done because sometimes what you'll notice is accessing the environment variable could actually potentially throw up an error or sometimes there is no guarantee that what data type is getting returned this is not the case when obviously you're using typescript or something but this is a common practice being used for example I can just go ahead and say that hey I'll export a aight uh URL just like this and the value of this will be wrapped up in the string so that I'm 100% sure the value that's coming up is actually the string and I'll just go ahead and say I'm accessing that by process. EnV that's by default in the react and then I'll just name this one as whatever I use there so in the environment variable if I go ahead and say app right URL copy this and I go ahead and paste this up here so a common practice that you'll see quite a lot and similarly we have the project IDs and whatnot so let's go ahead and finish this one up app write project ID just like this and again same string and yes this one takes time process. EnV do and we need to grab uh the project ID so copy that paste that that's the project ID we need the database ID Now app right data database ID and our again string uh this is just to make sure that we don't fall into the case or the data type issues again nothing much process oops process. EnV Dot and we need to grab the database ID this simple export will help you to save so much of the problem trust me I've been into that phase app right collection ID and again that's going to be a string and again process. EnV this looks so much work right now but it saves so much of the troubles good practice again we have the collection ID one more bucket ID almost done app right and bucket ID there we go again last one string and we'll be saying process. EnV Dot and last one bucket ID all right so there we go so now that we are exporting this conf now we can import this at any place and wherever we import this we have uh conf. aight URL app right project ID in case you wish you can directly go ahead and import this but the idea is that if you face any error or the environment variables are not being able to load we see all of that at one place so this makes life a little bit easier it was not compulsory to do but in the good uh major scale projects and high scale High scale companies you'll find that this is a common practice so just wanted to introduce you that that yes things like that happens and thinks that it like works all right so this is our Basics the setups and everything are done now let's close all of this you have the idea how this is being done now let's uh set up the things for the next video that we are about to work so for this one we'll create a new folder inside the source and this is the most important thing in here let's go ahead and name this one as app right and inside the app right we'll start with just one file and then eventually you'll see that why the other file or how the other file will work we're going to call this one as .js and I'll walk you through what is our plan with this .js so right now we have uh just got the idea that how things are going to work we have studied the app right a little bit I highly recommend you to go ahead and explore a little bit more of the documentation of aite the idea behind that is I want to create these Services why Services what's the services whenever you work with these kinds of applications especially back end as a service you want to create a service file which actually a kind of a encapsulate all the hard details like how the registration work somebody who using our application should not worry about that he should see this as just a method that I provide you an email and password or probably a photo and you register me as a user what you do in the internal details should be uh hidden from me should be abstracted for me and another advantage of doing this same approach is maybe you are working with react native or maybe you're working some other uh application as well you can reuse this exact same code yes literally you can copy and paste this exact code and it makes it so much highly reusable of a code so that's a good practice that we are learning how to write the reusable code so that's one of the advantage we are going to learn and once you see an understand that how we can use authentication Service and the database Service as well as uh the storage service that's it you are Master about the three services in app right and you can explore things on the go we'll be learning everything from the documentation itself so that it gives you more confidence that yes you can do the things on your own as well all right so that's it all uh we'll be doing keeping it short and in the next video I'll be changing some of my IDs because I've exposed this to all of you uh so I'll be changing them and then we'll be working on the next file together all right so that's it for this video let's catch up into the next one hey there everyone Hees here back again with another video and let's continue our journey with the react just to give you a brief context in the last video we saw that how we can build a full stack application using react and aight I walked you through with the setup of aight and integrate it with the react just a quick uh sidebar or as a interesting note uh make sure that you in your app right app your app is properly configured you have added the web app and there's a local host string being added if you're not going to add this this might lead up into a lot of course error which are nasty in itself but the easy fix is watch out if you have added the web app inside the app right that's it in this video I will walk you through everything that you need to know about how to read the app right documentation and integrate the O section of it I'm taking one section at a time and we'll walk you through how you can make your code robust as well as highly reusable whether you're using aite in nextjs react react native flutter whatever you're using you will be creating exactly same file in fact you can actually copy paste this exact same file in all of your project and not only that I'll walk you through how the best what is the best way to read the documentation and all that you need quite interesting isn't it so this is all that you need to know about handling the O in the app right let's go ahead and get started let me share my screen first and then we'll work you through so this is our app right documentation and this is our react app that we have been going through for a while and in this I showed you that we have installed the app right so if I just open up my package.json we can see in the dependency we have app right pretty cool so far now after that with the basic configuration and having all of our environment variables which we discussed in the last video I asked you that create an aight folder and create an o. JS file into this one in this video I'll walk you through that how we are going to use this file but first let's read the documentation so when you go to the aight. iocs this is where you see all the docs and the organization of the doc the hierarchy of it the structure is pretty nice to go ahead and work on with this one uh so in this video I'll walk you through with this that how you can actually use this one so just give me a second I'll arrange these things uh some of the my elements are moving on the screens just like that okay okay so as you can see the products that they are offering is O database function and storage in this video I'll cover the O in the next video I'll cover the database as well as the storage part of it so that's pretty nice uh let's go into the O section of it in the inside this Au section uh you'll see that on the left hand side we have some of the concepts the journey and the references uh most probably the way how you're going to handle is first a look at the journey for example in this one we want to see how we can add a user based on email and password maybe you want to go with au logins or magic URL the same strategies are followed there as well I click on this and this is the first step that how I can sign up a user similarly I can just read the docs for login and something more but what if I need a little bit more so here first of all just go ahead and read one thing uh which is if you go onto this Au section if you go onto the Au homepage uh there is nothing too much to explore into this one just go onto this one this is my journey and after this journey let me just move this a little bit here so that you can see it all now what we are going to do majorly is this account API user API is uh you have a user and you want to modify some things about user maybe its name email and its record but this is the account API there's a difference between them so if I click on the account API you'll see there are two dots here uh just go ahead and click on this and this is where you see all the methods how to create an account how to update an email so all these things are mentioned here for example if I want to delete a sessions or list all the sessions I can just click on this and this gives me the source code this is a little bit shrinked up so this gives me the entire source code that hey you have to use a method which is known as a list sessions and I'll give you a response and in the response I'll give you a promise and you can extract data from this promise and you'll get all the sessions exactly like that if I want to work on the delete session I can just use the method which is delete sessions uh similarly if I want to create an email verification or I want to have something else whatever I want to get the account preferences or I want to update the name uh create a JWT token whatever I wish I can go ahead and do that now uh apart from this I would like to bring you back onto the account not here into the Au section so in the Au section the very first thing if I go into the Journey of email and password login notice here this source code just walk through with this every single time I have to import client account and ID ID for creating the unique IDs there is no big deal then I have two options here client and account now with this you'll see a similar pattern that is getting repeated again and again for example you create a new object out of this client okay I understand this fine I understand this part now I have to set an endpoint and set a project the endpoint almost always remains same until unless if you have added your own custom domains or something like that but in most cases it will remain same and you have to to give a project ID this project ID we have already seen in the last video that you can just go ahead and copy this project ID this is very repeatable code okay after this I have to create an account and I get this variable account after using the account that was given to me by app right and injecting this client variable to it so this is almost like giving a context to the account that here is your context and now give me this object account and this account is you can say a facade it has so many things inside it into it for example uh you can use a method like create this create method is actually associated with this account that's why I'm able to call it account. create similarly now if you go into the login you'll see exact same portion being repeated okay there's a client there's account there's an endpoint blah blah stuff again repeatable but what I see is account. create email session what parameters I pass on I can study it here but I can see this whole top point is very very repeatable now with this I would like to bring your attention that if these all things are very depat can I write a code in such a way that I don't need to repeat it again and one such example is create a class because in the class I can create a Constructor which can do all of this code repeatably for me and when I extract an object out of this class maybe all things are already done and this is exactly the approach that is used for creating uh the services yes this is what we call in the programmatically jargon word as service so what I'll do is I'll create a service and I'll use almost exactly same kind of a stuff like this so I'll just go ahead and copy this much from wherever you want to borrow it this is exactly same code sign up login doesn't really matter borrow this code and we'll what we'll do is we'll just paste this code here uh doesn't really matter these are for my references only now uh first of all I obviously need these project ID and stuff so I know that I have actually added them up inside my config so I'll just go ahead and say import uh conf and that conf will come up from uh we need to go One Directory back inside the conf and there we have got conf .js I guess yep that's exactly the file I'm looking up for now I have this conf data and with this conf data I can actually go ahead and use this app right URL project ID all these things are being exported so just with the doxis I can have this so this problem is solved all right uh what is the next problem this thing is very very repeatable so it's better that if I go ahead and just use this so I'll just go ahead and move this line above because I'm going to use this one let's create a simple class and Export that as well so I'll go ahead and say hey export class and let's name this one as o service we will export the class maybe we want to use it but my goal is to create an object out of this class and Export that object so that you can just import it and start using it if you want to use it anywhere else so I'll go ahead and use service if I I can write that correctly that would be great uh service all right so there we go this is our classic uh class in the JavaScript World okay uh the next thing is we need couple of uh these things so we need these uh client and we need this account as well so these are my goal to create so let's go ahead and do that so client is pretty obvious I can go ahead and say hey client uh you'll be coming up from new and client just like that okay happy with this one uh but account not so happy because because I cannot create the account directly right now account can only be created by passing the context of the client and in order to create a proper client context I need to run these methods do set endpoint uh do set project and I cannot just do that right now uh because otherwise just by creating the class I'm running I want to run these methods as soon as somebody creates an object out of this class and that's a great way uh to bring up the concept of Constructor so this is my Constructor and as soon as as this Constructor is being called that means as soon as somebody creates an object out of this class I'll say that this do client now will use the two method the first one is set end point I'll pass you the variables in a minute and I'll also go ahead and use the Set uh project yep that's the one set project and these are the ones I'll pass you the variables in a minute but once this is done now I can create an object not object the account this is exactly what we studied create an account by passing the context so I'll just go ahead and say this do account now you can have the value so what value you get you'll get obviously a new keyword and we'll get an account we'll pass on the context uh which in this case is this do client there we go so no more uh repeatable code in every single time I have to do this this is uh the best thing that you can do now let's go ahead and pass on the variables into this one so this one will come up from uh conf DOA right URL yep that's what we used and into this one we'll say do aight project ID there we go problem solved and this is highly highly repeatable code now uh what we're going to do is we're going to create couple of methods and again these are aight methods so your request is going to the app right coming back onto this one this might take some time uh so obviously Ayn await is your best friend in this case uh maybe you don't like them but these are the your best friends so what we're going to do is we're going to create a sync method and let's just call this one as create account and this method has no idea how it works it just works so this is my first method create an account uh how to work with that we'll walk through with that but I'll create couple of methods like this so this is my create account uh this is my login method what else uh do you need so anything that you want to use so two things we already studied sign up and login uh maybe more things you're are going to require maybe you are going to require give me the current logged in user or whoever has the current session so we can just use that so I'll just use this one uh get current user just like this and after that oh log out will be one so obviously we need to delete all the sessions we just saw the code for that so that will be log out so if you have anything more you can go ahead and use more such things now it's time that we write Logics for that so for that let's refer the documentation for the signup uh we have gone through with this much part so I'm not worried on this part now all I'm worried about is do create method that I have to go through I'll be giving the user ID so I can give my own unique ID or I can use the ID which I borrowed from the ight just here and I have to pass on email and whatever else field you have you just pass on them and it will create an account all right let's see how we can do that so anybody who will be using this method will be passing me uh what email um and we'll be getting password and we'll be grabbing the name as well maybe you have more field go ahead and grab more field nothing to be worried now in this one obviously this might fail so your try catch is is again a good friend uh feel free to use try catch or promises that's up to you I leave that as a simple exercise for you but I'll go with a classic try catch because I think that's easy and in this case I'll just go ahead and say Throw error that's it should have handled better but uh in this case just want to walk you through with that okay now uh we have seen that we have to use this method account. create okay I can use that uh this is going to be awaited because this is a promise that we are getting so if we are not using promise then obviously we have to wait uh so in this one I have to access this account I have to call this do account they don't because they're directly using it I have created an object I have created a Constructor so that's why I'm using this so This do account and it has a method do create that's it and all the values need to be passed on the first method is the user ID uh so the first method I can grab with the ID that I borrowed notice here this ID exactly same uh if you'll study the documentation of this this has couple of methods and as soon as you put up a DOT you can see that there is a thing known as unique no suggestions bad luck so you can just provide a unique and it gives you a string uh which you can store as a unique ID but uh there are a lot of other ways to generate unique IDs maybe you want to use Nano ID or something totally up to you I'll go ahead and give email and I'll give a password and I'll also give a name if you have more parameters go ahead and pass on this now this is going to create an account so let's store that into a variable and call this one as user account there we go now we have the user account now I can check it whether the user account was successfully created or not so I can just run a simple if else condition and I'll check if the user account exist or not so if user account exists do something if it doesn't exist then uh return uh whatever the value is maybe there's a null inside it or whatever that is it's up to you how you handle that maybe you want to return a proper error object that hey throw this error whatever you want to do it's up to you but if the account was created I want to log in the user probably that's my workflow probably that's the flow I want to go with the application so I can just go ahead and say return and I can call another method login and I can just log in the user using this method obviously this login is not going to work directly this requires some parameter I can log in with email and password now I can just simply go ahead and say return whatever is coming up back from this do login calling another method from the same class how easy it is and for this one let's pass on email and password that's it now whatever is your flow totally go with that but I just wanted to show you how life is going to become easier in the future with just this class that we have now similarly with the login we know that we just studied it to login we know we want to just work with this create email session I'll copy this so that I don't make a mistake and I can just use it so let's go ahead and try the exact same method so again try catch catch not going to do too much apart from throw the error and in the try part uh let's go ahead and return await obviously we have to await this do account and we have to use the method of create email session pass on the email and password that you have grabbed and that's it so easy to work on with and this is why I like so much this file is so much usable this file is not opiniated you can use this in react native you can use this in react I have used this in my lots of other tutorials as well and that's why I love to create this and maybe right now uh this create account as well as this login is not good enough feature for you maybe you want to add more just go ahead and add more methods into class that's great now let me show you how you can get the current user this is little bit hidden in The Docks but super easy again there's just one line here so I'll just go ahead and try catch and if the catch is there you are not able to grab the user then I want to do a little bit of the more console log but anyways I'll just go ahead and say return a wait is must have this do account and the method to get the current user is do get yeah super simple that's all I have to do uh no variables nothing is required it just since this account has an access to the end points and all of this so that's how I can grab it super super easy but if I'm not able to do this then obviously I'll want to do a console log in this case because sometimes this has happened to me that while working with this application things might have gone a little bit wrong so I'll just copy paste a little bit of the error so I'll just say app right service there is error in the service two colons and then the problem is in get current oops get current user uh this is the method which is creating me the problem two colons and then I'll just go ahead and would like to stack the entire error which is coming to me again it's up to you how you handle the error it's totally up to you uh but if I'm not able to run any of the try catch and all of that I would love to gracefully end this method by returning a simple null so I'll check whether what I'm getting if I'm getting null I can handle the situation based on that now another one is how to do the log out the log out is super easy if you want to do anything just go hit account API look for what all that you want to do you have to study this obviously uh list identities delete the identities update the phone numbers list the sessions delete the sessions yes this is exactly how you uh Delete all the currently logged in sessions are known as logged out uh you can get the sessions as well just like this you can go ahead and get all these sessions and there's a lot more here some things you require a little bit more of the studies and discussion the Discord forum is also Discord section entirely is pretty great anyways uh so let's go ahead and work with I want to delete the session so all I have to do is use this delete sessions copy this and we'll come back onto the log out we don't need anything as a parameter we'll just go with the try catch in the catch uh we'll just do a same kind of a thing so let's go ahead and copy this paste this and this time the error is inside the log out there we go in the try what do you want to do I want to await this do account uh dot delete sessions make sure there's a S at the end of it because it deletes every session that you have so there we go uh this is the way how we actually were able to just simply create some of the methods uh that helped us to do all of this but this is not all uh because right now this is a great class that we have built up and let me just minimize this this is going to work nicely and I'll not forget to remove all of this this was just to show you uh usually every programmer does that bring some things keep them in the file eventually remove that uh this class is is great but this Cloud needs an object so that this Constructor is invoked at the time of creation of the object obviously so what we can do is we can simply go ahead and say const and let's just call this one as Au service service and that service will be created obviously new Au service just like this so we have created an object now we are going to go ahead and Export default uh this Au service this object Au service so this lower one is an object this upper class is the class itself so now the advantage of exporting this object is that at any point of time the Constructor is invoked so my endpoints are properly created and since it's an object it can access all those methods so life is much more easier to this way so this is all that you need to know about these services and in case you want to add more methods maybe uh in your application it makes sense to update the status as well so you can update the status as as well that whatever however you want to do does it make sense or not status of anything so you can make more things maybe you want to create a JWT so you can go ahead and request create JWT it will give you a JWT so just go ahead and add more of these methods in your class highly reusable code and I'll obviously go ahead and push all of this code you can find them all in the GitHub section in the description section uh so this is really nice I enjoy this quite a lot this is really a high quality code that you have written highly reusable in any application and is fun as well so in the next video we'll go through with the same process but this time uh we have already done with the odd section next time uh in our application it makes sense to have an interaction with database as well as storage you can keep them in separate files as well we don't have that much of the application or the methods being called so we'll keep them in just one file and it's your choice your decision totally uh so in the next video I'll walk you through how we can interact with the database as well as the storage section and the storage apis of that right I hope you're excited if you are do let me know in the comment section I would be super super pumped up to get some of your support maybe on tweet on LinkedIn or wherever if these videos are making a little bit help uh some motivation is required for me I really really need that that's it for this video thank you so much I'll catch you up in the next one hey there everyone a here back again with another video and welcome to another episode where we are trying to learn react and we are trying to finish up our Mega project in this video you will learn everything thing that you probably will need to learn about app right's database how to make queries with the database as well as how the storage facility of the app right works the code that we are going to write in this video is of course highly highly reusable you can use it with the react application nextjs application probably with the mobile application as well like react n letter or whatever you're using will'll just keep it absolutely independent of whatever the platform you're using that's the goal and we are going with that and of course it's a little winter time time so probably one of my first video in in the uh Winter Wear so that's what we are going for okay so let me share the screen and first uh let me just remind a little bit jog of the memory of what we are about to do in this one so in case you remember uh in the last video we worked through with the OJs and I gave you a simple walkth through of how these things actually work and we created a simple o service which is having all the constructors and methods and we are using the client account we created methods like create account login current user log out and probably you can add more we also went up with the documentation so we studied the bit and pieces of the documentation of how the account API Works how you can add and learn about more methods in the documentation like creating jwt's or maybe creating password recovery whatever you want this is exactly the same thing that we are going to work through with I'll just scroll this a little bit so that we can see it nicely all right looks good decent uh yep I think yeah that's okay now the next thing that we're going to do is almost similar kind of approach that we are going to use but this time we'll be taking care of the different of the apis that are available so let's go here and this time we are first curious about database and then we obviously are curious about storage as well let's explore the database so when you look on the database here uh what do we actually go with that uh first of all you can see there are concept of database collection document relationship all these and then there are journeys about the queries that you can make of course you can do order pagination that's also available but the first of all let's understand the concept of databases and then we'll also learn about how the queries are being done and used if I click on the databases this is how you create an SDK and servers and whatnot the most important thing with the database as well is that you need some of the constant uh fields that are required now this one is actually uh node aight we are not interested in that because uh that's something you want to interact if you're making a backend as a application and which is interacting with that uh we are moreover worried about creating and getting through with the collections and buckets and all that but one common thing you will notice here this is here it says SDK database but if I go ahead and look for uh let's just say database apis notice here the exact same thing uh we get the app right from the and we extract client and database out of it let me Zoom this a little bit and we exactly create a client just like in the O service we created uh o from this this time exactly we'll be using databases we'll be passing on a reference of the client and the endpoints are exactly same the end points is first of all the URL and then we need a project one now out of this just like you were able to extract o database I think this gives us enough idea that exactly same way we can actually extract the services for storage as well and that's exactly what we'll be doing in this one so let me go ahead and copy this piece of code so that we can work on it together and we'll be using exactly same approach that we used in the O that let's create a class and set up all these things and we'll be exporting this class as well now it's up to you what do you name this class uh since there is not too much of the things that we are doing usually I would love to keep my storage into separate class and my database related all stuff in a separate class or a file at least but in this case this is not too much going on so I'll just wrap them up in save same uh file here I'm going to call this one as config not too confused with the conf conf is for app right's URL only and config is for all the configuration remaining all the configuration that I require let's go ahead and work on with that first of all I'll paste whatever I copied so this is the stuff that is required for myself now let's go ahead and move it at the bottom and just go ahead and explore them one by one so first of all the most important thing is to grab all the conf which is the urls so let's go ahead and grab the URLs uh URL I mean to say all the end points like uh the environment variables basically so I'll just go ahead and say give me uh conf and that will be coming up from let's go One Directory back inside the conf and we have conf.js or conf that's the first thing uh after that we obviously are going to need the client and database and I'm pretty sure you by this point you have learned that uh you can also extract all the services that you require maybe Au and other things in this case I need storage and we'll also discuss a little bit about the queries how to make queries this is the most important part of learning uh the app ride all right so most of the things are done and we'll be using exact same approach so let me also open up our o so that we can refer it back we created a class known as o service and we created client an account out of it great approach we'll be using exactly same so let's go ahead and simply go ahead and say export class uh service in this one we'll be exporting the class as well but the most important part is we'll be creating an object and we'll be exporting that so that object at the time of creation of an object we create or we use the Constructor that's already spinned off and also uh all the methods are directly available so that's the goal uh let's call this one as service directly and in this one first of all we need a client so let's go ahead and create a client and we'll be creating a client just like that so we have a client apart from this we will be needing uh databases so let's call this one as database and we'll be needing a bucket as well now bucket might be a little bit unfamiliar to you but if you have watched the previous video we know that the folders in the app right are called as bucket the same terminology is being used by AWS and all the other folks as well so we got the client and we got the database but in order to actually properly create a database uh we need couple of more things to be done uh so let's go ahead and do that uh first of all uh let's check on the documentation so database can be created by new data database uh but the issue is it needs a client to be passed on so we need to actually do that and client uh also needs these endpoints and all these things to be created so that's also interesting uh let me show you how that needs to be done first of all let's go ahead and create a Constructor in the Constructor as soon as somebody creates an object we'll spin off this Constructor so this do client uh will set an endpoint so let's go ahead and set an endpoint in this we'll be grabbing the endpoint from conf so C do API aight URL that's the one we need all right once this is done then we obviously need to set a project so set project that's the step one so we need to provide the project ID in this one let's go ahead and say conf. project aight project ID that's the one we need and once this is done that means properly a client has all the variables and points that are required for us to pass on so these two things are done and now based on this I can take a utilization and can actually create the database and the bucket so it's super super easy uh all you have to do is pass on the reference of this client and use it so this. database databases will be created by new oops not like that new database and inside databases and we'll be passing on this do client so I hope you can see the pattern and the consistency in the documentation of app right that is pretty useful exactly like this we'll be simply creating this Dot and this time let's create a bucket and bucket will be created from Storage service so we have the storage just like that and we'll be passing on this do client all right so this means now I have two variables with me database and bucket which has access to pretty much anything that you want to work with for example if you want to just list all the documents now databases is capable of doing so so now we can use the methods like list documents and pass on the document ID collection ID and whatever you want to ask for it this is exactly the point where you first time learned that what all you can do with the database so in our case we want to ask database and grab some of the values out of it okay so let me show you uh first of all let's create a couple of methods and see what they will be able to do obviously these methods will be a sync and the very first method is get post so I want to grab a single post out of it now obviously when you're grabbing a single post uh you need to provide that based on what you want to actually grab this so if I go back into app right Cloud which is here so this is my uh blog which is previous one I'm not using it I have removed all the apis keys out of it this is my new one but exactly same copy so if I go ahead and check it out and let's take a look onto the databases here and inside this one uh we do have a database uh we were having the datab base so uh just to give you a brief idea that how this actually works or let me just walk you through directly okay so how can I grab a post out of it okay let's study a little bit of the documentation okay get the document so this is the one that I'm looking up for Again by the way all the cred operations are listed here create get update and delete so this is my get document in order to get a document notice here I need to pass on the database ID obviously I have that I need to pass on collection ID obviously that makes hierarchy and then I have to provide a document ID and in case you remember uh we created each document ID as a slug uh obviously you can pass on the autogenerated IDS but we actually replaced it with the slug if you remember in the earlier earlier videos we actually did that so now somebody will be passing me on this slug uh of the blog post so that's a unique one for me and I need to grab the ID from it okay now how do we do it of course it's a database operation so it needs to be wrapped up in the tri catch first of all let's do that and let's do a console log as an error so in the error part uh we'll do exactly same we'll refer it as app oops not like that app right service and we'll just mark it where the problem actually comes and we'll say problem is in the get post so that we can again come back and look at which what is the exact point where I'm facing the issues uh once this is done then I'll obviously go ahead and U print the error as well I think that's good enough and we are going to return a false so that in the front end part we can handle that now what's inside the tri part now you'll be surprised to know that how easy it is to actually grab from the aide database notice here this do databases this is our service that we use and all I have to use is a method I hope you can see that already get document yes uh list document is to grab all the documents get document is where you pass on that this is exactly what I need you need to pass on an ID here so again the step one is to pass on the database idid so let's go ahead and say this is my uh aight database ID that's the step one the next step is to provide the collection ID so I'll grab that from conf do uh aight collection ID that's the next step and once after that I have to provide this slug which whoever is using will use this method will pass me up here and will give me that uh once this is there obviously this operation will take some time so let's go ahead and wrap it or prefix it with the a wait and let's directly return that so whatever the value is coming in uh coming out of this query we'll directly just send it to the user so I hope you can see it's not really that difficult whatever the unique value is in our case slug is there we will be just using it and when we'll be taking uh actual usage of the service you'll understand that how you actually grab that slug that's really easy from the URL we can grab it uh from the title we can grab it there are so many places but this is it this is it now the next step is uh that okay I know how how to actually use this one like I can update the document get the document we'll create those methods as well but let's just say now I want to query the database and only want to find out uh all the values uh which are status as active so there is some query in my case uh I'll just show you that I think that will help all of us in this one instead of worrying about the IDS and all of that so let's go into the databases and in the databases we can see this is our collection and inside this we have a Blog so all the attributes when I check this I have this user ID so uh user ID is there there's a title here as well and uh we do have a slug here as well so inside the user ID we'll be passing on the Slugs and all these not in the user ID but the title anyways I'll just see this one now my goal is that I want to find out all the status which are uh marked as active so there's a query status need to be active so this time find me all the documents uh in this database ID in this collection ID but not just I'll pass on one thing and give me all of that or that one particular value give me all the values based on my query so this is the point where we need to study that hey there is a key and the value is that only give me those documents so I'll come back here and if you'll notice that uh in the database I need to expand this a little bit probably not and let's go into this one references and this time we'll be going into database and I want to learn about the queries so how do I make the queries that's interesting so notice here it's super easy all you have to do is query uh do select or do equal whichever you want to use this one says select which attribute should be returned from a document a return document if attribute is equal to any value provided in the array so this is one that looks okay to me in this case because I'll be providing you status and a value of the status and you give me all the documents uh that actually matches that so I'll provide you a title in this case it says Iron Man but I'll give you a query. equal uh which is status and the status should be active so I'll just give you by the way in the array you can pass on all the parameter as a string if you have multiple but I do have just one so I'll just pass on the one so let's go ahead and do that okay now let's go ahead and write a method for this one that I have uh let's go with this again a sync we go with that get posts because multiple will be coming up and then I have to make a queries uh this is the parameter somebody will be giving me if nobody gives me that then by default I'll use that the way how you actually grab the queries is you write exactly as you are being told so remember everything was inside the square bracket you need to pass on an array so this is the first step so you want all the ti it to be whatever is mentioned into this one or you can pass on the key value pair as well the title Iron Man and all of that so we'll be using the second one I need the title to be this one uh similar to this one so this is my query query do equal there we go and this is the parenthesis a method being used notice here uh string and the value query types whatever that is basically it's saying is give me I want the status this is my key that I want to find out what is the value that you're looking up for if you have multiple values you can provide an array but here uh the type that I'm looking up for is active all right there we go uh not that difficult uh so now I need to learn that how can I use it usage is another another simplest thing uh that you can do uh this is building queries so if you look up for it notice here I have to say is database ID then I have to go with the collection ID then in the array I can pass on as as many query as I wish I just have one that's why I directly call this one in an array but if you wish you can just convert it like this I have already converted that here notice here I've already wrapped this up inside the square brackets that is an array but if you don't want to you can just make it one by one I actually did a little bit help to myself of wrapping this up now as a third parameter I can directly pass on that's the advantage great nicely done okay let's go ahead and try this again same will be using try catch the error part will remain same so I'll just copy and paste this one copy this paste this and this time the problem if it might occur is in uh get posts so multiple one okay next up is how can I try this up really simple this dot databases and this databases will list all the documents based on what first of all give me the database ID so let's say conf dot project ID I've given not the project ID my bad uh database ID we are interacting with the database app right database ID second is collection ID so this one will be conf dot collection ID app right collection ID and third part is directly my queries uh this is the only part where you need to be careful I have wrapped this remember I have wrapped this queries directly in the square bracket if you are not doing that then make sure you're passing it like this uh just a syntax issue all right so obviously this is a database operation it needs to be await so let's go ahead and do that once this is done let's go ahead and return that directly so I hope now you understand it's not really that difficult to work on with this so we have worked on two database operations one is get post one is get post based on queries it's very repeatable very understandable and very consistent code in the app right so let's move and Shrink this up and let's also shrink this up and let's talk about other operations which is creating the post creating the post is super super easy if I go back into the documents database uh documents list documents create documents let's see how do we create a document and this is how you create the document you simply say create document you provide the database ID collection ID something that is unique and all the things that you want to store that is already available in the at attributes that you are having all right so let's go ahead and do that uh that will also help you to understand that since this is unique that's why we were able to go up here and mention that hey this slug is unique so give me all the values based on the slug hope this helps now let's go ahead and move on to another one again this one will be a sync and we'll be saying create a post and this should be super easy what do we expect that how do we create a post while creating the post I expect that you pass me on a title you pass me a slug value slug is nothing just a title but we remove all the spaces move them into dashes just we saw in the demo and then we also expect that you'll provide me a Content you'll also provide me a featured image you provide me a status whatever the status value is and we'll also grab a user ID okay all the values are here once these values are here again same try catch operation very repeatable code and that's the good thing once we have a repeatable code that means uh it's something good okay this one will be create post errors and everything are good let's go ahead and do the same thing now we know that let's go ahead and return this this will be await this do databases this is going to work with the method create document provide all these things uh the first one is conf Dot aight database ID the second one will be conf dot aight collection ID and the third one is what is the unique ID in our case the unique ID is not the ID but the slug that we want uniquely we want all the post to be unique so that's the slug and the third parameter is provide me all the objects yeah there we go so let's go ahead and provide all these objects so we'll go ahead and say title then we have content we have featured image we haven't uploaded the image yet but we'll work on that status and we have user ID there we go so all the value that is being passed on to me as a method I'll just use them to create a post now uh going back this is for creating the post okay uh how am I going to do and update the post that's interesting let's go ahead and say collection databases let's go into directly database apis that's always easier and this time I want to update the document okay so for updating the document you have to use update document notice here update document database ID okay collection ID no big deal uh what else do you need and this is not proper this should be a little bit more because you need uh something to find out the update document unique IDs so I think the collection ID this is not scrolling properly we definitely have more we definitely have more update the document here we can read about it collection ID document ID data to be updated and the permissions anyways I'll walk you through with that no worries okay so this is my create post let's go ahead and create another method which will be update I'll sync update post and while updating the post uh update document you need to provide that what is the unique value I am looking up for for updating that and update document database ID this is not proper I worked with that I worked with this this is newly updated document probably that's the reason so while updating the post you will need a slug which is uniquely identify your document that needs to be updated that needs to be passed on otherwise the method of update document doesn't work uh probably there's a mistake or I'll send up request to them I worked with these documents in the past so probably that's that's the one issue and then one we can do is provide me the title the new updated title or the same whatever that is you pass me content you pass me featured image and you pass me status these are the field which we are allowing to change and once this is done uh same stuff try catch let's open this up we'll copy this we'll paste it up and this time if the problem appears it might be an update document tracking all of this and of course we will be returning the await and this time this do databases and update document now the way how update document works is uh first of all you provide the database ID and the collection ID in which or in what one what exactly the collection we are looking up for so conf. aight database ID the second step is collection ID so collection ID the third step is to provide me the unique ID if you're working with the unique IDs provide the unique IDs if not just provide anything that's making your document unique in my case that's Slug and then pass on all the objects that you have so exactly same uh oops not like that uh we do have I think I can copy paste Yep this is all the data that we have so I'll just copy and paste this one so we have title content featured image status we are not passing on user ID because we are not allowing to change that and we are also not accepting that so there we go all the data is done and that's it that's our update post obviously we need to write the delete one as well and to delete a document uh what else do we have database ID collection ID there is something something that is missing because we need a unique identifier otherwise what document you are actually deleting uh there is no way of finding that out okay there's some something probably a bug or issue anyways this is you get the point how this is being done so now the best way is actually to actually copy and paste this entire stuff because that is much much easier now now that you understand the concept this one is delete document or delete post uh we'll be taking the slug but we don't need these object because it doesn't really matter what's inside we just want to delete it no need of comma as well just give me the slug and I'll try to delete it and let's update this one this is if the error occurs it might be delete document good now we also don't need this so that's great and obviously the method gets updated instead of update we want to use delete document two times document delete document uh hopefully I have copy pasted it correctly and we provide the database ID we provide the collection ID and we provide the slug something that uniquely identifies this one uh the only new thing is you cannot just go ahead and return it because it doesn't return anything the return type data type is a little bit questionable here uh so we prefer to manually return something here so we're going to go ahead and say return true that yes it was properly returned return true oops my bad this should go up here okay looks good let's indent that properly there we go so this is nice in the update one you don't need to return that updated one actually returns you the updated document that's good but the delete actually if you'll see they should actually go what the response is going to be it just says Hey 204 application Jason uh so we don't have in the update document if you check out uh what is the response uh you can see it gives you the document that's the good one but if you check the delete document uh there is no document that is returned there's no true false value that is returned so yes nothing magically is coming out of the box I'm trying to teach you how to study the docks and all of these okay so delete post is done now let's work on one more thing uh we can actually remove them we don't need you uh just like that we have created all these methods about update post delete post create post get post and pretty much anything all the queries that you want to handle non- queries you want to handle we have worked through with almost every possible case that can happen in the database if there are more you can obviously modify these existing methods or can add more by reading the docs next one is bucket so how do we handle the bucket part let's go ahead and study the docs so this time we want to use a storage service now this is the storage service and it has has all the methods how you can list all the files create the files get files update files delete file first for me is the create file I want to upload a file so it simply is a method which says create file in my case notice here it gives you doc bucket ID which we have already then you have to provide a unique ID for the file and then you can simply say document. getet element by ID or however the way you want to grab it uh probably there is something definitely wrong with the scrolling because I can see there is more content here but it's not visible uh is it my browser just yeah we can see that the scrolling probably my browser is going that with this this reminds me let's go back into databases and let's see how the update document looks for and collection ID and the document ID notice here now it says and mention this there is a un need document ID which is required and that's exactly what we used uh probably there is something in when you scroll this ah now it's scrolling but if I open this ah it doesn't scroll probably I can repeat a report a bug to them anyways we got the concept uh so coming back onto the point which I was saying that let's go and talk about storage we want to create a file the rest of the stuff we have already take care now we need to just run through the method of create file uh whoever is going to use this method will pass me a file uh just like here they are passing the file just like that let's go ahead and now in the same file I'll just write it for it maybe you want to use it this is where we are using the storage service okay so again a sync and we'll be calling this one as upload file files no we are just dealing with one upload file and there we go now how we are going to deal with this one exactly same go with the try catch borrow the catch method copy that paste it up here and this time if the problem occurs it is coming up from upload file uh what do you want to to do in the try part we obviously want to return after awaiting and sending this to bucket same Concepts uh this do bucket do uh create file it takes a couple of parameter first one the bucket ID which we can grab from conf do uh bucket app right bucket ID there we go we need a unique ID so obviously we don't have a unique ID but if I remember uh in the a we actually no we didn't actually worked on this one but in case you don't know this we should should have dealt with us probably anyway uh you can see that uh there is a way how you can grab the unique ID so notice here there's a file ID but app right also gives you something very interesting known as ID so here uh inside the conf just like we were able to grab this let's grab the ID and you'll be able to provide unique IDs with that although you can use Nano IDs or something in case you wish to I don't wish to I just want to use app right Services if they're directly available to me why to be bothered anyways so once we have this ID now I have to give a unique name to the file so I'll just say ID do unique and that's a method so there we go and then provide the file that's it app right will take care rest of the things that hey I'll upload the files we'll provide a unique ID and will return you all the path that you require for this uh file so public path will be given to you so that you can display them so this is basic of how you upload a file uh can you assume how you are going to delete the file let me go ahead and copy this and we'll go up and paste this let's move a method for delete file so delete file obviously this time you don't need a file you need just an ID of the file so just provide me the ID of the file and I'll just delete it okay how can we modify this let's see how to delete a file obviously give me the unique ID so bucket ID you need to give me file ID you need to give me that's it two methods and and it can do the job so bucket ID I've already provided you but the method is delete file so let's go ahead and use that delete file I'm giving you the bucket ID but I cannot give you this file ID unique it generates unique ID every single time obviously and here I cannot give you file but rather I have to give you file ID so whoever is using this method need to provide me this and uh this time if the error comes up it comes up from delete file all right so you have learned how you can upload images by the way this exact method works if you're uploading PDFs anything else that you probably want to deal with so delete file now one more last thing I would like to discuss before we sum up this entire lecture you can see that aight has so many things list files create files get files update file delete file but what's interesting is is you can also get file for the preview what's interesting about this file preview is uh file preview uh this method supports preview of these images so entire image doesn't uh gets onto your network bandwidth but rather it's a cutting and the resizing of your preview image so for example preview is supported only for the image for style smaller 10 MB so let's just say you uploaded a file of 8 MB it's not 8 MB in the preview it's just few KBS so it saves so in our application we also want to give this feature that somebody who wants don't want the entire file probably just want a preview of it lower quality file we can actually give that so let's call this one method as well and good thing about this one is uh since there is nothing too much of operation going on uh you don't need to make it uh a syn AWA although if you do that's great but there is nothing being a sync a weit in this one I'll show you why this is because if you notice the method it's just storage. get file preview uh and it's ridiculously fast again anyways it might take some time so we'll see that let's call this one as get file preview and provide me the file ID and what we're going to do is this is like that and we can go ahead and simply say return this dot bucket and we can just work with the method get file preview and provide you the detail the first one is conf do bucket ID app right bucket ID and the second one is uh file ref file ID and once this is there uh you don't want to return it like this because if you notice it carefully uh it's not mentioned here let's see what's the return type that we have response so response is actually a big object file for View and you need to actually do a console log of this and once you do the console log of this you will find out that uh this whole thing actually needs to be worked a little bit different so I'll just come up here and once this is all done then I go ahead and say href this is the one you can get host name name and all these things yeah a little bit sneaky but yeah this works nicely if this doesn't Works uh we'll come back here we'll make it a sync we'll just insert a weight keyword here but I have noticed while working a a previous version of this application that this works directly fine so if there is no need of it iy to just add it okay so this is all the method we have studied in depth about how to upload the files delete the files get the previews if you have if you really want to work with more methods you can definitely work with that now you have the idea uh last thing just like we did uh we'll just go ahead and call this one as service and this will be a new service we create an object out of this class and we export this one so export uh default and let's export service there we go this will make our life so much easier of course there might be chances that this might have some bugs some issues we need to fix them up uh these can be tested while we actually work on the project in the front end side of it but at least our backend part is all done and this this really I'm super happy that now we are actually able to write JavaScript using aite we're building full stack application so this is my back end that I have all written here uh great work there in the backend part let me go ahead and I'll just Commit This one as well let me just go ahead and add this one add service service for database and Storage all right let's go ahead and do a quick commit and I'll push this yeah some people really say that hey you should do it from command line no I feel here it's nice and easy all right so this is all the knowledge that you really need to have to interact with aight uh databases and storage now you're completely equipped with handling any kind of thing all the queries anything that you want to do this I hope that this video has given you enough of the knowledge to work things on your own now that's it for this video from the next video onwards we'll start working on the front end side of the application we'll walk you through all the caveats how to build a fullstack application which is authenticated some pages are protected and all these things hope all right so that's it for this one if you find this video interesting do leave a comment section I really really need some of your help and support your comment just a like just a heart it gives me so much of motivation I really needed to continue do all of these videos uh thank you so much let's catch up in the next video hey there everyone hes here back again with another video and it's been quite a while in fact few good weeks and if you're watching this video in just one go then obviously we are meeting back toback but if you're watching it on my main Channel as the series is progressing yes I was gone for a couple of weeks a lot of health issues uh but thank goodness I'm back it's winter here and the best part is I do write my strategies to record these videos otherwise it would be so much difficult probably I would have to re-record the entire uh this segment uh but thank goodness I write my strategies to teach these topics and that makes life a little bit bit easier so in this video we're going to continue from where we have left uh in the last videos which was just handling the app right so far we have handled the app right now we are going to see that how we can make those web request and if we have any issues how we can debug them and how the application entire flow will work I don't expect anybody to Simply go ahead and just build these kinds of application in just one go because simply that's not possible so I'll walk you through what is going to be the strategy how we are going to deal with that first of all I want to introduce the react Redux here especially the Redux toolkit so that we can manage the state of the application on top of that we'll be needing couple of pages what goes inside those pages we'll worry about that later but we'll be needing few pages the reason for introducing these pages is because we obviously we'll have the routing in our application so some page are going to be protected that they cannot be visited if you're not logged in but some pages are available to everyone for example if you are not logged in the signup page is available but if you're logged in the sign up page is not available for you so there are certain pages which are available to non-logged in user certain pages are available which are for the logged in user so we need to figure out a way a mechanism a logic to do so it's fairly simple logic I'll walk you through with the two ways of understanding the code so that you can probably understand it at a very better Pace all right so quite a lot of stuff that we have to do uh let's go back and try to share my screen so this is my screen that we have first let's uh open up the Redux part so I'll just go ahead and work with that so I'll just go on to Google and we'll go into Redux toolkit that's the one we are looking up for the getting started part it should be fairly easy with that and we just need two things uh the first one is Redux toolkit and we of course need react Redux so that it can act as a binding agent between the Redux and the react Redux is a is an independent library in itself you can use it with the vue.js probably anything else that wherever you want to maintain the state you can use that I'll copy that and obviously we'll install this so quite while and now let's go ahead and install the toolkit first uh doesn't really matter which one you install first but since it was mentioned in the documentation I'll just install that uh we also need the router as well so let's go ahead and since we are already here let's install that so I'll just go ahead and say react router Dom that's exactly what we need and that's how we always install them uh we simply go ahead and say example tutorial now I just want to install this uh what's new probably not tutorial I think that's a better place to install it h can you give me a point where I can install it uh probably not okay give me a step to install it otherwise I have to do npm install react router Dom I'll probably do that okay so I'll just go ahead and say npm install react router Dom router dasd uh that's the easiest way to install this oh react oh my bad I mistyped it react router Dom okay that should be all so we have couple of libraries being installed in our system now we have Redux toolkit we have react router Dom this is the basic react Dom we are not interested in that we are interested in the react router Dom and we have the Redux uh react Redux The Binding library for that uh yes we will be needing couple of more but right now let's handle what we have in it right now okay uh one common thing that we are going to do is in this application in fact any application that you'll be working through you will have a lots of pages in them our application also has a few good Pages what goes inside that Pages we'll worry about that later on in the component part but right now I think it's a good idea that we just create those pages and try to figure out that how we can inject our state management as well as how we can protect some of these pages so let's go ahead and practice that that's a good idea so I'll just do a quick LS and I can see all of my files and everything are here I will go inside uh the source so let's go into the source and if I do a quick LS I can see app right and all these files and folders up here I think let's create a new directory in here I want to do this via the command line because it's much more easier and faster this way feel free to use your mouse I think this is faster approach and better approach for me so I'll just go ahead and say this is Pages uh now we have pages I can go into the pages as well and I'll just open up these pages so that I can show you what all the pages that I want to create so obviously uh this is uh all the pages that we have so we'll have ADD post uh. jsx and by the way touch is a utility which helps you to create the files and since there are so many files I just don't want to just right click new file new file I just want to create them for here and we'll be having one for all posts. jsx so add post is going to be where I'll be giving a form where user can add a new post and all post is where all the posts are going to be listed in the card format and then we'll be having an edit uh post. jsx this is where uh if you are owner of the post you can hit the edit button and we'll give you a form again the same form will be utilized of the add post but we'll be just pre-filling the data into that that's how it is all done and we'll be having one home. jsx uh this is just a homepage for you U for users and then we'll be having one login. jsx of course for login we'll be having uh one post page as well if you want to read an individual post so jsx and one last one which is sign up so we'll be having sign up. jsx now if I go ahead and do this this creates all these post and everything for me uh that's what I love about it uh you could have done that right click as well but that's okay as of now I'll just use a utility RFC which is by the way a Rea addon of a vs code that you can simply have so I'll just have an react functional component just like this so it automatically detects the file name and we'll be just having this one right now no logic is there we'll be just uh putting these uh basic templates here so that we can Import and Export them RFC all post same goes for for edit post RFC there we go I'm not doing anything at all uh just providing these values what goes inside them we'll definitely have a a detailed talk on them if we need any more pages we'll obviously create them RFC save that and one more RFC there we go so now we have all the pages so one task is done let's go ahead and close that I can actually close others just like that there we go so all the pages are there right now all these pages are available in fact if I if I just go ahead and set up the router and everything uh almost everything should be immediately available to me now one more thing that we are going to do here is uh inside the source let's create one more folder where we are going to handle a couple of things I'll show you how to do that but first let's create a new folder and call this one as component or components that would be better now inside the components uh we'll just create one uh only one file as of now which will be uh simp the O layout how the authenticated layouts will be there right now there's no logic into them but we'll obviously we creating them uh right click and a new file inside the components let's call this one as simply O layout. jsx Okay simply RFC nothing there uh instead of au layout let's go ahead and call this one as protected again it's up to you if you want to call them something else totally up to you I'm calling it is protected as because if I want to protect any of the page or anything I'll just wrap all these things around this component so this will be serving just single purpose that anything inside this layout uh is going to be something which is authenticated if you are authenticated I'll serve you this will act as a rapper or by the the rapper means I'll simply accept some of the children here and all I'll do is uh render these childrens that's that's the whole idea so instead of returning this kind of a thing I'll just say that hey just return the the children up here so I'll just go ahead and use it like this and we'll go children definitely I'll go ahead and modify this a little bit but right now this is the goal you accept some parameter you render them uh but right now this of the component doesn't know that which one to render which one to doesn't render and in order to actually have this we will accept a simple authentication as a parameter authentication and that authentication by default will be true if the authentication is true that means render this page otherwise don't render this page but right now we have no idea from where this authentication is going to come to us and how this will work so obviously this is a little bit confusing point at this point but these are very common scenario when you work with any react application you have some kind of protected page or an O layout which helps you to render conditionally whether this component should be rendered this page should be rendered or should not be rendered so we'll work on that we will also work on uh this will be responsible for navigating the people if you're not authenticated let's redirect you on the login page if you're trying to access any resource which you shouldn't be then let's redirect you to login page if you're already login page we will we will make sure that you don't access the login page or sign up page so that logic will go in here uh but again this is just a basic right now just to help you to understand what is going on with the flow of this application all right uh this is all done uh we'll come back onto this one right now let's go into another part which is the Redux part of it a lot of people are afraid of Redux you shouldn't be we have played enough in this entire series and I'll walk you through how the Redux will work and we'll just manage one thing and I'll give you assignment to manage more things that's how you learn when you painfully you take some pain and you try to work with these assignments so right click on the source and create a new folder and we're going to call this one as simply store the name of this folder is not important at all you can call this one as Redux you can call it as a super and Redux doesn't really matter uh we'll create two files into this one the next file is going to be store again some people like to have this a store in the root of the application nothing wrong in that but I'll just keep it all separated up here I'll also create a slice in the Redux toolkit there is a concept of creating slices we discussed that in the previous video as well where I showed you the crash course on the Redux uh toolkit so please watch that in case you feel a little bit uncomfortable here and we'll be having this o slice JS of course okay first of all let's manage the store part because that's the easiest of all in this one all we need to do is configure the store so we're going to Simply Say Hey I want to confy confy store no suggestion configure store and that will come from Redux toolkit bothering me a little bit yeah there we go once I have this one then I have to create a store from this configure store so I'll just say that hey I created a store from configure store this is a method which takes object as parameter now what goes inside this one this takes slices or you can say reducers as well but we don't actually make these reducers appear That's exactly this o slice is being made for you create all of your reducers here uh the way how we create reducers in this one here is pretty simple we simply go ahead and first say that I want to create a slice so create slice there we go and this one comes from the Redux toolkit then every single slice needs to have an initial state so that it knows when I get started uh what should I do or how I should behave so for this one we'll just go ahead and say initial initial State uh feel free to name it anything doesn't really matter uh initial States the status is going to be false we are using it to keep a track of authentication of the user so if the status is false we'll assume that the user is not authenticated and we'll also have the user data so if the user data is there then obviously it will be filled up otherwise by default it will be null there is nothing inside the user data user data is something which app right will give us back uh for example what's the username what's the email what's the ID or any information you can just add up here now this is the initial state but the next point is to create the slice just like we created the store it's exactly same so we go ahead and say Au slice and that o slice is being created by create slice of course lower create slice uh it's a method which takes an object as a parameter so that's what it does now this takes couple of parameter not just one the initial State couple of parameters first of all you have to give it a name so that although this is O slice it will be very unique but it is a good idea to give all of your slices a name so that you can refer them back with this name then passed up the initial state of what the initial state of the slice is going to be and then you create your reducers so this is your reducers now reducer is an object and inside this object you create all all the methods uh or whatever you are tracking now good thing is uh you don't have to worry about uh you might have heard the thing in the in the reducers and especially uh the Redux that hey don't mutate your state or something you don't have to worry Redux has taken care of that behind the scene you just go all crazy now Redux take cares of that behind the scene that's a good thing so inside this reducers uh the first reducer or the method that I have is login as soon as somebody creates a login uh we'll give him an access of state and and action so as soon as you create any method inside the reducer you have already an access to the state and the action state is that current state of what the what this uh store is actually depicting right now so that's what it is action is uh something when somebody wants to access the reducers they use actions to reach you out so that uh they can provide you the payload they can invoke these actions and all these things so pretty easy uh this is a method now just go ahead and somebody will pass Us in the state the status so if he's logged in then obviously we need to change the status to true and they will also provide me a payload the payload is accessible in the action so I'll just go ahead and say State doaction actually not the action like that state. user data somebody will be providing me this user data inside this and I'll just go ahead and say I'll access it via the action do payload do user data all right so that is it it so now something uh really nice to remember this is something that we are doing if somebody is calling this login and is providing me the status that means yes after logging in once you hit that API get the data back you are 100% sure that okay you are logged in then you reach out hit this reducer so I'll make the status as login and via the payload you'll give me the user data that I'll fulfill into this one this will now reach to the store inside this configure store and it will be available to anybody from any component you can directly reach out to store and can access that data that's why these are super helpful uh similarly we'll be having a logout reducer as well so we'll just go ahead and say hey let's have a log out same exactly same repetitive stuff we'll have the state uh you can optionally have the action as well but in this case we don't require because once somebody hits a log out we'll just flush out everything uh but still there is nothing which is stopping you to have an access to the action here and the payload here you can do that I'll just go like this and I'll just refresh the state so the status will go to false and we'll just remove everything from the data as well so state DOT user data by the way you can add more in the initial State and have more data if you wish but right now we'll just keep it that much simplistic stuff okay now once you done with that the job is not done because you have created OD slice but there's a little bit more to it by the way in case you missed this take a screenshot pause it here uh this is not enough we need to export this as well uh the most important thing is what people are looking up for uh is definitely these methods login and log out so that they can access that but also uh some of the folks are looking for this entire reducer who are those some of the folks your store yes so we need to export not only these methods but also the reducer so let's go ahead and do that first of all let's export the reducer that's my default export default o slice and just go ahead and Export this reducer reducer reducers H when did I name it as reducers H let me just quickly check this this is seems like a small bug all right welcome back yes I had to look into the documentation and that's how the real world developer works we don't remember everything we always consult the docs uh maybe stack Overflow these days chat GPT to figure it out and yes this is how it works so we can see we are following almost exactly like that so notice here here we are saying reducers uh but at the time of export we are actually saying counters slice. reducer which does it so Redux in itself is kind of it's wrong to say library it's more of a framework in itself uh which has its own way of dealing with the things so uh we just export exactly like this like actions reducers so yes it might be a little bit confusing that hey here it is reducers and there it is reducer only singular uh but yeah this is how the documentation works so we'll just follow that okay uh that reduce removes my confusion as well yes this is but it's a good one uh good one uh I'll try to investigate it more to study more about it that why this is the case or how this is the case Okay so the step one is done that we have exported the reducer but as we know we have to export these singular method so that any file can actually uh use these methods as well pretty easy we're going to go ahead and say export const and then all the methods that you want to export like login log out and we simply go ahead and say this one is going to be o slice do actions there we go bothering me a little bit we need to have a space around there we go so this is what we have as of now so both the things are done now step one is to get onto the store and first of all import these reducers into into the store and make sure your store is a aware of that not available aware of that so we'll just go ahead and say OD slide from o slice now go into the configure store this store uh need to have the reducer just like this and all the reducers that you have you have to actually mention it here so my reducer name is O that is my o slice if you have more you can just put a comma and have it like for example you're tracking a Blog here so your blog slice blog slice goes like that of course with a space so you can just go ahead and work on with that I don't have it I have just one so I'll just save it one I need to export that so that I can use it wherever I like I'll just go ahead and say export export default and store not like that there we go so the two things the major things are done and we have this o slice we have store so at least the preparation part of our uh Redux is all done let's go ahead and work on with how we can actually use these stores and work with that now for this we'll go into into our H where is our main. jsx this is where it is so inside the main. jsx we can work with that if you are working on something like index. jsx that's also fine but what we are looking up for is the main where our application is loading this is where I have to work on now I'll first and foremost I don't want to wrap it like this uh I'll just create a router for this one and then we'll work on with this one so first of all uh let's go ahead and create a router so I'll just come here okay this is fine okay uh first of all let's go ahead and uh create a router Router and router will be created by create browser router create browser router and this is a method which takes an array and we need to import this right now there is nothing which is importing it so import create browser router and that will be coming a from react router Dom so this is the first part uh we haven't worked on how this will be taking care of the pages yet but we have a create browser router and we have a router provider as well router provider okay so assuming that uh the router is all done of course it is not but assuming that this is all done uh let's create this one first so the way how it works is uh now instead of just directly rendering the app we don't do this uh we actually remove this part this app will go inside the browser router at the homepage that hey this is how we load the app uh but for a minute just remove this one part and all we're going to do is have this uh router provider self close it and now we'll say that hey router will be this router that we have just created right now there is nothing but don't worry I'll walk you through that how this is being done so this is the step one how you configure all of your router if we'll go inside this array provide the paths that home is governed by app and what all components basically we are loading or we can say the pages that we are loading so that's the basic of it but we also want that we should have access to the store as well that's the most important part for us so how we can have the governing that all of my components know that there is a store so for this the major role is that everything like all this router provider at every single time they should be wrapped by the store that is the problem statement so let's go ahead and first import that so I'll just go ahead and say I need a provider and that provider is not from the react we need from react Redux there we go now the next step is really simple absolutely simple this browser router this whole thing needs to be wrapped with this provider provider there we go close it and this needs to go inside this there we go but just putting this doesn't means that it is already automatically aware of the store we need to import the store as well so we'll just first say that hey let's bring up the store we can probably get it here import store from and the store is going to come up from we'll go inside the store and there we'll be having store.js and now this provider can say that what is your store uh just name the store so simply go ahead and say uh the store is going to be store there we go now this is all done properly configured that hey uh the store since this is my store this is my state of the application every page is going to be governed by the state that is why I'm wrapping provider first and then everything is going to be governed by this so I'm just governing it so I'll just move it a tab so that it's easier okay this is the first part of how this is going to be done and by the way this browser router that you're creating that can be done VI multiple ways there are a kind of a sandwich method as well uh in which you just create components inside the components or you can also provide an object into this one so we'll go with the object one so here is our object that goes like this and then I'll just go ahead and say hey path what is the path I want to have a path of Slash who should be the element which should be rent Ed when somebody visits this path so obviously in this case now we say the element which will be rendered is going to be the app there we go self closing there we go now the next step is uh do we have sub paaths after this application after this SL do we have/ signup do we have SL login do we have SL poost yes we do have that all goes into the children so as you can see children right now it says object but no it is not an object first of all uh this is the proper syntax and and this is further down again an array okay what all the children do you have okay so inside this I'll have multiple of these children all these are objects just like this first of all what is the path that you want to grab so the path of the children is going to be first of all the Slash and wherever that slash is by the way we need an access to the pages yes we have homepage on the slash we'll load the homepage we'll just say element who is the element you want to render here we want to render home which is not yet imported home is not yet imported so now we need a lot of list of these Imports so import home and we'll be importing now you guess the idea why I created the pages so inside these Pages we have home. jsx there we go you get this point that how this is all being done so this is my slash where the home component will be uh logged in and all these things so that that's fun that's basic but what about the elements like/ login uh we need to provide some kind of mechanism to find out that uh should you be able to access the login or not because if you're logged in you should not access the homepage the login page but similarly you get the point you get the point so I'll just go ahead and walk you through that how this is being done this is another of my sub route let's just say the path is going to be uh Slash login okay we know what component we want to mount onto this one so the element is going to be you might be wondering hey just go ahead and say you want to go ahead and have login into this one just like this but no this is where you are a little bit wrong not wrong we haven't discussed these kinds of approach so we'll just first go ahead and say hey login nope this is not login I want I want it to be from Pages SL login okay uh there's nothing wrong in this approach but what do we want to do in this one is instead of rendering this login directly which doesn't gives me control whether should I show it to you or not I'll just go ahead and bring in one more component which I created so if you remember we created this component Au layout it was doing nothing but time to bring it now let's go ahead and say import and this one is AR layout I guess yep o layout and that will be coming a from do/ components and we have just one Au layout. GSX okay what's so unique that you're going to do with this one o layout now instead of rendering this I'll just go ahead and say first of all I'll wrap this with parenthesis so that it's easier for me to write and I'll say hey load this element which is O layout just like this and inside this Au layout now let's go ahead and use this login it could be be self closing but what's the point what's the point of having this now inside this Au layout I can provide a prop and I can define whether this page requires an authentication or not so I can just go ahead and say false just like this I can say that this component doesn't require an authentication and I can based on this logic I can work on with my Au layout so you get the idea uh similarly like login page exactly same uh similarly signup page yeah exact copy of this one so let's go ahead and have a copy of this one let's put up a comma we need to import this first sign up from pagespages and we have sign up and we'll say no sign up also this route sign up also don't require any authentication and you can load this one sign up there there we go uh right now what we're going to do with those authentication is uh not really important but let me just show you uh now let's also Define one more and you will understand the logic behind it let's get one more copy that and now the route that we want to go for is all post posts maybe yes now the element that I want to render for this obviously is all post so first let's bring this import and we're going to call this one as all posts and that will be coming up from pages and all posts. jsx okay now for this one I want that anybody who visits the all post should be accessible by all posts but this time the authentication is going to be true because only who are logged in should be able to read all of my posts that's the logic I'm going for now this is having a shortcut so you can just remove this one if you pass on authentication just like this this also converts as a true so that's a Shand a lot of people use that but now I have two situations here people who will be coming up whose authentication is false like login and sign up and people who will also be coming up whose the authentication is true so how can I handle this situation so there are a couple of ways now we'll work on the functionality part of how you're are going to do that so notice carefully how we are going to do this one so couple of things are there first of all the page is having a requirement that should you be authenticated or not there is also one more thing one more variable in the picture which is saying are you truly logged in or not page requires a login is a different thing but are you logged in or not we can verify that you are logged in or Not by just making a query to the store that's where the two variables actually come up and we have to match the two conditions here all right so uh what we're going to do is let's go ahead and one by one so this authentication part is all good we are not going to touch that and uh just below up here we'll make couple of queries with the with the selectors here so first of all uh let's bring up the important part in case you have not seen the Redux crash course please go ahead and watch that we'll be using use selector from the react Redux we need the navigation as well because we will be redirecting the people use navigation or navigate yeah navigate is good react rodom so these are the two ones now let's make a query so we'll say Au status and we can just query the Au status by using the use selector and from the use selector we'll say that hey there is a call back here just like this and we can say you give me access to State and inside this I can say state do Au do status that's how we worked on it so this will give me a true or false value what what is your au status is it true is it false whatever that is we'll also go and create a simple navigate navigate oops navigate and we'll create a navigate from use navigate just like that uh now we have access okay now I hope you can see we have couple of variables to check for the first one is authentication which is also a Boolean value we also have Au status which is also a Boolean value So based on this you have to figure out that what do you want to do and how do you want to do now since this is a couple of queries are going back and forth I would like to create a state for myself which is probably a loader state so let's go work with that so I'll just go ahead and say I'll use loader and I'll say set loader and that will be coming up from use State use State and by default it will be true so your loader is is going on by the way we yes we have used it okay now comes the logic part how we are going to deal with that so as soon as this component loads you have to make some queries you have to run these off status and you have to figure out how this is all going on so that based on this you can render some of the things because right now this is not this is a simple children render right now but this is going to be changed that whether the things are good or what's the value of this okay let me show you how this is being done first of all let's fire up a simple use State here use effect sorry use effect use effect there we go no suggestions no problem okay first of all the call back and then we obviously know there is a dependency array on that so on based on what this is depending so first of all it is dependent on Au status this is dependent on authentication as well and this is also dependent on the navigate as well so there we go these are our dependency array okay coming back onto this one how do you want to work with that we want to run a simple if and else condition in here based on I will be navigating you to login or I'll be navigating you to the slash page okay let's see simple if uh authentication is required and your au status is not equals to authentication okay very carefully look at this if I require a page which is authenticated maybe you are visiting uh all post so I'm saying that hey you required an authentication there but your authentication status is not as true because required means this will be converting as true okay listen to this very carefully when I say you are required that means I'm passing a true in here but what I'm also checking another side is the odd status that you're providing me is not not equals to authentication or in terms in short your authentication is not true in that case where should I redirect you simple question you are supposed to be logged in when you want to see all post but you're not logged in so obviously I should redirect you to the login page really simple so I'll just go ahead and say I use the navigate and redirect you to/ login this will take care uh the another condition that I'm checking is not a simple else condition this is also another Checker okay so I'll just go ahead and check this one if I don't require an authentication so this is my authentication I don't require authentication okay uh you can just visit these pages but uh you simply go ahead and say your au status is not equals to is not equals to the Authentication there we go what should I do in this case okay this is the second case where I'm saying hey you are not supposed to be authenticated to see these pages that means the login page the sign up page but what I'm also checking hey you are logged in authentication is au status is not equals to false so you're you are truly you're logged in and there are some pages which don't require authentication who are those pages the login and sign up so if you want to visit the login and sign up page and you're already logged in you're not supposed to see those pages so in that case I'll just redirect you to the simple navigate so navigate and you'll be redirected to uh the slash uh this is the basic logic that we have created now based on this we can actually render onto this one once this is all done uh let's go ahead and do one more thing if we are done all these if and else cases uh let's go ahead and use a set loader and turn it into false so all the drama that we wanted to check and all of these this is all done now here I'm changing the state of this loader based on this I can do a simple Turner operation into this one so I'll just remove this part and I'll say first check my loader okay if loader is true then we're going to show maybe a loading maybe a null I'll keep this as a simple exercise for you to create a simple loading component maybe a spinner widget just add it up here simple I'll just use a null not a good practice but I'll just keep it here and if the loader is false then go ahead and load the component which in my case is just the children children there we not like that not like that children there we go so really simple but this is a good mental exercise to actually figure out that how things are going on uh by the way it has couple of more ways of how you can write that let me walk you through probably it will uh take couple of our more minutes but it will help you to understand how this is being done so for example if you are checking something like this I'm just rewriting the code to make it more understandable able so let's just say there is authentication if authentication is true then I go ahead and I'm checking another one if statement something like this so in this I'm checking if your uh Au status is not equals to not equals to authentication so something like this so if you are having a problem in understanding two condition at the same time using the this you can also apply this one so in this case notice here let's understand this authentic is required okay where does the authentication is required oh this kind of pages means all post okay authentication is required in this one so it is true so this will be converted into as true okay uh just for explanation purpose and the O status what is your o status it is not equals to authentication that means authentication was required but you are not authenticated so where should I redirect to you if you're are not authenticated but the page requires authentication simply you understood this part now we should navigate you to which page SL login and this is exactly what I have done in this one here so hope this helps you to understand the part I can understand this could be a little bit more uh for the beginners and fresher but this is exactly what I did I'll just keep it here to make sure that uh you you know that how I explained this to you but I think now this gives you a much more clarity of how things are done and how things are done okay so moving back you understood this part that all posts are being there but there we have more elements so for example I'll just go ahead and copy and paste this one so the page is like add post let's go ahead and have that one as well import add post no suggestion no pages and we have add post. jsx this also requires authentication so it's almost similar to that this one will be add post add post just like that uh requires authentication yes and we'll just simply say you are add post there we go so that's the one uh we also need the edit part as well edit also needs a slug to be passed on uh let's do that so we have edit post and we have a post individual as well let's import them too much import and this one will be edit post that will be coming a from pages and inside the pages we have edit post we do have one more which is just the post let me check that we have just the post let's also import that we have post come on post and that will be importing from pages and we do have post. jsx uh both of them requires authentication uh so let's go ahead and work on with this copy and paste it put up a comma the path is going to be edit post but you cannot just go ahead and edit post just like this you need a slug value so slash colon and slug uh this will give us which post you want to go and this requires authentication yes this requires and this will be edit post all right uh what else uh we just need to work with One Singular post as well uh this one also requires uh a simple post so we'll just remove the edit part from here we'll just say this is a post and you'll provide me a slug uh we're saying that you also require authentication it's just personal approach I don't want anybody to see my I'm kind of a medium kind of a fan where if you're not logged in you cannot read much of them anyways it's up to you and I'll just simply say hey this one is going to be post that's it so at least our routing and pages are done you have understood the concept of course we might need to debug a little bit but the concepts are now perfect fine with you that how the O layout and all these things Works uh we now know how to protect our pages with the help of this o layout this is doing all the magic uh making the queries nothing is happening automatically or magically but pretty good start and pretty good stuff that we have done so in the pages all the pages are done but our components are not ready that in what pages we'll be rendering login sign up uh we'll do that uh nothing much deal again I'll be providing you all the details of that and we'll not be writing any of the CSS for that I'll provide you the Cs directly you can just copy and paste them from my GitHub as well uh this is not a Tailwind class we'll focus more on the react part that's it for this video and let's catch up in the next one hey there everyone hes here back again with another video and in this video I just want to do the testing of what we did in the last video it was a pretty big video so I thought uh let's sip some water and come back here I don't want to do the testing behind the scene I want to do all the testing that if it is working if it is not working uh we'll probably pause the video we'll debug together however it goes we just want to do it all together so let me just share the screen and see this okay so now the goal is if I just go ahead and I simply run this application so I've just run the command that's very basic so it's npm run Dev and I go onto the page this is the page what I see uh good enough but in order to do the proper testing if you watched the previous video where we said the router and all these stuff uh you know that first we need to go into app.jsx and the step one is to just remove all the gibberish not a big fan of this we'll just go ahead and remove this uh there's a small error we'll just go say da oh just like this and there should be a paragraph here or let's just go ahead and call this one as inside the main we need an outlet into this one so otherwise if we don't have an outlet from react rodom uh rest of the components will not be able to render inside this so we need the outlet so make sure it's from the react rodom and now technically we should be able to see the home here that's good and if I go ahead and see the login uh we see the login if I go ahead and see all posts uh it still goes for the login uh one more thing which I noticed is uh there's a small inconsistency here uh inside the O layout we actually called it as protected uh but here in the main. jsx we are calling it as o layout not a good idea I'll just go ahead and say this one should be protected that's a better one I'm pretty sure you might have already noticed it uh but I just noticed it not a good idea okay o layout uh let's hit uh let's select all the instances of O layout by the way these are just vs code shortcuts which I love and one more okay multic cursor remove this uh have the protected one uh it's not going to bother you anything but I think that's good one okay so now I think the testing is all good we are logging in rendering uh login too much white I know uh too much light mode uh don't worry I'll get rid of this one sign up is good but if I go ahead and see let's just say edit posts oh edit posts doesn't exist edit post exist and it says edit post oh we need to give some ID as well slug uh let's give it a test text it says login so we are not allowed to do so so there we go uh as of now our testing goes good that we have all these applications routing States everything is working fine uh we have no errors uh good testing in between uh while recording the videos it gives us rarely an occasion that we can test in between but wherever I do get a chance to test along with you I try my best uh from the next video onwards we'll work on the components so that I can show you what all the components we'll be needing how they'll be working some of them are really boring like footer there is absolutely nothing inside that just copy paste of the uh Tailwind classes uh header could be a little bit interesting because we are conditionally rendering some of the elements like uh the logout button the sign up button and all of that so they can be little bit interesting but Footers not really something all right so that's it for this one I hope you have enjoyed this one uh really short video but really something that helps us to understand the features of it let's catch up in the next video and work on the components part of it hey there everyone haes here back again with another video and from this video onwards we are going to have a journey about building the components now some of these components are really great because you understand a lot of Logics behind it for example how and why do we use forward reference a special hook in the react and some of them like conditional rendering but some of them are really truly boring they doesn't teach you anything from the react perspective they are just you can say the logo component it just displays the logo that's it it does nothing more than that a container it's just a wrapper it just displays the element nothing much more than that the footer component lots of Tailwind classes good for Tailwind practice nothing else nothing else at all but what we can do we have to work with both of them so uh we'll start with some of the basic ones which doesn't do much and as we move forward we'll progressively work on some of the components which are really good and interesting and helps you to understand the react part of it uh let's go ahead and do that so we'll just go into the screen sharing first all right uh once we're in the screen sharing mode uh then let's go ahead and go into components the first is let's create a new folder and keep it inside this so this one is going to be container and inside the container we'll have this simple container. jsx new file container and it should be all caps container. jsx okay uh what do we have in this container. jsx uh to be honest there is absolutely nothing it's just as it is you can probably can do something like export default uh just right here in case you wish wish if you want to but that one is also fine so what do we have in this container we simply return a div uh which is going to render the children so let's go ahead and accept all the children and we are going to display these children just up here why we are doing this uh what's the point of because we want to add some additional classes that is the whole goal nothing more than this uh we want to Simply have a width of full uh so that we can have a uh we'll also have a Max width so we'll just say Max width of uh 7 XL by the way you can hover this one I didn't come up with them automatically I also work tweaked a little bit while we were designing this application so it's not some magic number that I came up with uh we'll just say Max Auto uh simple and we'll just say PX -4 uh so these are the classes we came up while displaying a container that's it nothing more uh nothing less onto this one okay uh we'll keep this one in a folder so that it's a little bit separated out uh now let's go ahead and move into let's close this one first we'll go into container First Source and then contain container components components and let's create a couple of files first so I'll just try to create the files from here it's much more easier otherwise right click it sometimes create files in the wrong place where I don't want it to be so I'll just go with the logo. jsx and there we go logo uh what do we have in this logo honestly nothing I'll just go with the RFC uh the logo is logo I don't even have a logo otherwise usually it's just the image uh but let's just say if we can have some logo can we have some of the logo in the public we have V SVG we can probably use that or can we have I'll just keep it as it is uh but we need to have some of the classes on this one otherwise it is going to give us uh some of the issues with this one we'll figure out later one uh right now let's just display it inside this one and instead of a div itself let's use an image I think that one would be good I'll just remove I'll add an image in the later on videos don't worry I'll just say I want to have an image just like this and this one is going to be an SRC right now there's nothing so I'll just keep it empty and inside this if somebody doesn't pass me any parameter I I'll make it little bit more robust so that people can pass me some values I'll just say 100% And whatever the width you give me I'll just use it as a style I'll make it a little bit fancy I'll just say give me a width if somebody gives me 80% we'll use 80% withth otherwise that's it uh let's use at least an El so that we know this is a place for logo placeholder if I forget later on we can just work with that that's it that's your logo uh next up is little bit interesting not too much but little bit interesting we'll have a simple Button as well so we'll have a button. jsx why do we have a button uh no such big need of having a button but I realize that if you have a button you can customize it a little bit easier in case you are familiar with something like Shad CN or something that is fantastic almost same kind of approach we are using I'll just have an RFC we have a button uh the button is going to take some of the parameters oops there we go uh what all parameter first of all you'll be taking children so that you can render them uh you'll also have a type uh the type is going to be button and BG color BG BG color uh that is going to be by default this one is going to be uh background is going to be blue 700 600 whatever you wish plain old Tailwind color colors nothing more than that uh we'll also give it a text color and the text color is going to be white so we'll say text- white and we'll also have some of the class names class name and that by default is going to be empty but you can pass me on more and you can also pass me more props so we'll spread them around if we have props and one comma is required now the advantage of taking these props is if you wish to have or to do something more you can just go ahead and do this I'll just remove this one and I'll say I'll return you a button just like this button is going to render the children you can also rename this actually to the button title if you wish but I think I'm happy with this one okay what else do you want inside this button let's have the class name class name uh we'll actually change this class name into uh first of all backticks actually first of all curly braces then a back tick uh so that if we give px- 4 padding on axis to be four padding on y AIS to be to so that it looks like button is and we'll also go for rounded dlg for rounded but if you have more properties you can just use the dollar and variables to have this one for example the BG color if you want to change it now you can easily change it uh more variables uh text color maybe you want to change the text color go ahead and change it now and also some additional classes if you want to pass on I'll just respect that as well okay so right now we have basic default button the another advantage that we can have in this one is if you have more props to be passed on maybe active deactive whatever you want to say I can just actually respect that as well I'll destructure these uh props as well here so all these props actually goes directly here uh makes life a little bit easier again a good way of how we can have the button very generic button but could be reused like anything now let's close this one let's study a little bit which is more interesting and you'll repeat this quite often uh which is input. jsx inputs are little bit different and interesting compared to the button because button doesn't have too much it just register one event which is on click uh nothing much more than that but inputs have great number of deals with that because if you think it carefully input is going to be used in some other component that comp component will have state so you have to somehow manage that somebody's writing inside this component but that value goes outside of that into upper level component I hope you're understanding this this is complex uh but the solution is not that complex but imagine this the component let's just say this is your form one level down is input now this input needs to give information to its parent that is where the magic comes and that's why I found input to be really amazing now inputs just like this I'll just actually rewrite this entirely so how do we actually manage this that we can pass on some information to our parent itself passing into child it's prop but how can we pass on to the parent that is interesting that's why I found this one interesting while teaching so we have input just like this in order to do so you have to use one Hook from this react which is forward ref yep that's it that's it uh forward ref if you have this one that's it it just pass everything to the parent component and now you can go ahead and say export default input there we go now how do we use this forward ref Now using forward ref again is fairly straightforward uh you just wrap up your component inside this and we also know the component is nothing it's just a function so function we call this one as input and this is how we work with it if you have anything to access uh you can just go ahead and say I will access a label for this one I'll also accept the type of this this one uh type is going to be uh text by default otherwise you pass me on this one we'll have the class name just like this and by default it's going to be empty so that same concept of the buttons uh we'll also have the props so let's just say props if you have more props you can just give me uh also you have to give me a ref otherwise I'll just pass on this ref okay uh let's go ahead and move it on to the next line so that it's easier to read for everyone there we go moving up just like this you also go like this you also go like this uh just arranging them sometimes these things bother me a little bit okay there we go now hopefully it makes sense okay uh much easier to read in this way now in this one all we have to do is return just like we return in the components so this one is going to be returning just like this and I'll be returning a simple div just like that this div will have a class name we are going to get width of full whatever is available to us and then we simply go ahead and use these labels and all these inputs so let's start our JavaScript in here and we'll say label label label there we go if label is there then we're going to display the label so use an ment sign and another component just like this and in here we're going to start a label component label tag would be better name label tag just like this inside the label tag we'll display this label if the label is not there what's the point of displaying the label and we can have some of the HTML ID for it so HTML 4 and we can actually give it an ID and we can borrow the ID by the way from the react itself so I can just provide an ID just like this right now I don't have an ID so I can just go ahead and create this ID by use ID which is given to me by react itself and I can actually go ahead and before I return I can just say const ID is going to be equal to use ID there we go now you get from where this ID is coming up from all right not bad uh we'll also add some of the class names don't really like them but we have to uh this one is going to be in line block and we'll have a margin bottom of one we'll have a margin sorry padding left off one okay if you wish to design it a little bit more you can just go ahead and do that really doesn't bother us much so this whole thing is the label portion of our input we also need to give it an input because that's what this is input not the label let's go ahead and provide an input it could be a self-closing one just like this now we need to set up all the parameters here like for example we are taking type from the user let's respect that and provide a type just like that uh we also need to provide a ref uh because when any form will be using it they will be providing us this ref or references there we go and we'll say just add the ref here uh let's restructure all the props and add them here as well there we go and also let's provide the ID so same ID can go up here same variables same unique ID will go here uh then after that we'll add some of the classes so the classes concept is exactly same there is nothing new that you are learning uh we have the classes but we'll wrap them in the curly braces and in the back text so that if any variable comes up we can actually respect that so this is a New Concept that you learn into this input which is how to pass on some data from a lower component to Upper component or to from a child component to a parent component that's interesting uh similarly like the input one we'll create one more which is exact same replication uh select form or select input select. jsx uh we'll go with this so select uh exactly same concept uh I think this will be a good reputation for us so let's go ahead and create a function and this will be our function just like this and this function is going to be named as select there we go and we'll also grab the react import react we'll we know that we'll be using use ID use ID and that will be coming up from oops react okay uh the function is all done now we just need to export that again it's up to you how you create your function within inside that just like we created or you can do something like this export default react do uh forward ref and here we can just say select this one okay uh both are same exactly same uh it's just the way of writing the code here we're doing everything in line whichever you prefer there is no right or wrong uh there is no optimization in this one one uh you can actually just wrap this up and pass it on directly here I created the function first and then I'm passing it at the export time uh in the forward ref uh the reason for showing you two ways is so that you can understand that he some people write code this way understanding the code is also really important so this is what we have as of now all right moving further uh we'll take some of the parameters uh what all the parameter we obviously need this is a select so we need options we need the label exactly same thing will happen to theb table just like we did uh class name just like this and we'll also have props we'll restructure them and once we are done with this uh these are all the first like objects that you'll be passing me but you also have to give me the ref okay uh once we are here uh then obviously we need to First handle the ID part we know that that's easy use ID there we go unique ID generated return and there we go and inside this we'll just return a simple div okay first of all class name simple class we'll say with get the fill WID there we go no big deal uh in here uh the label thing will be exactly same so why don't we just copy and paste that save us sometimes because it is exactly same there is nothing new we are learning here so we start our JavaScript we simply say if you have labeled and we'll display the label we'll use the HTML ID or HTML 4 for this one we'll have the label uh but right now here this label is good uh but now the input form is different so this is okay now let's start the select field this is where things gets a little bit interesting so this is my select field uh I'll keep it as no not self closing okay now one by one what goes inside this first of all inside this select field first of all let's display all the props that you have so let's get rid of this oh my my bad dot dot dot props okay one part is done scroll this a little bit okay uh we need ID okay easy part ID will be going like this so ID easy part uh we also have ref easy part we also grab it like this ref okay this is easy part now the thing is which is most important about this is a lot of options will be given to you this is how the select Field Works uh In Case by the way uh you forgot it or maybe want to jog the memory we can go select HTML and I'm pretty sure W3 schools can help us to memorize jog the value if I try this uh this is how it looks like this is the select field a lot of options are being passed on and as soon as you select the option that option is being selected that's what exactly what we want to get these options will obviously be an array somebody who is using my component should be already aware of this and now all all I have to do is start a JavaScript here and I have to say hey options I want to Loop through you so maybe you can use for each maybe you can use map whatever is your favorite you can use that in each one of them you'll get a call back just like this so we'll get an option options option remember that and then we can simply use a call back just like this I'll start a parenthesis not the curly braces so that I don't have to explicitly return and then inside this one I'll say I will start option options here not options option and I'll close this one as well there we go inside this one I'll display each of these option okay half part is done because if you remember the code part here uh this is the option so this part is done but we need to also have the value being added otherwise it's just displaying here so we need to take care of the value part so we'll go up here and we'll say value and the value is going to be whatever the option is simple uh we also need to do one more thing uh which is not required from the HTML perspective but from the react perspective it's required since the value is looping through by default react uh fiber has no way to knowing that if it is repeating different values or the same values so we need to provide a key for it this is performance optimization and I know that these each options are different so I can provide it option like this uh really interesting uh but this is all what we have now apart from this there is just one more final thing which is just a class so I'll just copy and paste this doesn't really bother us much so there we go we have our select options being added this is something really interesting I hope it gave you some knowledge of forward ref if it does do let me know in the comment section this is really important okay uh this is all done uh input part is all done now let's also do one more thing uh actually two more thing we have to do in this video uh but this one is going to be a little bit interesting so what we're going to do is let's open this up it's much easier to actually create components from here I want one more component which is postcard not really the postcard like postcard but card for the each of the post that we have this is interesting because a lot of information we need to grab and how we can actually grab this one so let's go ahead and RFC react functional component we have postcard just like this now this postcard takes couple of information uh let me show you it takes a ID uh if you're using mongodb you might have underscore ID in the case of app right it's dollar ID you also give me a title you also give me a featured image featured image okay uh featured image these all things are given to me now my responsibility is to Simply have a card on the homepage to take the user on the longer post for that particular post okay how we can do that first of all let's remove this because we want this entire card to be clickable so we need to grab the link just like this so we'll grab it like this but this link uh obviously doesn't come directly we need to have it from the react router import uh give me a link no suggestions nope from react router Dom okay now anything inside this will take us to this but again we have to provide where do you want to take me for this we have to use the two keyword I'll use uh back text we'll go wherever we are uh obviously on the homepage so we'll go on to SL poost and Slash the slug ID which in this case is dollar uh just like this and we'll provide dollar id id yeah that one okay now we know the link part is sorted now all we have to do is grab a simple div which is going to display the information so inside this div obviously some of the class names will go I'll just copy paste these classes doesn't really bother us much and we'll use class names just like this so let me just copy and paste these classes you can also copy and paste them from okay uh from the GitHub itself uh so there we go and inside this we'll have another div yeah that's how we designed it okay uh this div also has an image so this is the image now where the interesting part lies is how you're going to grab the source because you have this featured image only now let me jog a little bit of your memory if I go on to the config part notice here we created a simple method uh where it is yeah get preview so this featured image is nothing it's a file ID that you will pass me so here in the postcard you'll provide me this featured image this is nothing this is the file ID so I can actually use this get file preview method and pass it on file ID and what it gives you is directly a link of the image notice here we sent href so this is a link of of the image so I can actually utilize these features and that's why I say uh these Services actually helps you to lot of work that is already that can be reduced down so all I have to do is import let's call this one as app right Service app right service and that will be coming up from SLA H nope do/ yeah there we go app right/ config.js probably need JS but anyways uh so we have the app right okay now in this Source I can just use it directly so I'll just remove this one inject it like this and I'll say app right Service uh I'll want to use a method which is get file preview and in order to run this method I have to provide you the featured image that's it automatically it will call this and do everything that I want to do all right in this one image itself I will inject the title optionally but if you wish you can just go ahead and do that now time to add some classes and this one is going to be rounded Das Excel and we do have some of the classes onto this div as well we'll have the class name just like this and again these classes are nothing too much to be worry about basic Tailwind classes okay uh next part is how we are going to display the title uh totally up to you what I want to do is just below this div uh we'll have an simple H2 and inside the H2 I'll display it title there we go we do have some classes for this one as well so we'll have a class name and we'll have a text Dash Excel we also have font bold all right uh so I hope you understand a lot of things that are learned from the react perspective as well as good software engineering perspective that creating a service it helps us a lot we don't need to do things thousand times it just works out of the box okay now one more thing uh final thing that we are going to do for this video is we'll create a new folder uh which will be a footer again nothing much this is really the most boring file it has nothing it will be simple footer. jsx okay simple RFC react functional component and all we're going to do is just copy paste some of the HTML code remember this is not an HTML tutorial there is nothing much we are doing uh just a lot of CSS classes logos and whatnot uh only thing we have to do is import a link because all these are wrapped around the link link and that link come from react router on that you already know and that's it that's it your footer is ready now all you have to do is go into an app uh display the footer see how it looks like and all of that uh whatever the things we wanted to study in this one we have studied most of it uh still uh there are few more left uh but we're going to do that in the next video already the video is half hour long uh so let's go ahead move on to the next video and see that how we can work on the rest of the components they're pretty interesting let's catch up in next video hey there everyone Hees here back again with another video and welcome to continuing our journey for building a full stack application which is our blog app in this video we're going to take down two approaches and in fact two Pathways at the same time the first we are going to take the tiny MCE which is a viig editor what you see what you get so you will get the ability to uh simply uh have the Bold applications italics underlines all that you see in a fancy editor you're going to see all of that and in the second part we're going to take a uh take a lead into understanding the react forms now react forms can be directly handled uh there is nothing wrong in that but there is the industry standard way of handling the things so I'll show you what is being used in majority of the production grade application at first it might look little bit too much but as you move into the production grade application or when you will be working in the job you'll notice that most of the people actually prefer these kinds of form instead of just handling every state manually again there's nothing wrong in handling the state manually but this is the industry standard so I thought that let's introduce that uh it might be a little bit challenging at first but this is the good way and good approach to get started so that's what we'll be doing so let me just walk you through uh let me first share the screen so this is the editor that we'll be using this is Tiny MCE this comes up in both free plant and the plate plans of course we'll be using the free ones and that's what we'll be going through and then we'll be also going through with the controllers as well so we'll be going through with that so let me walk you through so this is the uh tiny MCE which is an editor uh it of course can take a parameter of API key which will not be giving it to one uh we'll be using the free version a couple of parameters that are important to pass on are like what's in it value initialized value uh then we can provide what should be the init then we have to provide the plugin that what all do you want to support in your editor like autol links list uh visual blocks Code full screen what mode you want to give and in the toolbar what options you want to give uh undo redo all of these so these are the things and in the content body we'll be actually using as it is so uh what's what are all options available so this is the editor uh which we'll be using by installing after this tiny MC as an editor that's the first step and after that we'll also have a look onto this one which is a a react hook form uh pretty interesting library to work on with this one uh all the things are available in their docs that what all things you available set errors controllers forms in this couple of ones we are going to use and I'll walk you through how to read the docs and how to work with them uh this could be a little bit challenging and I think this requires a standalone crash course or a video in itself which I'll try to upload on my channel if you haven't yet subscribed go ahead and hit that subscribe I'll get if I'll get enough request I'll definitely do a proper crash course on the react hook forms as well pretty interesting subject and I love this quite a lot so we'll be using that all right so uh now let's go one by one and try to install them first so installation is pretty straightforward there is nothing too much going on with that uh let me just go on to vs code first let's go into 0 MCE so installation react let's go there and the installation that we need is this one which is atate Tiny MC tiny MC react let's go back up here and have the installation for this one so npm install and this one is for the editor part all right and we also need the react uh form as well so let's go back and let let's go get started and here is a react hook form so let's copy this and install this one as well so I think these are the two which we are going to need as of now I think that's enough let's go ahead and get one by one up and running with this one all right so first let's go ahead and create uh we'll create one by one uh let's start with the simple nav bar which we are going to have so we'll be having a logout button and a navigation bar then we'll work on the realtime editor and then we'll be working on the post form as well which is going to utilize all the hooks and all of that so let's go ahead and start one by one so first of all let's create a new folder inside the component we're going to call this one as simply Navar or let's call this one as header so inside the header uh we'll be having two files the first one is going to be header jsx header. jsx and another one is going to be a standal loone component itself which is going to be log out log out or log out button. jsx uh the reason for creating a logout button itself because it is going to make a query uh and we'll be using some services from Au service and all of that that's why we are just keeping it separate one here all right so what do we need uh we need dispatch so we're going to say I need use dispatch no no suggestions all right I use dispatch the dispatch is going to come up from react Redux there we go after that we need the Au Service as well Au service and that's going to come up from couple directories back inside the app right inside this o dot JS yep that's the one and we're going to need a couple of services from store as well well so we need to import log logout and this log out will come up from we need to go One Directory back and inside the store and from that we are going to need a slice. JS all right so now we have the log out the reason why we are having this log out functionality in itself alone uh so that we can make a request using the slice and then request can just clear out everything that's what we designed it so in case you forgot that let me jog the memory again so this is what we have imported after exporting this one so once we actually hit this one it will create the status as false and we can have a simply user data is null that's what the goal is okay first of all let's create a dispatch otherwise we won't we won't be able to access it we won't be able to send a message that we are using this method so const dispatch and that will be designed or created using use dispatch hook there we go now we have access to this one let's create a logout Handler anybody who clicks on this button we will be handling it with this one logout hand Handler and using this a simple method let's fire this up and we'll be saying hey OD service give us a method which is uh log out and once we are having this log out method being called which is in our service uh let's use a promise and we'll simply get a then if then happens then we are going to successfully cater that one and we're going to then dispatch an event which is going to be a log out event there we go and since this is a method let's run this and that's it in case you wish you can handle the catch part as well but I don't think it's required in this case but that's it that's how we are going to log out notice here if I'm able to success y handle the log out then only I'm dispatching an event of log out and that's what we have designed in our store as well that as soon as this is being called up we're going to set the status as null and the user data to set status as to false and user data as to null okay uh time to design a button uh there is nothing much that we are doing is let's go ahead and return a button there we go inside the button we just say log out and rest of the stuff is pretty obvious only one thing is important that is on click on click and inside this one we just simply say log out Handler please don't say it like this we don't want to execute it we just want to pass a reference and then our basic class names uh again I'll be just giving you these class names if you want to design your button your own way be my guest please do that all right so now you understand the logic behind it that how the logout button is being designed uh let's go into into the header. jsx because that is the file which will be having the entire navigation items uh most of them are just Tailwinds and Loops nothing much but there are some reacti part of it so I'll just say RFC so we have a header uh we'll be requiring couple of import statements in this one as well uh first of all uh let's import uh container in fact what we can do is since we need couple of more things from this component itself we can design an index file and have an Import and Export statement from there as well but in this case let's go ahead and do container uh separately and we'll be bringing them from do slash oh we need to go inside One Directory yeah do slash container H it's oh we need to go One Directory back my bad One Directory back container and inside that we have this container. jsx we don't need that and we also need a logo and we don't have anything inside the logo but still we'll get this one so this one is from One Directory back and we'll just say logo okay two of the components that are required for navigation bar are here since we'll be redirecting a lot of stuff link is required of course that comes from react router Dom and what else uh we need a logout button that's why we designed it logout button and that comes from a log out button and we'll be uh forcing people to use navigate here and there so let's go ahead and do use that as well uh use navigate that comes from a react rout okay how does we how do we Design This header that's the important part again uh this is going to be based on something first of all we need Au status whether user is logged in or not because based on that we are going to display the signin or the logout button so why not we create a simple const which says Au status and this status is going to come from the use selector do we have used selectors have we imported that um not so we need use selector import use selector there we go and once we have this now I can use the use selector and can make a query uh give me the state and I'll just ask you that State uh has this o and has got a status status this will fulfill a value of true and false and also in the meanwhile let's also use the use navigate as well nothing much navigate and that will be coming up from use navigate hook there we go okay uh now we need to design a simple constant of navigation items uh that is better way once we have these navigation items as an array we can Loop through them and can simply generate our uh HTML from that let's call this one as nav items uh that's going to be a basic array and we will have multiple objects into them if you wish more uh you can have more I'll have something like this name is going to be home not only that I'll also provide a slug for that and that slug is going to be where you are so slash for that and we'll also provide an active status for that and active is going to be true in this case Okay this active status right now looks true but it's going to be based on the a status uh so what's the OD status and all of that so let let me show you what do I mean by that uh this will be getting clear here so let's just say we have a name and this time we have a login login the slug is going to be I can actually copy this I can copy the slug which could be slash login come on there we go now interesting part is it active or not that is going to be based on not o status so what do I mean by not o status so not o status simply means if you're login uh your authentication status is true that is you logged in so the active status will automatically become false so in that case I don't want to display this login to you that's the whole idea that's the whole game of this situation uh similarly we'll be having a sign up exactly same so let's go ahead copy and paste put up a comma we simply want to say this one as sign up sign up uh we'll copy and paste this so smaller sign up same OD status will be not that means if you are authentication is true I don't want to display this so that means active will automatically become false uh similar to this we have couple of more pages for that let's put up a comma and we'll have all posts the slug is going to be all Dash posts a routing will take care of that but this time I want this OD status to be true if your OD status is true that means you are logged in then only I want to show you this uh all post so otherwise you'll just see the login and log out so that's it uh add post is similar one such thing so you are able to see all post and you are able to see add post that's how we are designing our navigation bar this one is going to be simply add post this one is going to be add post a status is true okay so now I hope you understand that why and how we are designing this nav items all we have to do in this one is now simply have couple of design items just like there and then we can simply Loop through the values the looping part is important rest of this is fancy design nothing more than that let's go ahead and have a header this header will have a class name uh simple classes pading on y accesses three when we designed it we simply had a shadow a shadow will just be like that and we have a background of gray H 500 is good enough okay inside this head we have this container as a component so this wraps up automatically and gives you the space and then we have a couple of nav items so let's just have a nav and this nav is going to have class again couple of classes we have uh we'll be getting a flex the first item inside the nav is going to be a simple div which will be for logo nothing more and for this we will be having a class name margin on right side will be four uh while designing this this is what we found it to be best let's wrap the logo inside the link so we'll be having a link just like this where does it go to nowhere so we'll be saying it like that slash and inside the link let's place the logo right now we don't have any image for the logo but whenever we'll be having uh we'll be happy with that okay once we have this div item uh that means the logo is all done and then we'll be having a UL after this one so I list and it will have couple of class names and we'll be having a flex and margin left off auto so that everything is pushed onto the very right side okay this is where the things get interesting uh now we need to start our JavaScript because we want to Loop through the values so looping is not that much difficult in this case I have these nav items I can use any Loop my favorite one is map and I'll go like this then again we need couple of values into this one we have items so each object inside the array we are calling it as an item and based on this item we'll be looping through okay uh let's go ahead and work on with this one so now we can directly go ahead and start this but I don't want to directly start this I want to display the element only if its property active is there so what can I do I can evaluate this if item is active there will be two cases item will be active or might not be active if the item is active uh let's do something otherwise we'll do something okay that's interesting so again this might give you a little bit of the Turner operation yeah that is this and in the other case we are simply going to refer it as null we don't want to do anything you can just generate an empty component as well that's fine too in this place we'll just remove this and display a component so let's place a curly braces here now in this curly brace how do we want to display the item obviously we want to in an unordered list I want to display a list items so I'll just go ahead and grab Li list item since the list item is the one that is getting repeated it's good that we pass on the key here item. name is the unique value that we will be having okay inside this list item we will be having a button which can actually get these clicks so we'll be having a button just like this and in each of the button we'll be having an on click which is going to just navigate the value so I'll just say onclick there we go what do I want to happen when the click is there first of all a call back because I want to pass a value just like this and then I will use the navigate so navigate where do we want to navigate we have already taken care of that by having the slug value so navigate the user to a place where it is item. Slug slug item. slug so this is the place where you will be navigating and after that it's just a class name to make it look decently beautiful I have these class names with me so I'll just copy and paste this one I hope now you understand it's not really difficult it looks difficult but it is not uh the button doesn't have any name right now so let's go ahead and give it really simple item. name that's it so now that entire thing is there and we are happy with that but you might have noticed that we are not actually giving any log out we have designed a logout button but we are not giving this log out to the user we have only worked with this unordered list which is nice now what I want to do is after this uh all the Allis and everything is being generated now I want to have uh this one here I think this is where I start my JavaScript I want to have another Li but this Li is going to be conditionally rendered only show the logout button to the people who are logged in so that means I can get the access of that by a simple variable that I've designed OD status if the OD status is true then only do it so I can use Turner operator if it is true do something otherwise go ahead and do show null that is also a good approach or I can use another approach with the MERS sign if it is true then only we are going to render this just like this and we can say let's grab an Li Li yep there we go and inside this Li let's load simple logout component just like that so I hope you can see uh it was a little bit lengthy but it's not really difficult that's how we simply have our headers and navigation bar uh don't worry we will be assembling that in the app.js so if you see this app.jsx uh just above the outlet we will have the headers and we'll have the Footers as well but right now this is good enough for us to understand that how things are going already it's too much uh but that's it so that's our part one the phase one we we have handed L the authentication part and the logins and whatnot now let's move on to something which is Tiny MCE uh this could be a little bit difficult at first uh but it's not it's really really easy the first thing is that the tiny MCE is a component which is not the usual form it's a third party form and we're already using a third party form which is the react hook form so react hook form also knows that hey these kinds of things are really really common uh and if you look at their docs uh you'll see that there is a hook that they give you which is use controller if you look at this it says react hook form Embrace uncontrolled components and Native input however it is hard to avoid working with external controlled component and we are into this exact same situation A react select is one of the selection Library which helps you to get selection based components antd very very popular so we are into one such situation in that case we can actually wrap everything using this component controller and this controller gives back the control of these thirdparty forms to the react hog form that's exactly what we want so let's go ahead and see that how we are going to handle that so let's close the header and let's create a new file into this one and this time we'll call this one as realtime editor so RTE do jsx okay uh let's go ahead and do it one by one react functional component export just like that okay this is basic okay now we need just the two things first is our controller controller and this controller will come up from react hook form and another one is we need to import editor this is interesting editor and that editor is going to come up from uh the tiny library that we have installed so tiny MCE react okay uh uh so how do we how does this one work component we know that we can wrap it around uh but what's interesting is this tiny MC so what you'll notice is there's nothing too much to be worried about this all you have to do is worried about where you're going to load your editor and pass on these initial values that's all it takes so let me walk you through and once you see this happening up here uh you'll be pretty much comfortable so whenever anybody is using an RTE he'll be providing couple of values so what is the name of this uh one name is good enough we'll also get some of the control from the user if it doesn't provide we can also pass on default ones it actually uses default one and then we'll also say the label oops label just like that and we'll also have the default values default value I'll show you what these default values and everything are okay uh now time to get into this one so what we're going to do is first of all our label logic will remain as it is exactly same just like we have used in the past as well so let's create a div and have couple of class name and this one is going to be withd full that's it now let's first display the label again start your JavaScript like this if the label is given by the user uh that's great then only we are going to display it and if the label is present then we can just simply go ahead and use a label just like that okay uh this label will have couple of classes mainly inline inline block there we go and margin bottom of one and padding on the left side of one that's it okay what is the value that we want to add into this one simply label there we go so label part is done we know that part we have done that handled this one uh now comes up is the wrapper first of all the wrapper so controller there we go uh we can make it self closing no bad nothing back uh nothing bad into this one uh since it doesn't take any values or something we can just go ahead and make it a self closing now this controller takes couple of values if you wish to read more about it you can read in the docs uh that's why we passed it up uh name the unique name of your input that's why we say it name it also gives you the control here the control object is from the invoking user use form uh so again the exact same thing I mentioned that control is uh to make sure that if parent is invoking any child form that child can again pass on some data back to it uh then we have the render which is what is that you want to render into this one these values and default values you want to study more uh you can just go ahead and do this these are the required ones nothing else you have to worry okay let's deal with them one by one so we'll say the name the first prop now I will inject a JavaScript here that I'll just keep it as name if the name is there otherwise we'll just say content okay if somebody passes me this name to make it this form reusable that's great otherwise we'll call it as content so control this is something that you have to pass on when you actually design a form like that uh notice here this control is something that is a control object from the invoking use form right now there is nothing which is using the hook use form but if there is one this is where it or this is how it takes the control of it then the next one is render uh render uh this render is interesting one uh because it's actually a call back so just goes like this and I don't want to use the return keyword so I'll just go like this inside this render itself uh you need to provide What fields you are interested in uh working with so first of all I'll say field just like that and the field that we are interested in working is on change okay uh little bit weird as of now but don't worry it will be all good in just a second now this is the field that what do you want to control like on change because we'll be having a state in the state we'll be staring so this all will come from who somebody who will invoke the use hook form right now it's not there so where we'll be designing the major form that's where this will come in okay uh now coming back in here here I want to render the editor that's the one and I it can be self closing as well that's it now the editor right now it looks like just one element uh but it requires more fields and more properties that's what we are going to provide to it otherwise this is the only code so notice here we are controlling the third party forms just using the controller with a couple of fields only that's it uh you'll understand the importance of it as we create and we'll be using this use forms and all of that so we will be very soon using them as well uh rest is all good so this part is all done now we can go back to the tiny MCE and provide all these values so all these values like uh you have some initial values provide that if you have have in it uh just provide that uh if you have plugins provide that uh toolbar provide that content style provide that most of them is exactly copy paste from the documentation itself that's exactly what I'll be doing but let me show you that uh first of all the prop initial value uh initial value I don't have anything so I'll just pass on the default value whoever is using just pass on that as it is uh then we have this init this init uh we need to provide the object that what do you want all to have like for example you have option branding as false I don't want to show The Branding uh but it still shows it because it's in the free version otherwise if you pay to them uh then it's just just like that and then you can also provide couple of more parameters like height and the menu bar just like that uh then comes up is the plugin so go ahead and grab as it is whatever the plugin values are again it's up to you how you grab them do you want to use all of them do you want to not use all of them uh totally up to you no Force there uh I'm just going to be using all as it is so in the plug-in I'm saying give me image plug-in list plugin everything so that's how you do that uh next up is simply the toolbar so just go ahead and uh grab everything that's there in the toolbar and in fact grab everything that's inside the content body as well totally up to you totally up to you that how you want to have it I just want to have everything of it so I'll just grab this one and let's grab everything from here and we'll just paste this and this all thing can actually Oops why is it not moving okay so toolbar looks good probably there's something inside the copy paste that I missed let me try that one more time usually it's not that bad oh it's bad anyways yep toolbar uh the value is too big it's it's just a one long string I don't know how they do it anyways and then after that we have ending trailing comma and we have this one come on where's my cursor ooh difficult okay let's move this one okay decently adjustable I need to change the setting of my vs code a little bit to accomplish that okay uh but anyways it's good enough and the last thing that you want to do is once you are outside of this one then we'll be having an on editor change and this is where we just say that I will pass on an on change so that anybody can control this okay uh this is good and I think that is all what we want so a little bit difficult in the first run that hey why we are doing this all of this why is it all of that but remember this is a bit of an advanc part of the tutorial I think it helps you understand a lot here okay uh now the preparation is done now we'll be building one of the most important form in itself which is the post form so right click and create a new folder and we'll be calling this one as post- form uh this is our most important form because it uses almost everything that we have built so far post form. jsx all right a lot of logic is also involved in this one uh but it's good it's good you'll learn a lot of things in this one have patience take a break if you wish but I'll continue here so first of all we'll be needing uh react and we'll also need some of the we can actually use call back to make it a little bit more optimized we'll be needing now the hook that we have been waiting to use which is use form no suggestion okay no worries and that will come up from react hook form uh this is the most invocation part and important part we need uh all the things that we have designed so far so we'll be needing a button and the button that we have designed One Directory back and it's actually button we need to go One Directory back oh my goodness I actually accidentally made this form outside of the component it should be inside in here let's drag and drop into the components yes please move that post form post form just like that hopefully now it should be good one directory back yep that's my button okay what else input import input from input and we need RTE as well and that's going to come up from RTE and select also and that's going to also come from ooh my bad One Directory back and RTE this one also oh sorry select my bad select this one also One Directory back RTE One Directory back input and this one is okay okay so these are our components that we'll be using we also need the service because this one is a form it will be submitting some data so we need the app right service here as well let's use app write service and that service is going to come from a lot of back directories yeah app right and inside that we need config I think that will do that the job uh we'll be navigating and selecting some of the information like we need we need Redux so for that we'll be saying use selector and this selector is going to come up from the react Redux and we need navigation as well import why navigation you might be thinking uh once the form is actually submitted we want to redirect user back on the homepage that is why we need that use navigate and that's going to come up from react router Dom all right quite a lot of import that we have done here uh but I think that's good uh we didn't actually started with the template we should have done that but anyways I'll just write that export default and let's call this one as function post form and there we go should be good now interesting part as soon as we have form we might receive a post in that so we are actually reusing the form in this case so if somebody gives us the post uh we'll use the same form in which we want to edit our post and if it somebody doesn't give me this post that's okay we'll handle it accordingly and we'll use it as for creating a new post that's how we are going to use now most important thing first of all we need to register that what all values and everything that you are going to use in the use form we have this use form now this is a very very powerful hook instead of managing each of your input into its own individual State uh it could be nightmare maybe you have 20 input forms and you want to maintain each one in the State uh this could be challenging in this one so that's why we use something like this uh give all of your values and then simply go ahead and use a hook which is use form this use form can have all the values so in here we can provide all these values like what are my default values so let's go ahead and have uh let's provide these default values as an object uh let's just say we have a default value for the title oops not like that I'll show you where the title is uh so I have a default value for title if you give me post then optionally we'll extract it from the post title if it is not there then we'll just say hey it's empty similar to this we'll just go like this similarly we have a slug uh we'll say this one and you'll be you'll be very fascinated about how the Slugs values are being handled in this one we'll say optionally extract the slug from it if it is not there then just go ahead and provide an empty one similar to this we'll be having a content if the content is there let's optionally extract that uh forgot a DOT otherwise let's go ahead and keep it empty as well and we have also have a status as well so status if post is provided then then optionally unwrap that as a status if it is not there then just use active because that's the default state of this one okay so we have provided the default form but what all the input fields that you are creating are going to be managed up here so first of all we'll have a register uh I'll walk you through what these registers and everything are uh another one is handle a submit uh sub submit uh this will obviously be submit Handler we'll be writing our code for this one there's interesting one which is watch I'll walk you through this is the most important thing and very interesting thing in the use forms as well we'll be also having a set value uh and we'll also have uh control I'll walk you through all of this don't worry and we'll have get values okay quite a lot of stuff that we have now let's learn and understand them one by one how these things are being managed or being done okay so this is use hook form okay this is where it ends all right let's go one by one how things are going to unwrap uh first let's focus on writing the logic part and then one by one we'll be focusing on building the UI part of the app as well okay so first of all uh let's grab navigate from the hook use navigate just like that right now it does nothing but we have an option and then we have user data how we are going to grab the user data that's exactly why we have used selector selector will give me a state just like that and we can just extract the data by saying state. Au do user data all right so my user data is now in the user data field uh there are a couple of things I need uh for example uh I need to have a submit action as well so people will be submitting the form uh we'll create an async uh form for that uh and it will give us the data right now we are not doing anything in that we will come back onto this one and figure it out the most important part is the slug so the way in case you saw the application when I was showing you the demo the slug is a very interesting thing we actually are transforming the title into the slug so everything in the title is being converted into the lowercase we are trimming the spaces and spaces are being converted into dashes rest everything are ignored so the way how I did it is is let me show you that it's actually just a method slug transform and we'll be using a use call back to optimize it otherwise it will be keep on wasting the resource if in case you don't want to use the use call back that's totally fine by the way okay so I did a took a help of little bit of the chat GPT I'll show you where I took that first of all uh the way how actually use that you cannot directly actually go ahead and monitor or get any value vales from it so we have to actually grab a value out of it so notice here I'll be controlling these uh set values and get values I'll walk you through the that as well in just a minute uh we'll be holding that part all right so we're designing this slug transform and what's this doing is anybody can call this method uh the only thing is you have to pass me a value what is this value uh it's nothing it's just the value in the current form that you're using just pass me on that and I'll extract the value so I'll walk you through don't worry in a minute you'll understand everything of it I'll say if the value is there and the type of value we need is a specific one if the type of value is string then only we can proceed if that is the case if we are having that uh then we can simply go ahead and return a value out of it so I'll just move it to the next line and then I'll come back and put it into this one later on so what we can do is we can return a value and we can provide a couple of methods on this one so this value can have a method of dot trim first of all let's do that once we are done with that let's convert everything to lowercase so we'll use to lowercase all right and then we'll be using a simple Rex to replace some of the stuff and this is the Rex part where I took a help of little bit of chat GPT otherwise I used to use a website rexr but this time I took a help from Chad GPT so we'll say replace there we go and in this replace I'll provide what value I'm looking up for that's the regx value and the second parameter is what to replace with and I'll just use the dash so what to replace with this is something that I grabbed actually directly from chat G Chad GPT put up a prompt that I want a value that converts everything uh spaces and everything that selects everything so I'm just saying that hey this is a negate by the way uh don't select lower case uppercase any digits or any spaces rest of everything are converted into this one and then optionally what you can do in case although it does the job but I found in some of the edge cases it was still bothering me so I didn't found out any particular solution as of now so I just went into replace and I wrote another simple query which is a basic Rex by the way it simply goes ahead and say a little bit itchy throat so it simply goes ahead and say that hey I want to select all the spaces so SLS is for the spaces and I want to look it for the globally uh and then just want to just double short B it converted although in most cases I found that this alone works nicely uh but in some cases this was problematic so I just wanted to make sure that at the Final End U I'm just replacing all the spaces with the dash and I'm ignoring all these uh digits and lowercase A to Z uppercase a to Zs and slashes I'm not really that great or good into uh these reic I accept that but hey this works fine so there we go so we are returning the value and that's it that's your slug transform that is all it takes now we also need to pass on a dependency array onto this one we don't have any dependency but optimize this as much as possible okay so this is my slug transform that we have okay uh now you might be wondering that hey uh that's great we have slug transform but we want it to run as soon as somebody type something into that title form how can I do that that's an interesting one actually uh you cannot do that directly if you're using any of the react or you have to monitor a lot of things but if you look at this one there is a component being given to you that is watch and what it says is this method will watch specified inputs and return their values so not only it can watch my in put in the name field it can also return me that value so I can use this and where can I use this or how can I use this really really simple let me walk you through with that as well I can use actually it inside the use effect hook oh that's interesting so I'll just say react do use effect there we go and this is our call back and looks like just use a call back like this and we need a dependency array okay first of all let's worry about the dependency array on what Fields this should be dependent first of all we'll obviously use watch that's the one uh also keep on watching onto the slug transform if it changes a little bit also I want to render reender the things and also the set value now you might be wondering what are these set values can you explain that a little bit because you're using this uh set values get values and quite a number of things these are actually coming up from the use form itself when we are using use form you don't need to create the States uh that is the one advantage I'll show you how these are useful when we'll be designing the input field itself then it will get much more clearer uh but the whole idea is you don't want to create thousand different states or variables uh we can just use it directly like that I'll show you that don't you worry okay so the dependency array part is done now let's go into the use effect uh this one now here's the interesting thing how do we use this watch uh really simple you just simply go ahead and use a watch just like this this watch uh gives you a call back and you can provide the value uh by the way these value are uh all the values that you can have in the form itself these are the values and out of that I'm looking up for one value which is name so watch out out of all these values the fields that you have watch out the name for me and once you are here let's go ahead and have a call back just like this and there we go now what do we want to do so if the name is title I'll I haven't created this yet but I'll do that very soon if the name of the object because as you can see uh the values are having so many properties title Slug and all of these ones if the value is name that means the name of the post itself uh is the title then only we want to run it so what do you want to do in that case I want to use a set value so again set value can be used not just for setting one value but in any field itself so set value is here now in the set value what do I want to use set value in what field you have provided me number of fields here uh I haven't given them yet but there will be uh many as you can just have input Fields all of them are governed by the use form I just want to set one field which is my slug so I'll provide you slug like this there we go how do you want to set it I want to set it by using the slug transform method I'll provide you the value do title okay once I give you that title that means that will act as a value for you and you can just use that value then run all of this operation and since you return me that I'll just use that to set the value a couple of more uh fields and parameters you want to provide in here is uh should validate because there are ways to give provide a validation inside the use form using the Joey and other libraries we are not doing that as of now it's already too much uh we'll just use should validate as true so our basic validations will kick in uh we don't want to go too much in depth of that all right uh why is it bothering title may not exist yeah it's it doesn't exist as of now but it will very soon in the future uh quite a lot of lot of intense work that we have done and by the way we haven't worked on submit yet we'll do that but first I think uh now it's time to get more clarity because these things uh will keep on adding to the confusion so let me just go ahead and render provide a render here uh so that you can understand that all right so we'll just say okay let's minimize this uh post form looks good here we should be returning the render element return uh what do you want to return I want to Simply return a form okay uh this form is not going to have any action but rather on submit what do you want to do I want to use handle submit in that case Okay uh handle submit uh should not be used directly like this because if you're using a use form the handle submit should be used from the use form this is the handle submit but actually it doesn't magically knows what to do with the data so this is going to be the method which is actually going to submit the data the way how you do it is a little bit weird but this is a method and in this you pass on another method so yeah higher order functions JavaScript at it speak yeah uh this is how the react hook form but don't worry if you'll watch these videos couple of times you will be used to with the react hook forms very powerful very useful okay let's go back and use some of the class names to make it beautiful flex and this one is going to be Flex wrap all right okay uh next up is the most interesting part after the div of course so we'll have a div uh we'll have a class name uh nothing much we want to use the width of 2x3 and we'll be using pedding on XA is off two that's it okay now comes the interesting part is we'll be designing our first input notice here I'm using the input field that I designed earlier that's it but how we are controlling this input field that is the most important part first of all let's pass on a label which we designed as a prop into this input uh we'll be calling this one as simple title all right placeholder why are no suggestions coming in oh these are props my bad place oh suggestions are not coming because this is not a regular J uh HTML form this is my custom component that's why suggestions are not coming in and we'll say title we will be having a class name of margin bottom of four there we go okay now comes up the part where we actually use the use uh forms let me show you that let me take you onto the website so this is the register unregister and whatnot use form let's go ahead and use that so if there is any example of the forms that would help us to understand this so much better okay get started and here it is okay so how oh this is the one that I wanted to show you so whenever you're using any input this is the one which we discussed handle submit and all on submit exactly like that but when you are actually using any input field this is the way how you actually monitor or govern that notice here register your input into hooks so we have to explicitly register these each input inside the hooks so that they are available as values by invoking the register function so we have to actually use this JavaScript then have to uh extract or we can say destructure the register and then provide that hey this is the example that I'm using so yep this is the one let me go back onto the code part so this is where we start our JavaScript we simply say register there we go uh this register is a method that's how we register it we are going to call this one as title now it is registered as a title and we can provide uh more Fields like required there's a lot more that you can do but we'll just go with the required as true this is the part now notice here now this input field is registered as title so I'll go back and notice here when I say value and the name is title because every input field has a name and I gave it a name of title now this will be monitored here so whenever you pass on the value inside this uh into this use effect it will keep on watching the values if the name is uh title which it is then only the set value will here and again Watch will be responsible for continuously watching or monitoring this input field ah very interesting uh so much difficult to do with the core but this is much much easier okay uh now let's have another input field which is Slug interesting one input self closing just like that okay let's do one by one first of all label that label is going to be Slug and the space colon something like that and then we'll be having placeholder placeholder is going to be slug as well and then we have class names nothing much margin bottom of four good enough okay now let's come up on to the part where we registered it into the use form how do we do that uh we first of all start our JavaScript register just like that inside the register we name it as slug okay and what should happen how this slug should actually work uh that automatically is being taken care by the watch itself so I just go ahead and say uh this is required as true all right so this should be there uh okay one more thing that we can do here here is that uh we can actually have this input as slug transform as well so let me just go ahead and work with that so on input what do we want to do that's interesting one okay let's start our JavaScript first we will capture an event onto this one and then we'll just go like this curly braces just like that so I'll just go ahead and use set values because just because you have used the slug remember this lug is just returning the value it's not doing anything it just says set values it's just returning everything to set values but there's nothing we have said that what should be the value inside it this is registering giving the values but we haven't said how to take the values back into this form and fill it up that's what we are taking care right now so set value now we'll say that hey I'll set the value and my field name is Slug okay and how do I get these values so use the slug transform here and then we'll be in order to use the select transform we have to provide a value okay uh what we'll do is we'll say e do current Target dot value and that's it and we'll simply say should validate and we'll be saying true let me walk through one more time okay uh notice here uh right now we are not actually exporting the values this is where we have done already this part but now this input field is going to set some values into it and the setting of the value is going to happen uh via this on input only that's the case in the on input we are saying that hey as soon as some inputs are being put into this input field use the set value which is given to us as a hook uh in inside this hook just a second and here it is so this was given to us so notice here we are not using thousands of set values or set field set input field set slug get slug no we just use one thing which is set value and we use get values to get any values out of any field we just provide the name of that to set any value in any of these fields we just use one hook which is set value that is the advantage just to two of these methods set values get me get values and you can actually set and get values from pretty much any field at all that is what makes me like wow this is too much how we are actually using this all right so uh now we have the set values we actually use the set values here as well to provide that uh but here we are actually using the set values on this particular input field all right quite an interesting one now let's use another one which is our RTE so that is easy one we have already worked onto this one so RTE could be self closing just like that H interesting oh we need to get out of it RTE self closing just like that uh pass on couple of values first of all label the label is going to be content colon just like that uh we need to provide a name to this one and the name is going to be just like that and we'll say content and then we have to provide a control and we'll say control just like that control again is given to us uh from here notice here we got the control this is exactly specifically designed uh to take control of the input fields which are outside or third party inputs and then we simply have some of the default values if you have give them uh but right now the default value is only for one thing which is get values remember I told you get values so if you want to get values from any field just like that let's call this one as content now imagine if you have to deal up with these many forms how many states you would be designing uh so easy okay this value is all done so now we'll close this div which is the first portion of it now we need to go in the one3 part of this one div and we'll go with the class name on the right part of it so we'll just say 1x3 and we'll say dash2 all right and in here we are having two Fields one is the input field for the images and another one is simply the field which is just saying uh is it active is it inactive something like that so that's basic okay uh let's start with the input and inside the input it could be self closing okay label featured image and the type is going to be changed to file file selector and the class name is going to be margin bottom Dash 4 class name margin bottom-4 all right what do you want to accept that's the idea we can pass on as many props as we want uh so what do we want to accept we want to accept image which is PNG we also want to image which is jpg R we also want to accept image which is jpeg if you have more you can just provide more of these acceptance Fields basic HTML nothing more in there uh then we have to register this field as well so let's go ahead and do that dot dot dot register and this field will be known as image in the registration field again basic required is true required that's going to be true I hope you noticed the difference in here as well all the fields are easily being registered in here so this is just register this is also just register only difference is when we don't have a control on that then we pass on the control to get the values from it automatically otherwise rest of the fields are just very straightforward register register just like that okay uh we can actually have it as required as true but we can just simply say uh if the post is there then we don't want it so if post is no post just like that okay uh once we are done with this then depends on the post whether we are going to actually uh get a file preview or not just like that so let's also try that so we'll say if the post is there then only we'll get a file preview so we'll just go like that and we'll say inside this div we'll have a class name we'll say width is going to be full inside in here and margin bottom is going to be four and inside the St we'll be having an image the source of the image that is where things gets interesting uh we'll be using app right service get file preview and pass on this this post dot featured image let's pass on that if H that will come up if post is there we will obviously get the featured image and in the alt let's use the title post dot title uh we should be technically we don't need to uh use a question mark here because we're already checking it up here so that is good enough uh I think that's good let's add a class name here and let's use a class name and that should be rounded Dash LG there we go all right uh so this is the case when the post and featured image is there now we need to have to work with one more thing uh we need to select the options for the user as well quite a lot but this is what happens when you design complex application so we have a select field we can use it as self closing all right move it up here uh let's provide the options that's the first parameter we have to pass on the options is going to be an array so let's pass on an array the first value is active the second value is inactive that's it that's your option the label is going to be status and the class name we just need some margin from bottom in all of these cases and last but not the least is register it into the react form react hook form dot dot dot register and we want to register it with the status registered it and now let's provide this is very optional required is going to be true there we go that's it so select form is required now let's go ahead and use a button to submit it okay so inside the div let's keep it in inside the div itself uh we'll be using a button we'll be using our own button so there we go okay uh this is the button that we have and inside this button we have we can have children's that's how we designed it so if the post is there then we'll call this button as update if the post is not there then we'll call it one as create or submit whatever you like all right so this is the button and inside the button we can pass on more values like type of the button is going to be submit and what else background color BG color these are the properties which we have given so let's also use JavaScript here if the post is there then we'll be using uh BG green so we'll say BG Dash green suggestions please no suggestion BG Das green Dash uh 500 otherwise we'll just say undefined all right we can use another color as well by the way and one more thing we can just provide in here is class name width Dash full all right so this is the form that we have again uh we have studied a lot into this one I totally totally understand that piece that part uh but there is one more thing still remaining which is the easy one by the way we haven't yet submitted anything the submission part is definitely easiest among the all uh but definitely this is something you need to understand one by one how things are going up now if the post is there then obviously based on this we'll be getting the value so first of all we have all the data and by the way all the data now we have as soon as you submit the form uh the values are being called and we have the data uh we need to extract the data from couple of resources let me show you that uh it's easier to actually write the code then to explain that so if uh the post is there okay if post is there then we have to do something otherwise we have to do something else okay so post was there already okay so first let's extract the file let's get the file file be coming up from the data everything is in stored inside the data and we'll be having an image and we'll be extracting this okay now what we're going to do is we are going to do something if we find the F otherwise we'll be just uh putting a null inside this one rest of the checking automatically can be done by the app right itself if it is there then we want to use an app right service to upload the file so let's go ahead and await this because this service takes time and we're going to use app right service we are going to use upload file and in the upload file we just pass on this data do image and obviously the path which is in the first field okay so that's the part one and uh this is the part now again we need to continue further if the file is there uh if the file is there uh then let's go ahead and delete this if uh the file is there then we are going to use app right service dot delete file because we want to delete the previous file previous file is inside still in the post so we'll say post dot featured image okay uh if file is there go ahead and delete that you can also go ahead and use an a wait here as well if you wish but I think it's good enough it can do its job behind the scene as well uh depends on when we do more thorough checking we can actually go ahead and work on with this okay uh now let's call this one as uh DB post and what we want to do is aate app right service and this one is going to be responsible for updating the post for updating the post provide me the ID first so that can be extracted from post. uh dollar ID there we go and then provide me all the data that you have okay what data do you have I can just extract everything from the data itself and one thing that you have to give me is the featured image to overwrite that featured image because we just uploaded that that will be coming up from file if we have that if we have the file then give it file. doll ID otherwise if you don't have it just give me undefined so that if it is compulsory aight can throw me an error okay now continuing further in this case if the post was updated successfully then let's redirect the user so let's go ahead and work with that if uh we have the DB post if that's the case we have the DB post then let's use the navigate which we created from use nav Navigate and we'll say go to slash poost slash the slug of it which we can get from like this and we'll be having not the post DB post the newer one DB post and we'll get a do dollar ID there we go nice and easy keep on talking keep on writing the code that makes life so much easier okay this is the part where we have the post what about when we don't have the post in that case will go with the else part that means we are creating a fresh post so let's upload the file first go like this file await no question like this await and then app right service please help me to upload a file okay how do we upload a file by extracting it from data dot data do image and out of that image the first value which is the path uh once you have uploaded that then what should I do next if I have the file uh let's get that field uh properly set let's use this if I have file then what I want to do is I want to create a field ID uh file ID sorry field ID file ID as file. doll ID okay and then inside this data that I have access I will create a new field which is featured image uh which will have this one file ID could have done that in one line as well but I'm more comfortable with this one okay now that you have all the data you have also the access to featured image which you uploaded first uh let's create a new post so obviously I'll say await app service dot create post uh provide me all the data that you have so first of all let's give it all the data by destructuring it and then also give give it a user ID a user ID can be given to you by simply user data remember we have access to it in every component and we can actually have a user data dot uh dollar ID that's how you grab the ID okay now once you have done that let's store that into a variable let's call this one as DB post okay once this is done that means DB post is created now inside this I want to check for another condition if by this time the DB post is being created let's navigate navigate where do you want to navigate to uh we want to navigate to/ poost to the newer there's only one post ID that we have which is DB DB post we need to use variables we need to have DB post and we'll extract the ID out of it all right uh so this is not too much but you need to be very careful with what you are doing that's why I always say uh don't code uh with the mouth shut always uh code uh by thinking of it you can do one by one step by step all these process this is almost kind of a standard practice we always upload the files first we usually create helpers for them upload the file get back the URL of the file set your object properly and then use helper files to upload the file create the files create the post whatever you want to do uh quite an intensive video in itself I would say that and definitely it took us a little bit while uh well over 1 hour onto this video but I think it's good enough and that's majorly it what we wanted to do uh now it's time that we actually assemble our all of our components and start debugging them one by one obviously there are mistakes in it uh but we'll figure them out let's catch up in the next video hey there everyone AES here back again with another video and in this video we're going to continue our journey we'll create two more components which is sign up and the login now this could be done either in the pages or in the component uh both are absolutely correct I prefer to do it in the component so that in the page I just have to load one component and that said it brings all the functionality but it's totally your choice maybe you want to just keep the components as purely just the UI part I want to keep it as both the logic and the UI part totally your decision now once we are done with the login and sign up then we'll be working on the posts because there are many posts which will be available in the post page uh so basically we'll be making a query we'll get the data and we'll be just passing on to another component so that it can Loop through it uh let me just share the screen it will be much more easier hope you recovered well from the last video it was quite intense and that video requires you to spend at least one or two day with the documentation of react hook form understand it better or probably repeat that uh that always helps to understand code more the more you see the code the more you read the documentation it gets much more clear with that over the time uh things requires rep ation so that's why I highly highly recommend that once you done with this entire uh this series uh go it again for one more time that will surely help you all right let me share the screen and let me walk you through that how and where we are going to work through so this is the docks I still read it to this day and uh there's always something more interesting going on in here now one thing that we are not going to focus in this video is this part we have already seen that how we can register any input field with the react hook form by this method and then everything is available in the data and that's why we have this data available so register uh form States and watch and handle submit and whatnot uh this is the data so this is what we are having all right so we'll not worry on that part rest of the part we will walk through again uh okay so first of all let's go into components right click and new and this will be our first uh let's start with the signup come on write that sign up. Js X okay so what goes into the sign up first of all let's do RFC to get a react functional component now in this one since this is a sign up we definitely 100% requires the Au Service uh so let's go ahead and grab the Au service Au service and that obviously is going to come from One Directory back inside the app right and inside the O so that's our app service we'll also be using some of the links in this one we'll navigate the user forcefully once this is done sign up we'll either redirect him into the application or to login page but that is going to be required let's go ahead and grab link and navigate rather use navigate use navigate come on navigate and these are going to come from react router Dom all right uh we also will be using react that is obvious we will be managing some of the states as well uh I'll walk you through not too much states because we'll be dependent majorly on the react hook form but still there's a place we'll be using it I'll walk you through with that all right so this is the all and obviously we'll be needing some of the buttons and all these basic component so let's go ahead and grab a button and that button is going to come up from uh we need to go in the same and the button. jsx we need input and Logo as well so so import input come on input from the same current directory that we are just grab input and the logo as well although there's nothing in our logo but still we'll we'll just import this logo from SL logo all right so components are there and obviously we'll be requesting some of the features we'll be using use form so let's bring them as well uh first one use form because I'll be using this left and right use form and that is going to come up from react hook form and little bit Redux also is required uh mainly use dispatch because I'll be dispatching some of the actions dispatch and that dispatch is from react Redux all right quite a lot of stuff that we have imported uh but that's good uh we got this one now let's see how we're going to do that first of all uh the easiest part is to use the use navigate so I think let's do that easy part I always love to do first naviate and that simply says use navigate there we go that's it easy part done uh let's create a state for the errors and that's the reason why we are using user State uh because right now the form although form has the capability to handle the errors as well uh there are validations and what not and all of that like there is a specific dedicated how to handle the errors as well but I think I'll handle them better in the state so I'll just use the state in this one error and that will be set error and for this we'll be using use State and by default there will be nothing no errors at all uh we'll be also using the dispatch so easy part just like navigate uh let's go ahead and use dispatch and that will be coming a from use dispatch so that whenever we want we can just now use it all right now the next thing is uh that we obviously will be uh registering the user so for registering the user we need to use the use form so I'll just go ahead and say const and we'll be saying register and then there is handle submit and this will be use form all right I hope now by this point you understand the part that register is something uh which is we what we use for dot dot dot register yes that one and handle submit is the method by which we actually uh pass up so any times you use something like this handle submit anytime you use uh the form the react hook form you cannot just directly pass on on submit uh you have to have to go through with the handle submit which further takes a function of on submit and that is why how and that's how basically it controls the entire form so keep that in mind uh release sometimes when you create this it's easy to actually forget that okay so this is the basic now how we are going to create the user because handle submit requires a method to be passed on we'll call this one as create uh you can call this one as create user create user on app right totally your choice how you do it I'm going to call this one as simply create create and this one will be a sync operation and this one is going to take data data obviously will come from the react hook forms there we go now uh first and foremost that what we're going to do as soon as somebody clicks that we are going to use set error to set the error or to reset the error basically to onto the initial State now let's go ahead and use a try catch the catch part is easy uh the catch part we can just go ahead and say set error we can use the state and we can say hey error give me your message that's it uh super easy to handle in the try part okay in the tri part we'll await obviously because that takes time and and we are going to use a service from the app right so let's call this one as Au service that's what we called it and from this we are going to use the create account and we'll be passing on the data that's it now let's hold this into a variable let's call this one as con user data okay once this is uh completed then if we have the user data uh then we can actually invoke uh dispatch to save all of this data in our Redux otherwise the error is there so let's validate this if we have user data then we can simply go ahead and say uh let's go ahead and get the current user how can we get the current User it's pretty simple actually you can use Au service again and from this you can run the method of get current user just like this and you'll be having the access to whoever is the current user this operation might take some time so let's go ahead and use an await in fact I missed a couple of places await and if you find them just go ahead and add await for that all of the upright operations should be awaited okay uh let's go ahead and say further down we can call this one as user data no problem we are inside the if block okay now if we have user data if we have user data at this point which is our current user we'll go ahead and fire up a dispatch I don't think we need this one we'll just do do it a single line we'll say dispatch what event do you want to dispatch I want to dispatch a login event and the login event is going to be uh coming up with the data so I'll just go ahead and say user data so that's it I'm fixing it Up all In the user data uh did we brought in the login H I think we didn't brought the login nope doesn't look like let's bring the login import and we want to bring in the login come on write that oh looks like this is freezing nope oh now it's working keyboards and we will bring this up uh from let's go One Directory back inside the store inside the O slice this is where we want to bring the log in and this is exactly the login that we are using in here once this is all done uh let's Force the user to navigate on the homepage maybe if you want to navigate to some other place that's up to you I'll use navigate where do you want to navigate I'll just go ahead and say navigate to slash all right uh not a big deal that's all what we wanted to do uh for this part now for this Return part I'll just copy and paste and give you the entire code because there is nothing more we are learning in this one so I'll just go ahead and copy paste all we are do doing in this one is uh some Flex box and classes and all of that the important part we have already discussed that whenever we want to have these input Fields how to actually link them up so notice here this is how we are linking them up by saying uh dot dot dot register and then the name field is being uh registered the email field is getting registered uh the password field is getting registered and then a simple button uh which just says uh create account and once we have this one this form actually has uh so notice here we have the errors being handled here at this point and notice here the form is as soon as the form is being submitted we are using handle submit which comes from the react hook form and we use the method create here so that's what we and that's how we designed it the login is exactly same almost exactly same so that would be a good exercise for you to repeat in case if you wish you can pause the video right here and try this out again it's not about all the time writing the Live code it's also about how you understand the code which is already that's also a good practice uh so we'll we just did that all right so sign up is ready almost as component now we can go ahead and work on with another one which is the login exactly same nothing much to be differentiated there and let's call this one as login. jsx okay so RFC and again this Return part will be copying and pasting so nothing much more than that uh let's go ahead and borrow some stuff from the signup as well okay let's in fact borrow everything because it's almost exactly same and let's go ahead and work on with this one okay uh instead of the login um this one is actually login so we're using the login same dispatch we are going to require we are going to require a service as well button inputs pretty much all of them are going to be using uh just like this and we're going to use login here but this login might uh create some of the issues here so let's just rename this one as Au login okay makes a life a little bit easier not much uh but I think rest of them are pretty good and pretty okay all right uh let's see how we are going to deal with that first the easy parts let's go ahead and do that const navigate naviate that's going to become up from use navigate there we go this is ready uh we need dispatch as well so we're we going to say dispatch and that's going to come up from use dispatch just like that easy part uh then we need use form so we'll be needing register of course that always goes and we need to have handle submit and that's going to come up from use form we have done that many times now okay uh what else we will be managing the errors so let's go ahead and use a state for that error set error and that's going to come up from use State just like that by default the errors are going to be empty uh now we need to work on a method which says login how do we handle the login part exactly same nothing much different or difficult let's go ahead and say uh const login we can say it login because now we have renamed this one as o login in case you wish to call something else that's totally on you we'll say async and this is going to say hey give me all the data call back just like this and first step is to set the error very repetitive very repetitive let's go ahead and fire up a try catch the catch part is easy as you all know we can just simply go ahead and set error and we'll say error do message and you might be thinking a pattern here repetitive that's exactly what I want in the course itself that hey things are repeated and you can try them and once you build enough application you'll figure out I can build anything these are exactly the same thing it's just the way how we handle the data and how we get that okay so what we're going to call this one in this one uh first of all let's go ahead and use AIT and the aate is going to utilize an au service there we go from the Au service we are going to use a method of uh login and we'll be providing all the data that you have uh let's call this one as session session there we go feel free to call it anything it doesn't really mean that you have to call call it session I'm just saying that hey this is session now if we have the session or any data uh session if we have the session now can I get a current user uh from the all service because if there is a session the login was successful technically there should be a current user that I'm able to grab so let's go ahead and say await Au service come on not that art service. get current user there we go if I get that and I hold that into a variable call this one as user data feel free to call it whatever you like if I have user data then I can dispatch a login action so I can just go ahead and say if I have user data then we can dispatch and I can do that in one line I can go ahead and say dispatch what do you want to dispatch uh you might be thinking we'll be dispatched login but remember we actually login is now being known as as Au login so just go ahead and call this one as Au login and Au login uh is a method which we are going to pass on user data that's it and user data is being passed on so that's all good now let's redirect the user as well uh navigate where do you want to navigate probably on slash that's it so there we go told you it's not really difficult at first it looks difficult but it is not very much and in the login page uh since we are using some of the Tailwinds other features that's why I'm just copy pasting otherwise if you see that there is nothing big that we are doing in here so this whole thing at this point is nothing it's just hard-coded values just HTML and CSS even this portion till here uh till this portion everything is just hardcoded CSS nothing more here we are handling the error if the error is present we are displaying the error in some red squiggly uh lines just like that and this is the form this is the important part which we discussed in the last video quite a lot lot and we saw that how input could be registered or could be binded with the use form using this speed of this piece of code which is nothing dot dot dot register and we name this field as email required as true that is it that is it this one is password field required that's it and as soon as the form is submitted uh we have this form here we use handle submit which comes from the react hook form we provide that method who is handling it actually and that's it that's it that is it our component and everything is all done now one more thing that we are going to do in this video is now moving on to the pages part because now almost all the components we have discussed that what we wanted to build now let's work with the pages one by one and again uh for the login and the sign up page there is nothing we'll be just importing the values but there is one page which is post uh this is something interesting in the post what we're going to do is uh we're going to grab some data and then we are going to Simply uh kind of iterate over the values and there's a lot of stuff that needs to go into this post as a page uh let me show you one by one uh how we are do dealing with this and how we are working with this all right so the reason why this one post page that you see up there yeah there uh is important uh because this requires a little bit more of knowledge of how we are building this application the way how we are building our application is we have load an image no problem at all then we use an editor which we brought from Tiny MCE that editor allows us to have unordered list ordered list and bold italics colors all these things and save them in the database now how it saves in the database it actually writes simple HTML with some inline elements and inline stylesheets and just store that as a text inside your database that's how it works this in fact every uh single element that you see around which provides you VIs that's how they work and they save but the problem is that if you bring in just the pure HTML you cannot display the pure HTML in any react component uh so we need some more work to be done and in fact we need a little bit of help from this so this is the package that is going to help which is a HTML react parser uh it's published 3 days ago but it's pretty popular you can see the weekly downloads it's pretty crazy uh what it does is now you can actually use a method parse once you actually import that and install that and this is going to allow you to have HTML code and in fact inline CSS as well and it works like this react. create element in case you saw the previous videos where we discussed how react Works internally how GSX Works internally so this actually breaks down everything and helps you to just work with that I found it really really useful so that's why we are going to install this let's go ahead and copy this and work with this and this will be super helpful for us in in the post as well let me go back and first let's go ahead and install this uh probably I'm not in the proper folder let's go ahead and open up okay let's verify this one more time that are we having installation properly or not so we have react HTML react parer that's exactly what we want now coming back onto the post page because rest of the things are pretty comparatively easy the singular page how we display the singular page page and the concept that only if you're author of the page then you have the ability to edit it or to or to Simply have a delete functionality that is also little tricky not too much but little bit something that we should explore together uh so we'll be needing uh react uh obviously we'll be using use effect come on write it use effect and we'll be using US state all right uh we'll be needing some of the elements from react router as well so we'll be needing them from react router Dom okay uh what do we need we need link uh we need use navigate and we need use params that is the most important what is this use params uh it's really simple anything that you see in the URL uh you can actually grab the value of it by using the Ed param super simple super easy to work on with this one uh we'll be needing app right Service app right service come on app right sir if I can write that service there we go and this one is going to come up from One Directory back we'll go into app right and we'll go into config okay what else uh we need couple of components as well uh specifically the button and the container import button from One Directory back component and the button we'll be needing container as well container and that container will come from One Directory back inside the components inside the container inside that we have this container pretty long name uh but we have that most importantly let's have uh parts that is going to come up from the newly installed HTML react parser and let's install let's also have the use selector I usually like to have all of them as I go as I need I just work with them but I know these things are going to come handy within a minute so I just no let's have them so react Redux all right uh if we need anything else we can just work with that now how the post actually work this post uh especially in the page now if you are in the page first of all let's create a state to handle the post so let's go ahead and say this is my post this one is going to be set post and that is going to come up from use State uh by default let's call it as null there is nothing inside it uh then what we need is we need to extract the slug so we say the slug and the slug is going to come up from use params that's it uh one more thing you need to understand the reason why we are calling this one as slug that is something really important and useful for interview perspectives as well if you go into main. jsx uh notice here we are calling this one up here as colon slug this colon slug is the reason why I'm able to grab a slug from the used param so keep that in mind super important to know uh let's also grab the navigate const navigate navate and that's going to come from use navigate just like that super easy okay now how can I grab the user data okay because why do we need user data because if you are a user and you are author uh then we'll see that do you should you get the delete and the edit button first of all let's grab the user data user data and that can come to me by using the use selector simple react Redux and we'll simply say state state. o. user data user data okay now I have the access to user data now how can I verify uh that this post is written by you or not because post is also storing a user ID and we can extract the user ID from the user data as well so we can match both of them so let's just say if we have the post uh because post might be null if the post is there uh let's and we have the user data as well user data then we can do something otherwise we'll do something okay uh we want to check if you have post if you have user data uh then we want to match it that will be a true part and otherwise it will be a false part so we'll say this as a false all right uh how can we verify the true part uh the true part can be verified by simply comparing them so let's say post uh is going to have a field known as user ID uh is it equals to the user data ALS which also has a field of ID so do doll ID so if both of them match we'll be getting a result of true otherwise false let's store that into a variable so let's call this one as is author and there we go now we are checking for the condition if post is present if user data is present then if they matches that's great that's true otherwise it's just a false so now we have an access of the field that hey this is all it how it works and all of that okay now uh we want to do something a little bit more onto that uh we want to work with how the delete post will work because deleting is interesting okay uh let's write a simple method for that delete uh post it's actually super simple that's why we are handling it first so how does a post gets deleted uh really simple you just query to app right so app right service has a method of uh delete file not delete file delete post yep uh you just have to provide the post ID to it and I can extract this from the post. doll ID so once I actually pass it on uh I can use an AIT here or if you wish I can use a do then just like this and if I receive a status uh then I can go ahead and and uh Delete the file as well because remember we are not keeping the file at the same time if the post is deleted then let's go ahead and delete this so I'll fire a call back so in this case if I receive that hey the status is there it gives me a status by the way if you'll read the docs once anything is deleted it gives you back a status so let's check in here uh if the status is there um if status is present then I'll go ahead and delete that so we'll use app right service and we'll say delete file and still you have access to this post uh Dot and this time extract featured image and now this image will be deleted uh if you wish you can put an AIT on this one uh but if it does it in the behind the scene uh I'm really okay with that and I can just navigate totally up to you how you're designing your app application if this is really important step you don't want to move it uh before this you can put an AIT onto this one that's also fine totally up to you that how you want to design your application okay so so far it's good uh but there one more thing uh we got this slug but we are not using this slug because this is a post page individual post should be loaded as soon as the page or somebody comes to this page or this page loads or this component loads uh so yes you guessed it right we'll be using something known as use effect to actually do the exact same job use effect and there we go we'll be having our call back and we need a dependency array as well so this will be dependent on either the slug there's any change or if somebody navigates here so we'll be running it on the both side now how do we grab a slug so if the slug is present if we have slug then go ahead and just query the app right hey app right give me a post so get post not posts only one and for that you have to provide me a slug uh let's use promises do then so if you get the post let's go ahead and use a call back if you get a post uh what do you want to do uh so if I get the post I'll set the post if post is there uh then I'll go ahead and say set post and in the post we'll be posting a post too many posts okay uh what in the else case if we don't get the this one so in the else part we can just go ahead and say uh let's navigate let's navigate back onto the home because I was not able to grab that so there is no point of loading anything uh so that's it pretty easy now we were able to grab it so delete post is pretty nice uh nothing much we have to do okay now let's go ahead and work on with this one so return I don't want to return anything uh just like this I want to return only in the case of post if the post is there then let's go ahead and do something uh otherwise you can go ahead and do something else uh what something else do you want to do uh you can put a message couldn't find the post or something but I'll just go ahead and do a null because rest of the things will be taken care by my use effect uh but totally up to you the reason why I'm actually explaining this so much is so that you understand the flow of the application not just these memorized thing that we have to always do this no it's your application how you want to design it how you want to handle the edge cases this is how things are designed so that's why I'm actually mentioning all this in such a detail okay let's go up here uh what do you want to do in this case uh I'll first have a simple div which will be having a class of p-8 okay now inside this uh let's open up a container container there we go now inside this container uh we'll be having a simple div which just posts an image so I'll just have a div uh and we'll be having some of the class names onto this one not really much interested in the classes or writing in front of you I'll just copy and paste my classes you get that now once you're into this div the first thing that we want to do is display an image now how do we display an image that's a question again we can use our JavaScript and use app right for getting the image so we can use an app right service and we can get a file preview to get a file preview we can use the post which I already have for this particular page and from this I can use the featured image there we go we got our image now in the alt let's use post title maybe we can simply say post. title there we go and it looks good uh we have some of the class names as well into this one and the class name is just rounded Excel rounded D Exel all right so the image part is all done and this div looks great now we also need to display the content so just below this div I'll open another div which also has a class of w- full and one more class of margin bottom-6 all right so this is my second div and in this I'll just do two things I'll display the title as well as the content title is easy part there is nothing big deal onto this uh again one more uh Dave uh let's use an H1 directly I'll not get a div H1 do text- 2XL uh anything else font bold font bold now how can I display this text super easy use your JavaScript and simply say post. title okay no big deal but how can I display the content because content is something where we have used uh editor and editor is storing all of this so what we're going to do is is in this case uh what we're going to do is let's use a div which will be having a class of browser D CSS these are custom classes you can write them as well but the most important thing is use your JavaScript but not ordinarily you have to use a parse which comes from the HTML react parser and in this I have to say post. content there we go uh told you it's super easy everything that we are storing this is all thanks to this parse which allows me to display the HTML content and everything that's inside there so all of your formatting like bold italic your colors everything is being passed properly now one more thing that we have to do is okay uh this part you understand nicely uh but there's one more thing now on top of this image I want to show the user that can you actually delete uh this this post or can you just have an edit button something like this delete post or edit post something like like this so for this we'll optionally render something so here is my JavaScript and is author will give us a true or false and based on this we will display this so let's use this one just goes like this uh we'll simply have a div which has absolute Dash right Das six and these are classes to keep it at the very right top that's it top -6 so we have this div now inside this div we'll have a simple link the first one is going to allow the user to update this post how can I update that super easy nothing too much I'll have the link okay the most important part in this link is two because this is something which does all the magic so I'll use a back Tex where I want to go I want to go to slash edit Dash poost and to edit any post I have to provide the slug after that that's it so I'll just use a slash and we'll provide an ID just like that so post. dollar ID that's it now you'll be redirected to sledit post and edit post we haven't yet handled uh but this will be handled here in the post so that's it all we have to do is just load all the things in the data that's it so this is the post that we have grabbed okay uh the next thing is uh let's name this button as something so let's call this one as uh inside this let's give it a button the button component that we have designed and let's call this one as edit we have some classes for this one as well all right uh actually not the classes we have some of the properties onto this one so I'll just paste this so we have the background color green and the class name just like this so one part is done that how this is being actually done in design uh similar to this we also have a button this time not the link but we need just a button so I'll just copy this move outside of the link and we'll also keep this one uh this one is going to be a delete button and this button will have a simple onclick this one is going to be red that's fine margin right we don't need this into this one margin right we just need one thing here onclick suggestions no suggestions anyways on click just like this and simply run delete post that's it delete post already is handling things up here so I think that is good enough so this is something that is worth discussing of how things are being done how you are able to par these things I hope that gives you a little bit of extra knowledge of how these professional applications are designed and once you understand this you can now build anything that you want basically something that's storing the code part or anything you can just store them in using the editors and and you using the parts you can just display them so that is it uh quite a long journey about this one still almost like half an hour but I hope this has helped you to understand a lot about how applications are designed how the workflow of the application works and you're building it along with me I highly recommend that once you watch these videos try to build them on your own if you need help take help from my GitHub uh not directly from the video but if you feel uncomfortable even after that then only take help from the videos itself that's it for this one let's catch in the next one hey there everyone hes here back again with another video and in this video we'll try to finish our app uh it's almost done we don't have anything major that we want to explain or we want to go through along with this uh rest of them is just importing the component display them that's pretty much it only couple of things are remaining which I'll walk you through in this video so let's go ahead and do that and probably after that uh we might need some kind of debugging maybe some CSS is here and there just minor stuff nothing much to be worried about so one final thing to walk you through with the flow of the code is something so let me share the screen and walk you through with that so this is our screen so in case you did notice that we have this uh post and inside this in the last video we created this button which says edit which takes you to sledit SL slug so in case you want to know you forgot about how that works uh we have this edit post / slug in which the edit post is going to be the page uh that will be loaded so if I just go ahead and click on this this is something that we are importing from here so page is edit post so let's go into the edit post and see how we can actually manage that so as you reach to the edit post the first thing that should come to your mind is that I'm getting a slug and I can extract that slug using use perams and I can use use effect to query the app right to bring that post and that's exactly ly what you should be doing so let's go ahead and grab it uh I'll walk you through with the usually what I do is I just go up here and start writing so I need a post obviously so let's go ahead and work with the post and that will be set post and usually I rely too much on the Auto Import statements just like this uh in some cases it doesn't work automatically so I hate that part all right uh next thing is we need to extract the slug so let's go ahead and grab a slug and that's plug is going to come up from uh use per Rams it doesn't gives me I hate it why it's not giving me suggestion in most cases it does but today it's not really happy with me okay so we need uh use perams so how we're going to get the use peram that's that's the question I think that's from react rodom so use bams no suggestions uh import from react router Dom did I made a mistake yes use per Rams yep now it makes sense uh since we are here let's also grab use navigate use navigate and let's also grab it so naviate and that's going to come up from use navigate just like that okay uh so these are the things that I have now the first thing that I would love to do now is to use the SL and get something from aight services so we need to get aight Services first all right import app right service and that's going to come up from One Directory back inside the app right inside the config let's now use use effect and the use effect goes like this it gives me a call back just like that and we have a dependency array all right so what's the dependency uh maybe if you change anything into the slug or if you navigate from here and there that these are my two dependency now coming up onto the part where we can go with that okay so if I have a slug then make a request so let's check this if you have a slug then only make that request so app right and we are going to say get post one only not the posts and post can be taken up by the slug uh we can use a weight here or you can use use do then for the promise part and then we'll say inside this if you get a post just like this let's go here now if we have post let's set that post into my state so if I have a post let's go ahead and set this into set post post there we go if I don't have any post so in that case I'll just go ahead and say navigate navigate where do you want to navigate to up to you I'm happy with the slash all right so this is the part where it's easily now this part here is even much more easy uh the reason for that is uh I can just bring in container and the post form which I've already created as a component so that makes my life much more easier let's bring them so import container and that's going to come up from One Directory back inside the component we have container and we have container and we also need the post form so import post form and that's going to come from One Directory back inside the components and we do have post form and inside that we have post form post form there we go and all I have to do is I can keep this stiff as it is if you wish and I'll say the padding on y AIS let's be it six we don't need this this and we can say wrap everything inside the container just like that and inside this will be having a post form and it could be self-closing and we need to pass on one peram which is post which is post all right so post is coming up from my state so that's it told you after this point almost everything is super super easy like let me tell you one more thing what happens when you simply go ahead and do add post now I don't have to do too much of the things I can just go ahead and say I want to import container and that container is going to come from One Directory back inside the components container should have done an index.js there I'll probably leave that as an exercise for you uh there should be just one index file inside the components and I could have bring everything here make my life much much easier uh but anyways and we do have a post form and that's going to come from One Directory back inside the component slash uh post form slash post form and in here I can just go and remove this again same class name padding Y6 and in here wrap everything inside the container just like always and in here you can just go ahead and say hey I'll have a post form post form why did it brought it again no idea but anyways we'll remove this one okay so told you it's super easy now because the post form component that we created in case you forgot that it's okay it's totally normal to understand that you forgot that uh remember everything is being done in here so submit everything is there we're just loading this component inside this one so super super easy now what happens when you actually work with the all post okay in the all post uh we'll just grab all the posts that are possible and we'll be working with that like uh so let's first import app right service service and that's going to come from One Directory back inside the app right we need config and what else do we need probably that's it I want to have all the posts so const posts set posts that's going to be use uh State and by default it's going to be an empty array uh we want it to be tradable because there are many post inside that first thing is use effect use effect just like that have a call back and there is probably nothing as a dependency array when you put nothing inside the dependency array that's also a good thing that means it will run only and only once when the component mounts and that's it so let's go up here and as soon as the component mounts we'll use app right Service uh we'll say get post this time s because we want to grab all of it and we'll say that hey um we'll get all the post we'll just take it in the array and Dot then and if everything goes right we'll be having the posts and all we have to do that if we have posts if we have posts just go ahead and uh use set posts just like that and we'll saying posts do document that's that's a little bit part on on the app right side because the post in itself has an object. document has a couple of more things by the way if you wish to see more of it just do a console log of the post and then once you have the dot documents that actually gives you an array and again by the way I didn't vent it up on the very first go I had to do a cons log to understand what kind of document is something that I'm receiving back and then I worked on this one by the way aite does a fantastic job in showing you what is something that you are receiving back when you're making a query or something like that uh so fantastic job there but yes I needed to do a little bit of console log there now the interesting part is uh we would be needing a postcard so if you remember we created this post card in which you pass on the ID title and featured image and it displays that so we'll be using this so let's go ahead and bring that we'll bring container too container oh nice suggestions finally you are awake and we'll be needing a postcard post card no suggestions ah it's just understanding the things which are already being designed hate this should have been done Auto auto anyways not complaining too much uh components and then we have postcard okay uh moving back uh this is going to require a couple of classes uh we are going to set the width of full and padding on Y8 okay so now moving ahead let's clean this uh first of all let's wrap everything inside the container just like that inside the container we'll have a simple div and in fact this div can have a class of flex and flex Dash wrap so that everything becomes a card and we can just easily shrink them up okay now what we have to do start your JavaScript because now we want to Loop through the posts remember this uh the posts which is an array so we'll be rendering this but conditionally so we'll be saying that hey uh what we can do is uh posts. map and inside this each post we are going to call Post uh this is individual one just goes like this and I'm not going to use curly braces otherwise I have to explicit returned so I'll use parenthesis for that and I'll say I'll be returning you a div with a class of padding das2 and a width of 1x4 do width of 1x4 I don't think so it automatically takes it as emit abbreviation ah it takes it that's nice by the way it's Dash uh and since this is the one which is iterating over so we will put a key onto this one and key is super easy post. dollar it and once I'm in this the component that I want to Loop through is my post card self closing of course it takes one prop so what we're going to do is if you notice it carefully I could have given it like this so I can just go ahead and say hey post is equals to post but it's not accepting uh these kinds of parameter in this way so remember the way how you design these components and what they expect the data make sure you're careful about that in our case the post is expecting an object which has all these information so don't pause it on directly uh in case you want to do so so you have to pass on just an object and we are going to destructure it that's the important part and that's it it's going to do the job so I told you it's very minute details now uh we are all happy with this edit post we have worked on and home there is nothing inside the home uh what we can do is um home can also have the card uh this is my all post same and on the home Also let's grab all the cards and do the same stuff okay so let's go ahead and say all post and we'll copy all of this home will also display the same stuff so we'll paste it all post what do we need uh the same stuff copy this and in here we'll just paste it so we have post and all these stuff uh get post blah blah stuff looks okay now in this one uh what we can do is there are a couple of more things that we should have done okay h on the homepage if you have like we haven't taken care of the cases in the all poost when the array is zero H we can actually do that in the home and I can give that as a sample exercise for you okay uh so this part is all okay but what do you want to return When the array is zero so let me just handle that case if the post. length is actually zero that means there is nothing inside the array uh then you can simply go ahead and return uh that there is nothing to read otherwise we can just wrap up the container something like that so let's go ahead and remove this part return what do you want to return return uh no post to display but let's actually do that in a better way let's grab everything from the all post I'll grab this copy this and I'll paste it okay so container and we don't have this one to actually load so we'll just remove this and we probably will have a simple H1 which says log to read post so probably there is nothing inside it or we can say there's no post to read better message is login to read so this is all the case when the if statement is working if the statement uh doesn't get invoked that means there is something inside the length so in that case we can actually use the same all post copy that and we can just paste it up here that hey the container is there and we are iterating through so post. map everything postcard it's it's exactly same so now that you know how to handle the situation when the post is zero you can do exactly same in the all post as well just write a simple if statement at line number 19 I can just mark it as too for you to do add case for U array length zero yeah not really the best sentence but I think you can do the job okay uh so the home part is done uh what about the login part this is the most easy part but I think you will find a couple of bugs in this one uh let me show you why the reason for that is we did everything inside this login so we just need to import this component but you will find it little bit difficult if you don't know one simple thing which is how to import this so you probably might think that I'll just go ahead and say I'll import login and that will come up as One Directory back inside the component we do have login the problem is our page is also called as login uh this is really bad so which one to use which one not to use something like this uh the easiest fix is just use an elas sing and let's call this one as login component and notice here this is what is giving you problem that hey import login this is not how it works so we need to actually change this a little bit and I think this is the reason why I always say that it's always a good idea that these kinds of situation might happen with your component so it's always a good idea to actually uh grab things like this so let me show you an easy fix of that because that's a common scalability problem uh let me just show you that we will just create a simple index file inside the component new file and call this one as index.js and one by one we'll be just importing everything and we'll be exporting that that's all what we'll be doing in this one this is much better of an approach so if I go ahead and say login and that login is going to come from SL login now I can can go ahead and say export and I can export all of this is like that and I can export login now once you do this kind of a thing it's much easier and you'll notice that uh this import statement is not going to work because it's not uh export default so you can actually just wrap this up inside the parenthesis and every time you bring that uh it comes up like this and this gives you the ability to call it as login so you can rename uh the structures like this or rename the page as login page something like that so that's also workable but I think you get the idea that how to avoid these kinds of problems good good stuff to discuss uh we'll have a simple class name and we'll say padding Y8 and now in here I can just hit and enter and can say I'll have a login component self closing of course so there we go much easier much easier fix uh post uh page we have already worked with that sign up exactly same so for this signup also we'll import the signup import sign up from Pages nope not from Pages sign up from current directory and sign up all we have to do is comma and say sign up now the advantage is I can actually uh bring these sign up and can rename them so I can just go ahead and say import sign up from components that's nice and I I can just say Get it as sign up component and in here we can just have a class name which says H padding Y8 and this one can hit and enter and we can say sign up component self closing of course so all right a lot of stuff and actually the better way of handling this entire thing in the component would be to grab everything that's there in the component and export in this way so that there is a consistency and I don't have to name this because if you notice it uh when we were bringing something like in the edit post uh when we were bringing these things uh like post form container this is coming up from different so there's a missing piece of consistency here so at least one thing would be consistent is everything will come from do/ components that's it uh so good stuff but I think you get the perspective of how things are being done and I happy that I was able to share all these details production grade scalability issues with you the only thing remaining is to test the application and we're going to do that in the next video let's catch up there hey there everyone hes here back again with another video and welcome to the final video where I'll walk you through how I debug this application expecting that your application will work on the very first go is absolutely a wrong notion and especially when somebody's teaching you he's more focused on the teaching part and the flow part so some mistakes are meant to be there they are obviously going to be there and yes it took me like really a lot of time to debug this by a lot of time I mean 1 hour a little bit more than 1 hour uh so in this video I'll walk you through what all I did how I debugged the process how I read the errors this will help you to understand the entire flow of when you're done with the application or in between if you want to check it out what all the processes you need to go through so let's go it one by one and I'll walk you through uh currently the application is in the working form and I'll just give you the entire source code as well but the most important part is to understand the the psychology behind solving these bugs and most important is read those damn errors that's that's the secret ingredient okay uh let me share the screen first and one by one let's go there so what I did is I tried to run the application so the first conflict that I saw immediately was in my app.jsx so uh this is the first part so in the app.jsx there was nothing absolutely we didn't had anything so we have to load some stuff so in the return statement as you can see I brought in my headers and I brought in my footer so that in the header I can load up the navigation bar along with the logout button and the outlet as well now not only that I also wanted to figure out that whether the user is logged in or not so how can I do it as soon as this component loads yes you guessed it right it was use effect so I used the use effect hook along with the app right Services just a simple me method get current user if the current user is there uh then that's great otherwise uh let's allow the user to move on here and there so what I did is I created a state uh loading and we used the dispatch just like that and after that we used a simple use effect and we simply went up with the OD service get current user if we get the user that's great let's dispatch a login action that user is logged in uh otherwise let's dispatch the loading as false So based on that uh we're just loading uh if the loading is false otherwise we don't load anything that's that's pretty much it I did once I did it and I moved on to the Chrome browser so let me just walk you through with this one so uh this Chrome browser so what we saw in this one is uh we simply went up onto this one and try to login in and we saw a whole lot of Errors uh and I tried to inspect this into the console and it gave me so many of the error I looked into this one and the most first one the error that I found is that it was not able to load the environment variable so when I was teaching you in the react I actually accidentally used all the react variable not the V variable but we actually use the vit so uh here's The Simple Solution all you have to do is you have to say import meta env. Vore and then whatever you want to say and that's how it works so I looked up into this one uh found a solution for this one and went into my environment variable first and changed everything to Vore V underscore just like this so I'll just copy all of this and I'll also paste this into the sample so that in case you are going through with the re V or react whatever you are going for you can just go with that I'll obviously remove these ones because I don't want to push it and of course by the time you'll be watching the video I would have removed uh these ones as well so I'll just go ahead and uh paste it up and let's go ahead and comment this in fact uh in the sample we can keep it no problem at all uh all right so I'll just keep it in the sample once I did it in the sample The Next Step was to change that into the conf.js as well so this also got changed to v. app right the errors were pretty clear once you check the console log it simply said hey I don't know what this uh process. env. V so I had to change this one import. met. EnV so pretty first error uh that we caught up uh after managing our app doj app.jsx so this was the first problem that I saw then after that I realized that in a lot of places uh like I have couple of issues like into this input file I somehow missed these parenthesis so they were little bit uh difficult to find it first it just gave me an error on the signup screen that ID was missing and I'm pretty sure that I gave you the ID I checked up first of all about my ar.js saying that hey I'm providing you the ID it's id. Unique uh turns out uh in the signup component itself I was missing in the input component I was missing the ID just like this I tried it again gave me hey ID is missing come on I'm giving you the ID why are you doing this to me uh then turns out I realized that in this one I actually forgot to import the ID from the app right yeah uh can't believe I did that but yeah these are the errors these are the bugs once I have this ID in here then obviously id. unique works and it started to do the sign up for me uh so that's one thing and in the login also if we are using in the login we don't use ID so there's nothing much more onto this part so this is a couple of things not only that a couple of more things needed to be fixed for example in the footer I actually forgot to import the logo that was giving me a bug so I did that after that in the header. jsx I actually uh imported these logo in a different format so I use this one which is a wrong if you're doing an uh export default uh this is not how we do it but somehow accidentally I did it so I looked a little bit on what all the things are missing it was pretty straightfor for errors so I started with that uh once this is all done uh I went up back into this that hey what all these things couple of other components also were having some of the issues that hey this was not imported properly or something I work with that another error that I saw uh was here that it says add post but in the URL Slug It says add posts so that is wrong obviously we didn't take took care of this URL so I went up and changed this to post uh that is what we are handling in the uh in the app dot not in the app main. jsx so this is the one that we are handling uh which is edit post and slug not posts there is no s so a couple of things just look out for the flow of your application that always works with how things are going on and how things are doing for you so don't panic read the errors one by one step by step try to figure it out because what I've noticed is that errors sometimes are not in the place where you're looking up for or are expecting them uh for example in my case uh I was expecting the ID might be something wrong in the ar.js and obviously it was that ID was missing here but this was also uh pretty much unseen or I didn't expected that I might have missed this parenthesis here so in the ID so input file I didn't expected that it would be there uh but it was there so this is what we did and apart from this uh I've also added a couple of more CSS as well uh it's not really required but I have added these CSS up here these are browser CSS so when the browser CSS if if you see something like output or summary or details if frames and all of that uh by the way they are available on online on the website of framer uh the parser of the uh the package that we used which one I'll show you that uh HTML react parser so the Cs is available on lot of resources there uh so this is couple of ways of how I fixed the application rest of the things worked nicely uh but expecting their application will work immediately is is a bad idea one more thing which I noticed that gave me an error is this one so when I tried to upload an image at the very first it gave me an error that hey uh you don't have permission to upload uh turns out I have the permission for the guest that we did together but we also need G need to give all the users the permission to do crud in the images so you can just click on ADD roles and select individual users if you want to give some users only the permission but I wanted to give it to all users so I just selected that and it just gave the permission to all of them so this was one of the issues so make sure you are aware of that that and now in the Au you can see uh the user is being registered you can work more on it if you want to build this application a little bit more complex which I highly highly recommend uh we tried with that uh then in the database we can just check out this is one post I tried to have that uh this is the post so if I if I click on this YouTube and the blog uh this is my first post uh this is my first post title uh content I told you that the content is being stored in the HTML so all your CSS colors everything is stored like this that's why used we used the react parser a featured image only the ID is getting us status is active and the user ID that we are storing so pretty Basics how things are being done make sure you are aware of it make sure you try more of it in the settings I'll also mention that hey I actually said that the all the users can actually do the crud operation with this document so make sure this permission is also enabled so in this entire application we have seen that how the authentication Works how the database Works how the store storage works I'll try my best to actually have more on functions as well uh but in case you didn't notice that uh on the app right channel one of my friend Dennis uh he's creating a couple of videos on the official app right Channel about using functions in the app right that are pretty cool so go ahead and check them out in case you have some time but this was all the application that I had by the way I will push the entire uh source code of this application so that you can match it you can try it on my GitHub as well feel free to check out my GitHub the entire code for the entire react course plus this Mega project is available for all of you if you still find any issue uh reach me out on my Discord or Twitter or Instagram wherever you feel active I'm pretty active on all social media reach me out I'll try my best to create more videos if you find something that this was not clear just reach me out I will help you to understand it much much uh easier way I hope this video has this entire project has given you some insight about how complex a real world application can be a couple of things which are still missing in this application which I think you can work on with this is uh if I go ahead and say uh all post add post are working fine in case when I click on ADD post uh there is a little bit CSS issue so this featured image active was supposed to go here I'll try to fix this up uh that's one thing and apart from that if I go ahead and see all post uh in this all post uh these edit and delete buttons supposed to go over the image uh probably I missed something rest of them are pretty easy and okay so we can see that it's it's working nice let's try to log it out once I click on the log out button it redirects me onto the login page but it's up to you we don't have still any logo I would highly recommend you to try this out the reason that I am actually leaving this application in a position where you can actually work a little bit more because no matter how much you see me coding or you follow along with me uh there will be bugs there will be error and if you add add couple of more features from your side that actually makes you a good programmer so try to add little bit more or try to convert this application into a social media because it's also same images are there posts are there so try to do build something like that and this will give you a lot of confidence if you face any trouble reach me out on Twitter or on Discord I would be super happy to help you out uh watch out for more of my videos and courses I'm constantly making more courses more videos on cutting edge bleeding edge Tech as well as uh Rock Solid text as well like pythons and JavaScript as well and if you have some suggestions do reach me out I would love to have your feedback uh that's it for this video I hope you have enjoyed it was a great fantastic Journey with all of you I hope you will share the entire Series so that I get more eyes it would be really really great if you can share on LinkedIn uh but if you don't want to that's okay that's fine too anyways that's it for this video let's catch up in the next one

Channel: Hitesh Choudhary

Views: 32,924

Keywords: Programming, javascript, react, react for beginners, redux tookit, appwrite, full stack, appwrite auth, appwrite storage, appwrite database

Id: zWF7O7aHQW4

Length: 306min 30sec (18390 seconds)

Published: Sun Dec 10 2023