**Building a To-Do List App with Solidity and Smart Contracts**

Our component task is gonna need access to it okay, so it's like a little bit of prop drilling but not too crazy okay. So let's go ahead and delete task okay, and then let's go to our task components and we're gonna go ahead and say on click right on click we are going to delete task and give it the item dot id that's it okay and that should really delete it so let's go ahead and drive a ferrari let's go ahead and delete this task okay, let's go ahead and refresh save a few times and delete okay nothing is happening right now so what's the problem delete task okay we're destructuring delete task let's go into index we're passing delete task is being passed so all of that is good actually I don't think we need to add this here we need to actually give this on click all right so we're going to need to give this on click to delete tasks so we're going to go ahead and say we're going to pass this function delete task and we're going to pass that down so I don't think we need to actually add that here okay.

**Understanding the Component Task**

So let's go to our delete our task component now. Let's go to our task component inside of our task component let's go ahead and delete tasks let's destructure delete task okay, and then here we're going to add an on click so on the garbage can is where the on click takes place and we're going to go ahead and say delete task okay, on click that's what should happen now. Let's give it a try I think this is to me is looking right now let's go ahead, click drive a ferrari, try to delete it so refresh we get an error to show us what there is to oh yeah we need to give it the specific item id so let's go ahead and do actually what we could do is we could do it this the other way.

**Modifying the Component Task**

Let's go back to our to-do list and here we're actually going to give it an on click and the on click here is going to be delete task and that specific item dot id and it was going to task let's go ahead and destructure on click, and then we're going to give it the on click okay so that way we have access to item id and we don't have to like destructure and pass down the item id okay cool. So let's go and try it now remove drive a ferrari and there we go now it's popping up beautiful let's go ahead and hit confirm on that so that transaction it says successfully deleted okay, now if I go ahead and refresh my app okay let's see sometimes it takes a second so let's give it some time and there you go okay so yeah while it says successfully deleted and you get the transaction id on the blockchain it still needs to verify it that takes some time so once it's fully verified it can now then it deletes it.

**Verifying the Transaction**

So now when I refresh and I go here, you see the ferrari one is actually gone. So now if I create a new task let's go ahead and hit the plus sign so when I hit confirm this will add the task okay boom where we got a new task and now I can actually hit let's go ahead and refresh and where's my new task go okay now it's actually there. So even creating tasks takes a second okay, so that's why you have to wait a little bit. Now I can actually remove it okay so successfully removed I have the hash the removal but it's going to still verifying on the back end right the blockchain side.

**Smart Contracts and Smart Interfaces**

So now the new task has been deleted and it is not there guys this is amazing if you've gone this so far huge props to you. Alright, so I really hope you guys enjoyed building that to-do list app and you got to learn a ton of solidity con concepts how smart contracts work how you actually interface your front end with the blockchain component it's mind-blowing stuff and we had authentication in there so if I actually log out and I log in as a different user you won't see these tasks there and you won't be able to delete these tasks and you won't be able to interface with them so we have all of that and then some.

**A Huge Shout Out**

And it was so quick and so nice and we didn't even use a database which is mind-blowing and cool. I hope you enjoyed it huge credit and shout out to Code With Kavit, you should check out also his video huge shout out to him so for a lot of the ideas in this video and some of the code for the contract and a lot of the inspiration okay so that was really awesome.

**Thank You**

And again guys as always I love your beautiful face thank you so much for watching and I'll see you in the next video.

