Build a decentralized Todo application using Solidity | Rahul Agarwal | Skillshare
Search

Playback Speed


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Build a decentralized Todo application using Solidity

teacher avatar Rahul Agarwal, Flutter Developer & Trainer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Course Introduction

      0:53

    • 2.

      Discussing course curriculum

      3:08

    • 3.

      Setup hardhat project

      7:48

    • 4.

      Alchemy and Metamask keys

      7:01

    • 5.

      Creating a Task Contract

      8:15

    • 6.

      Delete and Fetch Task functionality

      11:17

    • 7.

      Writing test for our contract

      14:44

    • 8.

      Run the unit test

      6:58

    • 9.

      Writing the deployment script

      5:54

    • 10.

      Working on the React frontend

      16:06

    • 11.

      Connect Metamask Wallet

      15:03

    • 12.

      Add Task Functionality

      11:28

    • 13.

      Delete and Fetch Task Functionality

      5:16

    • 14.

      Creating the Task Component

      6:24

    • 15.

      Basic CSS styling

      3:31

    • 16.

      Testing the Complete Application

      10:20

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

45

Students

1

Project

About This Class

Blockchain is a key technology behind Web3. It is most-often associated with the cryptocurrency bitcoin and is the technology that underpins it. The bitcoin blockchain is a public ledger of activity of the bitcoin network. But bitcoin is not owned by a single company or person and it is not issued by a central authority like a central bank. Instead, it is decentralized and the network is maintained by a global group of people running specialized computers.

In this course we will learn how to create a complete decentralized Todo application from scratch. We will be using Solidity for the smart contract, hardhat for testing and deployment purpose, Ethers js to communicate with the contract, Metamask to sign the transaction, React js for the frontend and Alchemy as the blockchain node provider. By the end of the course you will understand all the concepts required to apply for a developer job or even build your own application on the Ethereum blockchain.

Our stack

  • Solidity (To write our smart contract)

  • Hardat (build, test and deployment framework)

  • React (Create our frontend)

  • Ethers (web3 library for interacting with the blockchain and our smart contract)

  • Alchemy (Ethereum node provider)

Meet Your Teacher

Teacher Profile Image

Rahul Agarwal

Flutter Developer & Trainer

Teacher

Hello, I'm Rahul. I am skilled in building cross platform application using Flutter. I am freelance developer as well as conduct workshops to share my knowledge with the community.

See full profile

