Get started with Appwrite + React - Fullstack App

hey what's up everybody welcome to this video where in this one I'm going to be showing you how to build out a full stack application using aight and react so this video is meant to be like a aight react quick start guide where we're going to see how to build out a backend with aight uh front end with react and we're going to see how these two work together and make that connection so we'll do this by building out a Notes application or more so of a to-do app where we'll learn how to perform basic crud operations with our app right database and see how we can interact with that and then it we'll even go as as far as adding in user authentication to see how we can create protected routes and only allow logged in users to perform these operations we're going to be building this project out completely from scratch but before we get started I want to talk about some of the assumptions that I'm going to make and some of the prerequisites that you should have so first of all I'm going to assume you have a little bit of react knowledge if you don't have any react knowledge maybe you're coming from a different front end framework you should still be able to follow along just know that I'm not going to explain every single concept along the way but you should still be able to code and really make sense of what's Happening a lot of it is going to be self-explanatory now if you're completely new to aight this video is actually going to be a good place to start for you because while we're not going over the full what is app right overview process you're going to be able to see all of this in action as we set up a fresh project and actually start building with aight so you really just get to see it in action right away we are going to be using vit to set up our react application so make sure you have no JS installed and also make sure you check out the source code linked up in the video description I would highly recommend you download that and check it out before you get started so that way you have a reference point and anywhere you get stuck in the application you can always just reference the source code see what we're trying to build and maybe just copy some code if you need it and also there are going to be some Assets in there like our CSS file that we're actually going to copy and paste from when we're building out our application so a few things we need from there so make sure you also check that out again it's linked up in the video description okay so to get started first thing we're going to do is set up our react application we're going to clean up some of that boiler plate code add some basic page routing and then we're going to go into our app right backend set things up there and then start connecting that to our react application and start making those requests so we have a little bit of cleanup to do here so I'm going to use vit to create this so we're going to call npm create vit and I'm going to call my application to do finish up these basic prompts here we'll select react and then JavaScript for that now from here I'm just going to go ahead and go into VSS code we'll open up the application that we just created which is on my desktop and I'm just going to complete the process by running all those installs so we're just going to run npm install from VSS code now and let's just go into my source folder and inside of app.css I'm just going to go ahead and remove all of that and I'm also going to remove all of my CSS inside of index.css so later on we're going to add our own CSS so I want to make sure that's just cleaned up and let's go ahead and just get rid of everything inside of app.jsx so everything from that closing P tag to that opening div right here and we're just going to set up our basic page routing now so let's get rid of our state here let's get rid of all of these Imports and from here I'm just going to say home open up our terminal and run npm run Dev okay so that's opened up on Port 5173 and here's my application that's exactly what we need so from this point on what I'm going to do is just add some basic page routing so I just want to create our our homepage where we're going to call that notes and then we want to create a login and register page so we're going to have two pages inside of our application so what I need to do is go ahead and turn off my server and clear this out and run npm install react router Dom and once that's installed I can make some imports here so we'll just import browser router from react router Dom then we also want to import routes and Route like that and I'm also going to need to make some pages so before we actually start setting this up we're going to create a new folder here and this is going to be called pages and then we're going to create a page called notes. jsx and in here I'm just going to go ahead and create the component and if you haven't seen this before this is just an extension that I can use where I can type in this short code and it's going to generate that component for me so if you go into vs code into extensions start typing in es7 you're going to get this extension right here so it's es7 react Redux graph Q code Snippets essentially there's a bunch of little shortcuts that you can use where we're able to just generate components make Imports and so on so that's what I'm going to be using throughout this tutorial so inside of pages we're also going to want to create a login register page so login register. jsx and we're going to do the same thing react Arrow function component export and that's going to create that for me so we have our two pages and inside of app.jsx I can just go ahead and actually create that routing system here so what I'm going to do is replace these fragments with browser router and I'm going to create my routes in here so first we're going to wrap everything inside of the routes component then we're going to create a route component and in here this is where we're going to pass in the actual pages that we just created so I need to import my note page and my login register page so the first one here is going to be notes close that off here and we need to set the path that's going to be just the root directory right there so we're just going to put a forward slash and then for the second route this is going to be the login register page so we'll throw that component in close that off and then for the actual path we're just going to send a user to log in like that and let me just minimize this let's see that all of this is working and then we can go into setting up our backend so we're going to run npm runev and we'll give this a test Let me refresh this so now we see notes instead of home and if I go to login we should see that other component so page routing is ready to go now for the app right set of things let's go ahead and get started by going to app.io if you don't have an account go ahead and create an account it's free to do so so go ahead and create an account and we're going to start everything off from our console so in my console here once this gets loaded we're just going to go ahead and create a new project so I'm going to call this too app or just call it Todo like that and this is going to generate a project ID for me so it's starting to set up my credentials and we'll just continue from here so we'll choose our region hit create so once your Project's created this is going to be the interface to your entire backend so from your app right console we have our off tab to manage our users we can manage our database documents and collections from here we can write custom functions handle file storage so really your entire backend all in one place managed by app right now what we want to do here is go ahead and connect to our SDK here so we want to tell aight which SDK we're going to use and actually connect it to our front end now from here inside of the overview tab this is where we select the SDK that we want to use so we're going to select web here and we first need to register a host name so where are we going to connect to our back end from so we're going to connect to this from Local Host so we want to make sure we specify this because if we try to use our SDK without specifying our host name we're going to get a Coors air and aight essentially is going to block this request this is for security reasons so we want to set this and make sure that wherever reporting in from we have that so I'm just going to go ahead and call this my app doesn't really matter at this point and we're going to click next and we're just going to follow the setup instructions here so I'm going to install app right so we're going to copy this to clipboard and we're going to run this installation so I'll turn off my server and clear this so we have space and run npm install app right now the next step here is to go ahead and set up our client instance right here so we're going to copy that and I'm going to put all of this inside of the source folder and I'm going to create a new file inside of the aight folder SLC config so we're going to create a new file called aight config.js here and this is where all aight configuration is going to be so we'll just go ahead and paste that in and from this point on let's just go ahead and hit next we're going to grab this right here so we're going to copy that to clipboard and we'll paste this in right here so this is our client instance and this is what we need to connect to our backend so here we specify our project ID and the endpoint that we're going to connect to we did that with the client class right here and the project ID if we ever happen to lose this we can actually get this from our consoles let's just go ahead and hit next continue this process if we ever need to find this this is going to be in the overview tab right here this is the project ID if we ever need it again so we still have some more basic configuration that we need to handle between our back end and our front end but before we do that I want to make sure that we have a database set up because that's going to be the first request that we actually make is to get some data out of this aight database so we'll go to the databases tab here and I'm going to create a new database and I'm going to call this Dev for development and for the database ID I'm going to leave that empty so aight will generate one for me and once we have a database we're going to create a collection or a table so aight is technically a relational database so we're just going to call this tasks for our collection and it's also going to create a collection ID so we're going to create that and once we have a collection the next thing we need to do is go ahead and set up our database schema here so we're going to add in some attributes here and the first attribute I'm going to add is going to be a string value so that's going to be the attribute type and this will be the body of the actual note or task that we create and I'm going to set a max length of 200 characters we'll hit create so we have our body attribute and I'm going to create one more and this is going to be a bullan type or a type of bullan and we're going to set this to completed so a note or a task will either be completed or not it'll be true or false so we're going to set the default value to false because when we first create it a task is not completed and we're going to add in some data here so we have our two attributes and we're going to go to documents now and let's go ahead and create these so for this first one I'm just going to say first note and the default value is going to be false here so we'll set that and we're just going to add another one here and this is going to be wash car and we're going to say this task was completed just so when we render these out these look different okay so we have two documents here inside of this collection and this next step right here is very important so inside of our collection here we're going to go into the settings tab and we need to set the permissions so the permissions right here is basically saying who can make requests to this specific collection and what kind of permissions do they have so under the permissions tab right here we're going to say that any user regardless of whether they're authenticated or not can create read update and delete delete to this specific collection now in the future we're going to change this so only authenticated users can create documents then we're going to set document level permission so only a user can see their own documents and actually modify them but for now we're just leaving it like this and you have to remember to make sure you complete this step make sure you hit update and make sure that that was actually updated because a lot of people forget this step right here and then run into an annoying uh error where it basically says a user is not allowed to make this request so very critical part of this enti ire process so now that we've completed our database set up we can complete the configuration part from the react front end so inside of my config file here what I'm going to do is bring in the databases class and this allows us to connect to our database and we're just going to go ahead and set this up right here inside of a variable called databases we're going to call new and then use that class right here and then pass in the client instance right there now I'm also just going to go ahead and Export this so we can actually use client and databases anywhere we need and before we make our request I'm going to create an EnV file to make sure we actually hide all of this information that we need so our project ID our endpoint and then later on we're going to need our database ID and collection ID we want to make sure that's put into its own file and then not pushed up into our GitHub repo whenever we want to do that in the future so I'm going to call this file EnV and inside of V we need to make sure that all these variables start with V and the first one's going to be my endpoint here and we're going to set that to this endpoint so I'm going to grab this right here we'll paste it in and then I want my project ID so V projector ID and we can get that from here set that up here and I also want my database ID so database underscore ID and the database ID I can just go back into my databases right here databases tab we'll grab this one throw that in and then we also want our collection ID so V Collection idore tasks so we can have multiple collections so I want to make sure to specify specifically what collection I need and this is the tasks collection and I'm going to throw that in right here now to actually bring this in and use it we're going to save this we'll go into config.js so I can just update these to import. meta do EnV Dot and then the actual variable name so vitore endpoint and then we'll just copy this and we'll throw in the project ID let's throw that in right here and this is going to be projector ID okay so that completes it for our basic configuration now what we're going to do is actually get to the fun part and make a request to our backend and retrieve those notes that we have here so we want to render those out inside of this notes page here so inside of this component right now we don't have anything so what I'm going to do is go ahead and just make some basic Imports we're going to bring in use effect to initialize everything and then use state to actually set our note state in here and we're going to go ahead and create a function called init and this function is going to initialize everything that happens in this component so this is going to be an async function we're going to use an arrow function in here and to actually initialize this we're going to go ahead and import databases so not the databases class but the databases instance that we just set up from our aight config folder and we're going to make this request once a nit is called so we're just going to go ahead and set response to await and this is going to be equal to databases. list documents so that's the method that we use to actually make a request to our backend and this method right here at a minimum requires two parameters and that's going to be the database ID and the collection ID so we need to know what database are we making this request to and what collection do we want to make this request to as well so let's go ahead and actually get those so those are set in inside of ourv file right here so what I'm going to do is just go ahead and copy The Collection ID or the variable name to that and we're just going to import first our database ID so import meta Dov and then this is going to be database uncore ID and we also need to pass in the collection ID so these two parameters are crucial for this and this is going to be meta Dov Dot and then I'm going to paste that in so our collection tasks right here here and I just noticed we keep calling this notes and tasks we keep messing this up so or I keep messing it up so what I'm going to do here is just go ahead and change this to notes right here and I'm going to change this inside of the EnV file as well and I'm just going to rename the entire collection name just because it's going to be easier to rename the collection instead of having to change up different things inside of our application so let's go into settings for this collection and I'm going to call this notes just for some consistency Okay so little side tangent there but I wanted to get that done and we just made this request so in it right here is not triggered we just made the function so before we actually call it what I want to do is go ahead and create some State and put some state in this component and then update the state so we have our notes here and then our Setter method to update the notes which by default are going to be an empty array so that's the default state right here once we call init we're going to make this request in this response right now we get back two values so we're going to get back the total amount of notes returned and then we're also going to get an array of all the documents inside of that collection so we want the response documents array right there so we're going to set notes to be that new array that we just got back now we want to go ahead and initialize this so we actually want to call it so we're going to call use effect we only want to trigger this on the first render so for that I'm going to pass in an empty dependency array right here and then I'm going to call init to make sure this is called right away okay so I'm going to save this and what I'm going to do here is also create a wrapper around all of my notes and then we can iterate through this array and actually render the notes out so let's go ahead and call notes. map and for each note here we're going to call this function and we actually want to render this out here so we're going to create a div for each note like a container and by default in react anytime We're looping through an array like this we need to make sure we have a key and this needs to be unique so we're going to set this to the note ID like that and then we'll pass in the note body so note. body and I also realize I need to fix this import so this needs to start with V and then underscore database uncore ID okay so let's save this and give this a test and here we see our first notes so if you completed this congratulations you've successfully connected an app right back end with a react front end and we see it all working together now so if you go to your app right back end whatever notes you have back here you should see rendered out here so the next thing we're going to do is go ahead and actually optimize these requests a little bit just for more cleaner code so right now we're about to add in a create form so we can add notes we're going to handle some update and delete functionality so we can modify these notes mark them as complete but we are using the aight core SDK just as it is right now and what I want to do is create some wrappers around these methods just to make this code look a little bit cleaner so right now we have to call the method then we pass in the database ID and collection ID every single time we make this request and I want to do something that looks a little bit like this so I want to access the database then I want to access the collection that I'm requesting by its name and then be able to just call a method like this so I just want to be able to list out notes maybe create notes like that and something like this would be a lot cleaner than what I have here now I do have a full video on this topic and I'm going to make sure it's linked up and also pops up on the screen that actually explains all of this but instead of going into that what I'm going to do is actually go into the source code that we have and just copy that code directly and then just explain a little bit so the code that we need is going to be in this Source folder right here and within the source folder we're going into the app right folder and we're going into databases. JS and I'm just going to copy all of this right here so let's go ahead and hit copy the clipboard right there and I'm going to bring this into my code here so within the app right folder I'm going to create that same file name so databases. JS and we're going to paste this in and I'm just going to summarize this real quick but but again I highly recommend you watch that video so let me try to explain here so originally we're calling the databases instance directly within one of our Pages or a component and what we want to do is we want to abstract this away and call this instance right here from the databases. JS file so what we're doing here is we're importing databases from the config file into databases. JS and then we're going to call we're going to create a class here that we're going to reference the database by now it's an empty object so what we're going to do here is ALS Al set our collection information and you notice that right here this is an object so in the future we can have multiple collections here and we're just attaching all the information to each collection so we want to specify the database ID that's related to that collection then the actual collection ID and then in the future let's say we had a collection like products here we would update this to the products database ID then the products here and we have the information related to each collection now once we specify that information what we're going to do is we're going to iterate through the collections array and we're going to attach all this collection information to this DB instance right here or this object and how we start this is on each iteration we start by looping through the collection and then we go into the DB object and then we set a key here so that's the first part of this process the key is going to be the name right here which is going to be notes and that's that human readable name so we set db. notes so at this point you can call db. notes that's the first part then we go ahead and attach this object to notes here so we're doing this essentially right here and we're adding these methods right here so once we add it we have the create method update delete list and get so these are like those built-in app right methods and all we're doing is simplifying this process by wrapping them and then we call the original method right here so this is where we call databases. create document and we simply call this when we call create but instead of having to pass in this ID right here for the database then for the notes we simply set that on initiation right here and then we pass in any other values like the payload the permission and a custom ID if we want to pass that in so if we want to look at the simpler example where we call list right here so I'm going to create some space just so we can see it we call list and this just returns a function that really just Returns the list documents method with these values passed in so that's the core idea right here so once we save this this is already exported so we can just call DB from now on so I'll go into the notes page here and I'm going to remove databases so we don't need that import anymore and for now I'm just going to comment this out and we're going to import DB from aight SL databases and now we can just call const response so we're going to do the same thing here this is going to be a wait and we can just call db. notes. list so we're just calling this method right here and from now on we're going to use these methods right here from this page or from this file now when we call this if I save this it's going to do the same thing that we had before so if I refresh it we still see all of our notes once that loads in and there we go so that's all we do we can just clean this up and that's a lot cleaner now I don't have to remember the collection ID or the database ID I can just call the notes by this readable name which we set right here so what we're going to do now is create a form to actually add items to our database from the front end here so we're going to go ahead and create a new component that's going to be brought into this notes page right here so the form component is going to have its own logic and then we're going to import it just to make sure everything's cleaner so what I'm going to do here is create a new folder called components and within components we're going to add a form so note form. jsx and this is going to handle all that logic so we're going to go ahead and create the actual component itself and let's build this out before we actually import it so so we're going to create the form here and in the form we want to make sure we have an input and the type is going to be of text we want to give it a name this is going to be equal to body so the input name is body so we can actually reference that once we need to get it and then we also want a placeholder and I'm going to make sure the form is actually closed off or the input tag and for this placeholder because I have an emoji in there I'm just going to go to the source code here and we're going to go ahead and just copy and paste that here so we're going into components note form and we can just copy that right there I know not everyone knows how to use these emojis so if we just copy and paste that that's going to work just fine so now it says what's on the agenda we're going to make sure this isn't double quotes because we have a single quote right here so we need to make sure we can actually have that set and that is our note form so let's bring that in to our notes page before we actually use it and just to make sure we can see it so import Note Form we'll bring that just above our notes div right here so Note Form close that off and we're also going to pass in this set notes Setter method right here because once we add a note we actually want to update this state right here so we're going to set that and pass in the prop so we pass in set notes and then from Note Form we're going to go ahead and just get set notes okay let's just see if we have everything like we need here and we see our form so that looks good we can continue on adding that logic So within our Note Form component here I'm going to create a function called handle ad and this function is going to be responsible for everything that happens whenever that form is actually submitted here so I'm going to go ahead and add in the event listener so on submit here we're just going to call handle ad now within handle ad first thing I want to do is prevent the default Behavior so e. prevent default because we want to take care of everything that happens we don't want the form just to do its normal thing and we want to go ahead and get the value within the body right here so the body input field so we're going to call this note body and this is going to be e. target. body. Val so we're getting the value of this input field and from here we just want to write a try catch here so we're going to try to send a request to the back end if it doesn't work we're going to catch that and just console out the air here so we're going to start with that and we'll do console. a and that'll just be the air message now within our TR statement is where we're going to make that request so we need to import DB from App right/ databases and we're going to use that create method but before we do that we need to make sure this is an async function and let's start the process here so we're going to go ahead and call const response is going to be equal to a wait then we'll call notes dot or db. notes. create and we need to pass along some data so we're going to take this note body right here and I'm going to put this into a variable called payload so cons payload and this is going to be equal to body and we're sending the note body so we're passing that along we're throwing that into the create method So within the create method we're going to go ahead and send that when we call the create document method right here and we can proceed from there so the next thing to do would be to update the state so we're going to call set notes right here and we're going to take that previous state and then update it with a new array so we're going to go ahead and use the spread operator pass in the response here and we're just going to throw along the Old State here so the new object gets added into that state so let's just see how this works let's make sure it's actually being added so we'll refresh everything let's go ahead and just say new note hit enter and we see our new note so there's a few things that I want to fix here so first of all right now you notice the form does not refresh so I can just keep hitting new note or hit enter and it just keeps adding it so I want to reset that form and then I can also submit this form if I have no values here so I want to make sure that that gets prevented and then also whenever I refresh this you notice that the original notes go to the top and I want the new notes to be at the very top and then the older notes to be at the bottom so we're going to take care of a little bit of housekeeping before we actually start going through the update and delete functionality So within here first of all I want to reset the form so we can just reset that after that's updated so we can call e. target. reset and that's going to reset that form so that should take care of that part and then right here I want to make sure that if our note body is an empty string so if note body is equal to an empty string we don't want to submit this we just want to go ahead and return and that's going to stop the rest of this function from running so it's not going to allow this to be submitted so if I refresh that and hit enter nothing's going to happen well I guess I did have a value in here but let's just say another note submit that and then that form is refreshed and I can't submit it if I'm hitting enter from here so now with a sorting issue so first note should be down here we can fix this inside of the notes page here so inside of notes Here wherever we call db. notes. list we're just going to import the query class and set how we want to order this so we're going to call query and this going to be passed in right here as an array here so we'll just create some indentation and we're going to call query order descending and we're just going to throw in the value or the attribute that we're going to sort by and this is going to be created at like that okay so if I save this let's check this out so we have a new note if I say test here hit enter now if I refresh this test is going to be at the top exactly the way that we need it so you can choose how you sort that and how we can arrange everything so next we're going to work on the update and delete functionality so what we want to do is allow a user to actually click on a note when they click on it it's going to update the completed status to either true or false and the completed note will be rendered out with a strike through for that text and if it's not completed it's just going to be a standard note now we'll put all of this into its own component because now that we have delete and update functionality or once we do add it there's going to be a few functions in that component that need to actually handle this the component will also have its own state so we just want to make sure to separate that logic and not put everything into the notes page here so let's go ahead and add in a new component here and this is just going to be called note. jsx and we'll create the component itself and in here we're going to pass in the Note data here so we're going to pass in this parameter called Note data and we'll just render out the note. body like that so we'll pass that through and then inside of the notes page we're going to pass in the component and then render this out and we'll add the logic in a second once this is set up so inside of this Loop right here we'll just pass in the component we'll also pass in the key and that's going to be the note. ID and we're going to pass in the body as a par parameter here so let's just go ahead and pass in we not the body but the data this will be called Note data and that'll be the actual note so now we can get rid of this and if I save this we should see the same output right here so inside of this note component the first thing I want to do is go ahead and give it its own State here and the reason why we want to do this is anytime we click on a component to update it we want the component updated without having to rerender the entire array so the the component should be able to manage its own completed or not compl completed state so to do this what we'll do here is just go ahead and set the note state so we're going to do note and set note and the default state will be given from the parent so Note data will be the initial State and then we actually want to go ahead and just pass this down right here and then the onclick events can be added from here so what I'll do here is go ahead and create a span tag and we're going to create a condition and say if a note is completed then this note right here should be rendered out with a strike through so we're going to say if the notes completed use the strike tag right there and we'll pass in the note. body and I'm going to close this out right here so we have more space and in the else condition after the strike we're just going to say uh pass it an empty fragment and then we'll say note. body like that so when I save this it should fix indentation and there we go so if the note's completed strike it out if not make sure it's a normal note now in here I don't have any notes that have the completed value to be true so I'm just going to go back into my database and we'll say uh another note is completed so we'll go to data let's change this value and then we're going to update this from the front on in a second so we'll set this to true and let's see if this actually gets rendered out the right way and that's what we wanted a note with a strike through so perfect now let's actually add in the update functionality so let's go ahead and create a function called handle update and this will be an Asing function here and in here we're going to update the actual note in the database and then update the state of this note so we're going to pass this through right here on click we want to update the note and in here we're first going to go ahead and get the status of completed so completed is going to be equal to the note but the opposite of the current status of the completed state so if completed is true then completed will be false and then if it's false it'll be the opposite so we're just alternating the state and we're deriving that value from note. completed and then from here we can just go ahead and update the actual database so import DB and we're going to call db. notes. update and the update function takes in the ID of the current note so we're going to pass in note. ID and then the payload here which we can just pass in as completed so we're updating the completed attribute now from here we also just want to go ahead and actually update our state so we're going to say set note here and we're going to take the old State and then update it with a new and for this we're going to pass in an object and we're just going to update the status completed with the new status of completed so if I go ahead and save that on click we're going to update the database update the state and this should actually toggle that striketh through functionality so if I click on it now we see the notes actually changing and if I go ahead and refresh this this is updating it in the actual database so we're just going to go ahead and add in the delete functionality and then we'll add in some styling so we actually have like a good hover effect just to make sure this all looks good like the app that you saw in the demo so we'll build that in in a second after we add in the delete functionality so for the delete button what we're going to do is go ahead and use an icon and this is going to be in the source code that I provided linked up in the video description and we're just going to copy this directly from here so go into the source folder and go into assets right here and we're going to delete icon and we're just going to copy this entire component so it's just an SVG file that I created into a react component and we're going to bring that in here inside of assets and we're going to bring in delete icon. jsx and let's just paste this in here and then import it and use this within our component so in the note component we're going to import delete icon and that's going to be from assets and we're going to go into the delete icon file and here is our icon so once we have that we're going to create some space here and I'm going to create a div around it and then we're going to throw the icon into the div so delete icon and throw that in like that save it and let's just see that we actually have it and here we go that's our icon so for the event handler so for the actual event listener for the delete click we're just going to go ahead and build that in so we're going to add that just below handle update and I'm going to go ahead and call this handle delete and we're also going to make sure that this is an async function and we're going to use an arrow function so we'll pass that in in front of it and we need to make sure to set that and we're going to add this in right here on this div right here so on click we want to make sure we actually called a function and we're just going to go ahead and update our database so we're going to call db. notes. delete and all we need to do is pass in the note. ID right here so we're going to throw in the note ID we're going to delete it and then once it actually gets deleted we want to make sure to update our state so we're going to call set notes and we want to make sure to update the entire notes array so we're going to pass in set notes right here set notes and we're just going to pass this in from the parent parent component so we're going to pass it as a prop so we can actually update the parent State and we'll throw that in okay so once a note is actually deleted we just want to go ahead and get the current note and actually remove it so we're going to update the state by calling set notes and then getting the previous state and then updating where we're currently at so with a new array as we filter this out so we're going to take that previous state called do filter and using the item id we're just going to go ahead and iterate through this and make sure that we actually remove the note here so the front end is updated and the note that we just deleted is no longer in there okay so once this is saved I should be able to test this out let's go to our front end and let's just go ahead and remove these notes here I'm clicking on them they're being removed from the front end but if I refresh it now they're officially removed from the back end as well so that's all in sync now the next thing we're going to do is just go ahead and actually style this application and make sure it looks good so for all the Styles in this application what we're going to do is just go ahead and ref reference to source code in that GitHub repo and we're going to copy all the CSS over and then update all our pages and components with all the necessary IDs and class names so we don't really need to know the contents of that actual CSS file we're just going to paste it in and then our styling will get updated but I will do all of this with you so we can actually see exactly what we're pasting over so the first thing we're going to do is go into the source folder and we're going to grab the index.css file and I'm going to copy all this CSS and then paste this in into my index.css file so make sure it's index.css and not app.css so we have that and our application is going to get updated a little bit and the next thing I'll do is just go into the app.jsx file here and we're just going to take the code from here and again the final source code does have more code than what we're currently going to have in here because it's the final project but at this point we're just going to go ahead and create these two divs and create one with the ID of app and one with the ID of container so let's go ahead and just recreate that and that's going to be an app.jsx so we'll create both divs here and create the second one take this browser router and we're just going to throw this into the in div and this ID is going to need the ID of app and then this one is going to be container and let's just see this as we update so that should Center my items a little bit so they're going to be more towards the center now because there is a Max width on them and let's go ahead and go into the actual note form and let's update this part now so inside of our code here we're going to go back into our components actually what I'm going to do is go into notes and we're just going to update the notes page so let's see what we need here so in here we have a container above our note so we're just going to copy this right here and then our note here looks the same as what we have here so this is all we have in our current code right here so so we're just copying this div and then this H1 tag and there is an icon here too or an emoji so we're just going to use that too so that's going to make it a little bit easier so inside of notes here we're going to turn this into an empty fragment and then put this above the Note Form okay so that's all we needed from the notes page I believe and that's going to update that right there so we see that emoji and then next we're going into that note form so Note Form we're going to go into the HTML part here and in our source code let's go ahead and grab components and note form so this part's going to be a little bit redundant but at least we know exactly how to follow along so the only thing we need to do here is just provide the ID of to-do form right here so if these values ever change makees make sure you're referencing the source code and not just watching the video because if I happen to change this to like notes form instead of to-do form then you're going to have an issue if you're following along directly without actually referencing it so in here we're going to throw that right here and we'll see the output that makes our form look a little bit better and now we want to update the actual notes here so we'll go back here we'll go into components note and within the note we need to create the class name of wrapper so we'll throw that in and that's going to be in the note component and around the main div so we'll paste that in and then in here we just need the class name of note body we'll copy that and that's in the span tag here so we'll paste that in right here and that should do it for our styling so now we have the hover effect now as we add new notes we'll just do one hit enter two and those are updated we can delete it so we see the hover effect over both we can update and actually strike through delete them and everything's looking good okay okay so that's it for this video in the next one we're going to handle user registration authentication and protected routes so make sure you're subscribed to the apparate YouTube channel so you don't miss it and I'll see you all in the next video [Music]

Channel: Appwrite

Views: 4,129

Keywords:

Id: _JDeJgsU-bI

Length: 41min 14sec (2474 seconds)

Published: Wed May 15 2024