"WEBVTTKind: captionsLanguage: endo you want to master solidity do you want to finally understand it and wrap your brain around it well guess what we are going to build a to-do list app together in my opinion this is one of the best ways to learn how solidity works how smart contracts work is this app the scope is small it's a simple app yet it's very powerful and effective and it'll get you to understand how a lot of functionality and solidity works how can we use solidity along with truffle to make your smart contracts how do we add a task and delete a task and show all of the tasks how do we add a task so that it actually adds it on to the blockchain and when you get all the tasks your front end will go to your back end or your blockchain and get all the tasks from there this app will also have full on authentication built into it which essentially means that you'll be able to use metamask or any type of ethereum wallet and log in and log out and this app will only show you your tasks so any other users can't see your tasks and cannot delete your tasks so i think it's a very powerful app i hope that you're excited to use it and with that said let's um smash that like button so this video goes out to as many people as possible and in just a second we're gonna go ahead and demo this app also just real quick want to give a huge shout out to code with kavit who made the video to do app with react and solidity so huge shout out to that a lot of the inspiration comes from that i referenced the code from there okay but i just added in next.js a lot of our front-end completely custom front-end and we wanted to add in our own explanations so you could learn solidity step by step but if you want to check out also his video go check it out he's absolutely awesome with that said let's get back into the video now let's go ahead and demo the app so the first thing i'm going to do is i'm going to connect my wallet and you can see metamasks popped up over here on the right hand side i will select an account select whichever one you want and i will connect and boom look at that our app is up and running and it's like hey what's up kevin or causey or whatever your name is right we'll go there and now i can add tasks walk my dog at 1 pm which is actually something i have to do and then hit this plus sign right here and watch this we're actually adding it to our blockchain so now metamask pops up to ask for authentication if we want to do this i will hit confirm and it has been added on to the blockchain and it is a actual task that is created let's go ahead and create another task i'm going to go ahead and eat my food at 5 pm okay let's go ahead and hit plus on here and now just watch what happens okay let's hit confirm there we go it has been confirmed the front end is looking pretty nice but the main point of this app is not the front end it's that you could actually using solidity add tasks and things to the blockchain and it will really clarify and make you understand a lot of things of how solidity works and how smart contracts really work now if i hit delete on here this icon right there you'll see it'll actually delete that so i'll hit delete and then let's wait a little bit and let's refresh and let's see if it's been removed okay boom i hit delete and now it actually asks me to make sure that it's confirmed and now once i confirm it okay you got to give it some time before it will actually just completely get rid of it because we are removing it we have to let the blo our back end on the blockchain side know that we're actually going to be getting rid of it and now it's basically gone and this is happening on the blockchain side so i'll show you how we're doing this on the blockchain side so you can understand and since it's a blockchain you're not technically completely deleting it but we're filtering it out on the block end and so you'll get to learn how to do that so this is the app i think it's really cool i think you can have a lot of fun building this with me with that said let's just start building this bad boy up now all right now make sure to click the link in the description below this is completely free and this is a template that i created for you solidity with the to-do list and it's going to have nextgs and tailwind css and all the front-end code essentially just ready because i would just give it away i would want you to simply focus on the web3 and the blockchain part so this rebel for you will have all of that code already there and then you can only work on the solidity part okay so make sure to go here and if you want to use this make sure to hit fork rebel because that's the only way you'll be able to code in here and use this template okay and the link will be below and it'll be join.replay.com slash cp dash solidity dash to do so you could type that in or just click the link in the description all right with that said i'm going to go ahead and fork this rupple and once i fork this it should bring you to a page like this and all this means now is you can actually code here and so the benefits of this rebel that i've sent you to is in this one you will have next.js already installed all right you'll have tailwind css already installed and configured all the front-end code is already completed so you won't really have to do any of the front-end code okay majority of the front-end code is complete okay let's not say all because there is still you're going to still need the right front end code that needs to interface with the back end okay so that's done truffle has been installed so truffle is i'll show you how to install it but i installed it already for you because it takes a really long time to install so i'm like hey i'd rather just have that process speed up okay this is done this is done most of this is done and then this is done okay so that's the real benefit of this rebel that you're actually looking at all right so let's get started with that said what i'm gonna do now is i'm gonna walk you through majority of the code okay what's there so far and what you should find in here okay so you should find a client folder and that should have all of your front-end code okay so i'm going to walk you through that a little bit and then i'm going to walk you through some other stuff but first just make sure in your package manager all i want you to do is install truffle so you can type in truffle and normally what would happen is you'd have a plus sign here to install it you don't right now like a plus sign like this you don't right now because already installed okay so that's already done so let's go here the next thing i want to show you is in your client front end in your package json you're going to need access to some libraries like react icons or next or some tailwind stuff that's already there for you okay so you don't have to install it you could yarn it but you don't even need to do that because like the node modules are already there as well so you should be good to go on that end so react icons you already have it then auto prefix for post css until when css because these are all the things you need for css this the tailwind files you need for so yeah your tailwind is ready to go cool so that was one thing i had to explain to you now let's walk through the actual app so let's first take a look at it so you should be able to cd right now into your app into client and then just do yarn dev and that should start running your app so let's take a look you can also open it in a new tab if you want to just fully see it it takes a second to just be a little bit patient and there you go your app is up and running okay you can zoom out if you want i'm going to zoom in because i'm on a big screen so i want you to see this and right now writing on your app will not work because that's the back end part and you haven't added any back end code so really nothing is going to happen okay it's just gonna refresh and that's it yeah right now there's no front end so whatever you do nothing is really gonna happen but you have the nav bar right here you have the entire to-do list app you have this to do thing and then you have this plus button right over here so that's mainly the front end right now so let's go back and what i want to show you is these are all the components that i've already created for you okay so the connect wallet button nav bar all of those are there okay so navbar task to-do list so those are already there for you okay connect wallet button and wrong network message now some of this stuff you're probably like okay how do i see the wrong network message or connect wallet button because i don't see them right now so here's how you can see them so let's go into our index this is the main file where everything is happening these are all the nodes for the app but i'm going to just walk you through them together so we won't need them so i'm going to get rid of them okay and let me just walk you through the entire code base okay so let's put that here and let's just walk through the entire code base now all right so we're importing some of the components that we had made but here's what i want you to actually see all right the main part of the logic so these are functions that are just going to be empty all right these are functions you're going to have to complete these are the back end functions so connecting the wallet being able to get all the tasks from the back end being able to add a task to the back end and being able to delete a task from the back end so this is all backend related okay all three of these functions so when i say backend in this case it's the blockchain part this connect wallet function is going to just simply be connecting wallet to metamask to any type of ethereum erc20 wallet whatever all right so those are the ones that we're gonna work on and this is the other main part that i have already handed over to you so this over here this div there's not much to really worried about here but this is really styling it if i get rid of all of the styling here it's just going to look like out of whack right so that's just a wrapper that's all that's doing so i'm going to bring that back and they'll just contain the app put it in the middle add a color in the background centralize things so that's what that's doing okay so now you can even pretty much not really worry too much about this piece of code this piece of code the main piece of code that i want you to focus on now and worry about is this guy right over here okay and that's really the main logic of the app so far which is hey check if the user is logged in and if they're not logged in show them the connect wallet button okay so here i can make a user be let's just fake a not logged in user and what that would look like how we can do that is just remove that boolean that exclamation mark let's remove that exclamation mark so it just says is user not logged in so now it is true that the user is not logged in okay and if that's the case then show the connect wallet button so that's why it's showing that button right there and now we the other situation we have is hey is this the correct network okay so basically if the user if we go back to the other situation okay which is the user is this basically says the user is currently logged in okay because there's a double negation here negation here so it just means the user is logged in so the user is logged in we bypass this component we don't do this we do the else statement okay so this is our else statement so if the user is logged in then we want you to ask one more question is this the correct network if we're on the correct network which in this case is going to be the rankinby test network then show the to-do list so then show this but if we're not on the correct network so i can mimic that as well by just adding exclamation mark here and saying we're on the wrong network so if we're on the wrong network then it's going to not render the to-do list but render the wrong network message component and this is a pretty simple component there's not much going on here it just says please connect to the ring could be test net and reload the page so this means you tried to connect to some other network like raspin or something else so that's what's happening there right if the user is not logged in and this is not the correct network then show the wrong network message okay so those are the three components and you can toggle them really easily by just removing if i remove both of these right then it means the user is not logged in and they'll show us the connect wallet button if the user is logged in then it'll show us and it's the correct network then it'll show us to-do lists and the to-do list pops up so just play around with that so you can just understand the logic that's happening here okay because that's the really kind of important part and then of course we're going to make this more dynamic because right now this is just hard coded here but we're going to actually get access to the user using their ethereum wallet so you're going to need to complete the connect wallet function for that okay and then you'll be able to actually keep track of the logged in user and then where it says is this the correct network same thing it's you're just going to pull that information from connect wallet and your connect wall will be able to tell you if this is on ring could be the user logged in or the user logged in somewhere else okay so the connect wallet function will take care of both of these states that you need to be really tracking okay these are also going to be states right or so we're going to be using a little bit of react for that so for now what we're going to do is we're going to go ahead and tackle really the most difficult part first which is we're going to be going ahead and making our smart contract first because really majority of this code like especially all these parts right here they're really going to depend on what your back end is like aka what your smart contract is like because here you it's like imagine writing code without knowing what your api is going to look like everything you're going to write is going to be wrong so we're going to make our back end first and the api or whatever first and then from the front end we'll simply just interface with it okay so i hope that gives you a lot more clarity of what we're doing and now we're gonna go ahead and do that okay so let's go and create a back end now so this is our front end okay this is our client front end we're going to create a new folder okay at the global level i'm going to hit folder and make sure it's not inside of client make sure it's outside of client and this folder we're going to just call it our back end or the blockchain part okay and we're going to go ahead into our command line and we're just going to cd into that so hit ctrl c to end hit cd dot dot so you can actually get out of it and now we're gonna go cd back end okay and now if you're in your back end now we're gonna go ahead and say truffle init okay so just type in truffle in it all right so once you do truffle init if you look in your back end you already you have files now so you have truffle config you have a test file in migrations contracts another reason why i'm doing this on replit is you don't have to worry about this installation nightmare that often happens while you're coding along on a mac or a linux or a windows and you can't get a solidity thing to install or a truffle thing to install or next install so everything is already installed in there for you okay so just make sure that you've forked the correct template and again it's in the description if you missed out on that earlier all right so i've done truffle in it now my like template project is ready to go now we're gonna basically go ahead and create a smart contract so this line over here that says truffle create contract your contract name we're gonna go ahead and use that command to create our new contract okay and that's gonna create a scaffold of a contract so just like bare bones contracts i'm gonna go ahead and say truffle create contract and then we're gonna go your and sorry not your but we're gonna say task contract okay because we're gonna make a contract for our tasks so essentially we're getting a back end for our tasks all right let's do that okay so this contract will allow you to create a task and add a task and show tasks and filter tasks it's going to be all task related now if i look inside of my contracts i will see task contract dot sol okay so let's go inside of here and now it's going to be the really meaty fun part because we're actually just going to be writing a lot of our logic here for our code okay so this is going to be all of our backend logic so it's going to be actually a really important part great let's walk through everything step by step because especially if you're new to solidity i just want to make sure that you understand every possible thing okay so i'm going to zoom in so everything is super nice and clear all right first thing right here this is oftentimes you will see it in solidity just add in some kind of license okay so just you can copy paste this exact one right should be there already now the solidity version that we want is a specific version in this case and i want 0.8.15 okay this is a version that i want every single line of solidity that you end you have to end it with a semicolon if you don't you will get an error or your app will break okay so that's important and here whenever you're actually writing a solidity file you pretty much always have to do contract task contracts so imagine like this is function or a component past contract but it's literally just a contract and then this constructor we don't need it so we can actually get rid of that constructor okay in here we're gonna have two events so i'm gonna have an add task event and it's going to take in a so let me write it like regular javascript first so it's going to take in a recipient and it's going to take in a task id okay so this is how you might write something in javascript or you're like okay i'm creating a function or whatever and this function takes called it's called at task and it takes in two parameters recipient and task id except in solidity you have to say those their types so recipient will be a type address okay so those wallet addresses like whatever the wallet address is like those are specific types and solidity and you refer to them as address and then task id is going to be an an unsigned integer okay so we will say ooh ins you int and then we're also going to need an event for delete task okay and delete task is going to ask for a task id and it's going to ask for hey if it's deleted or not the task is deleted or not okay and task id is gonna be a uint okay and then this is going to be can you guess if something is a true or false what data type is that if you guess bool good job okay so that's gonna be a boolean all right now we're going to create a data type that's going to represent the following structure so let's go into our index file and i just want to kind of show this to you in index our tasks will have the following structure so this is an array of tasks but this is an object or in in solidity you might call this a map or a struct this is this right over here okay is an object here right javascript this is what one task will look like it'll have an id text and whether it's deleted or not okay so that's what one task looks like so if i go ahead and i go back to my task contract you could do command p for what i did and then just type in task contract okay so we're gonna now create a structure that mimics what we saw so i'm gonna go ahead and do struct and task and this structure is just going to say hey it's going to take these are the keys okay so we're going to have an id we're going to have task text and we're going to have is deleted okay and the last thing you want to tell the struct is what are the data types of each of these so for id my data type is a uint for tasks text is going to be type string and for is deleted it's going to be a boolean okay so in solidity if you want to create let's say something with an object right if you want to create a task like if i go back to this task right here if i want to create a task like this so let's copy this and let's come back into our task contract and let's paste it if i want to create a task like that i can use a struct to create that exact task so i can go task and then let's say i pass it a 1 i pass it clean and let's say i pass it false sorry zero it's going to create that exact task so this is gonna return and turn into an object okay so it's almost like you're calling a function or whatever okay it's a constructor it's a task and then it'll spit back out that okay so that's how that's why you need structs and when you use a struct you will get back what we call an object in javascript okay this is just to give you a little reference okay so i'll leave that reference up here and this is a task okay this is what a task will look like okay great so we have our task struct and now what we want to do is we want to have an array that is filled with tasks so when you're creating that you're going to basically say hey i want to create an error so let's just do it this way okay so i want to create an array called tasks in javascript you would just do this but here this is not javascript right so i want an array called tasks now what i want it to be is i want it to be of i want it to be an array okay and it's gonna have it's gonna be an array and it's going to be filled with these objects okay so if you try to put integers into this array tasks so for example let's just say you try to do tasks dot push so let's say you have this variable tasks available to you now okay and let's say tasks is an array now if you try to do task stop push and put a 1 it's going to go it's going to give you an error because it's going to say hey that's not the type that you told me the type that you told me is going to this is the type this is what it should look like but now if you actually put let's say something that looks like this in here if you try to push this it's going to accept it it's going to go yes this exact thing okay this is an integer this is a string for task as a boolean yes i will accept it and it will add it okay so you're creating these strict types so it's like typescript if you've ever used it and then we're just gonna say this is private meaning that anybody outside of this function should not have access to it okay and then we're going to create a mapping which is going to be helpful for task to owner so we'll say mapping and i'll say you ins 256 address task to owner so i know this is probably like what the heck is this all this part means so this part right over here just a variable okay we're just saying hey crea initialize a variable called tasks to owner and the type that it's going to have is this and all this means that anytime you create task to owner you're going to have an object that looks like the following the key this represents this part right here represents a key right over here represents an address okay obviously and an address might look like those wallet addresses might look like that okay so here let's just say that this is the wallet address of qazi which is me okay and then we go boom all right task to owner and then boom we will have another task like this oh not in the same thing but let's just say we have another task and this is task one and this is david okay so how this will work is imagine this you have two tables okay and on the left hand side we have a table called tasks and then a right hand side we have a table called owners okay and just say walk to dog might be a task and then here on the right hand side for owners you have all the owners like qazi whatever but the way that we're storing it is in the following way so we're giving this task an id of zero so we're gonna set the task id here is zero walk the dog and inside of owners we're gonna say the id of zero belongs to let's say kazi and almost like in sql this will allow us to do an inner join and match all these tasks so this way the app will have proper authentication and it'll show me only my tasks not somebody else's for example if for one we had clean dishes but that was like david created that then this would basically say hey this was created by david okay so then when qazi logs in qazi will only see walk the dog and when david walks in he will only see clean the dishes okay so the id inside of the task and this id this key over here these are the two pieces of the puzzle that allow us to do an inner join and find the who the tasks belongs to so this is a structure this is what mapping blah blah blah whatever is okay this is what it'll look like so i'll get rid of that for now okay cool now next up we're going to create a function and this function we'll call it add task all right let's keep on rocking and rolling here so our add task function that we're going to make is going to take in a task text and it's going to take in is deleted okay so here's what i want you to imagine right now this function that we're actually creating here right now we can actually call this function from our front end okay so imagine that we're going to be calling this from our front end at some point and how we're going to be calling this from front end at some point is going to look like this from our front end we're going to do task contract dot add task function and then from our react slash next.js code we're going to pass in a text like walk the dog and then we're going to pass in is deleted as false or true so we're going to let's say pass in like this is not currently deleted this is so deleted is deleted as false so this is add task function or method or whatever you want to call it that we are creating that we can interact with eventually from our front end not right this second okay so that's what we're writing just keep that in mind all right now since this is solidity we have to tell it what types these are so task text this is this string and when you do string you sometimes have to write memory there so we'll just write that and then this one is a bool okay so that's what that is all right so we're done with that part now what we want to do is we want to basically say that this function is external so we have access to it from outside of this too and external basically means that this function isn't really doing isn't really returning anything in this case okay so we're gonna go ahead and say we're gonna create task id and what will task id be so think about it like this okay say you have an array of tasks so you have an array of tasks and that array looks like this like this filled with these tasks okay so we got task one we got task two task three what we wanna do is we wanna generate task ids here right and we want to generate preferably a unique task id most of the times and we also want to just make it simple like the first one should be zero the next one should be one the next one should be two so on and so forth it's easy what we could do is say that this array is called tasks what we could do is we could just say when we're creating this task we could just for the id we could just say hey grab the tasks and grab its dot length so if i get this task's length well i get zero well when i get this task's length the second time i get one when i get the tasks length the third time what do i get hopefully you guessed it okay you get a 2 right simple we're just going to say it's going to be tasks.length okay and we're pulling the tasks from there make sure to put a semicolon so it doesn't error out next up what we're gonna do is whatever task the user passed in we need to append that to our tasks array ray that's made up of these task objects okay so i'm gonna say tasks dot push and now we're going to create that object so i'm going to say task constructor then give it the task id that we just created right there we're going to give it the task text and then the is deleted task text and is deleted so this will push it on and basically what this is doing is this right here will basically get simplified to that right there okay one task is going to create one object one map all right next up we need to set up that database of tasks to owners to create that relationship so i'm going to say task to owner okay and i'm going to give it a task id for task to owner so remember this variable that we made tasks to owner and so it's going to take a u int right and the uint in this case will be zero for this task for the next tax is going to be one for the next task is going to be two and this over here needs to be whoever the user is okay so user is gonna go right there okay the logged in user in this case we're just gonna say message.sender this is a special thing in solidity msg message and then if you do dot sender it'll get the wallet address of whoever was currently logged in let's put a semicolon here let's put a semicolon here okay and then we can even emit this so we can submit add task and i can say message sender and then give it a task id remember we created this event at task and now we can admit it but we just need to give it an address for the recipient so this is the recipient and then this is the task id right giving it that task id perfect so in terms of the add task function our add task function at this point is complete i'm going to remove these tasks at the bottom or i can leave it and just comment it out all right the next function that we need to add is our get tasks function okay or get my tasks function so let's go ahead and do that so i'm going to say function we'll say get my tasks and we're going to say external view returns and we can even say what this will return and this will return a task like object okay and now let's open this function up and start writing okay so we're going to create a variable called temporary okay and so temporary is just going to be an array and what we want to do is we want to keep pushing new tasks to it that are of that owner okay so temporary will filter for the owner and for non-deleted tasks okay so get my tasks we want to do is we want to get tasks that let's say that have that are mine and not yet deleted okay so temporary okay and it's gonna give a new task like object we'll instantiate it like this okay and this array that we want so temporary is going to be an array and this array that we want so in solidity you could give a size of the array so if i said array of let's just say 2 or whatever or 2 right here then what will happen is i will get an array of size 2 and no bigger like it can't go bigger than size 2. it has a fixed amount of slots and so what i'm going to just say here is tasks.length why because i want this array to be obviously no longer than there are tasks that wouldn't make sense and this temporary here it's going to be this it's going to be an array of these these tasks okay and we're just gonna say memory perfect okay and let's put a semicolon there let's put a semicolon here if you miss any semicolons it will break so just keep making sure to put semicolons everywhere all right now we're gonna set up a counter that i'm going to set to 0 and then we're going to write loop through this and so i'm going to say for u int i equals 0 while i tasks dot length okay i plus why are we doing this we're gonna loop through all of our tasks and then we're just gonna keep adding them to temporary and we're gonna do a check here so i'm gonna say if task to owner of that specific task is equal to the messages sender meaning if this is my task so let's say that there is a task owner that has a key of zero right and so if we look at that and we go and get the key of zero and we go okay the task is whatever if this is going to turn it into its value is going to be an address and if that address of that task matches the address of who's logged in then that means this is these are my tasks okay and we're gonna add in one more check and we're going to say hey check if tasks is deleted is false so making sure giving me tasks that are not yet deleted let me zoom out just a little bit so give me tasks that are not deleted okay so if this is the case what i want you to do is set that task in that specific position this is just a way of writing a push okay this is just another way of writing a push i want you to get used to it because in solidity this is like pretty common people do it like this or you're just really basically saying in the zeroth position place this in the first position of that temporary array place this so if you imagine temporary is an array of size two so let's just say it's empty empty right now what this is saying is hey go to position zero so this is position zero and then set that to that specific task so tasks text hello is deleted false whatever so add that task there and then go again loop again and then if you find my task again that's also not deleted at that here okay so that's what's temporary is and then we just increment the counter by one so we will do counter plus okay so let's get out of this and then all we're gonna do is we're just going to spit it out in something called result and result is going to be the length of the counter not the length of the entire array so result is just going to be so if my tasks were 2 and the total tasks were maybe 10 then this result is only going to be of size 2. and we'll loop through this so i will say i is equal to zero i is less than counter i plus and then i'm just going to say for result of i just set it to be of whatever is in temporary of i okay and then at the end we're simply just gonna go ahead and return result okay so that's my function here's my loop then i do my loop again and then i return my result okay so that's what's happening there just make sure to put semicolons in all the right places don't miss any semicolons i'm gonna call this on my colon okay great so we're good with get my tasks okay the next one that we're gonna work on is add task where does the whole tract end so let's see contract ends right there okay cool let's go here and we're going to go ahead and say function and it's going to be a new function we're going to make and this function is only going to be for deleting tasks because we already have a way to add the task we already have a way to get our tasks now all we need to do is be able to delete tasks okay so i'm going to go ahead and say task id is delete task wants a task id it also wants is deleted or not okay so we can just say bool and just make it external great now i'm going to say if the task to owner so it's basically if it's if i am authenticated to be viewing this or doing stuff with it so this is my task that was given then what i want you to do is get that task id and set its is deleted to be is deleted whatever it was passed in which you honestly don't even have to be past this it should just be set to false but like you could do it like this as well that's fine you can set it to true i'm sorry true so just okay it's deleted as true and then we just emit the events okay this is not completely necessary but you could do this now basically just so you can visualize what's happening is from the front end how we're going to call any of these functions from the front end we want to be able to just do task contract that delete task and then we give it a task so we give it like an id so we give it zero i'm just mapping this to that and then we give it this so we just go true so that just means hey i am confirming that i want to delete this specific task and i'm saying zero comma true and then it will confirm and then delete that task okay but realistically all we're doing is we're not really deleting tasks all we're doing is setting its deleted value to true and then in our get my tasks we're just filtering for it we're just really there's just a filter okay and that filter all it does is it just doesn't show you anything that has the deleted value set to true okay so filter is filtering is happening here specifically okay make sure it's not deleted is what that line is saying and then here we're just marking so think of it like we're just labeling it as deleted and then we're just filtering it because on the blockchain you can't really delete anything all right cool and then now we can get rid of this so with that said our smart contract part that we wanted to write our smart contract is done all right so if you've gone here really good job awesome job and now we're gonna go ahead and move forward okay now we're almost ready to interact with it from the front end we're very close but not completely there yet so what we have to do is get it ready to be interacted with from the front end so we'll need really two things we'll need a contract address a deployed contract address we need to deploy this okay so that means almost imagine like deploying it to the web and then you can access it from your front end okay or you're deploying it then the second thing we need is access to a which if i want to make your life really simple it's literally just an ape that will allow you to use all these methods okay so we need this and we need abi okay now luckily for us gets created pretty easily in the back end okay i'll show you where that gets created once we go ahead and create it for now the most important thing is we need to get a deployed contract address all right now here are the steps that we're going to take so in our back end let's go ahead to our migrations and in here we're just going to rename this to task contract everywhere so task contract that should be task contract and that should be task contract once we're done with that we're just going to download this entire project so everything from ruppel okay we're going to download it as zip on our local computer because for this part we need two terminals and in rupple replica currently you can't have two terminals open at once and so i'm just gonna go ahead and download it and then we can use it locally if you have ever if you ever have problems with downloading just simply refresh your rupple and then just go ahead and try downloading again and then it should be fine all right so now we have the zip file let's go ahead and open this up this zip file once it's opened up in your command line i want you to go ahead and cd into it so let's go to our downloads and we're gonna find where that is so solidity template two or whatever okay so i'm gonna go ahead and do template let's see if it's cd solidity template 2 perfect so now i'm inside of this okay folder and now once you're here first things we want to do is this we want to go ahead and install truffle if you don't have it on your local computer just do yarn global add truffle okay or ndx global or npm global at install truffle whatever okay so you're gonna need that okay you need to add it globally you can't if you do it locally it still won't work so make sure you install it globally and then it'll work okay so now we installed truffle globally now what you want to do is cd into the backend folder and you want to do truffle dashboard and this is super cool it'll actually open up a truffle dashboard and you want to deploy it with your own specific wallet address so it allows you to do that so you can actually click meta mask here all right and then it says hey confirm that you're on rankinb network and yeah i believe that we are so let's connect it okay so now it says there's a green sign here that says connected zoom in there perfect okay so now that it's connected i can get out and i can just hit confirm okay great so now this is good now let's open up our command line we'll leave this dashboard running and just open up a new tab okay so open up a new tab so this one is running or open up a new terminal whatever you want to do is whatever is easier for you okay now we cd into that same place solidity your cd into back end and what we want to do now is go ahead and do truffle migrate dash network dashboard okay so this will compile all our contracts so there's an error you forgot to put semicolon so i'm gonna go ahead inside of our contracts and i'll also make sure to put a semicolon here and here okay but more importantly we need to actually fix that on our local file so let's go ahead into our task contract dot sol and let's see if i can open it with code runner because it's just quick you could do it with vs code whichever one it doesn't really matter okay and i'll go right there wherever i'm doing the emits and put a put a semicolon here and a semicolon here and just save it okay i'm gonna get out okay let's open up our terminal again and let's try it one more time now it's deploying it look at that already popping up over here that is pretty freaking cool huh waiting for transaction signature please check your wallet for a transaction approval message okay so we're gonna go ahead and now hit process so let's hit process boom our wallet just opened up go ahead and hit confirm okay and now it's just deploying it to the internet okay or the blockchain rather and boom there you go it's been deployed now the very important thing that we need here is the contract address so double click copy that because that's what you're gonna need okay everything else you don't really need right now let's go back to our replit and let's open up our shell feels like a ritual feels like a crazy ritual cd into back end okay all right now that i'm inside of repple and i'm in back-end i'm just gonna go ahead and do truffle compile so now once i compile it's going to make my api for me so let's go ahead and see that build contracts boom we have our task contract right here and task contract.json that's our abi aka our api and what we're going to need to what allows us to be able to talk to this from our front end okay so with that said data successfully compiled we're done with that now let's go ahead inside of our client folder so let's go here and we're going to go ahead and create a new file and this file we're going to call it config.js so just pretend like i didn't have this file okay so we're going to create a new one didn't mean to have that file okay we shouldn't have that file okay so let's just pretend you never saw that all right and go into clients and you're gonna make it because you're not gonna come with the config file okay so let's go ahead and by the time you're seeing this tutorial dutch problem should already be fixed and you shouldn't even have a config file so it's great all right now in the config file what i need to do is i need access to that specific contract address that i had copied earlier if you don't have it copied earlier just go ahead double click here copy it now okay and there you go that's the address so just to export const con task contract address equals that okay and this is going to be pretty important so make sure you leave that in your config file okay because this is the contract address we're gonna need to be able to speak to it from the front end so almost imagine like this is your access token okay you can need access to your access token now let's go ahead into our index.js and now we're ready to actually start writing up all of our code so we're going to go ahead and import task abi and we can just say from and we want to get to our task abi is coming from our back end task contract.json right here so we just need to import this file taskcontract.json so we gotta go into back and and then inside of backend where do we need to go into we need to go into build and then inside of that when you do into contracts and then go taskcontract.json okay if you copy linked that should that's actually a different link that's not the path so ignore i said that cool all right there you have it so now we're importing that address okay that's one thing that we need access to the other thing we're going to need access to is a contract address so let's go ahead and do import task contract address from and this is much closer to us it's just in our config.js you can hit that over there to just purify your code all right now that we have our task api and we have our task contract address now we're really ready to actually finish writing all this code because those are really some of the main things that we needed access to all right first thing we're going to do is implement our connect wallet function okay because that's going to be kind of the sim one of the simplest simpler ones and one of the most important and the first thing that happens so for that we're going to need ethers okay and ethers is something that you'll have to install if you don't have it already so we could just go and check if we have it all right let's get to work on connecting our wallet so the first thing i'm going to do is i'm going to pop it into a try catch block we'll add the catch as well okay and the catch is going to be just simple it's going to be hey there's an error just say air okay cool and then in the try we're gonna basically write all of our logic so i'm gonna say hey grab ethereum from window so whenever meta mask actually like latches on so to speak on your app so whenever you like log in with meta mask or whatever the window like the chrome window or the safari window or whatever you actually have access to a variable called ethereum okay so you could actually destructure that it becomes a property of window you could destructure that out of window okay so we're gonna grab access to ethereum and then we're gonna say if ethereum does not exist so it's like value is null or whatever then we're just gonna say metamask not detected okay and then we're just gonna end the whole thing just hit return it's kind of like a guard clause okay just make sure that's there okay all right we're gonna check the chain id and we're gonna get it from ethereum our request and the method that we're looking for here is going to be eth chain id okay that'll get us the whatever chain somebody logged on with that specific chain id okay and then we can just say hey this person connected to chain and then we can just write a chain id okay great so let's go ahead and set a rinkeby chain id and ringkiby chain id is 0x4 okay that will make sure that the user is on rank to be indeed rinkybee is a test network and it's also what mine what i named my cat after and then we're basically gonna say hey whatever the chain id that the user selected if that's not the same as the ringkiby chain id and in that case you're not you're not connected to the rank of b test net right and then we want to now start getting some state variables into play so let's go ahead and create a couple of state variables we'll just start off with const correct network we'll have set correct network okay and this we could set it as false in the start the network that's selected is fault like not the right one but then when it's set up correctly we're just going to go ahead and call this and say true because it's going to be the correct one and then we're just going to end this function because we got the wallet and we got the change so there's nothing to do anymore just end everything if that's not the case then basically we're gonna hold on let's see oh i'm sorry this should be false because you're not connected to the ring could be test network and then this one should be true okay that means yes we are connected correctly so there we go true okay once that's done let's get our accounts now okay so the account is this if i open up my meta mask yeah i guess i could open up my metamask here as well count three right so that's an account out of many other accounts so you can see i have multiple other accounts right one two three whatever so we're going to say accounts and we're going to await and do an ethereum dot request okay and we'll say method on this one is going to be let me hide this you can see clearly method is going to be request accounts all right once you do that it'll request the accounts and it'll open up that modal where it like hovers over and by modal i mean this thing right when meth metamask actually pops open so that's what that will do and then we want to do is we want to say found account and show the zeroth account or whatever the account that the user pretty much selected okay and once the account is set then we need to actually keep track of the account as well so let's go ahead and add a few more state variables so here i'm going to have is user logged in or not because we need to know that so we're going to say set is user logged in initial state is going to be false obviously let's also go ahead and import use date because we're going to need access to that so let's just do use date hit enter and it imported it okay all right it says user logged in perfect and then the next one i'm going to need access to is current account okay so we can actually say current account set current count and make the current account empty and so we can say the user is logged in at this point so i can say this is true and at this point current account we have access to that as well so we can actually say set current account and we can actually give it accounts of zero okay so both of those things are now done and at this point we're done with the connect wallet function okay now all we want to do is we want to connect the connect wallet function to our component connect wallet button so let's pass this function down because we're going to need access to it in this component so i'm going to say connect wallet give it connect wallet or function okay so we're giving it this function now let's go to connect wallet button and we can destructure that connect wallet and then we can add an onclick method so you see i even have these nice little notes here for you so you could just go on click and just say connect wallet so basically just run that function when i click it now let's see if we've done it correctly because if we've done it correctly it should be working perfectly okay so let's go ahead and say the user is currently not logged in so let's remove that and let's see what happens i'll hit refresh on here okay let's go ahead and open our reply make sure you do yarn cd into clients and then do yarn dev that should pop it open okay we should have a button coming up here anytime now all right we have this button right there let's go ahead and click that and boom look at that that popped open that is very nice let's make sure that we're looking at our console log as well okay connect it to cheon i misspelled it but whatever you get the point chain let's hit so this console log worked okay let's hit next let's hit connect and boom found account shrinkaby right that is awesome let's go back let's disconnect our account so we can go ahead click that fox go ahead and hit disconnect account you could change your chain as well so you could change from rinkaby test network so make sure you have wrinkly test network right so if you don't have rinky test network you're gonna go ahead and click you're gonna click here you're gonna click show and hide test networks and you're gonna turn on test networks and once you do that these test networks should show up otherwise you can go inside of your settings go in advanced and you could scroll down and you could see where it says show test networks and you could turn it on that way as well okay now let's say you do rawspin or whatever connect wallet and it says hey you're not connected to the ringtobe test right so that error comes up right away and catches it so it seems like we are ensuring that the user is indeed connecting with rinkeby test network and then it pops it up and then it allows you to connect we can hit connect and boom there we go and then it pulls the account that you connected with specifically so far it's working beautifully all right next up since we're done with our connect wallet function and it works perfectly next up we need to work on get all tasks so we should be able to get all of our tasks or rather let's actually first add the ability to add a task okay so let's look at this code right here note right here it says add tasks from front end onto blockchain so we all we need to do is we need to just complete this function now okay add task how is that task going to work first of all we're going to go ahead and prevent default because it's going to be a form we're going to fire off on and this will avoid a refresh okay so this is avoid refresh that's all all right and then and then what we want to do is we want to do we want to create a task okay and this task is going to be the text is going to be whatever the user inputs so this is going to be a state variable that we're going to keep track of and this will be false because whenever you create a task initially the it is deleted will be false so let's go back up let's keep track of input as well so we're going to say input set input and use state use state and it's going to be empty okay all right so there we go and then what we're going to do is we're going to try we're going to have a try catch block here okay and the catch is just going to be simple the catch is just going to catch the error and then it's going to just console log the error okay all right so now for our tab for our try block rather we need to pull some of this code is going to be repetitive some of it you've already written we're going to get access to ethereum and then what we're going to say if ethereum so if it exists and your log ethereum is there then what i want to do is i'm going to grab the provider so we're going to do ethers dot providers dot web 3 provider and give it ethereum okay so in other words we're gonna give it like it's really meta mask even though it says ethereum here this is like actually metamask okay so that's really what's happening here so this is really meta mask and we're passing it the metamask provider okay hopefully that clarifies it for you and then what we're going to say is going to say hey grab the signer aka the person who just signed it and then we're going to call the co our task contract okay now we're ready and we're going to do new leaders contract and so we need to create this contract we're going to get our specific contract so for our specific contract it's going to need access to our contract address is going to need access to our abi okay and then we're also going to need access to our signer so now this will allow us to get access to task contract and all of its methods like add task delete tasks get my tasks everything that we created in our smart contracts if i go to our sol file or task contract file this will have access to all of these now okay so let's go back to our index and now that we have access to all of this since this is the add task function which method do you think we'll need to call after we get access to all of this simple after this we need to actually call our task contract dot add task and we need to grab our task text give it that and we need to give it is deleted okay so here for example is our task this will be the input that the user gives and this by default will be false okay great task and we can then do you know since this is going to be a promise we can then just get the response you don't really need to do much with the response and now we'll just set task set tasks rather and so make sure we we want to create a a state variable that keeps track of these tasks as well so we're going to say tasks set tasks okay and i'm going to say use date and in the start it's just going to be an empty array and so we're going to say set tasks and now we're really just going to say whatever tasks was previously plus that new task we just end added so this is really just appending to our task array okay that's really what it's doing and then we can say console log completed task or added task okay perfect and then what we want to do is we want to add a oops i want to add a dot catch and we want to say it error and then just console log the error okay perfect so we have this if and then to this if we want to write an else and we just want to say console log ethereum object does not exist okay so just in case we like don't get that ethereum object cool so now we can actually add a task and all we need to do is we need to connect it to our front end all right so what does that mean what that means is let's go ahead and let's put it in a state of that the user is logged in so i'm going to go ahead and hard code that oh sorry actually we don't even need that anymore we could actually put the actual dynamic state and we can just say is user logged in and if the user is not logged in then they'll show at this button and then if the user is logged in then it'll take us to the next thing okay so let's go ahead hit connect wallet let's go ahead and without this let's refresh okay great and let's see are we actually connected or are we not connected okay cool we are connected let's change this user logged in save it let's go back boom now let's see what happens once we connect so i'll go ahead hit connect wallet let's choose connect and boom it brings me in okay so this is the final version and we can leave it like this okay so this is already working dynamically if i disconnect it should take me back to the home page let's go here let's try disconnecting okay let's refresh boom it brought me back to the home page now let's try it one more time try connecting and it brought me back to the to-do list app page okay so our is user logged in like that one is working correctly now for this add task this function needs to fire off when we add a task but when i do this and i hit plus but the thing is that this plus sign doesn't have a on click functionality so we need to keep track of whatever the user is typing in here plus we need to actually when the user clicks this we need to add an on click functionality and we need our add task function to actually fire off when the user actually clicks that and right before we do that let's just go ahead and make this dynamic as well so i'm going to say correct network question mark that's it okay so this part is now fully dynamic and it's working okay so now going back to our add task right our to-do list let's go into our to-do list component our to-do list component has a form and then it has this plus button so we have these little notes here right that says hey take the input from here because this is the actual input and the form part and then it says hey add an on click right here to that circle okay so that's that circle right there so we're gonna add both of them so the first thing we need to do is we actually need to update the input from the user okay so we're gonna go back to our index and we need to actually pass the set input hook set input that way we can actually update the input based on whatever the user finds right to set input so that's one thing we also need to give it the add task function so let's go ahead and go add task okay so now we've given it both let's go back into to-do list and let's de-structure set input and list the structure add task now let's go down and one more actually thing we need to give it to is input because to-do list is gonna need access to whatever the input is at any given time so let's go ahead and send it input as well okay let's go back to our to-do list all right now right here i'm going to say value is input and then we need to on change so we're going to say on change okay set input to be the target value okay so whatever we're typing in so this is like a pretty common react thing if you're fuzzy on this like you could watch my other react videos and next videos i go more into detail on this type of stuff and boom so that should take care of whatever i'm typing in okay and then the plus button we need to add the add task function to it so we need to go on click add task okay so that's about it okay that's about it so let's go ahead and let's go write the word eat a cookie let's hit the plus button and let's see if anything happens boom look at that it popped open and it's asking for a confirmation and it's gonna charge me something i'm gonna hit confirm and you can see in the console log it says added a task that is so cool so we were able to actually add a task eat a cookie eat a brownie okay that's the second task let's click plus sign and it's working let's go here and let's hit confirm boom you can see that it says added task was ran twice so we eat a cookie eat a brownie eating lots of food here now you might be wondering hey how come all tasks are not showing up that's because we didn't actually finish writing that method so once we finished writing that method it will actually work okay and now if you're wondering hey why does it log us back out we need to actually just write a use effect hook okay so we're going to go ahead and say use effect let's import it and what we need to say in our use effect hook is simple we just need to run our connect wallet right when our app runs so now if i refresh plugged in automatically okay very nice all right great so far app is looking very good it's doing what we needed to do but now what we need to do is we need to be able to retrieve all of those tasks and then show them onto the screen all right now let's go ahead and get all of our tasks okay so this is like really one of the key methods that we're gonna create because it's going to get obviously all of our tasks so some of the code is going to be repetitive and for that we can just copy this so let's actually first write our try block in our get tasks let's go here i'm going to say try and then catch and whatever error we get we're just gonna console.log that error okay and now in this try catch block some of the code is gonna be simple for getting up to the task contract so i'm gonna copy this and paste it okay so this gets us the task contract address why is it complaining there we go okay cool and now we need to actually get all of the tasks so we need to go ahead and say let all tasks and i'm going to say await task contract dot get my tasks and then we can just say set tasks to all tasks just like that all right else cerium object does not exist okay boom there we go so that right there should actually just get all of our tasks we're getting all of our tasks we're setting all of our tasks so now all we actually need to do is in our to-do list well our to-do list need ask act needs access to our tasks and then we need to destructure it here tasks and i have these notes here that says hey just loop through all the tasks using the task component so we're going to go ahead and just do that now so in our to-do list let's go right there and i'm going to say map and for each item i want you to do the following okay you're going to call the task component all right it's going to be self closing and then the properties we're going to give it is for key it's going to be just item.id task text is going to be item.task text and on click we're going to give it an on click but for now let's leave it okay so on click delete task that's what we're gonna do so i'm just gonna leave that commented out cool now it's okay task could not find this component so we need to actually just import this component and then we should be good so we have created this task component right over here okay so we just need to import that so import task from task all right and that should get access to it and then we just render out the task component and now let's take a look so let's go back to our app let's hit refresh and let's see if it gets if it's able to pull any of the tasks that we've created thus far ah i discovered it okay so we have to actually call get my task we're never called it so how will it know so we need to get all tasks like pretty much right when our app loads and then it's gonna get all the tasks and then it's gonna do the thing okay there we go that was the problem that was happening because you can even see it says hey get all tasks is declared but it's actually never ever used so let's bring that bad boy back let's go here let's refresh and let's see fingers crossed hopefully our tasks should show up all right so we're making some progress so it's not writing out what those tasks are okay so something is happening with the task text let's just take a look task text is the input of the user yep also at the end what we need to do of this add task that we actually forgot to do at the end was we need to make sure that once you hit submit you just reset it to empty like this okay once you're done writing the task just set it to empty okay let's try eat a cookie let's try now and let's hit this okay let's hit confirm and let's see if we have better luck this time we do not have better luck this time all right let's to debug this problem let's just add a console log here and say hey just console log all tasks and now when you go back actually and if you refresh watch what's gonna happen keep an eye on the console log and look at that okay so i'm gonna make it a little bit bigger so you can see that's what he said and here you can see that i have all my tasks showing up okay eat a cookie eat a brownie eat more eat a cookie so lots of cookie eating tasks were there and then we have task text you could see there so our tasks are working correctly they're just not showing up the way that we want them to so we'll fix that now so basically what this tells me is that it's just not being rendered out on the front end so for example if we follow the logic down we're passing tasks to-do list so let's go inside of to-do list i command-click it we're destructuring tasks and then we're looping through tasks so the culprit might be this task component let's command-click into this and if we look here this is the component that should actually be showing the task because this here is the task component right there like this specifically so why is it not showing the task i don't see task text anywhere even though we're passing a task test it's not really doing anything with it so we need to actually destructure and go task text and then we need to actually show that task text right here task text okay so once we do that let's go back and look at that here we go let's say drive a ferrari that's a task let's add it in so so good thing was it was a front end problem it was in a back end problem our back end was working perfectly and boom drive a ferrari now we need the last thing we need is to make these delete buttons work so let's go ahead and add the delete functionality okay now let's add the delete task functionality so for delete task functionality it's not this one is not going to be super complicated this one is actually going to be fairly like straightforward what we need to do is there's going to be some bits of repetitive code like for example our try catch block so try and then we're going to say catch error and then just say console.log error okay and then we actually need to get access to our task contract address so we're just going to repeat this piece of code right here all right so this just runs and the whole point of this is to get us access to our task contract address let's close out this if statement right here and else will just be console log therium does not exist or whatever okay and now within this if statement is where all the magic is going to happen and we're going to go ahead and delete the task so we can just say await task contract delete task and when you delete a task we're going to give it a key okay that key is actually going to be passed in already okay that key is basically going to be like this so for example if you delete this task right over here this task already probably has the key of 5 because we gave it that key if i go to our to-do list we gave it that key right over here the item.id and the id is incrementally loops from zero one two three four five six so on and let's go back into our index so that key is already there so we're going to give it that key so it's like giving it a delete the eat the cookie task aka delete the task with the id of zero and set its deleted value to true okay so now it's deleted value is set to true so we're going to do this okay and then what we want to do is we're going to say let all tasks okay and you could store this so you could say const cons delete task transaction and you could console.log and say successfully deleted and then pass in that transaction and let's put a little tada emoji in there and then we're just going to go ahead and await task contract and get all of our tasks again get my tasks okay and then set all of these tasks so now we're gonna set all of the new tasks because now it's gonna send it to our back end so we're just labeling a task as quote unquote so we label a task as hey this is marked as deleted then we send it to our back and filters it once it filters it okay so once we're done it filters it we on our front end retrieve all of the tasks again from our back end or blockchain part and then we just set those as the new tasks and then we're done okay so this is the delete task functionality and delete task functionality is now completed now who needs access to delete task our to-do list is going to need access to delete tasks and the reason for that is our component task is gonna need access to it okay so it's like a little bit of prop drilling but not too crazy okay so let's go ahead and do delete task okay and then let's go to our task components and we're gonna go ahead and say on click right on click we are going to delete task and give it the item dot id that's it okay and that should really delete it so let's go ahead and drive a ferrari let's go ahead and delete this task okay let's go ahead and refresh save a few times and delete okay nothing is happening right now so what's the problem delete task okay we're destructuring delete task let's go into index we're passing delete task is being passed so all of that is good actually i don't think we need to add this here we need to actually give this on click all right so we're going to need to give this on click to delete tasks so we're going to go ahead and say we're going to pass this function delete task and we're going to pass that down so i don't think we need to actually add that here okay so let's go to our delete our task component now okay let's go to our task component inside of our task component let's go ahead and delete tasks let's destructure delete task okay and then here we're going to add an on click so on the garbage can is where the on click takes place and we're going to go ahead and say delete task okay on click that's what should happen now let's give it a try i think this is to me is looking right now let's go ahead click drive a ferrari try to delete it so refresh we get an error to show us what there is to oh yeah we need to give it the specific item id so let's go ahead and do actually what we could do is we could do it this the other way let's go back to our to-do list and here we're actually going to give it an on click and the on click here is going to be delete task and that specific item dot id and it was going to task let's go ahead and destructure on click and then we're going to give it the on click okay so that way we have access to item id and we don't have to like destructure and pass down the item id okay cool so let's go and try it now remove drive a ferrari and there we go now it's popping up beautiful let's go ahead and hit confirm on that so that transaction it says successfully deleted okay now if i go ahead and refresh my app okay let's see sometimes it takes a second so let's give it some time and there you go okay so yeah while it says successfully deleted and you get the transaction id on the blockchain it still needs to verify it that takes some time so once it's fully verified it can now then it deletes it so now when i refresh and i go here you see the ferrari one is actually gone so now if i create a new task let's go ahead and hit the plus sign so when i hit confirm this will add the task okay boom where we got a new task and now i can actually hit let's go ahead and refresh and where's my new task go okay now it's actually there so even creating tasks takes a second okay so that's why you have to wait a little bit and now i can actually remove it okay so successfully removed i have the hash the removal but it's going to still verifying on the back end right the blockchain side so see now the new task has been deleted and it is not there guys this is amazing if you've gone this so far huge props to you alright so i really hope you guys enjoyed building that to-do list app and you got to learn a ton of solidity con concepts how smart contracts work how you actually interface your front end with the blockchain component it's mind-blowing stuff and we had authentication in there so if i actually log out and i log in as a different user you won't see these tasks there and you won't be able to delete these tasks and you won't be able to interface with them so we have all of that and then some and it was so quick and so nice and we didn't even use a database which is mind-blowing and cool i hope you enjoyed it huge credit and shout out to code with kavit you should check out also his video huge shout out to him so for a lot of the ideas in this video and some of the code for the code for the smart contract and a lot of the inspiration okay so that was really awesome and so thank you code with kavit the huge shout out to you and again guys as always i love your beautiful face thank you so much for watching and i'll see you in the next videodo you want to master solidity do you want to finally understand it and wrap your brain around it well guess what we are going to build a to-do list app together in my opinion this is one of the best ways to learn how solidity works how smart contracts work is this app the scope is small it's a simple app yet it's very powerful and effective and it'll get you to understand how a lot of functionality and solidity works how can we use solidity along with truffle to make your smart contracts how do we add a task and delete a task and show all of the tasks how do we add a task so that it actually adds it on to the blockchain and when you get all the tasks your front end will go to your back end or your blockchain and get all the tasks from there this app will also have full on authentication built into it which essentially means that you'll be able to use metamask or any type of ethereum wallet and log in and log out and this app will only show you your tasks so any other users can't see your tasks and cannot delete your tasks so i think it's a very powerful app i hope that you're excited to use it and with that said let's um smash that like button so this video goes out to as many people as possible and in just a second we're gonna go ahead and demo this app also just real quick want to give a huge shout out to code with kavit who made the video to do app with react and solidity so huge shout out to that a lot of the inspiration comes from that i referenced the code from there okay but i just added in next.js a lot of our front-end completely custom front-end and we wanted to add in our own explanations so you could learn solidity step by step but if you want to check out also his video go check it out he's absolutely awesome with that said let's get back into the video now let's go ahead and demo the app so the first thing i'm going to do is i'm going to connect my wallet and you can see metamasks popped up over here on the right hand side i will select an account select whichever one you want and i will connect and boom look at that our app is up and running and it's like hey what's up kevin or causey or whatever your name is right we'll go there and now i can add tasks walk my dog at 1 pm which is actually something i have to do and then hit this plus sign right here and watch this we're actually adding it to our blockchain so now metamask pops up to ask for authentication if we want to do this i will hit confirm and it has been added on to the blockchain and it is a actual task that is created let's go ahead and create another task i'm going to go ahead and eat my food at 5 pm okay let's go ahead and hit plus on here and now just watch what happens okay let's hit confirm there we go it has been confirmed the front end is looking pretty nice but the main point of this app is not the front end it's that you could actually using solidity add tasks and things to the blockchain and it will really clarify and make you understand a lot of things of how solidity works and how smart contracts really work now if i hit delete on here this icon right there you'll see it'll actually delete that so i'll hit delete and then let's wait a little bit and let's refresh and let's see if it's been removed okay boom i hit delete and now it actually asks me to make sure that it's confirmed and now once i confirm it okay you got to give it some time before it will actually just completely get rid of it because we are removing it we have to let the blo our back end on the blockchain side know that we're actually going to be getting rid of it and now it's basically gone and this is happening on the blockchain side so i'll show you how we're doing this on the blockchain side so you can understand and since it's a blockchain you're not technically completely deleting it but we're filtering it out on the block end and so you'll get to learn how to do that so this is the app i think it's really cool i think you can have a lot of fun building this with me with that said let's just start building this bad boy up now all right now make sure to click the link in the description below this is completely free and this is a template that i created for you solidity with the to-do list and it's going to have nextgs and tailwind css and all the front-end code essentially just ready because i would just give it away i would want you to simply focus on the web3 and the blockchain part so this rebel for you will have all of that code already there and then you can only work on the solidity part okay so make sure to go here and if you want to use this make sure to hit fork rebel because that's the only way you'll be able to code in here and use this template okay and the link will be below and it'll be join.replay.com slash cp dash solidity dash to do so you could type that in or just click the link in the description all right with that said i'm going to go ahead and fork this rupple and once i fork this it should bring you to a page like this and all this means now is you can actually code here and so the benefits of this rebel that i've sent you to is in this one you will have next.js already installed all right you'll have tailwind css already installed and configured all the front-end code is already completed so you won't really have to do any of the front-end code okay majority of the front-end code is complete okay let's not say all because there is still you're going to still need the right front end code that needs to interface with the back end okay so that's done truffle has been installed so truffle is i'll show you how to install it but i installed it already for you because it takes a really long time to install so i'm like hey i'd rather just have that process speed up okay this is done this is done most of this is done and then this is done okay so that's the real benefit of this rebel that you're actually looking at all right so let's get started with that said what i'm gonna do now is i'm gonna walk you through majority of the code okay what's there so far and what you should find in here okay so you should find a client folder and that should have all of your front-end code okay so i'm going to walk you through that a little bit and then i'm going to walk you through some other stuff but first just make sure in your package manager all i want you to do is install truffle so you can type in truffle and normally what would happen is you'd have a plus sign here to install it you don't right now like a plus sign like this you don't right now because already installed okay so that's already done so let's go here the next thing i want to show you is in your client front end in your package json you're going to need access to some libraries like react icons or next or some tailwind stuff that's already there for you okay so you don't have to install it you could yarn it but you don't even need to do that because like the node modules are already there as well so you should be good to go on that end so react icons you already have it then auto prefix for post css until when css because these are all the things you need for css this the tailwind files you need for so yeah your tailwind is ready to go cool so that was one thing i had to explain to you now let's walk through the actual app so let's first take a look at it so you should be able to cd right now into your app into client and then just do yarn dev and that should start running your app so let's take a look you can also open it in a new tab if you want to just fully see it it takes a second to just be a little bit patient and there you go your app is up and running okay you can zoom out if you want i'm going to zoom in because i'm on a big screen so i want you to see this and right now writing on your app will not work because that's the back end part and you haven't added any back end code so really nothing is going to happen okay it's just gonna refresh and that's it yeah right now there's no front end so whatever you do nothing is really gonna happen but you have the nav bar right here you have the entire to-do list app you have this to do thing and then you have this plus button right over here so that's mainly the front end right now so let's go back and what i want to show you is these are all the components that i've already created for you okay so the connect wallet button nav bar all of those are there okay so navbar task to-do list so those are already there for you okay connect wallet button and wrong network message now some of this stuff you're probably like okay how do i see the wrong network message or connect wallet button because i don't see them right now so here's how you can see them so let's go into our index this is the main file where everything is happening these are all the nodes for the app but i'm going to just walk you through them together so we won't need them so i'm going to get rid of them okay and let me just walk you through the entire code base okay so let's put that here and let's just walk through the entire code base now all right so we're importing some of the components that we had made but here's what i want you to actually see all right the main part of the logic so these are functions that are just going to be empty all right these are functions you're going to have to complete these are the back end functions so connecting the wallet being able to get all the tasks from the back end being able to add a task to the back end and being able to delete a task from the back end so this is all backend related okay all three of these functions so when i say backend in this case it's the blockchain part this connect wallet function is going to just simply be connecting wallet to metamask to any type of ethereum erc20 wallet whatever all right so those are the ones that we're gonna work on and this is the other main part that i have already handed over to you so this over here this div there's not much to really worried about here but this is really styling it if i get rid of all of the styling here it's just going to look like out of whack right so that's just a wrapper that's all that's doing so i'm going to bring that back and they'll just contain the app put it in the middle add a color in the background centralize things so that's what that's doing okay so now you can even pretty much not really worry too much about this piece of code this piece of code the main piece of code that i want you to focus on now and worry about is this guy right over here okay and that's really the main logic of the app so far which is hey check if the user is logged in and if they're not logged in show them the connect wallet button okay so here i can make a user be let's just fake a not logged in user and what that would look like how we can do that is just remove that boolean that exclamation mark let's remove that exclamation mark so it just says is user not logged in so now it is true that the user is not logged in okay and if that's the case then show the connect wallet button so that's why it's showing that button right there and now we the other situation we have is hey is this the correct network okay so basically if the user if we go back to the other situation okay which is the user is this basically says the user is currently logged in okay because there's a double negation here negation here so it just means the user is logged in so the user is logged in we bypass this component we don't do this we do the else statement okay so this is our else statement so if the user is logged in then we want you to ask one more question is this the correct network if we're on the correct network which in this case is going to be the rankinby test network then show the to-do list so then show this but if we're not on the correct network so i can mimic that as well by just adding exclamation mark here and saying we're on the wrong network so if we're on the wrong network then it's going to not render the to-do list but render the wrong network message component and this is a pretty simple component there's not much going on here it just says please connect to the ring could be test net and reload the page so this means you tried to connect to some other network like raspin or something else so that's what's happening there right if the user is not logged in and this is not the correct network then show the wrong network message okay so those are the three components and you can toggle them really easily by just removing if i remove both of these right then it means the user is not logged in and they'll show us the connect wallet button if the user is logged in then it'll show us and it's the correct network then it'll show us to-do lists and the to-do list pops up so just play around with that so you can just understand the logic that's happening here okay because that's the really kind of important part and then of course we're going to make this more dynamic because right now this is just hard coded here but we're going to actually get access to the user using their ethereum wallet so you're going to need to complete the connect wallet function for that okay and then you'll be able to actually keep track of the logged in user and then where it says is this the correct network same thing it's you're just going to pull that information from connect wallet and your connect wall will be able to tell you if this is on ring could be the user logged in or the user logged in somewhere else okay so the connect wallet function will take care of both of these states that you need to be really tracking okay these are also going to be states right or so we're going to be using a little bit of react for that so for now what we're going to do is we're going to go ahead and tackle really the most difficult part first which is we're going to be going ahead and making our smart contract first because really majority of this code like especially all these parts right here they're really going to depend on what your back end is like aka what your smart contract is like because here you it's like imagine writing code without knowing what your api is going to look like everything you're going to write is going to be wrong so we're going to make our back end first and the api or whatever first and then from the front end we'll simply just interface with it okay so i hope that gives you a lot more clarity of what we're doing and now we're gonna go ahead and do that okay so let's go and create a back end now so this is our front end okay this is our client front end we're going to create a new folder okay at the global level i'm going to hit folder and make sure it's not inside of client make sure it's outside of client and this folder we're going to just call it our back end or the blockchain part okay and we're going to go ahead into our command line and we're just going to cd into that so hit ctrl c to end hit cd dot dot so you can actually get out of it and now we're gonna go cd back end okay and now if you're in your back end now we're gonna go ahead and say truffle init okay so just type in truffle in it all right so once you do truffle init if you look in your back end you already you have files now so you have truffle config you have a test file in migrations contracts another reason why i'm doing this on replit is you don't have to worry about this installation nightmare that often happens while you're coding along on a mac or a linux or a windows and you can't get a solidity thing to install or a truffle thing to install or next install so everything is already installed in there for you okay so just make sure that you've forked the correct template and again it's in the description if you missed out on that earlier all right so i've done truffle in it now my like template project is ready to go now we're gonna basically go ahead and create a smart contract so this line over here that says truffle create contract your contract name we're gonna go ahead and use that command to create our new contract okay and that's gonna create a scaffold of a contract so just like bare bones contracts i'm gonna go ahead and say truffle create contract and then we're gonna go your and sorry not your but we're gonna say task contract okay because we're gonna make a contract for our tasks so essentially we're getting a back end for our tasks all right let's do that okay so this contract will allow you to create a task and add a task and show tasks and filter tasks it's going to be all task related now if i look inside of my contracts i will see task contract dot sol okay so let's go inside of here and now it's going to be the really meaty fun part because we're actually just going to be writing a lot of our logic here for our code okay so this is going to be all of our backend logic so it's going to be actually a really important part great let's walk through everything step by step because especially if you're new to solidity i just want to make sure that you understand every possible thing okay so i'm going to zoom in so everything is super nice and clear all right first thing right here this is oftentimes you will see it in solidity just add in some kind of license okay so just you can copy paste this exact one right should be there already now the solidity version that we want is a specific version in this case and i want 0.8.15 okay this is a version that i want every single line of solidity that you end you have to end it with a semicolon if you don't you will get an error or your app will break okay so that's important and here whenever you're actually writing a solidity file you pretty much always have to do contract task contracts so imagine like this is function or a component past contract but it's literally just a contract and then this constructor we don't need it so we can actually get rid of that constructor okay in here we're gonna have two events so i'm gonna have an add task event and it's going to take in a so let me write it like regular javascript first so it's going to take in a recipient and it's going to take in a task id okay so this is how you might write something in javascript or you're like okay i'm creating a function or whatever and this function takes called it's called at task and it takes in two parameters recipient and task id except in solidity you have to say those their types so recipient will be a type address okay so those wallet addresses like whatever the wallet address is like those are specific types and solidity and you refer to them as address and then task id is going to be an an unsigned integer okay so we will say ooh ins you int and then we're also going to need an event for delete task okay and delete task is going to ask for a task id and it's going to ask for hey if it's deleted or not the task is deleted or not okay and task id is gonna be a uint okay and then this is going to be can you guess if something is a true or false what data type is that if you guess bool good job okay so that's gonna be a boolean all right now we're going to create a data type that's going to represent the following structure so let's go into our index file and i just want to kind of show this to you in index our tasks will have the following structure so this is an array of tasks but this is an object or in in solidity you might call this a map or a struct this is this right over here okay is an object here right javascript this is what one task will look like it'll have an id text and whether it's deleted or not okay so that's what one task looks like so if i go ahead and i go back to my task contract you could do command p for what i did and then just type in task contract okay so we're gonna now create a structure that mimics what we saw so i'm gonna go ahead and do struct and task and this structure is just going to say hey it's going to take these are the keys okay so we're going to have an id we're going to have task text and we're going to have is deleted okay and the last thing you want to tell the struct is what are the data types of each of these so for id my data type is a uint for tasks text is going to be type string and for is deleted it's going to be a boolean okay so in solidity if you want to create let's say something with an object right if you want to create a task like if i go back to this task right here if i want to create a task like this so let's copy this and let's come back into our task contract and let's paste it if i want to create a task like that i can use a struct to create that exact task so i can go task and then let's say i pass it a 1 i pass it clean and let's say i pass it false sorry zero it's going to create that exact task so this is gonna return and turn into an object okay so it's almost like you're calling a function or whatever okay it's a constructor it's a task and then it'll spit back out that okay so that's how that's why you need structs and when you use a struct you will get back what we call an object in javascript okay this is just to give you a little reference okay so i'll leave that reference up here and this is a task okay this is what a task will look like okay great so we have our task struct and now what we want to do is we want to have an array that is filled with tasks so when you're creating that you're going to basically say hey i want to create an error so let's just do it this way okay so i want to create an array called tasks in javascript you would just do this but here this is not javascript right so i want an array called tasks now what i want it to be is i want it to be of i want it to be an array okay and it's gonna have it's gonna be an array and it's going to be filled with these objects okay so if you try to put integers into this array tasks so for example let's just say you try to do tasks dot push so let's say you have this variable tasks available to you now okay and let's say tasks is an array now if you try to do task stop push and put a 1 it's going to go it's going to give you an error because it's going to say hey that's not the type that you told me the type that you told me is going to this is the type this is what it should look like but now if you actually put let's say something that looks like this in here if you try to push this it's going to accept it it's going to go yes this exact thing okay this is an integer this is a string for task as a boolean yes i will accept it and it will add it okay so you're creating these strict types so it's like typescript if you've ever used it and then we're just gonna say this is private meaning that anybody outside of this function should not have access to it okay and then we're going to create a mapping which is going to be helpful for task to owner so we'll say mapping and i'll say you ins 256 address task to owner so i know this is probably like what the heck is this all this part means so this part right over here just a variable okay we're just saying hey crea initialize a variable called tasks to owner and the type that it's going to have is this and all this means that anytime you create task to owner you're going to have an object that looks like the following the key this represents this part right here represents a key right over here represents an address okay obviously and an address might look like those wallet addresses might look like that okay so here let's just say that this is the wallet address of qazi which is me okay and then we go boom all right task to owner and then boom we will have another task like this oh not in the same thing but let's just say we have another task and this is task one and this is david okay so how this will work is imagine this you have two tables okay and on the left hand side we have a table called tasks and then a right hand side we have a table called owners okay and just say walk to dog might be a task and then here on the right hand side for owners you have all the owners like qazi whatever but the way that we're storing it is in the following way so we're giving this task an id of zero so we're gonna set the task id here is zero walk the dog and inside of owners we're gonna say the id of zero belongs to let's say kazi and almost like in sql this will allow us to do an inner join and match all these tasks so this way the app will have proper authentication and it'll show me only my tasks not somebody else's for example if for one we had clean dishes but that was like david created that then this would basically say hey this was created by david okay so then when qazi logs in qazi will only see walk the dog and when david walks in he will only see clean the dishes okay so the id inside of the task and this id this key over here these are the two pieces of the puzzle that allow us to do an inner join and find the who the tasks belongs to so this is a structure this is what mapping blah blah blah whatever is okay this is what it'll look like so i'll get rid of that for now okay cool now next up we're going to create a function and this function we'll call it add task all right let's keep on rocking and rolling here so our add task function that we're going to make is going to take in a task text and it's going to take in is deleted okay so here's what i want you to imagine right now this function that we're actually creating here right now we can actually call this function from our front end okay so imagine that we're going to be calling this from our front end at some point and how we're going to be calling this from front end at some point is going to look like this from our front end we're going to do task contract dot add task function and then from our react slash next.js code we're going to pass in a text like walk the dog and then we're going to pass in is deleted as false or true so we're going to let's say pass in like this is not currently deleted this is so deleted is deleted as false so this is add task function or method or whatever you want to call it that we are creating that we can interact with eventually from our front end not right this second okay so that's what we're writing just keep that in mind all right now since this is solidity we have to tell it what types these are so task text this is this string and when you do string you sometimes have to write memory there so we'll just write that and then this one is a bool okay so that's what that is all right so we're done with that part now what we want to do is we want to basically say that this function is external so we have access to it from outside of this too and external basically means that this function isn't really doing isn't really returning anything in this case okay so we're gonna go ahead and say we're gonna create task id and what will task id be so think about it like this okay say you have an array of tasks so you have an array of tasks and that array looks like this like this filled with these tasks okay so we got task one we got task two task three what we wanna do is we wanna generate task ids here right and we want to generate preferably a unique task id most of the times and we also want to just make it simple like the first one should be zero the next one should be one the next one should be two so on and so forth it's easy what we could do is say that this array is called tasks what we could do is we could just say when we're creating this task we could just for the id we could just say hey grab the tasks and grab its dot length so if i get this task's length well i get zero well when i get this task's length the second time i get one when i get the tasks length the third time what do i get hopefully you guessed it okay you get a 2 right simple we're just going to say it's going to be tasks.length okay and we're pulling the tasks from there make sure to put a semicolon so it doesn't error out next up what we're gonna do is whatever task the user passed in we need to append that to our tasks array ray that's made up of these task objects okay so i'm gonna say tasks dot push and now we're going to create that object so i'm going to say task constructor then give it the task id that we just created right there we're going to give it the task text and then the is deleted task text and is deleted so this will push it on and basically what this is doing is this right here will basically get simplified to that right there okay one task is going to create one object one map all right next up we need to set up that database of tasks to owners to create that relationship so i'm going to say task to owner okay and i'm going to give it a task id for task to owner so remember this variable that we made tasks to owner and so it's going to take a u int right and the uint in this case will be zero for this task for the next tax is going to be one for the next task is going to be two and this over here needs to be whoever the user is okay so user is gonna go right there okay the logged in user in this case we're just gonna say message.sender this is a special thing in solidity msg message and then if you do dot sender it'll get the wallet address of whoever was currently logged in let's put a semicolon here let's put a semicolon here okay and then we can even emit this so we can submit add task and i can say message sender and then give it a task id remember we created this event at task and now we can admit it but we just need to give it an address for the recipient so this is the recipient and then this is the task id right giving it that task id perfect so in terms of the add task function our add task function at this point is complete i'm going to remove these tasks at the bottom or i can leave it and just comment it out all right the next function that we need to add is our get tasks function okay or get my tasks function so let's go ahead and do that so i'm going to say function we'll say get my tasks and we're going to say external view returns and we can even say what this will return and this will return a task like object okay and now let's open this function up and start writing okay so we're going to create a variable called temporary okay and so temporary is just going to be an array and what we want to do is we want to keep pushing new tasks to it that are of that owner okay so temporary will filter for the owner and for non-deleted tasks okay so get my tasks we want to do is we want to get tasks that let's say that have that are mine and not yet deleted okay so temporary okay and it's gonna give a new task like object we'll instantiate it like this okay and this array that we want so temporary is going to be an array and this array that we want so in solidity you could give a size of the array so if i said array of let's just say 2 or whatever or 2 right here then what will happen is i will get an array of size 2 and no bigger like it can't go bigger than size 2. it has a fixed amount of slots and so what i'm going to just say here is tasks.length why because i want this array to be obviously no longer than there are tasks that wouldn't make sense and this temporary here it's going to be this it's going to be an array of these these tasks okay and we're just gonna say memory perfect okay and let's put a semicolon there let's put a semicolon here if you miss any semicolons it will break so just keep making sure to put semicolons everywhere all right now we're gonna set up a counter that i'm going to set to 0 and then we're going to write loop through this and so i'm going to say for u int i equals 0 while i tasks dot length okay i plus why are we doing this we're gonna loop through all of our tasks and then we're just gonna keep adding them to temporary and we're gonna do a check here so i'm gonna say if task to owner of that specific task is equal to the messages sender meaning if this is my task so let's say that there is a task owner that has a key of zero right and so if we look at that and we go and get the key of zero and we go okay the task is whatever if this is going to turn it into its value is going to be an address and if that address of that task matches the address of who's logged in then that means this is these are my tasks okay and we're gonna add in one more check and we're going to say hey check if tasks is deleted is false so making sure giving me tasks that are not yet deleted let me zoom out just a little bit so give me tasks that are not deleted okay so if this is the case what i want you to do is set that task in that specific position this is just a way of writing a push okay this is just another way of writing a push i want you to get used to it because in solidity this is like pretty common people do it like this or you're just really basically saying in the zeroth position place this in the first position of that temporary array place this so if you imagine temporary is an array of size two so let's just say it's empty empty right now what this is saying is hey go to position zero so this is position zero and then set that to that specific task so tasks text hello is deleted false whatever so add that task there and then go again loop again and then if you find my task again that's also not deleted at that here okay so that's what's temporary is and then we just increment the counter by one so we will do counter plus okay so let's get out of this and then all we're gonna do is we're just going to spit it out in something called result and result is going to be the length of the counter not the length of the entire array so result is just going to be so if my tasks were 2 and the total tasks were maybe 10 then this result is only going to be of size 2. and we'll loop through this so i will say i is equal to zero i is less than counter i plus and then i'm just going to say for result of i just set it to be of whatever is in temporary of i okay and then at the end we're simply just gonna go ahead and return result okay so that's my function here's my loop then i do my loop again and then i return my result okay so that's what's happening there just make sure to put semicolons in all the right places don't miss any semicolons i'm gonna call this on my colon okay great so we're good with get my tasks okay the next one that we're gonna work on is add task where does the whole tract end so let's see contract ends right there okay cool let's go here and we're going to go ahead and say function and it's going to be a new function we're going to make and this function is only going to be for deleting tasks because we already have a way to add the task we already have a way to get our tasks now all we need to do is be able to delete tasks okay so i'm going to go ahead and say task id is delete task wants a task id it also wants is deleted or not okay so we can just say bool and just make it external great now i'm going to say if the task to owner so it's basically if it's if i am authenticated to be viewing this or doing stuff with it so this is my task that was given then what i want you to do is get that task id and set its is deleted to be is deleted whatever it was passed in which you honestly don't even have to be past this it should just be set to false but like you could do it like this as well that's fine you can set it to true i'm sorry true so just okay it's deleted as true and then we just emit the events okay this is not completely necessary but you could do this now basically just so you can visualize what's happening is from the front end how we're going to call any of these functions from the front end we want to be able to just do task contract that delete task and then we give it a task so we give it like an id so we give it zero i'm just mapping this to that and then we give it this so we just go true so that just means hey i am confirming that i want to delete this specific task and i'm saying zero comma true and then it will confirm and then delete that task okay but realistically all we're doing is we're not really deleting tasks all we're doing is setting its deleted value to true and then in our get my tasks we're just filtering for it we're just really there's just a filter okay and that filter all it does is it just doesn't show you anything that has the deleted value set to true okay so filter is filtering is happening here specifically okay make sure it's not deleted is what that line is saying and then here we're just marking so think of it like we're just labeling it as deleted and then we're just filtering it because on the blockchain you can't really delete anything all right cool and then now we can get rid of this so with that said our smart contract part that we wanted to write our smart contract is done all right so if you've gone here really good job awesome job and now we're gonna go ahead and move forward okay now we're almost ready to interact with it from the front end we're very close but not completely there yet so what we have to do is get it ready to be interacted with from the front end so we'll need really two things we'll need a contract address a deployed contract address we need to deploy this okay so that means almost imagine like deploying it to the web and then you can access it from your front end okay or you're deploying it then the second thing we need is access to a which if i want to make your life really simple it's literally just an ape that will allow you to use all these methods okay so we need this and we need abi okay now luckily for us gets created pretty easily in the back end okay i'll show you where that gets created once we go ahead and create it for now the most important thing is we need to get a deployed contract address all right now here are the steps that we're going to take so in our back end let's go ahead to our migrations and in here we're just going to rename this to task contract everywhere so task contract that should be task contract and that should be task contract once we're done with that we're just going to download this entire project so everything from ruppel okay we're going to download it as zip on our local computer because for this part we need two terminals and in rupple replica currently you can't have two terminals open at once and so i'm just gonna go ahead and download it and then we can use it locally if you have ever if you ever have problems with downloading just simply refresh your rupple and then just go ahead and try downloading again and then it should be fine all right so now we have the zip file let's go ahead and open this up this zip file once it's opened up in your command line i want you to go ahead and cd into it so let's go to our downloads and we're gonna find where that is so solidity template two or whatever okay so i'm gonna go ahead and do template let's see if it's cd solidity template 2 perfect so now i'm inside of this okay folder and now once you're here first things we want to do is this we want to go ahead and install truffle if you don't have it on your local computer just do yarn global add truffle okay or ndx global or npm global at install truffle whatever okay so you're gonna need that okay you need to add it globally you can't if you do it locally it still won't work so make sure you install it globally and then it'll work okay so now we installed truffle globally now what you want to do is cd into the backend folder and you want to do truffle dashboard and this is super cool it'll actually open up a truffle dashboard and you want to deploy it with your own specific wallet address so it allows you to do that so you can actually click meta mask here all right and then it says hey confirm that you're on rankinb network and yeah i believe that we are so let's connect it okay so now it says there's a green sign here that says connected zoom in there perfect okay so now that it's connected i can get out and i can just hit confirm okay great so now this is good now let's open up our command line we'll leave this dashboard running and just open up a new tab okay so open up a new tab so this one is running or open up a new terminal whatever you want to do is whatever is easier for you okay now we cd into that same place solidity your cd into back end and what we want to do now is go ahead and do truffle migrate dash network dashboard okay so this will compile all our contracts so there's an error you forgot to put semicolon so i'm gonna go ahead inside of our contracts and i'll also make sure to put a semicolon here and here okay but more importantly we need to actually fix that on our local file so let's go ahead into our task contract dot sol and let's see if i can open it with code runner because it's just quick you could do it with vs code whichever one it doesn't really matter okay and i'll go right there wherever i'm doing the emits and put a put a semicolon here and a semicolon here and just save it okay i'm gonna get out okay let's open up our terminal again and let's try it one more time now it's deploying it look at that already popping up over here that is pretty freaking cool huh waiting for transaction signature please check your wallet for a transaction approval message okay so we're gonna go ahead and now hit process so let's hit process boom our wallet just opened up go ahead and hit confirm okay and now it's just deploying it to the internet okay or the blockchain rather and boom there you go it's been deployed now the very important thing that we need here is the contract address so double click copy that because that's what you're gonna need okay everything else you don't really need right now let's go back to our replit and let's open up our shell feels like a ritual feels like a crazy ritual cd into back end okay all right now that i'm inside of repple and i'm in back-end i'm just gonna go ahead and do truffle compile so now once i compile it's going to make my api for me so let's go ahead and see that build contracts boom we have our task contract right here and task contract.json that's our abi aka our api and what we're going to need to what allows us to be able to talk to this from our front end okay so with that said data successfully compiled we're done with that now let's go ahead inside of our client folder so let's go here and we're going to go ahead and create a new file and this file we're going to call it config.js so just pretend like i didn't have this file okay so we're going to create a new one didn't mean to have that file okay we shouldn't have that file okay so let's just pretend you never saw that all right and go into clients and you're gonna make it because you're not gonna come with the config file okay so let's go ahead and by the time you're seeing this tutorial dutch problem should already be fixed and you shouldn't even have a config file so it's great all right now in the config file what i need to do is i need access to that specific contract address that i had copied earlier if you don't have it copied earlier just go ahead double click here copy it now okay and there you go that's the address so just to export const con task contract address equals that okay and this is going to be pretty important so make sure you leave that in your config file okay because this is the contract address we're gonna need to be able to speak to it from the front end so almost imagine like this is your access token okay you can need access to your access token now let's go ahead into our index.js and now we're ready to actually start writing up all of our code so we're going to go ahead and import task abi and we can just say from and we want to get to our task abi is coming from our back end task contract.json right here so we just need to import this file taskcontract.json so we gotta go into back and and then inside of backend where do we need to go into we need to go into build and then inside of that when you do into contracts and then go taskcontract.json okay if you copy linked that should that's actually a different link that's not the path so ignore i said that cool all right there you have it so now we're importing that address okay that's one thing that we need access to the other thing we're going to need access to is a contract address so let's go ahead and do import task contract address from and this is much closer to us it's just in our config.js you can hit that over there to just purify your code all right now that we have our task api and we have our task contract address now we're really ready to actually finish writing all this code because those are really some of the main things that we needed access to all right first thing we're going to do is implement our connect wallet function okay because that's going to be kind of the sim one of the simplest simpler ones and one of the most important and the first thing that happens so for that we're going to need ethers okay and ethers is something that you'll have to install if you don't have it already so we could just go and check if we have it all right let's get to work on connecting our wallet so the first thing i'm going to do is i'm going to pop it into a try catch block we'll add the catch as well okay and the catch is going to be just simple it's going to be hey there's an error just say air okay cool and then in the try we're gonna basically write all of our logic so i'm gonna say hey grab ethereum from window so whenever meta mask actually like latches on so to speak on your app so whenever you like log in with meta mask or whatever the window like the chrome window or the safari window or whatever you actually have access to a variable called ethereum okay so you could actually destructure that it becomes a property of window you could destructure that out of window okay so we're gonna grab access to ethereum and then we're gonna say if ethereum does not exist so it's like value is null or whatever then we're just gonna say metamask not detected okay and then we're just gonna end the whole thing just hit return it's kind of like a guard clause okay just make sure that's there okay all right we're gonna check the chain id and we're gonna get it from ethereum our request and the method that we're looking for here is going to be eth chain id okay that'll get us the whatever chain somebody logged on with that specific chain id okay and then we can just say hey this person connected to chain and then we can just write a chain id okay great so let's go ahead and set a rinkeby chain id and ringkiby chain id is 0x4 okay that will make sure that the user is on rank to be indeed rinkybee is a test network and it's also what mine what i named my cat after and then we're basically gonna say hey whatever the chain id that the user selected if that's not the same as the ringkiby chain id and in that case you're not you're not connected to the rank of b test net right and then we want to now start getting some state variables into play so let's go ahead and create a couple of state variables we'll just start off with const correct network we'll have set correct network okay and this we could set it as false in the start the network that's selected is fault like not the right one but then when it's set up correctly we're just going to go ahead and call this and say true because it's going to be the correct one and then we're just going to end this function because we got the wallet and we got the change so there's nothing to do anymore just end everything if that's not the case then basically we're gonna hold on let's see oh i'm sorry this should be false because you're not connected to the ring could be test network and then this one should be true okay that means yes we are connected correctly so there we go true okay once that's done let's get our accounts now okay so the account is this if i open up my meta mask yeah i guess i could open up my metamask here as well count three right so that's an account out of many other accounts so you can see i have multiple other accounts right one two three whatever so we're going to say accounts and we're going to await and do an ethereum dot request okay and we'll say method on this one is going to be let me hide this you can see clearly method is going to be request accounts all right once you do that it'll request the accounts and it'll open up that modal where it like hovers over and by modal i mean this thing right when meth metamask actually pops open so that's what that will do and then we want to do is we want to say found account and show the zeroth account or whatever the account that the user pretty much selected okay and once the account is set then we need to actually keep track of the account as well so let's go ahead and add a few more state variables so here i'm going to have is user logged in or not because we need to know that so we're going to say set is user logged in initial state is going to be false obviously let's also go ahead and import use date because we're going to need access to that so let's just do use date hit enter and it imported it okay all right it says user logged in perfect and then the next one i'm going to need access to is current account okay so we can actually say current account set current count and make the current account empty and so we can say the user is logged in at this point so i can say this is true and at this point current account we have access to that as well so we can actually say set current account and we can actually give it accounts of zero okay so both of those things are now done and at this point we're done with the connect wallet function okay now all we want to do is we want to connect the connect wallet function to our component connect wallet button so let's pass this function down because we're going to need access to it in this component so i'm going to say connect wallet give it connect wallet or function okay so we're giving it this function now let's go to connect wallet button and we can destructure that connect wallet and then we can add an onclick method so you see i even have these nice little notes here for you so you could just go on click and just say connect wallet so basically just run that function when i click it now let's see if we've done it correctly because if we've done it correctly it should be working perfectly okay so let's go ahead and say the user is currently not logged in so let's remove that and let's see what happens i'll hit refresh on here okay let's go ahead and open our reply make sure you do yarn cd into clients and then do yarn dev that should pop it open okay we should have a button coming up here anytime now all right we have this button right there let's go ahead and click that and boom look at that that popped open that is very nice let's make sure that we're looking at our console log as well okay connect it to cheon i misspelled it but whatever you get the point chain let's hit so this console log worked okay let's hit next let's hit connect and boom found account shrinkaby right that is awesome let's go back let's disconnect our account so we can go ahead click that fox go ahead and hit disconnect account you could change your chain as well so you could change from rinkaby test network so make sure you have wrinkly test network right so if you don't have rinky test network you're gonna go ahead and click you're gonna click here you're gonna click show and hide test networks and you're gonna turn on test networks and once you do that these test networks should show up otherwise you can go inside of your settings go in advanced and you could scroll down and you could see where it says show test networks and you could turn it on that way as well okay now let's say you do rawspin or whatever connect wallet and it says hey you're not connected to the ringtobe test right so that error comes up right away and catches it so it seems like we are ensuring that the user is indeed connecting with rinkeby test network and then it pops it up and then it allows you to connect we can hit connect and boom there we go and then it pulls the account that you connected with specifically so far it's working beautifully all right next up since we're done with our connect wallet function and it works perfectly next up we need to work on get all tasks so we should be able to get all of our tasks or rather let's actually first add the ability to add a task okay so let's look at this code right here note right here it says add tasks from front end onto blockchain so we all we need to do is we need to just complete this function now okay add task how is that task going to work first of all we're going to go ahead and prevent default because it's going to be a form we're going to fire off on and this will avoid a refresh okay so this is avoid refresh that's all all right and then and then what we want to do is we want to do we want to create a task okay and this task is going to be the text is going to be whatever the user inputs so this is going to be a state variable that we're going to keep track of and this will be false because whenever you create a task initially the it is deleted will be false so let's go back up let's keep track of input as well so we're going to say input set input and use state use state and it's going to be empty okay all right so there we go and then what we're going to do is we're going to try we're going to have a try catch block here okay and the catch is just going to be simple the catch is just going to catch the error and then it's going to just console log the error okay all right so now for our tab for our try block rather we need to pull some of this code is going to be repetitive some of it you've already written we're going to get access to ethereum and then what we're going to say if ethereum so if it exists and your log ethereum is there then what i want to do is i'm going to grab the provider so we're going to do ethers dot providers dot web 3 provider and give it ethereum okay so in other words we're gonna give it like it's really meta mask even though it says ethereum here this is like actually metamask okay so that's really what's happening here so this is really meta mask and we're passing it the metamask provider okay hopefully that clarifies it for you and then what we're going to say is going to say hey grab the signer aka the person who just signed it and then we're going to call the co our task contract okay now we're ready and we're going to do new leaders contract and so we need to create this contract we're going to get our specific contract so for our specific contract it's going to need access to our contract address is going to need access to our abi okay and then we're also going to need access to our signer so now this will allow us to get access to task contract and all of its methods like add task delete tasks get my tasks everything that we created in our smart contracts if i go to our sol file or task contract file this will have access to all of these now okay so let's go back to our index and now that we have access to all of this since this is the add task function which method do you think we'll need to call after we get access to all of this simple after this we need to actually call our task contract dot add task and we need to grab our task text give it that and we need to give it is deleted okay so here for example is our task this will be the input that the user gives and this by default will be false okay great task and we can then do you know since this is going to be a promise we can then just get the response you don't really need to do much with the response and now we'll just set task set tasks rather and so make sure we we want to create a a state variable that keeps track of these tasks as well so we're going to say tasks set tasks okay and i'm going to say use date and in the start it's just going to be an empty array and so we're going to say set tasks and now we're really just going to say whatever tasks was previously plus that new task we just end added so this is really just appending to our task array okay that's really what it's doing and then we can say console log completed task or added task okay perfect and then what we want to do is we want to add a oops i want to add a dot catch and we want to say it error and then just console log the error okay perfect so we have this if and then to this if we want to write an else and we just want to say console log ethereum object does not exist okay so just in case we like don't get that ethereum object cool so now we can actually add a task and all we need to do is we need to connect it to our front end all right so what does that mean what that means is let's go ahead and let's put it in a state of that the user is logged in so i'm going to go ahead and hard code that oh sorry actually we don't even need that anymore we could actually put the actual dynamic state and we can just say is user logged in and if the user is not logged in then they'll show at this button and then if the user is logged in then it'll take us to the next thing okay so let's go ahead hit connect wallet let's go ahead and without this let's refresh okay great and let's see are we actually connected or are we not connected okay cool we are connected let's change this user logged in save it let's go back boom now let's see what happens once we connect so i'll go ahead hit connect wallet let's choose connect and boom it brings me in okay so this is the final version and we can leave it like this okay so this is already working dynamically if i disconnect it should take me back to the home page let's go here let's try disconnecting okay let's refresh boom it brought me back to the home page now let's try it one more time try connecting and it brought me back to the to-do list app page okay so our is user logged in like that one is working correctly now for this add task this function needs to fire off when we add a task but when i do this and i hit plus but the thing is that this plus sign doesn't have a on click functionality so we need to keep track of whatever the user is typing in here plus we need to actually when the user clicks this we need to add an on click functionality and we need our add task function to actually fire off when the user actually clicks that and right before we do that let's just go ahead and make this dynamic as well so i'm going to say correct network question mark that's it okay so this part is now fully dynamic and it's working okay so now going back to our add task right our to-do list let's go into our to-do list component our to-do list component has a form and then it has this plus button so we have these little notes here right that says hey take the input from here because this is the actual input and the form part and then it says hey add an on click right here to that circle okay so that's that circle right there so we're gonna add both of them so the first thing we need to do is we actually need to update the input from the user okay so we're gonna go back to our index and we need to actually pass the set input hook set input that way we can actually update the input based on whatever the user finds right to set input so that's one thing we also need to give it the add task function so let's go ahead and go add task okay so now we've given it both let's go back into to-do list and let's de-structure set input and list the structure add task now let's go down and one more actually thing we need to give it to is input because to-do list is gonna need access to whatever the input is at any given time so let's go ahead and send it input as well okay let's go back to our to-do list all right now right here i'm going to say value is input and then we need to on change so we're going to say on change okay set input to be the target value okay so whatever we're typing in so this is like a pretty common react thing if you're fuzzy on this like you could watch my other react videos and next videos i go more into detail on this type of stuff and boom so that should take care of whatever i'm typing in okay and then the plus button we need to add the add task function to it so we need to go on click add task okay so that's about it okay that's about it so let's go ahead and let's go write the word eat a cookie let's hit the plus button and let's see if anything happens boom look at that it popped open and it's asking for a confirmation and it's gonna charge me something i'm gonna hit confirm and you can see in the console log it says added a task that is so cool so we were able to actually add a task eat a cookie eat a brownie okay that's the second task let's click plus sign and it's working let's go here and let's hit confirm boom you can see that it says added task was ran twice so we eat a cookie eat a brownie eating lots of food here now you might be wondering hey how come all tasks are not showing up that's because we didn't actually finish writing that method so once we finished writing that method it will actually work okay and now if you're wondering hey why does it log us back out we need to actually just write a use effect hook okay so we're going to go ahead and say use effect let's import it and what we need to say in our use effect hook is simple we just need to run our connect wallet right when our app runs so now if i refresh plugged in automatically okay very nice all right great so far app is looking very good it's doing what we needed to do but now what we need to do is we need to be able to retrieve all of those tasks and then show them onto the screen all right now let's go ahead and get all of our tasks okay so this is like really one of the key methods that we're gonna create because it's going to get obviously all of our tasks so some of the code is going to be repetitive and for that we can just copy this so let's actually first write our try block in our get tasks let's go here i'm going to say try and then catch and whatever error we get we're just gonna console.log that error okay and now in this try catch block some of the code is gonna be simple for getting up to the task contract so i'm gonna copy this and paste it okay so this gets us the task contract address why is it complaining there we go okay cool and now we need to actually get all of the tasks so we need to go ahead and say let all tasks and i'm going to say await task contract dot get my tasks and then we can just say set tasks to all tasks just like that all right else cerium object does not exist okay boom there we go so that right there should actually just get all of our tasks we're getting all of our tasks we're setting all of our tasks so now all we actually need to do is in our to-do list well our to-do list need ask act needs access to our tasks and then we need to destructure it here tasks and i have these notes here that says hey just loop through all the tasks using the task component so we're going to go ahead and just do that now so in our to-do list let's go right there and i'm going to say map and for each item i want you to do the following okay you're going to call the task component all right it's going to be self closing and then the properties we're going to give it is for key it's going to be just item.id task text is going to be item.task text and on click we're going to give it an on click but for now let's leave it okay so on click delete task that's what we're gonna do so i'm just gonna leave that commented out cool now it's okay task could not find this component so we need to actually just import this component and then we should be good so we have created this task component right over here okay so we just need to import that so import task from task all right and that should get access to it and then we just render out the task component and now let's take a look so let's go back to our app let's hit refresh and let's see if it gets if it's able to pull any of the tasks that we've created thus far ah i discovered it okay so we have to actually call get my task we're never called it so how will it know so we need to get all tasks like pretty much right when our app loads and then it's gonna get all the tasks and then it's gonna do the thing okay there we go that was the problem that was happening because you can even see it says hey get all tasks is declared but it's actually never ever used so let's bring that bad boy back let's go here let's refresh and let's see fingers crossed hopefully our tasks should show up all right so we're making some progress so it's not writing out what those tasks are okay so something is happening with the task text let's just take a look task text is the input of the user yep also at the end what we need to do of this add task that we actually forgot to do at the end was we need to make sure that once you hit submit you just reset it to empty like this okay once you're done writing the task just set it to empty okay let's try eat a cookie let's try now and let's hit this okay let's hit confirm and let's see if we have better luck this time we do not have better luck this time all right let's to debug this problem let's just add a console log here and say hey just console log all tasks and now when you go back actually and if you refresh watch what's gonna happen keep an eye on the console log and look at that okay so i'm gonna make it a little bit bigger so you can see that's what he said and here you can see that i have all my tasks showing up okay eat a cookie eat a brownie eat more eat a cookie so lots of cookie eating tasks were there and then we have task text you could see there so our tasks are working correctly they're just not showing up the way that we want them to so we'll fix that now so basically what this tells me is that it's just not being rendered out on the front end so for example if we follow the logic down we're passing tasks to-do list so let's go inside of to-do list i command-click it we're destructuring tasks and then we're looping through tasks so the culprit might be this task component let's command-click into this and if we look here this is the component that should actually be showing the task because this here is the task component right there like this specifically so why is it not showing the task i don't see task text anywhere even though we're passing a task test it's not really doing anything with it so we need to actually destructure and go task text and then we need to actually show that task text right here task text okay so once we do that let's go back and look at that here we go let's say drive a ferrari that's a task let's add it in so so good thing was it was a front end problem it was in a back end problem our back end was working perfectly and boom drive a ferrari now we need the last thing we need is to make these delete buttons work so let's go ahead and add the delete functionality okay now let's add the delete task functionality so for delete task functionality it's not this one is not going to be super complicated this one is actually going to be fairly like straightforward what we need to do is there's going to be some bits of repetitive code like for example our try catch block so try and then we're going to say catch error and then just say console.log error okay and then we actually need to get access to our task contract address so we're just going to repeat this piece of code right here all right so this just runs and the whole point of this is to get us access to our task contract address let's close out this if statement right here and else will just be console log therium does not exist or whatever okay and now within this if statement is where all the magic is going to happen and we're going to go ahead and delete the task so we can just say await task contract delete task and when you delete a task we're going to give it a key okay that key is actually going to be passed in already okay that key is basically going to be like this so for example if you delete this task right over here this task already probably has the key of 5 because we gave it that key if i go to our to-do list we gave it that key right over here the item.id and the id is incrementally loops from zero one two three four five six so on and let's go back into our index so that key is already there so we're going to give it that key so it's like giving it a delete the eat the cookie task aka delete the task with the id of zero and set its deleted value to true okay so now it's deleted value is set to true so we're going to do this okay and then what we want to do is we're going to say let all tasks okay and you could store this so you could say const cons delete task transaction and you could console.log and say successfully deleted and then pass in that transaction and let's put a little tada emoji in there and then we're just going to go ahead and await task contract and get all of our tasks again get my tasks okay and then set all of these tasks so now we're gonna set all of the new tasks because now it's gonna send it to our back end so we're just labeling a task as quote unquote so we label a task as hey this is marked as deleted then we send it to our back and filters it once it filters it okay so once we're done it filters it we on our front end retrieve all of the tasks again from our back end or blockchain part and then we just set those as the new tasks and then we're done okay so this is the delete task functionality and delete task functionality is now completed now who needs access to delete task our to-do list is going to need access to delete tasks and the reason for that is our component task is gonna need access to it okay so it's like a little bit of prop drilling but not too crazy okay so let's go ahead and do delete task okay and then let's go to our task components and we're gonna go ahead and say on click right on click we are going to delete task and give it the item dot id that's it okay and that should really delete it so let's go ahead and drive a ferrari let's go ahead and delete this task okay let's go ahead and refresh save a few times and delete okay nothing is happening right now so what's the problem delete task okay we're destructuring delete task let's go into index we're passing delete task is being passed so all of that is good actually i don't think we need to add this here we need to actually give this on click all right so we're going to need to give this on click to delete tasks so we're going to go ahead and say we're going to pass this function delete task and we're going to pass that down so i don't think we need to actually add that here okay so let's go to our delete our task component now okay let's go to our task component inside of our task component let's go ahead and delete tasks let's destructure delete task okay and then here we're going to add an on click so on the garbage can is where the on click takes place and we're going to go ahead and say delete task okay on click that's what should happen now let's give it a try i think this is to me is looking right now let's go ahead click drive a ferrari try to delete it so refresh we get an error to show us what there is to oh yeah we need to give it the specific item id so let's go ahead and do actually what we could do is we could do it this the other way let's go back to our to-do list and here we're actually going to give it an on click and the on click here is going to be delete task and that specific item dot id and it was going to task let's go ahead and destructure on click and then we're going to give it the on click okay so that way we have access to item id and we don't have to like destructure and pass down the item id okay cool so let's go and try it now remove drive a ferrari and there we go now it's popping up beautiful let's go ahead and hit confirm on that so that transaction it says successfully deleted okay now if i go ahead and refresh my app okay let's see sometimes it takes a second so let's give it some time and there you go okay so yeah while it says successfully deleted and you get the transaction id on the blockchain it still needs to verify it that takes some time so once it's fully verified it can now then it deletes it so now when i refresh and i go here you see the ferrari one is actually gone so now if i create a new task let's go ahead and hit the plus sign so when i hit confirm this will add the task okay boom where we got a new task and now i can actually hit let's go ahead and refresh and where's my new task go okay now it's actually there so even creating tasks takes a second okay so that's why you have to wait a little bit and now i can actually remove it okay so successfully removed i have the hash the removal but it's going to still verifying on the back end right the blockchain side so see now the new task has been deleted and it is not there guys this is amazing if you've gone this so far huge props to you alright so i really hope you guys enjoyed building that to-do list app and you got to learn a ton of solidity con concepts how smart contracts work how you actually interface your front end with the blockchain component it's mind-blowing stuff and we had authentication in there so if i actually log out and i log in as a different user you won't see these tasks there and you won't be able to delete these tasks and you won't be able to interface with them so we have all of that and then some and it was so quick and so nice and we didn't even use a database which is mind-blowing and cool i hope you enjoyed it huge credit and shout out to code with kavit you should check out also his video huge shout out to him so for a lot of the ideas in this video and some of the code for the code for the smart contract and a lot of the inspiration okay so that was really awesome and so thank you code with kavit the huge shout out to you and again guys as always i love your beautiful face thank you so much for watching and i'll see you in the next video\n"