Level: Intermediate

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Course Introduction: Blockchain is the driving force of the next generation, which is also referred to as never treat. Blockchain reinvents the way data is stored and managed. Web three embraces decent religion and is being built and owned by its users. So as a result, a lot of new opportunities for developers like us in this domain. In this course, we will learn how to create a complete de-centralized to do replication from scratch. We will be using solidity for the smart contract development hardhead for testing and deployment. Thirsty is to communicate with the contract. Mcnemar's to sign the transaction, React JS for the Fontan, and ultimately as the blockchain would provide them. By the end of the course, you will understand all the concepts required to apply for a developer job aren't even build your own application on the Akkadian blockchain without wasting any more time. Enroll now and let's get started. 2. Discussing course curriculum: Hi, welcome to the very first video of this course, where we will learn how to build a real-world decentralized application. So at present, everyone is talking about the web tree. And even if you know the basics of web tree, until and unless you develop a full fledged application using all the technologies, you are not considered as a developer. Obviously, you should know solidity, react, hardhead, an E test.js. At least you should have some knowledge of what does these technologies to in order to continue with this course. Because here our primary focus will be building the complete application. So before moving forward, let's discuss about the course. Curriculum are, what are all the steps we will take in this course. The first step will be to set up the development environment using hardhead and further KTM node. We will use the alchemy service. Then next, we will write the smart contract logic using solidity for that to-do application. That is, how to add our display or remove that to-dos from the blockchain to our application. Then we will write the unit test in order to test the working of the smart contract logic. Then we will deploy smart contract to the network that is that test network. Then, then after we will create the front-end of the application using the React framework, we will, we will develop a very basic app. Then using a thirst dot js and MetaMask, we will interact with the smart contract, which is already being deployed to the test network. And at the very end, we will check all the functionalities and the working of the decentralized application. So that's it. And also make sure you have installed MetaMask and have some test coldly details in your account. I'm not going to set up again as I have already, deciliters and everything in my wallet. So please watch any tutorial on it and continue with that course. It is very simple. So that's all for this video. See you in the next session. Thank you. 3. Setup hardhat project: In this video, we will learn how to set the development environment for our application with hardhead. So the question arises, what is hot at hardhat is an environment developers used to test, compile, deploy, and debug decentralized applications based on the Itanium blockchain. Its competitor is known as truffle. In this course, we will use hardhead, but later on, if you want to explore truffle, please go ahead because you never know which one will be used in your company's project. Now, let's start doing it by creating a folder named to-do app. First create a folder. Then inside that folder of Penn eight terminal. And initialize an empty NPM package using this command and BM in it hyphen. Why? Now we have this package.json file. Then to install hardhead. Simply remember this command, npm, install, dash, dash, save, dev, hard hat. It will take a very little fraction of time. It depends upon your Internet connection. But hard hat has gained a lot of traction within this viewers earlier it was only truffle. Also. It's done. You can just see there are some and BMI will ever, it's not that important. Then after that, just write np x hardhat. It will help us to create a hardhat project. From the options, select the first one that is create a basic sample project. Then press Enter, press Enter. See. These folders have automatically been created. And also hardhead is telling us to install these dependencies. This will help us with test, well with careful and ethers library to interact with the smart contract. So simply copy this and paste and press Enter. Just remember, these dependencies are important whenever you are using hat. Also, if you want to know more about hardhead, you can go to their official website, hard hat dot ORG and just read about this stuff. Right now I'm just assuming you know the basics of Hardhead. Whatever code I have written, you can find it in the documentation section of their website. See npm install save-dev heard had an NP x that gives us this option. Then it will tell us to install these dependencies. That's it. Now, let's see. It's still installing this. This will also take some time. Till then. You can just check out the official documentation. Okay, it's done. Now. We will install a few other dependencies as well, which is not related to hardhead. Simply write npm install, then. Ben Zeplin slash contracts and dot ENV. That is, these are two different dependencies of pens up plane is, has predefined methods which are already tried and tested to be used in any project. If later on we will need it, then only we will use it. And dot ENV provides functionality to write sensitive data in a separate file imported. Now, we have our project, hardhead project ready. Just append our project in the VS code file, open project than three. And to do that, K. And also we just make sure you have these extensions installed. That is mainly solid. The d this solidity extension is being installed in your VS code. Yeah, that's the only dependency required. There's not a dependency extension. That's it. The hardhead project is now set up successfully. In the next video, we will include our setup, how Alchemy and MetaMask. Thank you. 4. Alchemy and Metamask keys: In the last video, we have successfully set up this project. Now it's time. We include alchemy. Alchemy is a developer platform that empowers us to build scalable and reliable, decentralized applications without the hassle of managing blockchain infrastructure on our own. So simply go to alchemy.com and create a new account. I already have an account, so I will login into it. We'll redirect to our dashboard. Here. The first thing we have to do is create a new app by clicking this icon. Simply click here, then give it a name. I will give it. To do that. It will be a medium chain and network will be coherently. And now simply click on Create app. Then here, below this API key, click on View key and copy this HTTP link. We will use this HTTP key later on. Now, the next thing we have to do is get the private key from our MetaMask. You can install mathematics by going to matter mass dot au website, and then install the extension for the browser. If you're here, I'm using Chrome. You might be using some other browser. I'm not going to set up the wallet from scratch because I already have a thirst and everything in it. Make sure you pause this video and watch the setup of new MetaMask wallet. And also how to get test a test in that account from YouTube or via Google. So simply click on this icon and then enter your password. And make sure to change the network to coldly. Here I have polygon hardhead, these are custom networks, but makes sure you have coli network and have some tests ethers in it. Simply to get that private key, click on account details here, then click on Export private key and enter your password. Make sure you never disclose these key with anyone else. Your accounts address, that is, this address is your public key. If required later on. Now, we will use alchemy URL and Matt Thomas private key in our hardhat configuration. For that, go to your project. And we have already installed the required dependency, which is that dot ENV. As I already said, it is not recommended to paste those sensitive information directly in the code. Now, in that project folder, create a new file called dot ENV. Say this is in the root directory. And then paste the paste here, all the keys, that is by creating variables, alchemy, URL and wallet. Private, private key. Then copy and paste. Again, just simply go to my Tamas. Then I count it is export private key and copy and paste it here. That's it. Now we have the keys. We have to configure our hard hat dot config dot json file for those keys simply at the very top. This code require our dot ENV package dot config. And then in this module that exports file, simply write networks, then go linear network. And here in the URL, we will write process dot ENV, dot alchemy URL. And in the accounts, which is a list, we will write process dot ENV, vallate, private key. That's it. This is how we configure alchemy and MetaMask with our hardhead projects so that later on we can deploy to debt network. Thank you, That's all for this video. In the next module, we will create the smart contract for our Todo application. 5. Creating a Task Contract: Welcome back. Now it's time we create our solidity smart contract. Simply go to contract folder here you will see a dummy contract which is greater that soul, we don't need it. We won't do anything to it. Simply create a new file and name it task, contract, soul. And now let's create a new contract before that. At the very top, just make sure you include that license and thus solidity version. Then we will create a contract and they made the task contract. Now let's start with the new struct, which is task. Our task will have ID. String, does that text, that is the title of task, and a boolean is deleted. Then this truck, let's have an array which will hold all these task struct, which will be a private array, and we will name it task. Then definitely someone will add a task. So we will map task ID to the address of death owner. So we will just write it task to owner. And also we will have some events. That is, our first event will be at dusk. It will have recipient dusk ID. And our second event will be delayed dusk. It will have dusk ID and a Boolean. So let's understand this code. Again. Events are used to log information in that blockchain. We create a task structure. Solidity allows the user to create their own datatype in the form of structure. The structure contains a group of elements with a different data type is integer, string, boolean, whatever we want. Then we have this task which will hold all that task which are present in our smart contract. And then we're simply mapping that task ID to the address of the task or not so that we can get or we can search very easily. Next thing we will do is create functions. The first function will be function to add a new task. Just write function at dusk. It will accept task text. This is simply is the dead Boolean and make it external. Definitely it will be called from external front-end. Then first thing we have to get is the task id. And simply what we will do is make that length of this array that task ID. So the first will be 0, then it will be one. And definitely after incrementing, it will be different. Then we will simply push to this task, Eddie, our new task. We will create this task. And since it is asking us id, we will give the task id here, then does text and is delayed. Did see these all these all we have to send. Then we will map this information in our task to honor mapping, simply writing the US to owner, then the dusk ID. And this belongs to this, a message sender who is requesting or this calling this function, that person's at rest will be stored. And simply, at the very end. We will write that. We will call the event. And the event name is add. Task. Recipient will be message sender. And task ID is that task ID. So this information will be stored in that blockchain. So that's it. I hope you understood this function. Simply a function called Add task. It is accepting, does desk and is deleted value. Visibility is external, as we're not calling this function within this contract. So we have just simply wrote external. Then for the task id, which is simply make the length that is at the very beginning, it will be 0. Then once dusk is been added, the length will be one. And it will be random, always S, as we are pushing this task inside it. So it will get incremented automatically. Then we're mapping to task two, owner. And then finally we are emitting this event. But that's all for this video. In the next video, we will write the other two functionalities. That is that Delete Task and fetch my task. Thank you. 6. Delete and Fetch Task functionality: Now in this video, we will write the functionality to delete a task. Simply write function name, we delete task. Then it will be an external. Also. To delete the task, we will ask for that task ID. And Boolean is deleted, which will be true. Now, first, we will check the mapping, that is, whether this sender owns this task or not, suggest we will write two owner this dusk id equal, equal message sender. If it is true, we will simply go to task structure. It is to this task ID. Then dot is deleted, equal to is deleted. Then I meet that delete dusk event and give does Eddie and is deleted parameters. So simply, we wrote this delete function. It is asking task ID and is deleted. It is an external function. Then before deleting, we're just having a small check whether this task belongs to the address of this Cinderella or not. If we will go to this this task, Eddie. And simply in that task ID, that is the position of the task in this array as see this task id. The id is the position as well. So we will simply go and write, does id dot is deleted equal to this deleted? Whatever we are sending, which will definitely will be true. And then simply, we are emitting these delays, delete task, even. Then, the final functionality will be to fetch or to get our own task. So simply write function, get my task. It will be an external function. It will simply view that it won't change anything and it will return task. That's a really done ask an eddy of task. Inside that. First, let's create a temporary task at naming them pretty. And we renew. The length will be dusk dot length. Then what we have to do is definitely in this task at all, the tasks are being good at is this user or whatever, 1015 users, whatever users they are, all the task will be in this array. So now what we have to do, we have to loop through this array and find out what are the tasks which are belong to this sender and then store those task in this temporary array. So since we will do a loop, Let's first have this. That is, this will be the count of the number of task owned by this user. Then we will have a for loop. You and I is equal to 0. I less than dusk, dark length. And simply I plus plus. Then we mapping, we will do what? We will use the mapping. Then does id starts from 0? If it's equal to message sender. And if the task property that is this is deleted is false, that is not being deleted yet. Then in this temporary array with this counter position, simply to this task structure, definitely in this task edit data structures. So it will get stored in this temporary array at this position that is 0. And then we will increase the counter that is now, it will have one task in it. And then again, it will loop. If it finds that the owner is the same. Then again, at one, at one position in this array, it will store this NesC next task and change the counter to two. So this is how it is working. Now. We have the temporary variable, that task which are being owned by the user, but that length of that task is greater and the elements will be less. So it will just take up unnecessary space. So what we will do is create a new variable called result. And it will be an array of length counter that is only debt. And simply, we will loop through this temporary variable, U int I is equal to 0 I less than counter I plus plus. And that is simply copy and paste everything which is there in that temporary. And at the end, return this result variable. So this is the logic behind that. Get all my task functionality. What we have done is first, we will create, first we have created this function. Visibility is externally. It doesn't change anything so it's view. So definitely it is not taking any gas phase. Then we have to specify what it is returning. That is an array of task structure. Simply, at the very beginning, we have this temporary variable, which is just storing the memory. And it is an array of length, task dot length, which can be suppose 100. Then we have this counter is 0. That is, what are the order? You can say, how many tasks does this user have? Then in that for loop, we're simply looping through all that task present here and checking if the owner of that ID, since the idea also starts from 0, this task ID, see here. So task ID belongs to the message dot sender and task I position that is 0 position. Suppose it will start and is deleted. Is deleted. You can say property is false because we want, we don't want to show task which are deleted or which this function will make it delete. And we will find, we will store here all those in this temporary variable. And now since the length is bigger, or the task might be ten, but the length is 100. So we're just creating another variable called result. And copy and pasting all the elements present in this temporary to this result variable and it will be less than counter. And finally, we are returning the value. You will understand the concept once you use it. Or if you want, you can just pause the video and try to understand it again and again. Because these concepts are very important. That's it. We have successfully created our smart contract. In the next video, we will do the testing of this smart contract. Thank you. 7. Writing test for our contract: Hi. So since we have our contract ready in this video, we will test all the functionalities. We already know that blockchain is immutable. So before deploying our contract, we write unit tests to make sure all our functions and variables in our smart contracts are working. And returning that correct values. We are using Mocha Chai for this purpose. Just remember, we have installed these dependencies while we wear Installing and set up on installing hardhead in our project. So simply go to dest folder and inside it, create a new file by the name dusk, contract, test dot js. And the very first, import our libraries that we will need expect from the child library. And then we need e tos from the inter-library, Saudi from the hardhat library. Now, let's write our test code. Describe, we will name it dusk contract. Then we will have this function. Simply removing the arrow function. If you want, you can have the arrow function. And before writing the test, we will have some variables to this contract. Then we will have this within this small letter, we will have does contract. It will be the object or the instance of our contract. You will understand this later on. Then we will have the owner. And now, since it's a test, we should have some dummy data. So the number of the hotel or the dummy task will be five. And also we will have a variable called the ask. More car uses hooks to organize its structure. This desk cried G word is used to group our test, which you can nest be as, as long as you want it. This is, again you can write described. Then again you can write this like this. Then it has other hooks as well. It is I d, this is also one hook. It is a test case which we will use in the upcoming videos. Then we have before hook here in the more calm library. This before hook is run before the first eat. Our desk scribe. That is, if we write just before, it will run before the first are the describe block, then we have before each, which we will use it to run before each. That is, it will run before each clause or the statement, or eat or describe the prints. Then we have after it. It's a hook to run after that. Is it really run off? Eight are described. At the very beginning. I told you about this. Id. Hook. That test cases. Cases like this, we have. Hooks and most important is before each desk guide. And let's say now, let's use that before each. Before each. Sorry, it will be like this. And inside this we will have a sinc funtion. Here we will deploy our task Contract. With this variable. We are using this variable first one and simply write await, eaters, dot get, contract factory. Our contract name is does contract. Then we have the owner, which will come from a weight, eaters dot get signers. Then within this small tasks contract, we will have that instance of this deployed contract. This is just a simulation. Then this task will be an empty array. And we will insert dummy task inside this total task. It is I is equal to 0. I will be less than number of total task, which will be five. I plus, plus. Let's get it. It does. Check is text will be simply that whatever you want to add does number seems to make it random. Plus i then is deleted, is false. Then we will have a weight does contract DOD. At pass function we are using. Dusk, dark, text is deleted. This functionality is this one that is at does it is asking for tasks that text and Boolean value. Then we will just simply push, then does Bush dusk. So in this variable, we are pushing this value. So this before h will run, before every test defined. Later on we will define 23 unit test. And before every test this piece of code will run. Yeah, we are, we are deploying our contract and then getting an instance and then adding five dummy task in it. Now, after this, let's simply create a new desk that is unit test to add a task. We will describe, as I told, we can nest it. It is for the Add Task functionality. Funtion. Then now we will use the IT, it clause. And this just the auto suggestion. So id, the desk condition is should meet at task event. It will be a sinc function. At the very top, we will just simply write, create a new dummy task. Task. Text is equal to, new. Task, is delayed then will be false. Then we will await and use the expect keyword from that child library. We will expect that first the task contract. At task, we will add this new task, dusk, dusk, text, and dusk is deleted. It will emit. It will m it. First we have to send the instance. And what it will emit at does that is this one. This at dusk, it will emit arguments, arguments, owner, address, and number of total task. So you might be getting confused. So this is because at the end of task function, we are emitting the Add task event. With arguments, you can see message dot sender and task ID. And since this before each clause, we already have five task. That is, here we are adding five task. So this sixth task which we are adding here, we'll have the ID five as index start from 0. So that is why this is right. The ID will be five, because there are five tasks in it. And the index is that we'll always start from 0 in this task, this task ID. If you want, you can just wait and try to understand it again and again. Because this is very important. And you make a quality checks or to compare expected results against a result. We can use Chai library, which gives us three assertion. That is first one which we are using expect, then there's assert and there is should. In this tutorial, we will just use this expecting that this dish should emit the expected value or else it will show error and the task won't be successfully. You can say executed. So that's all for this video. In the next video we will complete the other two task and run our test. Thank you. 8. Run the unit test: Hi. Now it's time to write that final unit test. We have already written the test for adding a task. Now let's write a test for getting all that does, that is get on task function. Then in the clause, let it should return the correct number of total task. Sink. Luncheon. Then let's have gone on. My task is equal to await. Does contract dot get my task? That is, this get my task, is this one. Get my task. Then we will check what we will check on. My dusk dot. Length should be equal. This one that is total number of dusk. So what we are checking is add this before each clause. We are adding five task in this, using this, right? Using this, we're adding five task. So when this condition will trigger already, there will be five task in our smart contract. So we will just check whether it's being properly that is inputted or you can say it's there or not, we will just check that. Now. The next test simply will be to delete dust that is delayed dusk. Funtion. Then that condition should be it should emit delayed dusk. It should emit. Delete task even. Then it is a sinc funtion. Then const dusk id is equal to 0. Then const is equal to true. Now simply await. Expect. Does contract Dot Delete Task when we call it by sending this task ID and ask deleted, it should emit. It should this delete task event with arguments id and dusk deleted. So simply, what we're doing is we're calling this Delete Task functionality. And since here it will emit this delete task event, we are checking whether it is a meeting or not with that task ID and this Boolean. And we just remember here we're simply updating that is deleted value as we cannot delete a data from a blockchain. That's it. Now, save all. And since we have all that test conditions ready, it's time to run our test. Simply append a terminal in your root directory and write the command and px hard hat test. Let's see if everything is okay. Or there might be some errors. We don't know. Let's see, Let's see if working or not compiles successfully. This greater is the default one. We don't have anything to do with it. See all the task, all the unit tests have passed successfully, that is, at dusk, get all does delete, does everything, is working. Just remember if you ever get any error, then after fixing that error, use the command and px hard hat clean, and then run that test again because there might be some cash and you don't want to get stuck there. But in our case, there is nothing wrong. Everything is working. Congratulation. So that's it for the unit testing portion. In the next module, we will deploy our contract to the VLR, to the test network. Thank you. 9. Writing the deployment script: So since our contract logic is working, in this video, we will write the deployments, create and deploy our contract to that test network. Inside the scripts folder, simply grow and go and create a new file and name it deployed dot js. Now let's write the code required. This first, we will need Ito's library. Then let's create a function called main. It will be a sinc function. And then similarly, we will have a contract fact-free track. Three, eaters Get contract. Factory, name is dusk. Contract of this is the name of our contract. Then we'll have an instance with this code, contract for trade dot deploy. Then we will wait and make sure that contract is being deployed successfully. And after that, we will write console.log and we will output deployed address. It is very important. Remember this contract, we will use it just said contract dot address. Now, we have to call this main function. And simply for that, we have to create another function called a sink. Since this is the procedure and just remember to do it like we have to call the main function. And if it is, everything is okay, then we will exit the process. And if not, we will catch the error. We will console log the error and simply write process that exit and an editor. And at the very end, simply call the main function. That's it. This is the way to deploy a script. We just have to remember, that's it. Now, That's script is written. Deploy it. We have to use a command. Again. Bring up your terminal and write np x hard hat. Then run scripts in that folder, go to deploy dot js. Then network we will use is called early as this name, this G, E, LI, we mentioned it in the hardhead dot config file. After that, just press enter. It will take some time. So you just have to wait. Because now this will upload or this will deploy this smart contract to the real test network. Okay? Now it's done. This is that contract at dressed. Make sure you just copy it and paste it somewhere, like here. Because we will need it later on and we don't want to just forget it. Now to check that whether this contract is successfully there, we should go to courtly ether scan website. Just click on this, the first one. Then here, paste that contract address and click on search. This will give all that block information. See, 50 seconds ago, this block was created. And with this, we make sure, we are sure that everything went okay. If you want, you can just click on it and see from which address it was pushed, gas price and all. So that's it for this video. Everything is now done from the backend portion. In the next module, we will set up the front end using the React framework. Thank you. 10. Working on the React frontend: Hi, welcome back. In this video, we will work on the front-end section using React framework. React JS is a JavaScript library which is very popular. And I'm just hoping that you know the basics of it because definitely this is not the React tutorial. Our primary focus will be to just build a basic UI and test our smart contract. Now for setting up a React projects, simply go to the open the terminal and go to that. You are to do DHAP directory and run that command and px, Create, React, app, name it client. Now, few folders, structures and file will get downloaded. For the React application. It will take some time. Then you can just check out your code and see what you have done. That is the task contract dusk desktop. And because these concepts are very much important, as once you build one project, then you will be able to build multiple projects using the same concepts. Okay? It took a little while, but now everything is being installed. Go to this client and you can see we have source oblique and all folders created. Now, in order to interact with our deployed smart contract, we will need two things. First, is the contract addressed and the second is the ABI. To get the ABA, simply copy that task contract dot json file, which is inside artifacts, that is these artifacts. Then we have contracts. Then we have task contract dots sold. And we have this file. Just copy this file and go to client folder. And create here, just inside the source folder, create a new folder called EBI and paste it. That's it. That is inside client source folder. We create a new folder called ABI and paste that JSON file, which contains the contract ABI. The first thing I told was that contract address. We already have that contract address when we deployed it in our previous video. Simply create a new file and name it, config dot js inside client source folder directly that is here. And name it, config dot js. And simply write the command export, const, task, contract, address, and paste our address, that is this one. Here. These two were required. Now, we have to install few dependencies as well. Simply go to blind folded, dislike this CD client. Make sure you are into client folder and install ethers. That is npm install ethers. This is required to interact with the smart contract from the front end. And then then next dependency, which is required is npm install emotion slash edX. Then style. At MU I. I can make ADL. Then MU a deity. That is npm, install emotion slash react emotions less than MU I, icons material than MUS slash material. These are simply some style and material UI related files which we will use later on. Okay. All the dependencies are now installed. I just wanted to see Becky's Jason. Yeah. Everything is there. Now let's work on that front. The first thing we will do is inside the source folder, we have, we have app.js. We will remove everything here and start writing from scratch. First thing we will do is import, React, use date, hook, use, effect from React. Then we will import the next field Martin from MU material. Then we will import task, task file. And remember, this file we have not created. We have to create and sick. And then we will import. Simply we will import dot CSS, sweet notes, sss like this. Then next thing to import is the contract address. We will just said dusk contract address from that config file. Config file. Then we will import it from the library. Then finally, we will import that task ABI from the folder EBI, then does contract adjacent. So these were all the inputs required. Then this we have to write and create an app component and export component. And again, I am hoping, you know all these react concepts. Let's create some states. Task. And we will set dusk. Use state. It will be an empty array. It will hold our task. Then next will be input. Input. You state this is that text input from that text field. Then we have current account. Current account. Use the it will check whether my damask is connected and then it's account address. And the last one we will have here is correct network. And it will be set. Correct. Network is equal to use state. The default will be false. It will make sure that the garlic test network is selected. Otherwise, it will prompt, alert the user to change its network. Now. First, let's create two new files inside the source directory. First will be task dot js. As I already mentioned that we have to create here, simply here, right? Import does dot CSS, which we will create just now. And this component, that is the task and export default. Dusk. Later on we will send some props as well. And in that source, again, create a file called dot CSS. So that's it for this video. We have written a lot of code. In the next video, we will work on setting up our Meta mask and how to connect with it. Thank you. 11. Connect Metamask Wallet: Hi, welcome back. So now the first thing we will do is connect our MetaMask wallet. Sure, We have to write a function for that. Let's write it from scratch. I will name it, connect wallet. It will be a sinc function. Now, within the try catch block will write all the required logic. And in CAD tools in the console log AD Connect thing to make a mask, the header. And in that try block, first, we will get tedium. Tedium, musical to Window object, window object. Then we will check if whether we have the bacterium object or not. If we don't have Italian object, then we will simply console log met damask. Damask not detected. That is, the user has not installed that matter mass extinction in their browser. And if everything is good, then we will check which network is then a Dharma, my damask, pink connected, that is rinky be godly, whatever. So we will get the chain ID. Jane id is equal to await it tedium, that request. Then in them at ten, we will give it chain ID. And then we'll simply console log the chain AD as well just for our for us because for the testing and I'll connect it to chain, chain AD. Okay? Now we will write the chain idea of the core network, which is 0, small x five. Just remember this is the chain idea of courtly network. If you are using wrinkle B, then it will be 0 X4. These information you can get in the internet as well. You can just Google it. So first thing we will do is check if j is not equal to j in ID, then we will simply alert, right? You are not to go early network and simply return from here. And if everything is okay, that is the network is okay, then we will change the state that is set correct network to true. At least we know that the network is connected. That is, the right network is connected. Then we'll get the accounts with this piece of code it Tanium dot request. Then here method we will use is it request accounts and console log this information as well. So the log wound account, and then the first account. Accounts the 0 index and genes does set. That is this value of current account to my damask account. Okay. So I hope you understood this code. This is just the way we connect my Damascus. We just have to understand what that is. First we are checking whether it's connected to go with you or not. And second directly, we are requesting that counts. That's it. Nothing fancy. Just that with practice, you will remember that codes. That's it. Now the function or the method portion is done. It's time we write the HTML part as well. So within the function, this third, it is outside this connect valid function. We will simply return that component. That is return. And Dave, first of all, we will check whether that current account is empty on the user has connected, it's Matter mask or not. So current account. If it's empty, then then we will do something. Or else we will do something else. If it's empty, then we will simply writes in winning the center tag, we will give a button. Button. Class name will be simply button. And in the on click, event will assign the connect valid function. Okay? And we will name this connect war-like. Okay. Now, in the else part, again, we will check if correct network is there. Then we will do something. Or as we will do something else. And if the correct network is there, we can simply output it Dave. Simply output a Dave, I will name it. App. Then. Just simply write H2 tag and task management, our to-do app, whatever task management app. Then I will like the form tag. I will use a form tag. And then I will give it a text field. Text frame. Any button. Button will be capital. Now, just write this HTML with me. Our focus is more on the blockchain portion. These are very basic. These on Blake at first onclick event. I will just give it another right now. I don't want to do anything. This button will have at dusk written on it. And in that text field, I will simply write ID, ID, outlined, basic, then label, make to do. Then variant. Outlined. Then style. I will simply have margin 0 pixels and each pixel is small. Value. Value will be input. That is, this input. And unchanged. Onchange will simply write that this, whatever we get these texts in the e, will set input e dot, dot get value. Okay? These are all texts fill in oil comes from MUN material package. So if you want, you can search about it in Google. It's up to you. Then in the S portion, we will simply write a div. Simply write it, Dave. And inside it we will write. Please go to the core ESnet and reload screen. I mean, they will just give some class names if you want. These flags. Call just the face centered, centered, my game. Board. The next two Excel. Why? Later on if you want, you can use CSS like tailwind CSS, and it's up to you. So that's it. For the Connect vallate function. And the HTML portion. That is, if that current violet is empty, then we will show the button. If not, that is if the network is there and also the current account is okay, then we will have the Add button. Will simply have the Add button or else we'll just read. Please connect to the network like this. So that's all for today. In the next video, we will write other functionalities as well. Thank you. 12. Add Task Functionality: Hi, welcome back. In this video, we will work on the Add Task functionality. But before that, let's run our application. Simply go to the folder, open the terminal and npm. Start. Let's see how it's working. Sorry, we have to first go to the client folder and then write npm start. Because the client is the React js part. It may take some time. We have to test that connect wallet functionality, whether it's working properly or not. Let's see. I hope we haven't done any mistake since it's doing for the first time. That's why this taking this much time. But see development server. It started. It's somewhat taking too much them. I know. Yeah. It's done. But man. Okay. I know there is nothing like the CSS and now we will, we will style it later on. But right now I just click on Connect wallet. Okay. It happened. You might be thinking how it happened, but because I already had this account connected right now, if I refresh and click on Connect or let's see, the notification has come. And if I read next and connect them, then task management app. This is working properly. Let's now work on the Add Task functionality. Simply. And dusk is equal to a sink. E dot prevent default. This is used to not submit the form. That's it. To prevent the default behavior of that form. Then I will create a task object. Dusk. Text will be input is delayed, they will be false. Then let's work on that try catch block. Here. I will just simply submitting that task. Then in that try, again, we will have a TDM or checked. Then simply check if it is there or if not, if it is not there, then I'm just double-checking everything. I know already the account has been signed in, but still just to be safe. Check does not exist. Then if it is present. Now, let's work. Const provider is equal to new ethers that providers, Dodd, Web three, Heider. It Hadean. Then we will get the signer. It is const saying that is equal to provider, not get Signer. Then we will get on track. Instance, does contract is equal to mu eaters that contract. Then we have to send three things. First, does contract address that task, ABI and does cyanide. And then finally, with that task contract, we will call the function called add, which is in the smart contract. We will send dusk. Dusk Text. Task is deleted. And since this is a sync task, then we will get the response. And this response. Here, we will simply write it in that data set. Does that is this array said task. And we will append all the tasks which are already there with this new task that I'm using the spread operator here with this new task, okay? And then if there is some error and we will catch it. If we get some error also, then we will simply catch it. And console log that added. That is added occurred. Why adding a new task? That's it. And at the very end of the function will again make the inputField empty. Set input empty. That's it. So this is how we write the Add Task functionality. We just get the web to provider from the Keras library. And we send out my Damask, The tales and get that Signer. Then we create the contract object and simply call the Add task. Then what I did is in the response, I simply update that does these things so that in the UI things will get, will be changed as well. In this task. I append this dusk also. So that's it. For this video. In the upcoming videos, we will complete the main functionalities. Thank you. 13. Delete and Fetch Task Functionality: Hi, welcome back. Now let's work on that day late task functionality. Simply let's create IF function, delete task. We have to send a key as well. That is the key is the item ID. First stuff. Let's wrap everything in the try catch block as usual. Then V, we'll console log it. Then in that try, women simply do the same thing, which we then before. It is a window object. Then if ADM is there, then that thing as console dot log check does not exist. If we take idiom is there, then what we have to do is the same. This, these lines, just copy the first three lines. Notice new provider it KTM, then the contract signer and all. And finally, simply write delete. Does transaction is equal to await, dusk contract Dot Delete Task. And that key and is deleted will be true. Then. Then what we'll do is get all that task from the functionality which we already have in the smart contract. It is get my task. Really call it task contract dot, get my dusk. And then said that task value here, using set dusk and biasing that are dusk object, that is the result. So this simply was that the task only this line of code was new. And similarly, we will have an adder functionality called a cat all task. It will also be same. So what I will do is first of all, this writing const, get task is going to sink. And then same thing. Try catch block. Here. We will cancel that law adder. And in that try, hang, simply copy this, paste it here, and remove that delete task. Okay, so we have the provider, we have the signer, we have the task contract. Then we have lead. All tasks is equal to await task contract dot get my task. And we will simply said that task here, that's it. So this is the functionality for get all tasks. That codes are really very similar. If you have another way of writing it so that the repetition is not there, it will be very good. But for a beginner, this is enough. So that's all for this video. See you in the next session. Thank you. 14. Creating the Task Component: Hi, welcome back. In this video, we will create that task component. So if you remember, we have created this dot that is test.js file. Here. Let's work on it. We will import few elements from the material UI. This list, list, item, list, item, list, item, text from MU I material. And second thing we will import delete I can from my TV is UI icons that material then delete. The task component. We will accept two properties, that is dusk, dusk and on Lake function. Then it will return the list. It will return a list Class Name To Do list. Then list, item. And at least a DEM text. But I might eat is equal to is equal to dusk. Dusk text. Then we will have a Delete icon. Font size will be large. B, C, D, 0.7. And on click functionality will be on click, which we are passing as a property. Now, we have to work on the app.js file. That is, first of all, we'll use the US effect Hooke. And at the very beginning, these functions should be called once that is, get on task and connect to all it. As soon as the app is rendered, these two functions should be called. Then what we will do is in this button that is at dusk, we have to remove the null and right and assign the Add Task functionality to it. And then after enough farm ends, we will have some, you will tax. It is unordered list. And in that we will have dusk dot map. Then I DM. Each item will be we'll have that task component. And within the task component we will send to you, perhaps it is item.name ID. Then The next item, not dusk text. Then on Blake, we will send simply delayed functionality with the item ID. The ID is the key or you can say that my day, whatever you want. So debts it. Now, everything is there. That our app is completed. In the next video, I will just give some basic CSS to it. And then finally, we will test our application. Thank you. 15. Basic CSS styling: Hi, welcome back. In this short video, we will just implement some basic CSS styling for our task component. So just go to this task dot CSS file which we created earlier, and then simply write the class name to-do list. Let's give some styling. Display. Lacks. Justify, content centered. Align, items. Center. Then it will be 800 pixels. Border one pixel. So ln, light gray. And then margin, bottom. Then pick cell. And let's make it important. Then. The next thing I would like to give stating is that by ten, that is 18 connect wallet. But then we have this class. Background color will be for C, E, F, 50, this is the green. Then border will be none. Then colored. White. Bagging. Pixel to pixel. Then text, align, center. Decks, decoration, none. Display. Inline. Block. Size will be 16 pixel. Margin. They will give doing d percent. And finally, align items center and just save it. This is a very basic styling. And we have imported the style.css file as well. I will just make sure it is important that end. I just like it that way. So that's all for this video. The whole application is now completed. In the final module, we will simply start working of that obligation. And I will also add that code somewhere at the end. You can just find it so that you can, if you have any issue, you can compare it with your code. Thank you. 16. Testing the Complete Application: Hi, welcome back. So we have successfully completed the application. In this video, we will simply go through the working of the application and check if everything is working fine or not. Now, I will go to the folder, root folder, then cd to client and write npm. Start. I hope everything will work fine. And anyway, if K is in any editor, we will try to solve it. Let's see, Let's see if it's already been connected. Let's say I will first of all remove the connection. Simply remove C. If I refresh, then automatically that connect valid function is executed through that use effect. If I make it cancel and if I change the network to bring QB. And then click on Connect wallets, see you are not connected to the network. This alert is properly working. Then again, I will simply change too girly network. And then click on Connect violet. Now the wallet is showing the notification. I will simply go and click on Next connect. Okay? So I will try to check that at dusk, learn solely language and at dusk is not working. Why is not working? Let us see. Learn solely bit D. And at dusk, they have to check. I have this at dusk event. Now let's check the Inspect console. Submitting that does Contract. Jason did submitting that task. Something is not right. Sometimes related to the vagus. Does contract or cheese in a democratic EPA fine as well. 07 task Ask a VI cyanide. Okay. Third, checking on few blocks. What I did was I simply change this. That is const, a BA is going to require. And then this ABA, I will write everywhere that is here, as well as delete, as well as get all tasks. Let's see if it is working properly or not. Now, Let's see. If I go and I learn solidity. Add dass, sie. Right now. Finally, at least that my mask is now shown. I will simply go and write, confirm. And now it's working properly. In my Thomas also you can see that contract interaction is there. It will just let it be success because this one was coming from the local site, that is from the local variable. But now the contract instruction is done. And if I refresh, this is now coming from the smart contract. Now, that error, I hope you understood, simply remove this line of code and write const ABI is going to require this. I will again learn hard hat and simply add us. And I will now click on confirm. Again, make sure whatever say if I now refresh and only one will come because the other one was not properly stored in that blockchain. See, it's spending. So you have to wait. This transaction is completed. In order to show it in your UI. Let's wait. Now, okay, instant. Now if I refresh now, then they are at two. And let's try to work on the delete functionality. I click on the Delete. Metamask is showing us. Now. If I simply click on the Delete and confirm, let's see what happens. Make sure you let the transaction complete. Okay? Not transition is now completed. Now if I refresh, I can see it successfully deleted. Only one task is there. And if I go with my contract id, if I go to it has kind of networking. Click on Search, then see what happens. Okay, obviously, everything is working properly. Our whole app is completed. I hope you have enjoyed the course. You have understood how a basic, very basic application is developed. And with this knowledge, you can develop any application you want. That's all. Thank you. Have a nice day.