Transcript for:
Project Video: Building Blockchain Projects

hey all of you welcome back to yet another project video in this big video you're going to build not one project but you're going to build two project and all of these two projects are industry ready so once you will follow this complete two project you will Master blockchain development from beginner to the advanc level you're going to build complex smart contract for a supply chain management you're going to build complex smart contract for a real world crowdfunding with that said let's start building the project straight away hello everyone welcome back to yet another project video in this project you're going to build decentralized distributor system where you will allow user to create tracking of their product so they can create the tracking they can take the data of the tracking they can complete the tracking and it's 100% responsive for all the devices so this one is going to be a powerful application which you can add in your resume to get a web3 job and this one is absolutely amazing to understand the fundamental of the smart contract and how you can deal with the real world distributor system which you can take it from the centralized to the decentralized platform so let me give you a quick work through that what you're going to build in this complete project so this is how the interface of this distribution Dash system would look like we have the Stables we have the services components if you click on this complete shipment it will open up the popup so you can pass the address of the recipients who will receive the product you will pass the index and it will give us the data so I'll show you how it will look this is the get shipment this is the start shipment this is the user profile so these are the services we are providing now let's click on this and connect our wallet first so here I have to pass my credentials you have to pass your credential to connect your wallet so click on unlock and here we are log to the application you can see the wallet address is displaying so already I have registered couple of products so let's try to find out the data of that particular product so I'll provide this zero index and if I click on this get details I can able to get the data of that particular product so it will have the recipient it will have the send it will have the pickup time delivery time distance price status and whether the amount is paid or not so that's also working fine you can see you will find all of these data about that particular product you can increase the index and you can changee go to the next product shipment data so you can click on this and the data will reflect so these are the indexes are the unique ID for each of the product you will create in this Marketplace you can see you will have all of the data and this is how you can start the shipment so once you create the shipment you have to start the shipment so if I close this one and if I scroll down here you can see that this is the entire table we have so we have the sender we have the recipient we have the pickup we have the distance we have the price and here you will find all the product we have listed for uh supply chain you will find that some of them have the pending status delivery and in transmited I'm going to Simply change the status so before I do that let me show you that how you can add the product into the system so click on this add tracking it will open open up this popup model and in that you have to provide the data you have to provide the recipient you have to provide the date and time you have to provide the distance and the price and you can provide more data it's totally up to you but I'll go with a simple approach so let me provide the date I'll close this one first thing I have to get the address of the recipient so I'll come back to the metamask wallet and I have to get the address grab that one come back to the account to and I'll click click on this add tracking paste the address of the recipients pick up the date 17 distance is going to be let's say 12 34 and I have to charge the price is going to be let's say 56 click on create shipment and here I have to make the transaction click on confirm and here we have completed the transaction and here you can see this is the latest transaction we have created it's working absolutely fine now what I want I want to change the status so right now the status is spending but I want to initialize the transaction means the product is out for delivery so that's the changes I have to do so come here here first thing we have to do is let's get the data so let's click on this and click on this and this is the you can see on the ninth index we have the entire data of the product we have created looks fine now we have to change the status so we have to start the shipment so we have to provide the recipient address and we have to provide the ID 9 click on this get details and it will make a transaction click confirm and here the transaction went through and you can see the products is out for Shipp shipment in transmitter it's also working fine now what I want to do is I want to complete the shipment so for completing the shipment you have to call this function provide the recipient address provide the ID nine and click on this chain status or you can call it complete shipment interacting with the smart contract click on confirm and here we have done the transaction and you can see the product is delivered and we have the time stamps this time we have updated the product so everything is working fine everything is working fine you can see it's 100% responsive for the mobile device as well so this is how going to look on a mobile device we have this one you can open on and you can open the form you can simply slide through this entire data this looks absolutely fine and we can come down we can click on this component click on this click on this and you will have all the start shipment this is the profile section you have looks pretty good so everything is working fine you can see everything is 100% respons for all the devices and this one is Amazing Project which you can include in your portfolio so let's click on this you can see it's 100% responsive very flexibles that looks absolutely amazing so that's the overview of the tab which you are about to build in the next couple of hours and I will provide you the startup file so you guys can download the startup file in that I have given you the folder and file structure which you don't need to create and I have also provided you the assets which I have used like images icons so all of things which you will will download from the website so this is the tracking folder we have and in this we're going to work it so simply open this folder in vs code Studio and you can see we have opened the folder now bring your terminal up and we have to initialize the project so the very first thing we have to do is we have to create a next app so this is the command we going to type npm create next app. n we go to hit enter so this will create the project in the same directory and in this project we not going to use typescript or slen so say no no and this will create the folder and file structure which we need for this project so just wait for a moment and here you can see we have successfully initialized the project and we have created all this folder so simply go to the pages inside the pages you will find all this API folder app document next year so you can see we have all of these one so there document if you come put the public this is the style file inside that this is the package file and that we will have all the packages will install and now we have to Simply run this and we have to see that everything's working fine so type npm run Dev you can see we have started the application in local L 3000 and this looks pretty good everything is looking good okay so we have successfully initialized next app now what we have to do is stop the application from running and we have to do couple of setups so first we have to come into the pages and we have to delete all all the folders all the files all the code which we don't need in our project so we're going to simply delete this API folder because we are not dealing with an API now come to the document delete this one as well come to the index and we have to see see remove all of these codes remove the type RFC and this is the general setup we have looks pretty fine to me now let's come here go back to the Styles and we have to delete this one home modules delete this one so this is the CSS file we need to delete close it in this project we're going to use telin CSS for installing all the components so here I'm on telin css.com make sure to come here and we have to click on get started so from here you have to select the framework which you want so I will go to framework and here we going to choose next year we have all of this framework whichever you are comfortable in you can select that but we going to use next year and these are the configuration we have to do so we have successfully initialized the project so now we have to Simply install the packages so grab this one so we have already done this now grab this one come here and we have to paste and install the packages now we have to initialize the telin CSS type it and here we have initialized telin CSS open this one and this is the predefined code which telin CSS creates we're going to replace with we're going to replace this code with some configuration and this is the post CSS we don't need to do anything in here looks fine and this is the configuration we have to do in telin config file so simply grab this code copy this entire code and simply replace with this looks fine so that's the only setup we have to do one more we have to do now we have to utilize This Global CSS okay so this will allow us to use the extra classes the custom classes we want to use in this project so simply grab this one and this is the one we going to paste inside This Global CSS so I hope this makes sense to all of you guys okay so looks fine now we're going to Simply grab this one to check whether it's working or not so grab this one come back to the index and here we going to paste and now we have to install is start the application type in PM run Def and open the app so you can see reload the browser and our telin CSS is working fine so our text is bold and we have an on line that means it's working looks pretty fine to me so now we to install harded packages which allow us to write the smart contract test the smart contract and deploy the smart contract so here I have opened harded make sure to open it and these are the commands you have to write for installation so you have couple of options you have npm 6on but we'll go with a npm so this is the thing you have to copy so once you run this it will create a de Dev dependency but simply grab that one and let's come here let me clear the terminal and let's install it we'll type npmi hard at so this is the command you have to run and this will install the hard package in the project so just wait this will take a little bit time and you can see once the installation get completed you will find the packages here so it's taking time now what we have to do come here and we have to go to The Ether JS because this package we also need and this package is really powerful it's allow you to interact with a smart contract and communicate make the connection with ethereum and through the RPC wall and other provide other options as well so if you're new to Ether JS I have a complete project I have a complete tutorial on ether JS I'll link in the ey button in the description so you guys can follow that if you really want to know more about this Library so click on the installations and these are the commands you have to run this is how you can utilize it in your project so you can have a look from your end okay so I'm going to show you everything from the beginning and now we have have to come here we'll type web3 model this is the one more package we're going to utilize and this package will allow us to connect the wallet so all you have to do is to import the package and you can easily able to connect with any wallet so you can see it's pretty easy so Lex looks fine you will have couple of examples which you can follow click on docs and here you will find that information about the doc so we have install harded now we have to clear the terminal and we have to initialize harded so type npx hard hard at and this will initialize the hard at now we have to select the project type so whether you want to go with typescript JavaScript or empty hard config file but we go with the JavaScript project hit enter and hit enter and this will allow this will install the necessary packages which you need so you can see we have installed the packages now clear your terminal and now we have to do certain things so we have to install the packages okay so we have to install ether so we have to install ether and this is the exact version you have to use I don't know why when I was testing with the letters version I was getting an error like when I was interacting with the web3 model okay so I was getting error so that's why I will go with the specific versions if you're watching this video after a year or a 6 month then make sure to follow the exact version otherwise it will not work so we'll use 5.7.2 version hit enter and this will install the packages and now we have to install the last package which is a web model type I web3 model and you have to pick the exact version okay that looks fine and here we have installed all the packages and all the information about this packages you will find in the packages and file if I scroll down you can see we have Dev dependency we have dependency okay so these are the packages we have installed so looks fine close this one and close this one close this one and we are done almost with the all the setups now we have to create the folders and file so let's come here close this one and let's click on the main directory and create a folder we'll create a folder by the name component and in this we going to create all the component for our applications like table nabar photobar so this is the component we have now we have to create one more component sorry folder and this we going to manage our context API that's why we have called context now now this looks fine we have the two folders but right now we're not going to create the components we going to work on the smart contract and the context so click on the smart contract and this is the contract pre-existing contract we have so what we have to do is we have to delete this one so delete this contract and we going to come to the script folder and that we have to do the configuration so you can see there is so much mess in this deploy script but we need a clean deploy script so delete this commands we have to delete some extra codes from here we don't need to pass we don't need this one as well and come here we have to Simply remove this because we don't need that one and we'll say let's say tracking okay this looks fine so we going to make the changes in the file name okay we're going to make changes so this looks fine and this is the component we have this is the context we have and this is the contract folder we have now let's create a folder file in the contract and we're going to call tracking do Soul because that's the contract we going to build so so that's the file we have and now let's start writing the smart contract so first we have to import the license identifier actually we have to type the license identify not import now we have to define the prma solty version which we going to take its 8.0 and now we have to initialize the contract and we go to call it tracking in the we have to define the inm because our our tracking model will have the status system like it's in it's in delivery mode or delivery completed or it's in between the delivery okay so that's the inm we are to Define so so shipment status is going to be a pending in transmit and deliver so these are the three status of the product we'll provide we come here we going to take the struct and that we going to keep all the information about the product so the first thing we have to keep is the address of the sender the one who is sending the product the second is going to be the address of the receivi the third one is going to be the pickup time when the then the package will be pick up then we'll have the UN is going to be delivered time so when the Del the when the package will be delivered the product will be delivered now we'll have this distance what is the distance we'll have the price we'll have the shipment status initially we going to pass this status and from there we going to pick it so we'll say status and we're going to take this Boolean is paid so this will keep the track of whether the payment is made or not so that's the St we have come here we have to take a mapping it's going to be address type and it's going to keep a track of the shipment so this address will give a single shipments data it's going to be a public shipments we have to take a un and this will keep the track of number of shipment we are doing so that's the one we have and now we have to take the struct and in this we going to do all the experiment so this struct I'm taking because sometime we have to modify certain data to display on our front end okay you can go with the previous data the previous stru but I try to keep things simples so that's why I'm taking this approach for creating another struct for the display purpose and in this we going to Define all the data exactly the same so we're going to provide the address sender receive perod we're going to provide the UN the pickup time we have to provide the delivery time we have to provide the distance and we have to provide the price and it's going to be a shipment status and the last one is going to be is Spade so that's the entire strug we have for the type sment and we have to take the array as well so it's going to be a typee shipment array and it's going to be called type shipments in this we going to keep the entire shipments data so we can fetch it and we can display in the front end now we'll come here and now we have to take the event so we have to initialize all the event so the first event we have this create shipment and that we are taking the address of the sender recipient and the price a pickup time distance price and you can see that I have used this event in one place two place and only two place but in event you can pass three indexes for filtering the data but not more than that so this is the first shipment we have events we have now let's create the other event we have this in trans so when the product is in delivery okay so we going to pass the exact data now we have this shipment delivered so when the delivery is completed in that we have to pass the exact data about the shipments so these are the three events we have now we have to take one more this is called shipment paid so we have to pass the exact data sender recipient and we have to pass the amount so these are the events we have and now we have to define the Constructor so we'll say Constructor and in that we have to Simply increase the count to zero so we have to define the zero variable you can go with the straightaway variable but here I'm updating with the help of Constructor so that's the Constructor we have and now we have to write the functionality for our smart contract to make all these things happen Okay so let's come here we're going to create a function by the name create shipment because that's the very first function anybody can call after that they can call the get data update data start data but they need to have some but before they call any one of those function they have to create the shipment so in the create shipment we have to pass couple of data we have to pass the receiver the one who's going to receive the we have to pass the pickup time we have to pass the distance we have to pass the price and it's going to be public and payable so anybody can call and make the transaction because in this function we going to deal with the price the money money so now we have to check for a condition so message. value is going to be equal to the price if it's less or higher then we have to throw the error message payment amount must match the price so that's the first condition we have now we'll come down here and here we going to Simply update the data in our C so we'll take a memory shipments and we're going to identify based on the sender the one who's calling the function and in that we have to Simply pass all of this data we have to pass in the shipment so sender time distance price and status is going to be pending when some when the when the shipment will create it will be a pending and paid is going to be false so this is the data updating once we update the data we're going to Simply take this message. sender is going to be pushed into the array so the error we have created that looks fine now we have to take this shipment count and we have to increase because this will keep the track of how many shipments we have created in the contract so that's the create function and we'll come here we're going to take this display array data and we're going to push the entire data into our our types system okay so simply let uplate the data so we'll take this type shipment and then we going to Simply update message. sender the one who's calling the function we have to update the receiver we have to update the pickup time amount we'll have the distance and we going to have the prize we'll have the shipment state is going to be pending and we'll have the false paid it's going to be false so that looks fine so this is how we have updated the data and so looks pretty good and now we have to Simply close this one and come down here and we have to initialize the event shipment created and we have to pass sender receiver pickup time distance price so these are the four data we are taking and we have to Simply close the function so that's the that's the function we have for creating the shipment and now we have to create the other function which called start the shment so once the function is got created it will be hold in the contract so in the contract and once the product is ready for shipment we have to call this function to make the status to change the status and notify the receivi and the sender that the product is ready for shipment it's already shipped so we're going to pass this address of the sender we'll pass the address of the receiver and the UN the index so every single product will have an index positions and that's what we have to pass to make the shipment start okay we'll say public and in this we are not passing any payable keyword because we are not making any transaction with the money so public will come here and here we have to check the and here we going to Simply update the status so we'll say shipment storage shipment and we're going to find the particular shipment based on the index so once we have that particular shipment will come here and we going to Simply take this type statement because we have to update the data as well and it's also be find on based on the index so once we find in both the data we have to Simply update it so we'll just simp we'll say shipment. receiver equal to the receivi so this is how we can validate that they have to provide the receiver address to match this condition so receiver now we're going to Simply pass this receiver shipment status is going to be a shipment pending if it's not pending then we don't allow them to call this function so I believe that you guys can understand the logic we have tried to build so this function is going to be called once the product once the shipment is created because this will Define the product is ready for dispatch or it's dispatched and that's why we are changing the Status from here and we are checking that if the status is is deeply equal to the pending then we have to call this function but if anything it will be something than this like deliver or transac then we want to fail the function to call okay so that's the second check we have we'll take this shipment we're going to change the status to in transmit because it's ready it's dispatched for the delivery and we have to Simply update the data here as well so that's looks fine to me now we'll come here and we have to initialize the event for the in transmit and we have to Simply pass the data sender receiver and pick up time close this one so this is the second function we have created so the first function for creating the shipment and the second function we have for starting the shipment now we have to create another function we'll call function we complete shipment so once the shipments got delivered they have to call this function to comp change the status of the product and make the transactions we'll say complete shipment it will take the address of the sender receiver and it will take the index that's how we can identify the particular product so now we're going to take the data so we're going to find that particular shipment which they have deliver so which we have inside the shipments storage and the reason we have taken the storage keyboard because we are making the changes in the state variable okay so when you are fetching and displaying the data without making any changes in the state variable in those scenario it's better to use memory because memory will refer to the creating a data created a data in a memory field so you can easily able to call and you don't need to pay any amount but when you are making the changes in the state variable and that time it's always very important that you have to use the storage keyword so we have we'll find that particular particular particular shipment in the shipments and we're going to pass the sender and the index so we can get that particular and then we have to Simply do the same thing for our types shipment data okay this looks fine to me we have found the particular shipments and now we have to check for a condition so we have to check for the condition that Mage dot m shipment receiver is going to be equal to the receiving the one whose address is provided if it's not then we have to throw the error message so that's the condition we have now we have to check for another condition that we have to check for the status so the shipment status should be in in transmit okay if it's not then we have to throw the error message and then we have to check for the third condition that it's not paid okay it has to be false not true already paid if it's true then it's already paid now we have to make the changes in the actual data so we'll call this shipment status to deliver and we have to Simply update this type shipment also to a delivered this looks fine now we're going to take this type system deliver time it's going to be a block Tim stamp so the moment this function is getting called and the sment is completed and we have to Simply update the deliver time as well in the actual State and we'll take this U we'll say amount is going to be the price and we'll say payable shipment sender and we'll say transfer the amount so we'll simply transfer the amount to the sender this looks fine now we're going to say this is paid true and we have to update this in type shipment as well so I believe that you guys have understood that what we have done here and we have to initialize the event for the deliver shipment and then we have to pass the sender recipient shipment delivery time and looks fine and we have to initialize the other event which paid and that's it so hope the entire contract makes sense to all of you guys that what we have done first we have try to find out the particular shipment once we get that we are simply updating the data and we are doing couple of checks once we have done the checks we are transferred the fund to the sender the one who's calling the functions and then we are simply making all the changes in other straight variable and we are initializing the event simple very easy so this is the third function we have now we start with the another function we'll say function get shipment so this will allow us to get the data about the shipments so in that we have to pass the sender address and we have to pass the index of the particular shipment it's going to be a public and view return because we are not making any changes and view is refer to checking the value of the state variable you can't use it pure because pure used for Fe used for local variable but you cannot use for State variable and we have to return the address we have to return the address and un un un and shipment status and bu so these are the data which we have defined in the that's all the data we have to have with this function so we get it now we have to find the particular shipment which a user trying to get access and that's we can do it based on the index once we have the data now we have to Simply return the entire shipments and then we have to Simply pass the shipment sender shipment receiver shipment pickup time shipment delivery time shipment distance we have the price we have the status we have the pay eight so we are passing all the data we are taking with this function and that's pretty much and that's the only thing we have to do inside this function which will allow us to give us the data for the particular shipments so that's so F now we have to write the other function so let's create that we'll say get shipments count so this will allow us to get the number of count number of shipments created okay and it will say address shender so this will do on based on the users just imagine that I'm a user of this applications and I have created a four shipment so this function will allow us to find out that how many shipments I have created because ultimately it's a Marketplace a lot of users can come and create the shipment so we have to have a function which allows the user of the contract user of the application to know that how many shipments they have created and it's going to be a public view return and in that return we have to return the UN because we have to display the number of the shipments and here we're going to Simply return the shipment. sender and length and this will give was the data that how many shipments he or she has created so this looks pretty fine to me now let's come here we have to create one more function this will call get all transaction and this function I'm creating specifically because I want to fetch all the transaction which got created in the marketplace so I can display in the tables and that I have to Simply call this functions and we'll say public view we'll have the return and that we have to return the the entire array and we are using this memory keyboard because we are creating the data in the memory when the function is getting called that's the thing you have to keep in mind you cannot use storage and in that we have to Simply return the type shipments array the entire data hope this entire thing makes sense to all of you guys and simply close that and that's the entire smart contract we have written for this application the da we are building so hope this entire thing makes sense so this is the contract name we have given this is the inim we have we have the entire shipment we have the mapping and we have all of this function we have created get shipment get shipment count and we have built all of this logic so I believe that this entire thing makes sense to all of you guys if you still have any confusion try to rewatch because this one is a very important part in the smart contract development for our dab and this is going to be the core functionality for our dab okay so that's very important to understand every single thing so this looks pretty fine now now you can see that let's come here go to the script and we have to change the name sorry deploy we have to change the name of our contract so here we have lock simply select and replace this tracking and that's the same thing we have to do here and we have to replace this because we are not passing any argument into our Constructor so simply replace this one replace this with a small T and grab that one paste here and that's the one thing we have to paste here so that's the entire diso script we have I believe that this is nothing new to all of you guys you already know that how to do it so that looks pretty fine to me we are done with the contract and now comes the most important part so we're done with the entire One open up your terminal and we have to split the terminal and we going to deploy the contract and after that we going to build the context for the our for our dab so let's bring the split the terminal in two part and now we have to initialize the local blockchain using hard hat so we'll come here we'll type npx hard hat node and this will run the local blockchain in our terminal so we can uh we can test our contract so hit enter and it will give you 20 Plus accounts 20 accounts it will give you with account address and private key and each account will have 1,000 10,000 eer I believe that you already know how to import this wallet addresses in your metamask account all you have to do is to take this private key copy and simply Import in your met and it will reflect your account address and the amount you have okay so we have initialized our local blockchain make sure you have to initialize it before you deploy your contract and as long as your contract is live your app da is live this local node blockchain would be running if you stop this one it will throw you an error so first initialize this then deploy the contract and then start the application so let's you can see now everything's working fine all of these we have here now we have to deploy the contract so this is the command we have to write npx hard at run network Local Host script deploy so we are deploying to the Local H that's why this is the command we have to write hit enter and this will deploy the contract first it will compile your contract and once it got compiled it will give you the address of the contract so this is the address we have simply copy that one looks fine come here and here it will create the artifact in that artifact you will have this contract inside the contract you will have the contract ABI which allow us to interact okay so that looks pretty fine now we're going to start so that's looks fine we have cleared the terminal now bring this one down and now what we have to do is we have to start working on the context management of our DB so we already have the address of the contract and now we going to utilize it so first thing we have to do is we have to create a file we're going to call tracking. JS not sold JS so that's the tracking JS we have and in that we going to dig this contract and we're going to take this tracking ABI and we going to dve into this context and that's the thing we have here this looks pretty fine to me close this one close this one and now we can start working on our context management so that we going to write the code in our tracking so couple of packages from react so we need use State use effect and that's coming from react so that's the first import now we have to import the web3 model which allow us to interact with the wallet we have to import the ethers that's coming from ethers and that's the import we have here now we're going to do couple of internal Imports so first thing we have to import the tracking the ABI of our contract which we have in the same directory inside the context and this is the contracting. Json okay so we got our ABI and now we have to Simply pay the address of our contract so we'll say cons contract address and this is the address of the contract actually I remember the entire address so this is the address you will get when you will deploy any contract for the very first time so so just imagine that you have a single contract and once you deploy the contract this is the exact address you will get so we have the ABI we have the contract address now we going to Simply take this contract ABI which we have inside this tracking. ABI okay so this tracking is the folder in that we have all of these data from there we are taking the API so that looks pretty fine now we can come here here we going to build the function which allow us to fetch the contract and that's the most important part if we don't have the contract we cannot interact with the smart contract so let's write the function for fetching so we'll say fetch smart contract we'll take a variable called Fetch contract and in that we have to pass the signer or provider like whoever is interacting with our contract and in that we have to take this new ether package we'll say contract and then we have to pass the contract address contract API and the sign up provider in this way we can able to have the contract and it will have the reference of the data of the user who is interacting with the contract so this is the very first function we have fetch contract now we have to come here we have to export because we are using context management for managing our entire State and our applications and this one is really powerful and if you are a beginner then this one is really great for you to start so we'll say export const we'll say tracking context and it's coming from create context react so that's the export we have to do now we have to do another one in this we have to create the provider and in that we have to pass the children and in that we going to write the entire Logic for applications okay so that's what I have and you might not able to see the codes the below codes because I'm using an extension which hide the code from you okay because currently I'm in the testing force of this extension that's why you are getting this Behavior but I can see it but you guys cannot able to see that okay so just follow along with me and type the exact code which I'm typing and here the first thing I'm going to do is I'm going to define the straight variable so let's define that we'll take a Dap name just for testing purpose okay so this is the name we going to provide product tracking Tab and now take the current address of the user whoever will interact and now we have to take this create shipment and this is the function we're going to create so let's call this Asing function because we are dealing with a synchronous behavior and in that we're going to take the data the entire data for the current shipments and that will come in the form of object okay that's why I have taken this items we'll take that once we have the data we're going to Simply so console log out so you guys can see that what we are getting and we're going to deconstruct the data so we'll take the const and from this items in this item will have all of the data like receivi amount so we are deconstructing that so let's deconstruct reor pickup time distance price and that's coming from items because our create shipment needs these four data so once we have the data we're going to take this try and catch so if anything goes wrong we have to keep track of that so inside that we're going to take this web3 model and we have to connect the connect the contract with the wallet so we'll use new web3 model and in that we going to take this connections await web3 model. connect so once we have the connections we have to take the provider and that will get from the ethers new ether do provider in that we going to use this web provider and in that we're going to pass this connection so this will connection the bridge and now once we have the provider we have to get the signer and we have in this provider. get signer ER once we have the signer we can easily able to get the contract which we have in this fetch fetch contract and that we have to pass the signer because our fetch contract function needs signning a provider and that's what we have passed here so this will create a particular reference for that user who will interacting with the function okay so we'll pass signer so that's the entire connection from the user to the contract so once we have built the connection we can simply able to create the item so we can call it create item and in that we going to call the contract a weit contract and we have to call the function name we have in the contract so in that we have to Simply pass the data so we'll pass the data to receiver we'll pass the data to pickup time and this time is going to be in Tim stamp so we have to convert that time okay so that's why we are using this new date and we're going to pass this pickup time and we'll say get time so this will convert the time in in in time stamp okay so we have convert the time now we have to take the distance and we have to take the price but here we have to convert the price in ether we're not doing any transaction in way we are doing in ether although you can do in terms of way but I will go with the ether Trum So we'll say utils par unit price ether and we have to define the decimal points and we going to Simply provide the value the amount because because the price and the value they have to match then the transaction and the condition we have built it will execute otherwise the transaction will fail so in that we have to pass the price and the decimal points and that's it here we going to Simply call this create item of wait because we have to wait for a few time once the transaction is written on the blockchain so we have to wait for it that's why we have use the weight functions once we have done that now we have to Simply check this console the items and we take this catch blocks if anything goes wrong and we'll say when wrong something and that's looks and that's the entire function we have written for creating the shipment so hope everything you have understood what we have done here and how we have written all of these Logics so that looks pretty fine now let's write the second function we have called get all shipments so this will allow us to get all the shipments which the user will create in our dab so we can fetch it from the contract and we can display in our fronted so it's going to be an Asing function we don't need to pass any argument into that we have to Simply make this try and catch block and we have to take the provider because we need a provider and for that we going to use this ether do provider RPG Json RPC provider so again I'm telling you if you guys haven't watched The Ether GS complete tutorial and that I've explained every single thing about this provider I'm using the functionality which comes with the ether's package so we got the provider and now we have to Simply get the contract and we have to Simply pass the provider in our fetch contract and the one thing we have to notice that when you try to retrieve data from the contract you don't need to build the connection like in the other function in the other function when we are creating the shipments you can see that we are getting the signer and that signer we are passing into the fetch contract but in when you but when you try to get the data without making any changes in the state variable in the smart contract you can just get the provider like this and that's what I have done here so we have the contract and now I can straight away call the function so we'll say shipments weight and in that we'll have the function get all transactions this will give me the all the transaction the shipments and we have to Simply map over it because this data will come in the form of array so we have to arrange the data you can go without Arrangement but it will become very hard when you will render data in the front end so it's always better that you have to rearrange the data the mode in in such a way which you want to display so let's rearrange that so we'll say shipment map shipments and it's going to be an object type so we're going to take convert the data into an object format so the first one we'll have is the sender and this data we have in this shipment. sender then we'll have the receiver receiver and we'll have the receiver then we'll have the price and we have to convert the price into the form of ether so that's how we can do it we have the pickup time we have to convert that into a number we have the delivery time we have to do the same thing with this and we have the distance convert that into a number then we have the is paid whether it's true or false so that's the one we have to get and here we have the status it going to be a status and that's the entire data arrangement we have so looks fine to me now let's come here we have to return the entire data so we'll have all shipment and that's the thing we have to do and now we have to Simply close it by catch if anything goes wrong we have to throw the entire error message so this is the message we want to display and that's the second function we have for getting all the data from the contract looks find let's write the third function we have called get shipment count so this will allow us to get the assment that how many shipments uh user have done so it's going to be aing S function and again we are not making any changes in the state variable so we don't to pass any argument we have to take the we have to build a condition so first thing we have to do is we have to get the wallet address so we'll say window. ethereum return in install metam Mark so if we don't if a user don't have the ethereum object in the browser that mean he or she doesn't have any kind of web three wallet in the browser so first thing we have to install the browser then they can interact with the contract so that's why we are making if statements so once we're done with that we have to Simply get the accounts so this is the way how we can get the account and that we're going to call this method e account so this will give the account in terms of array once we have the account we'll take the first account we'll take the first account from this accounts array but before we do that we have to build the provider so we'll say provider new that's how we can get the provider Json RPC provider and once we have the provider we have to get the contract we have to pass the provider into the fetch contract so that's what we have here and here we'll going to call this shipments count await contract and in that we have to pass the account address okay and we're going to pass the first account so this will say zero so in this way we get the address of the particular user who try to try to know that how many how many shipments he or she has created so that's the shipments we have here and now we have to Simply return the shipment count and we have to convert it to a number this looks pretty fine and we have to check for the error handling as well so error went getting shipments and that's pretty fine so that's the entire function very simple function what we have done first we have tried to identify whether the user has metamask or any other web three wallet or not if he or she doesn't have it then we have to throw the error message if they have then we have to Simply get his wallet addresses and we have to pass into a contract function so we can get the data from that particular user so that's the function we have here now let's write the third fourth function we'll say complete shipment so this will allow us to change the status of the shipment so we'll say complete shipment and that again we going to take the data in form of object so come here we have to console log out the entire complete shipment data now we're going to take this cons receiver index because that the data will come in the form of object and that's what we have to deconstruct and these are the two data we going to pass into our contract function so let's come here we going to take this try and catch we'll say if if window. ethereum not there then we have to throw the error message here now we have to take this const accounts so we have to get the account of the user so we're going to Simply call the same method get e account so here we have the accounts of the user of the user we say cons web3 model and we have to create the connections and you can see that this time we are taking this web3 model because we have to make the connection and this time we are changing the state variable in the contract that's why we have to need we need a signer now we have to get the connection so this is how we can get the connection web 3 model. connect once we have the connection we have to take the provider from there and we're going to use the ether package and that we're going to pass the connections now we have to get the sign up which we have inside the provider once we have the provider we have to get the contract and that we're going to pass this fetch contract we'll pass this signer and this will give us the contract and we can come here we'll call the function function transaction await contract and this is the function we have in the contract complete shipment and now we have to Simply pass the data so the very first data we have to pass the account that's what we need the one who is trying to interact with the contract the signer uh the sender now we have to pass the receiver this will come from the input and we have to pass the index the index of the user and here we have to Simply make the set the gas limit so one of you have asked me that when you try to call a functions where you are making the changes in the straight variable in the contract some of you have getting an error called gas limit so this is how you can configure sometime it will throw you an error sometime it will not so in case you are getting an error it always be a safer site for you to define the gas limit in the function so I'm going with this gas limit you have to check from your end that what gas limit it will it's one for your function Okay so that's the important things you have to keep in mind so I'm providing this General gas limit it works most of the time but it will throw if it will throw an error I definitely play with this value to find out the perfect one for the gas limit okay so that's the gas limit we have here and once the transaction get complete we have to say transaction wait and we have to Simply console log out the transactions and we have to close the TR cach block console log out the error wrong complete shipment and er the entire error object and this looks fine so this is the complete shipment function we have now let's come here here we're going to take the another function called get shipment so this will allow us to get the data for the particular shipment so in this we have to pass couple of data so we need to pass the index so we'll say console log index we have to convert that into a number because we can't pass it as a string because it's a u variable and here we going to take this try and catch blog and we going to need a account address the one who's interacting and once we have that one and this is the same logic we have to follow to get the user address user wallet address and this is the method we have to call so once you start working with these packages somehow you will remember all of the function all of the method and you can easily able to write it straight away without looking at the documentation but if you are working with for the very first time at that time you have to go through the documentation so that's the account we have here and now we have to get the provider and we'll get it very easily the same logic we have to follow here once we have the provider we have to fetch the contract we'll pass the provider and this is be the contract we have and in that we have to Simply call the function await contract. get shipment and in that we have to pass the data we have to pass the account address and the index and we have to multiply with one so we can convert it into a number so that's the only thing we have to do and here we're going to Simply say shipment list so again we have to format the data in such a way so we can display in uh into our font end okay and that's what we're going to do it so we going to take the shipment and here we're going to Simply take this sender is going to be uh shipment address this is the receiver and that we'll have the shipments index one we'll have the pick in time we'll have the shipment index two and we have to convert this we'll have the delivery time in at SX 3 we'll have the distance index 4 and we have the price we have to convert it into ether and that we have in the index 5 and that's the status we'll have in the six place and the last one we have is the seven paid so this is how we can format the data so if you console out the shipment data you will find that it will come in the form of array and that's what we have done here so we have taken the data from that multiple array and we have formatted in a nice way so we can render in our front end and we have to Simply return the entire single shipment and we have to Simply close the catch block with this error message okay so this looks pretty fine hope the entire thing makes sense to all of you guys these are the very simple JavaScript logic we are building here to interact with the contract and formatting the data in the contract from the contract we are getting now let's come here here we have to build the one more function which is called start shipment and this function will call after the shipment is created because no one can complete the shipment unless or until the shipment is started okay so let's write the function we'll say start shipment it's going to be aning and that we're going to take this get product so we going have to need a product details to start and we going to take this deconstruct receiver and index and these are the two data we need in our start shipment we'll take this try and catch block and in that we have to check for the account address because we need the signer as well the one who's interacting with the contract so that's how we can get the address of the user who is interacting with the contract with this method e accounts so once we have the accounts of that particular user and we going to build this web3 mod the connections we'll build the connections and we'll say web 3. connect the same old logic We are following here so let me write it very quickly provider new ethers provider and we have to pass the connections we have to get the signer which we have inside the provider once we have the signer we have to pass this in Fetch contract signer and that's how we can able to interact with the contract once we have the contract we're going to Simply call that so contract. shipment start shipment and in that we have to pass the data so the data we have to pass is the account the one who's interacting with the contract the receiver and we have to pass the index we have to convert into a number and that's it so once we have the data we have to Simply await for the transaction to be completed and we going to Simply console log out the sment and that's the only thing we have to do and we have to close the catch block sorry no shipments and the entire eror message and this looks pretty fine hope this thing makes sense that's a simple logic we have built now let's write us two common function for connecting our dab with the smart contract check wallet connection and connect wallet function now we have to write the most common function in the appap which allow us to connect with the wallet and if you guys want me to convert this function into a npm package then do let me know in the comment section so we don't need to write again and again the same function for every single tab we can convert it into npm packages and whenever we want to call this function all we have to do is to import the package and we can have that functionality so do let me know if you guys really want then I can build that npm package so you guys can follow that and you guys will also learn that how to build an npm package in web 3 space so let's write the function connect we'll say check if wallet connect so I'm going to write the function very quickly because this is the same function we have written almost 20 times in all the previous project so again we have to check for the metamask connections whether they have the metamask or not once they have the metamask we have to get get the accounts this will be in form of array so we're going to call the same methods e account and once we have the account we have to Simply check for the length so if account do length if there is more than one account then we have to Simply set the account Set current user account to one the first account else we have to throw this message return this Ser message no account and that's pretty much and then we have to Simply close this catch block and that's the only thing you have to do for getting the address of the user so that's the function we have now we have to Simply call create a function which allows the allow the user to connect the dab with click on click function okay so we'll say connect wallet it will have this asyn Behavior then we have to try and catch and we have to call check for the ethereum object in the browser and if we found that then we have to okay if we don't found that we have to say install metamask then we have to get the account and this time the method we going to call is different from eth accounts so this time the method we going to call is called E request accounts so there is a two difference thing okay because this time we're going to make the request on click event and that one is automatically run whenever the browser will load okay so this time we are making the request on click event so here we have the account now we have the set user account we have to Simply set that one and we have to close this catch block and we going to Simply throw this error message so that's the current wallet function we have hope this thing makes sense to all of you guys now we're going to say use effect and the first function we have to call is check if wallet is connected because this function will call every single time the someone will come to our daab so we'll say check if wallet connections and that's the function we have to call empty array so that looks pretty fine and now we have to Simply return the entire function and the data we have created and we have to take the try try tracking context tracking context the one we have built above we'll say provider and inside that we going to take this value and whatever we going to pass inside this value it could be a function name it could be a data type that's all we have defined that's all we going to pass inside this value so we can receive this in the entire application so let's pass that one so we'll pass the connection wallet this is the function we have created we'll pass the create shipment we'll pass the get all shipment we'll have this function called complete shipment we'll have this function called get shipment and we'll have this function start shipment and we'll have this get shipments count and we have this one dap name and we have the current user so these are the function at the data we are putting into our context so we can receive in our dab so let's simply come here close this one and here here we going to pass the children because this will become what because all the component we going to Define is will be in the children and we can easily able to receive the data so that's the entire logic so that's the children we have and now we have to close the our tracking context and that's the only thing we have to do inside this tracking. JS so we have built the core functionality of our dab we have written all the functionality which is required us to interact with the contract fetch the data create the tracking complete the track in get the tracking data all of things we have done so this is the entire data we have written this is the fetch contract function we have and we have this one you can see this is the sh create shipment we have get all shipment we have get shipment count complete shipment count get shipment we have this start shipment we have this check wallet if connected and we have the wallet connector so we have written all of this function and I believe that you guys have got the idea that how we have build the logic okay so if you still have any confusion out make sure to rewatch the video and again I'm telling you that all the startup file is already provided to all of you guys so make sure to visit thin.com there you will find the startup file and you can have a look for all the assets thus looks here now we are done with this click here and we are done with the entire context and now we have to do a little bit configuration before we move to the next part so simply close this one come back to the pages and here we have to configure our provider because this one is the most important things so here we are in the app here we going to write the internal import and we'll say import that's coming from Context tracking and come back to the here and here we going to take this tracking provider grab this one copy this one come back to the app and here we going to import it and we going to write the entire application with this tracking provider so we can receive and have the data in every single component so we'll say take this block and we'll say tracking provider and inside that we going to take this component page props and remove this one and that's the only setup you have to do and this looks pretty fine now what we have to do is come back here close this one and come back to the component section and now we have to create all the components file for our DB so let's create that in the components folder so let's create the complete shipment dogs so this is the first component and we have to type rafc and this is the react functional base component we have created so this is the first component we have now we have to create another one this is the footer component and this is the footer one and now we have to create the third one this is the form component rafc this is the pH form component now we have to create the get shipment component RFC I'm going a little faster because these are the simpler simpler thing which we have done a lot of time in the past and that's the structure I'm following let's create another one this will become a nabar component let's create another one this is the profile jsx and come here we have to create another one this is a service. GSX looks fine now we have to create another one start shipment that's the good one now let's come here let's create a table GSX and I think we are done with this now we have to create one more file this is called index.js and that we index. jss and that we're going to import all the components and that's the approach I take so let's quickly import so let's come here uh this is look good everything is looking good we have all the component which we need and if we find that we need anything else then definitely we can come and we can create that so close this one and let's come here and I'm going to provide you this csb files because in this project we are using icons so you will get all these icons and the images which I have used in this project in the startup file so make sure to download that which I will provide you in the website okay so make sure to download it from there so this is the folder which in which I have all the csb files so I'll simply close this one and if I open this you can find that f f41 means that's the icon for the footer so we have two two icons for the Footers three icons for the navigation and we have one for the close icon so all of this data is already provided to you in the startup file so make sure to get it from there so all of these things we have here this is the icons we have 2 3 this is the cross icons and looks fine hope this entire thing makes sense and now we have to Simply import that come back in index.js and here we going to import all the components including the CSV files so let's import that footer component and that's coming from there let's import the table import the NAB bar import the footer and we have to import the service import the profile let's import the get shipment and you have to import the complete shipment and we have to import the start shipment so all of these components we have import it now we have to import the csb files the icon so let me provide the csb file let's import it which we have inside the folder csb folder SL the nabar one and that's how we can import it nabar 2 then we have the nabar 3 and we have to import the footer one we have foot two and the last one we have is this star one and once we have the entire import is done now we have to export the component so we'll say export and let's export that footer table napar form service profile get shipment complete shipment we have the start shipment and we have to export the CSP file nav one nav 2 nav 3 foot one foot two and we have the service as well so these are the entire Import and Export we have done and it's become very easy when you export all the component which you need in your entire dab and Export it from a single location so it becomes very identical and you know that where you have imported and where you are exporting so this looks pretty fine to me everything is looking good no more issues we have here so far things look is pretty fine come here and this is the component we have this is the abgs this one is also looking pretty good and here we going to import the navigation NAB bar and photo bar because that's the that's the two component is going to be in everything single page so let's import the nabar and footer it's going to be in every single page so this looks pretty fine and let's come back to the component and we're going to Simply wrap that and come here and we have to provide the footer down here so this looks pretty fine pretty promising close this one and come here into the index and now we can start working in our index file okay so before we start writing let's have a look Let's test this out that everything's working or not so what we're going to do is we're going to Simply type npm run Dev and we have to open the application in local L 3,000 and you can see everything is working fine we have no error so our Import and Export is working fine our context is also set we have the napb we have the index we have the footer everything looks pretty good this looks pretty good for me and now we can start working in the component section so we have built have done so far we have built the entire architecture of our dap folder and file structure we have done all the configuration we have written the smart contract we have built the folder we have built the context we have written the entire functionality the core functionality of our applications looks pretty fine to me now close this one come here come back to the context and here we you can see that so this is also done we have written all of these functions we have done all of these functions okay so just a moment that's the only thing I want to cover in this video in the first part of this project and the next part we're going to start building the front end of our daab so hope whatever we have covered so far you guys have understood if you guys found anything error then make sure to rewatch the tutorial to understand everything in the next video we'll start building the front end and we're going to connect all the function we have built so let's move to that all of you hope you guys are great welcome back to part two in the first video we have built the entire core functionality of our tracking dab we have written the smart contract we have written the context management and we have built all this folder and file structure and we have done the configuration in the contract so if you haven't watched the first part make sure to watch it because we are building this dab project in two parts in the first part we have built the entire system and now we going to design the front end so this is where we left in the last video and if if I show you because I have already started the applications this is how it looks right this moment so this is where we left in the last video we have the snap bar index and footer so now we're going to start working on the 31 page come back to index.js and let's write the code for our index page so we're going to import couple of things from react use State use effect and use context and that's coming from react now we're going to do internal Imports in the internal import we're going to import the first thing we have to import the tables because in this dab we have already buil the folder and file structure all the tables component but we haven't written any code into the that table so let's import that for the safer site and we going to add the code one by one so we need tables we need forms we need Services section we need the profile Tex and we need the complete shipment section we need the get shipment get start shipment and these are all coming from the components index so hope if you haven't watched the last video make sure to watch then this will make sense now we have to import the tracking context because this will give us the data about our entire context management which I have explained in detail in the first part and that's coming from the context tracking context so these are the Imports we have now we have to take this index because we want to build this page so we'll say cons index and in that we going to write the all the Logics all the functionalities so what I will do I'll going to take this and and I'm going to take the datas so let's take the data we'll take the current user address whoever will interact with the applications and these all data is coming from the create context okay so let's import the data then we'll import the context so then we have to take the create shipment this is the function we are have exported in the last video so make sure to watch it then we have this get all shipment complete shipment we'll have the get shipment we'll have the get start shipment we'll have get shipment count and these all functions are coming from use context tracking context so we have all the functions with user address now we going to take this state variables and in that we have to store datas so we'll take a state variable called current shipment models and state shipment model and initially it will be false because every single model services will have its own model box so when you click on that it will open a popup and you can type the data and it will give you the data okay so that's the approach I'm taking so this is the first state variable we have now let's take the another one we say open profile initially it will be false now we'll take this start model and it will be false initially then we have this another one we'll take complete model and set complete initially it will be false the last one we have to take get model and this will be false and these are the State variable we have taken now we have to take the data State variable in that we going to take this all shipments data it will become in the form of array so in this we're going to store that one so that's the straight variable we have for the data for the one now we'll come here and we going to take this use effect and in that we have to call the function function when someone reload the browser so that's why we are taking use hook we'll say cons get campaign data and we're going to call this function get all SE ments and in that we're going to Simply return this we have to use this Asing behaviors because there is a synchronous behavior is going on that's why we have to utilize it and in that we're going to Simply take this we'll say const all data await get campaign data so this is what we have to Define and call it and once we have the data we have to Simply store the data so we'll call set all shipment data and in that we have to pass all the data and remember that this data will get in the form of array and it will set in our state variable so it becomes very easy for us to render and that's why I mentioned in the last video that it's always very important that you have to rearrange the data you have to format the data before you actually render in front itend and we have done already in the last video so that's why it's pretty easy for us to State set the data and that's what we're going to return it so that's the first use State we have now we're going to Simply close this one and we going to return this and now we can start writing the GSX so we'll say return and in this we going take this code Block Main block and inside that we going to Define all the component so the very first component we have the services in that we will have all the services this particular D provide so that's the component we going to import and then we going to pass the data the props so first thing we're going to pass is set open profile that's the first props we will pass the second props we will pass this complete model set complete model that's the second one get model set get model props and the last one is going to be start model props and these are the props we are sending in Services section so this looks fine now this is the first component we have now let's take the second one we have table component in that we have to pass the props so this will have the data set it said create shipment model that's the props will pass and we have to also pass the all data all shipment data and these are the two props we have to part now let's take the fourth one the four form and in that we have to take this create shipment and in that we have to pass this props we have to pass this function create shipment form we'll pass this set create shipment model and these are the problems we are sending now let's come to the profile component we'll say open profile that's the pro we have to send now we have to set set open profile and we'll say user current user and we'll have the get shipment counts shipment count and these are the profile component now let's come here we're going to take this complete shipment component and that we have to pass the complete model we'll pass the set complete model we'll pass the complete shipment and we have to Simply close this one so this is the compl shipments model we have now we'll come here we'll take this get shipment we'll take this get model we have the set models we have the get shipment get shipment and we have this one that looks pretty fine let's take the last one is going to be a start shipment will be have this start ship start model sorry and we'll have the start model both of the one we are taking now now we will take this start shipment and that's the start shipment model we have and that's what we going to close it so this is the entire code we have written and now we have to Simply export this one so this looks pretty fine to me you can see we have written the entire code for our index all we have to do is to build the component and will reflect in our front end so this is the import we have done this is the context we have you can see we have all the components working fine we have napar Services stable form profile complete ship get shipment start shipment and footer so let's start with the navigation bar first so here we are in the NAB bar component and now we have to import couple of things from react so let's say import use effect use State and use context and that's coming from react now we have to import the tracking context and that's coming from the cont tracking context and now we have to import the icons and that's coming from the component index now we have to export the entire component default export we are using you can use a functional base component but I'm going with this approach so we'll say we'll take this cons set and set State we'll take this false now we want to take this variable so we have to import the data from our context so we'll take this user we'll take this connect volet and that's coming from our context so that looks fine these are the data we have now we're going to write the navigation bar so we're going to Define in the form of object so we'll say navigation let's define an array inside that we have have the objects we'll say title home and path this let's do the other services we'll have the this will be call contact us this will be the erc20 and that's the navigation we have you can add whatever you want it's totally up to you so this is the navigation we have now we have to take this use effect and inside that we have to take this document on click e because we have to open the nav and close the nav that's what we have to do because we're going to have a two different Navigation one for mobile and one for the desktop so we'll say contracts Target e. Target we'll say if Target do close then we have to call this class so basically I'm using uh Telvin CSS classes here and that's what approach I have taken make sure to you have to take the same approach and we'll set set state is going to be a false and that's it okay so here I'm targeting based on the class and then changing the state so hope this not this not getting so hope you guys understood that what we have done first we are running this use hook calling on the document on click and getting getting the Target and we are simply looking for this closest one and whatever we find closes this class we have to change the state to false that's simple we're going to take this return and we're going to write the entire GSX so let's write it very quickly so we're going to take this nabar inside the naar we're going to take this class names and we going to take Define all the classes so we'll have the background white padding bottom five and on the medium devices we'll have this Tex small and here we going to add a dynamic classes so we'll take this stimulate leral and we'll say if state if state is true then we have to add this Shadow class Shadow large rounded excels border MX2 mt2 Mt basically is stop X is MSX is the right and left okay so hope you guys not get confused about this classes and if you really want to know about all the classes which I'm utilizing for stying make sure to check the telin CSS documentation simply paste the name and you know that what we are typing and what it does let's take the on the media screen we have to define the Shadows none border none and we have MX2 and MD top zero so that looks fine now else we have to say nothing so this is our Dynamic classes Clos this one now we have to take a div it will have the class we'll have Gap Excel 14 we'll have item Center we'll have Max width screen Excel X MX Auto padding X4 on medium devices will have Flex padding X8 and we'll have the and we'll take another div inside that and we'll have a class called Flex item Center justify between padding y5 on the medium de we'll say block we'll take a another anchor tag we'll take a anchor tag we have to define the HF attribute I'm going with this this normal JavaScript valid operator you can type this one or you can type normal hash mod will work in the same way so let's come here we have to define the image so it's going to be our logo so here we going to take this T this logo so this is the logo which I found in one of the components so that's the same logo I'm going to imported or you can design your own personal logo here so this is coming from floated UI logo CSV file and we have to define the width and we have to define the height as well 50 we have to Simply Define the alt class float UI logo and we have to Simply close this one and close this one and we're going to take another div it will have a class and the classes will take on the medium devices we going to hide this this particular div we are creating on the medium devices we going to to hide that one so we're going to take another button we're going to take a button and it will have the class we'll have the class called menu button and this is the class we have targed above you know we have taken that document on close and the class we have given that's what we are targeting text Gray 500 and this 500 you can able to find in the telin CSS again I'm telling you that once you build this component go and simply copy this entire classes and paste and check that what property they have applied into this classes that will be really helpful for you and you guys able to remember this why I'm able to remember this because on my other screen I have the entire design and I'm simply looking at the design so I can know that these are the classes I have to apply I have to add over effect so it will have text Gray 800 we'll have the on click functions and in that we're going to call this function set State and we have to change it so that's the button we have and that we have to display the text so test it's basically we have to display the icon so we'll say State nav one else we have to do the nav 2 so if it's true then we have to display the nav one if it's full then we have to display the nav 2 that's the simple it's basically an icon and we're going to close this one button and we're going to close this div we're going to close this one as well now take a div it will have a class and we have to take this Dynamic block because here we're going to add a classes based on certain conditions so we first we'll have the normal class Flex one item Center margin top 8 on the medium devices margin zero medium flex and this is the dynamic class we'll say that if state is true if a state is true then we have to add this class block else we have to type this hidden class looks fine to me close this one and now we have to take a UL because we have to display the list menu it will have a class called justify Center item Center space Y6 on the medium devices flex and and Space six and space y z we'll take this navigation and we going to Simply Loop over it and we going to take this return and we have to return this entire items so we'll take this Ali we'll have to assign a key otherwise react will throw us the warning and it will have a classes called text Gray 700 over effect text gr 900 that's the Li and we have to take this anchor and then then we have to Simply provide the path and the class block so in that we have to provide the data so item title and that's the only thing we have to do simply close this one so that's the lii and it will render the entire lii document that looks pretty fine come here we have to Simply close the return and we have to close the dynamic block and we have to close this Uli as well looks fine to me so hope this entire thing making sense to all of you guys you guys understand that what we are doing exactly here now come here we going to take another day it will have a class called Flex one Gap 6 item Center justify and margin top space Y6 on the medium devices Flex space y0 medium top zero that's the classes for the div and now we're going to take this current user and this is going to be a dynamic one so if the user is connected with the wallet we have to display if the user is not connected with the app the our application in that scenario we have to display the connect World function the button and if the user is connected we have to display his address so that's why we are taking this Dynamic block so we'll say current user and we'll say if there is no data if the is a current user exists then we have to display his address so we'll take this class and we'll say Flex item Center justify item Center Gap X1 padding Y2 padding X4 and text white font medium BG gray over effect we have to change this to seven and active rounded full and the medium devices in line Flex so all of these classes we have and in that we have to Simply display the current user and we have to slice this down because if you want to display the entire address is pretty huge and it will take a lot of places so it's always better that you have to slice it down to 20 characters or 25 characters it's totally up to you so my UI is totally working fine with the 25 characters that's why I'm going with this 25 and we want to Simply close that this will and now we have to other Dynamic if the user address is not exist then we have to displace this button and this button will have the on click function and on click function we going to call this connect Vol function we already have built the functionality so we have to Simply call this function and we'll have a class called Flex item Center justify content G Gap one padding Y 2 padding X4 text wide font medium BG gay 800 and over effect we going to add this activities the same classes you have to apply rounded full and and medium devices inline Flex now we have to Simply close this one and inside the text we have to write let's say connect wallet and we going to provide this snap bar 3 icon actually an arrow that's what we going to Define it so that looks fine to me and C close the button so this is our button component we have close this Dynamic block let's close this Dev and close this one close this one close this navigation bar and that's look good so you can see this is the entire code we have written for our navigation bar hope this entire thing makes sense to all of you guys and now let's test this out that whether it's working or not so let's have a look quick look that are we missing anything or not so this looks pretty fine you can see everything is working fine now click on now click on this and we going to write on the other component let's check this out have beautifully designed our navigation bar we have the logo we have the menu items and this is the button we have created for connect wet function everything's working fine and the moment I will click on this connect wallet function it will open this metamask because we have already built the functionality and all we have to do is to type the password so let me do it very Qui quickly and let's click on this unlock and here you can see we have this address so all the logic we have built is absolutely working fine if I do the inspect element it's 100% responsive for all the devices you can see everything's looking fine it's very responsive it's very responsive you can see everything's working fine so hope this entire thing makes sense to all of you now let me make a big screen and let's start working on the other components so this is where we left now simply come here go back to the footer because this is the one we have to work on it now let me start working on the GS part so from this we from this component I'm going to work a little faster okay because we have to build the front end so I'll go a little faster so if you guys can think that so if you guys find that I'm going a little faster then you can simply do the adjustment in the speed in the YouTube setting so click on that and make it slow or faster if you think I'm going slow to import the component from react we have to import the icons okay footer icons and that's coming from the component index so now we have to say export default and we have to write the entire jsx so we'll say const footer Define the menu for the Footers so it's going to be an object type so let's say HF Java so this is the link we'll take the name so let me write down very quickly so the second one is going to be our the name is is going to be something like give whatever name you want license close this one HF we'll take the name is going to be a privacy we'll take the name about us and that's the entire menu we have for our navigation bar for the photo so let's close that one and we have to return and let's write the GSX for the footer so what we going to do we're going to take this footer tag and we will have this class let's assign the classes so padding top is going to be 10 so we'll have some space from the top and we'll have this day it will have a class called Max with screen Excel Max Auto padding y padding X4 text Gray 600 on the medium devices padding X is going to be eight and said that we're going to take another div it will have a classes called justify between on the small screen we will have this flex and we'll have another D we will have a classes called space Y6 and so that we're going to have this image for our logo photo logo and it's going to have this I'm going to provide the same image logo and it will have a class called with 32 looks good and now we have to define the text for the application so we'll take this p and we'll have a class max with medium and we'll say type this text so let me type it very quickly so that's the text for our dab you can type whatever you want let's come here we going to take this ul and in that we're going to display our photo navigation so we'll take this class we'll say Flex Flex wrap item Center Gap four text small on a small devices text bases it will have the footer nav and we're going to Loop over it item index it will have a lii class name text Gray 800 over text Gray 500 duration 150 we'll have the Ang it will have a key it will have href item href and in this we going to Define simply the items so items name and that's our foot navigation we going to Simply close this one we'll close this Li as well and we have to close this as well and now we have to close the UL so that's the entire footer navigation component we have so this looks pretty fine now close the div Trier David will have a class called margin top is going to be six and this one is going to be for the copyright and that we'll say class will text Gray 7 font semi bold and we'll say get app and actually we going to display before we display the copy we have to display the icons okay so those app installation icons we have so we'll take this div it will have a class called Flex item Center Gap three margin top three on the small screen we'll have the block inside that we're going to take this anchor and we'll apply the HF to this and in that we going to define the footer one icon for one icon and we going to close this one and we have to display the other icon as well it will have a class AR Duro block and margin top on three in the small screens and we'll say footer to and that's the two icons we have in the footer now we have to close the div and we have to close the diff come here we have to close the diff now we going to take a div it will have a class we'll say margin top 10 padding y 10 border top on the medium devices we'll have the text Center and in this we going to define the P tag and we display the copyright okay all do all right reserve and we have to Simply close this one close this one close this one footer and we are done with this so hope this entire thing makes sense to all of you guys these are the pretty simple things we have done and we are repeating same classes to make the stylings happen Okay so hope this I thing making sense if you guys have any forgot to add anything or you have written something wrong make sure to rewatch that so let's come here and close this one open this one and let's have a look before we write the code in other components f is looking absolutely fine we have the logo we have the text we have the list item this is the copyright section and this is the icons we have defined it's 100% responsive in the mobile device as well you can see it's looking fine and I think something's wrong in this drop down menu we'll check that what is the problem just for the time being let's go like this so this is looking absolutely fine it's responsive the only thing we have to work on this something is wrong so we'll see what's the matter in that let's work in another component so now we're going to work on the services component so let's come back let's come here we're going to work on the let's come on which one we should work this is the service component we have and click on this we have to do is to import the images so this images will be provided to you already in the startup file so make sure to get it from the websites if you haven't got the startup file so we have to import the images and now we have to import the image tag this coming from the next GS now we have to export default and this is the only component we are exporting from here so that's why I'm going with this approach so let's say set open profile all the props we have sent so I believe that you have watched the index page configuration in that we have sent lot of props in our service component so that's the prop we are receiving here so the this is the first prop we have set open pin profile the second props we have is set complete model third one we have set get model set start model and these are the props we have sent into the components and now we have to Simply take this const and we're going to take the team because uh we going to provide couple of services all together we're going to provide six services so you can go with a normal approach but here I'm going with this Services approach in that I'm taking an array and in that I'm going to take all the services so let's define an object we'll say Avatar the image of the service because this image is coming from the images okay so that's the one which I'm taking you can pass multiple data but for the Simplicity I'm going with the simpler approach okay so that's the first avatar I have to write close to Six so let me write it down very quickly so this is image we have get shipment the second one we have this third one we have Avatar image this called start shipment and we have Avatar image this is called user profile all of this images provided to you so you can get it okay we'll have this ship count now we have the image send and these are the data we have taken pretty simple not that complicated so these are the items we have now we have to take this one open model item so we have multiple boxes in the services component and we have to open it that so this is the approach I'm going to take I'm going to take uh IFL State approach IFL State approach and on the base of the click event the user is clicking on that particular service I have to open that particular model box the component so that's that's the approach I'm taking there is a multiple way you can do that but this is the simplest approach I have taken and this I have to write less code so this function will receive the text so let's write it down so first thing we have to do is take build the statement so if text is equal to one one in that context we have to call this we have to open this particular model set complete model because that's is on the index one positions and we have to set it to True else we have to say if text is true then we have to open this particular model set get model true else if text is equal to 3 we have to open this particular model set start model true else if text is equal to 4 in that context we have to open this model set profile open profile true and that looks pretty fine okay so this is the simplest function on the click event we will get the text and the value and based on that we are opening that particular model and that's the simplest approach you can make it more complex by creating a single function for each one of the model but that's too much work so we are done with that and now we're going to start the G6 for the entire service component so we'll say return and we'll take this service section section and it will have a class padding y0 padding bottom 14 we'll have this div it will have a class max W screen Excel Max Auto padding XY on the medium devices sping 8 we'll have the div it will have the class name margin top 8 12 sorry 12 12 I know I'm going a little faster that's why I'm making this silly sound mistake I hope you guys can bear that for me so that's the component we have now we have to take this UL it will have a class grade Gap 18 on a small devisor we'll have this grid column to medium devisor will have a grid column 3 we'll take this team and we going to Simply map over it so we going to Loop over it so items I inside that we going to take the LI it will have a key and it will have the div this div we have the on click function and on the on click function the function we have built above that's what we going to assign it so we'll say open model box I + 1 so it will start from one because like the index will start from zero so so that's why I'm adding one so it will start 1 2 3 4 and goes like that so that's the data we are passing now we're going to say class width full height 60 on a small device we want to make it high to 40 52 on the medium device height is going to be 56 and we'll close that one inside the div we'll take this image tag and we'll have the images inside the item so that's what we going to display so we'll say Source item is going to be Avatar we have to do one thing and here we want to Def find the classes we say withd full height full object cover object Center Shadow add medium around Excel these are the classes for the images we'll say alt is going to be an empty you can type whatever you want and that's the image closed now we have to close the div as well we have to close Li and we have to Simply close the dynamic block and the UL as well close the div close the div and close the section and that's the entire component we have written okay pretty simple not that many code we have used the components render the items with all the components functionality so you can see everything is working fine now comeing here click on this and now let's test this out it's looking absolutely perfect so this is the services component we have you can see it's 100% responsive so this is the navigation this is service component if I do the inspect element it's 100% responsive you can see you can see it looks absolutely incredible it's working like a bread and butter okay it's looking absolutely first fine and if you can see if I click on this complete model it will open the form okay it's not working because we haven't worked on the functionality but it will work absolutely fine when we'll build those component okay we are already connected if I want to log out from this app this will also working fine so let me log out once so I'll come here I'll click on this log out and I'll reload the browser and here we have the functions so everything is working fine now let's start working on the other component which is the table component the um come to the taable let's create the export default and in that we have to receive the props we have sent so this is all the props we going to receive first one is set create shipment model all items all shipment okay all the data which we going to pass inside this table component and that's the export default now we're going to take this state variable sorry const and in that we going to take the data so it will come convert time so basically what will happen that when we'll get the data from the contact contract it will come in the form of time stamp so we have to convert the time in stamp into the readable data so user can understand okay so that's the function we're going to build convert time so we'll pass the time into this and we'll say const new time and we're going to use this function JavaScript function new date and that we're going to pass the time stand and we have to do the configuration we'll say date time and we'll say new in in until date time format and it's going to be in English US English and we'll take the year the numeric and we'll take the month we'll take the day and we going simp simply call the format new time and we're going to Simply return the date time so that's pretty much that's a pretty simple function normal JavaScript nothing related to the smart contract and the dab develop okay we are getting the data in the time stamp and we are simply converting into the year month and date and that's what we are returning looks fine come here and we have to take a console log this all shipment data all shipment data now we going to write the jxx for the table so this one is going to be a pretty big one because we have to build the table so and we have to stylish as well so it's going to be a biggest component in our dab so we take this D it will have a class called Max withd screen Excel Max Auto padding X4 on the medium devices will have padding eight we'll take this D will have a class called item St start justify between on the medium devices we'll have the flex we'll take a d it will have a class called Max WL we'll take the H3 tag and it's going to be heading so it will have a class it will say text Gray 800 text Xcel font Bol and on the small screen we're going to have this text 2x create tracking we'll close this one and we going to take this P tag and we'll display short information about this tracking it will have a class we'll say text Gray six and margin top is going to be two and in that we will write this demit text you can type whatever you want so that's the text we have close this one now we'll take another T it will have a class we'll say margin top is going to be three on the medium device margin top is going to be zero inside that we'll take a P tag and inside that we going to take add this on click function we say set create shipment model true so this will open the model and here we're going to say href we don't need to redirect anywhere else we have to assign a classes inline block padding X4 padding Y2 text white duration 150 font middle medium and background is going to be gray 800 and over effect we going to add this 700 and we're going to set the active state to 9 and take small and it's going to be around large and it will have inline Flex so all of these classes we have included and we going to Simply close and in that we're going to type this add track so when someone will click on this it will open the form element and they can pull out the datails and they can create the shipment and that's why we have added this model functions set create shipment model so that looks fine now come here we going to Simply close this one we'll close this div close this one and now we have to write a classes we'll take another D will have a class called margin top 12 Shadow border border large overflow X Auto it will have a table class full width table Auto table small table left text slip sorry don't table table we'll have this head it will have a class name BG gray 50 text Gray 600 font medium border B we'll have this TR it will have the TR class name padding Y3 padding six cender and we have to repeat this couple of times so let me do it very quickly the same classes we have to apply so let me write it very quickly spe so simply close this one so hope you have built all of these components so we are defining the header of our tables so that's looks fine come here now we have to Simply close the head we'll come down here we going to take the body table body and we'll Define a classes we'll take this text gr 600 divided y and we going to take the data so we have all the data into our all shipment and we're going to Simply Loop over at the reason we have provided this question mark because sometime the data will come late and at that time you will get undefined so if you don't provide this question marks you will get error so it's always better to add a guard class in your data so that's why I have taken this question mark and we're going to Simply Loop oric we say sment and index and here what I'm going to do is I'm going to Define the tier it will have a key index and inside that we're going to take this stable body and we'll add these classes patting X6 patting y4 white space unwrap no wrap and in that we going to Simply display the data this will be the slice size sender message and we are slicing it down to 15 characters and we have to Simply close the spon so this is the first stable body now we have to take another one for the receiver we have add the same classes and in that we have to take the address which we have IDE the shipment receiver and slice it down to 15 now we have to close it close it take another table body it will have padding six padding four white space same classes we have to apply and now we have to display the data so in this we going to display the pickup time and that's why so let's come here we'll take this table body we're going to take this table body classes now we have to take the same classes very quickly we'll display the data distance in kilometer closest one we'll take another table body it will have the same classes we'll display the prize on this time we don't need to convert the prize in ether because the data we have formatted in our context we have already converted it into ether not in B and that's the best part when you convert the data right when you fetch it from the contract and export in the entire dab close this one take another table board a Define the classes then play the delivery time table body take another one Define the shipment is paid if it's paid is true then we have to say complete but if it's not true false then we have to say not complete simple if else statement we have written close this one and click another one it will have the same classes and right now you can see that I'm repeating this components this body tag over and over again but you can take it in a in a in a error format you can simply rendering by looping over it but for the Simplicity for making you understand that's why I'm going with this approach otherwise I can make it in more complex way and that would let me that would that would help me to write less code let's write the status whether it's completed so if the index of the status because you know that in the smart contract we have defined three different status the pending in transmit and and deliver and each one have the index okay if it's zero that means we are in the pending mode but if it's one then we are in the in transit mode if it's shipment status is one then we are in the transferring mode means the product is in deliver for ready for deliver and the final is going to be the deliver one if the index is two the status is two okay hope this things make sense and we're going to Simply close this one we have to close this entire table we have to close this Dynamic block and we have to close the table body as well table tab as well and table div and close all the divs and that's that's the pretty much you can see everything's working fine it's absolutely beautiful no more eror we have simply come here and if you guys have missed something make sure to rewatch it now it's time to check this out whether we have built the template or we have got any error you see it's reloading the browser and if I scroll down and it looks absolutely stunning so we have this title we have the data and we have our table header tables and right now we don't have any we haven't created any any tracking data that's why you can see we it's totally empty if you click here you can see nothing will happen because we haven't wrote the functionality for that but everything's working fine now we're going to work on the on the for component and we're going to create couple of tracking product product tracking okay so let's come back to the vs and let's start working on the form component this one and this time we're going to start working on the form on the form and here we are we have to import couple of things from react so use State and that's coming from react and now we have to Simply export default and we have to receive the props so we'll take this Set current shipment model we'll take this create shipment model we'll take the create shipment functions and now we going to define the data side so we'll take the cons we'll take a use State and we'll take this shipment and set shipment initially is going to be in form of object okay because we going to take couple of data from the user like address time stamps all of those things so that's why we have taken the data in a state variable and I'm taking this data in the form of object because when we are receiving this data in our context function for creating a shipment we are taking in form of objects that's why I've have taken this approach let's define all of those fields which we're going to create so we need the receiver we need the pickup time we need the distance we need the price and that's the four data we need for creating the shipment we'll come here we going to take this cons create item and it's going to be Asing function and in that we going to Simply call the function so we have to take this try and catch block because sometime things goes wrong so we have to catch that and we don't want our application got crash so in this we're going to Simply take this await create shipment because this is the function we have built in our context and in that we're going to pass the entire shipment items so we'll say shipment entire object and we'll simply take this sketch error if anything's goes wrong we have to Simply console log out the error message and that's pretty much looks fine now we have to Simply write the GSX in which we have to take the INF fills and we have to define the entire layout of our form component so let's write the GSX part we'll say create shipment so this is the approach we are taking so we'll say create shipment so what we are doing here we are saying that if create shipment model is true then only we have to display the component otherwise we don't want to display anything so that's why I'm taking this approach there is multiple way you can tackle this but this is the simplest way and easiest way so let's have a div it will have a class called flexed it will have the inser zero it will have the Zen index 10 overflow y Auto this will cover the entire screen that's why we have used the fixed insert zero that will cover the entire screen and Zen index is going to be top and flex Y is going to be Auto so we have to take another div it will have the class called flexed inser zero with full height full BG is going to be a black opacity 40 it will have a onclick functions so it will say Set current shipment model is to false because this will open so it will become true so we have to if someone click on that we have to make it false and that's what we have now we have to Simply close this one we'll take a div it will have a class Flex item Center it will say mean height screen padding X4 padding Y8 and we'll take the div it will have a class called relative withd full Max W large padding for Max Auto background white and rounded medium Shadow large and we'll have another will have a class called Flex justify end it will have that button and in this button we going to Simply display the icon close icon so we'll say class pd2 text Gray 400 rounded medium over effect we'll say background gray 100 and we'll take this on click function and we'll say set create shipment model to false that's looks good now we have to take this SVG file so this chb file will be provided to you in the startup file so all you have to do is to import the component and you can display that but I'm going to write it very quickly because I forgot to import it so we'll say XML we have to provide this so let me write the entire icon because this icon is already given to you and this icon is already provided to you again I'm telling you in the csb folder I'll show you which one it is so you guys can import it instead of writing that one okay so this looks pretty fine these are the entire CSV let me close this one and close the button we can come here close the div we have to take a div and now we we have to define the entire body for our component so we'll take a class it will have a Max wmsm Max or2 padding Y3 space Y3 text Center we have a H4 it will have a class called text large font medium text Gray 800 we'll have this track product create shipment close this H4 tag take this P it will have a class text 150 pixels text gr 600 it will have the text the short description close this one take a form component form tag and we'll have onsubmit function and on that we have to first stop the default behavior of the form and this is how we can do that we say e do prevent default so this will def stop the default behavior for submitting the form and once we stop the default Behavior now we have to take a d it we have a class we'll say relative margin top three and and that we have to take a input field so altogether we going to have four input Fields because we are taking four data from the user so type is going to be text it will have the placeholder will say receiver it will have the class name full width padding left five padding right three padding Y 2 gray 500 BG transparent outline none border Focus border Indigo 600 Shadow SM and rounded large so these are the classes we have it now it will have on click function sorry onchange function and on the onchange function and it will have a onchange property so whenever someone will pipe anything into the input field or the user will provide the address of the receiver we going to Simply update that that's why we have taken this onchange so we're going to take this our set shipping State and we going to Simply update that so we'll deconstruct the entire so we'll say dot dot dot shipment and we going to Target the specific object we want to update so this is what we want to receiver and we say e do target. value so that's how we can update that particular value in that object and we going to Simply close that one so that's the first input fill we have that's the first input fill we have simply close that one and close the div and that's the exact thing we have to do four times for four all the components so let me do it very quickly the same variables we going to provide it over and over again so I'm just pausing my voice for a time and you guys can Ty it very quickly so I'm just pausing it and I'm tapping very quickly so you guys can follow that so this time you have noticed that the type is date because we have to take the delivery time let's assign the classes now we have to Simply update the data the time and the same way we going to update it pick up time and we have to update the value now we'll take another div and we have to do the same thing relative top three this time tap is going to be text and the rest would be the same we have to change the function only the object the data we are updating and we have to Simply update that now we have to dat the last one and we have to Simply update this one prize close the dev take a button and this time we're going to submit this one okay we're going to call this function create item it will have a classes block full width margin tree and the rest classes going to be the same which we have applied previously on the button we'll close the button create shipment close the button form close the div close the div close the div and the final one is that's it empty so if our model is true then we have to display otherwise we don't want to display anything and this looks pretty fine and that's the entire form component we have written hope this entire thing makes sense to all of you guys now come here and let's test this out and you can see everything's working fine reload the browser and now let's test this out so if we click on this the form component will open so click on this and here you can see it looks absolutely beautiful so we have the title we have the text message we have this form we have the date and we have the distance we have the price and this is the one we have and it's also working fine so let's create and create a and we have already built the functionality so we can create the tracking add the product so first thing we have to connect the wallet and just a moment and here I have to part my credential unlock so here we have unlocked the credentials we have connected to with the wallet now we can say before we make the transaction we have to clear all the history otherwise we'll get an error so it'll come here go back to the settings into the advance come here click on this clear activities tab data and this looks pretty fine reload the browser and this looks pretty fine click on this add tracking here we have the popup so what I will do I'll come here go to this one click on the metamask click on this copy one click on this and now I can make the transaction so simply pass the address of theant so this is the address let me pick up the date so this is the date I'm going to pick the distance is going to be let's say 2 5 6 whatever you can type the price is going to be up to you 45 and you can click on this create shipment and here the metamask is open and you can see the thing you can see 45 ether we are charging for the shipments and you can click on this confirm and and the transaction is confirm if I scroll down here and here you will find the data you can see the table component is also working fine we have fetch the information about the transaction so this is the sender this is the receiver this is the pickup time and this is the distance and we have you can see the D time we have converted into a readable time so we are displaying here and this is the delivery state so right now the delivery is not done that's why it's saying zero but once the delivery will get completed you will find that time will slay here the paid is not completed yet and pending so it's also working fine if you can come here you can create more so you can create here you can pick any the date so I'll go with simply 15 distance is going to be 45 6 whatever you type and this time I will take 23 create a shipments and you can simply click on this so just wait confirm and the transaction went through and here you will have the data so everything is working fine all the logic we have built now we have to work on these components complete shipment get shipment start shipment and user profile and these are the optional you can add more functionality to this but I'll leave the options for you to come and do the experiment but let's write all of these four components which is left come back to the vs in our vs code Studio you can see everything's working fine now what we have to do is we have to work on this complete shipment so before we work on the complete shipment we have to work on start shipment because once the shipment will start then we have to complete it okay that's the logic that's the simple logic so come here get start everything's working fine we can able to render the data into our table component we can create a shipment now we have to work on the component for getting shipment data okay so click on this get shipment and we have to import couple of things from react use State and now we have to create this component defa export default and in that we have to receive the prop so we need get model set get model and get shipment because this gate shipment will have all the data about that particular shipment so we'll take this const we'll take this index because we have to find the shipment based on the index because every single shipment will have a unique ID and we are doing on the base of index you can assign a particular ID or you can assign a particular user ID or user data which you can take from the user okay so we'll say you state initially it will be zero we're going to take this another one will say single shipment data and set single shipment data it's going to be used state so or one single syn shipment we going to store because this shipment is a function when we'll call that it will give us an array and we going to Simply take the data from here and we're going to assign it into this so just follow along with me so we'll take this cons get shipment data and we're going to call this Asing function because we are dealing with the synchronous Behavior We'll add this const get shipment data and we'll say a wait get shipment in that we have to pass the index so it will return us the data of that particular shipment and all we have to do is to set the data into our set single shipment data that's pretty simple and we have to Simply console log out the data and that's the only thing we have to do so we'll simply console log out the entire single shipment data that looks good now we'll come here we'll take a variable called cost convert time because we have to convert the time into a readable format because the time will come in form of in form of what I say in form of time stamp so let's write the simple function convert Time new time and we're going to follow the same logic we have done previously so let me write it down very quickly you can do one thing you can create a utility function and you can simply import it that but I didn't do I forgot to do that that's why I'm writing this code again again but in the real world what will happen that you're going to convert this kind of function which you are utilizing in your daap over and over again into utility function so let R return that date and that's the convert time function we have looks fine come here we're going to take this return and now we're going to write the entire j6 for our tab for this comp component so we'll say get model the same approach we are taking if it's true then we have to display the component otherwise we have to hide the component we'll take a deit will have a class Flex insert zero Z index 10 overflow y Auto we'll take the div it will have a class name fix insert zero full width full height background black opacity 40 it will have a onclick function we'll say set get model false and we have to close this one we'll take this div it will have a class called Flex item Center men height screen padding X4 padding Y8 it will have another will have a class called relative full width maxw large padding four meax Auto background white rounded Shadow large it will have a will have a class called Flex justify end it will have a button it will have a class name padding to text Gray 400 rounded MDM overflow background background gray 10 100 sorry it will have a onclick functions called set get model false and we have to type our text actually in the text we going to type the chb file so let me show you that which chb file I'm telling you okay because uh my extension is on that's why I'm not able to import the component so what I will do I'll show you that which chsb file I'm imported writing here so you can see that this is the component in which we have all of these component if I open the chb file here you will find this is the footer com footer icons we have this is the napar icon we have and this is the this is the exact CSV icon we are typing manually so my extension is on that's why I'm not able to stop it and simply import it but in your course you can simply import this csb component and you can have it okay but in my case my extension is on that's why I'm not able to do that so I have to type it so we have to close this one we have to close the csb file file and that's the entire icon we have we're going to close this button as well come here we're going to take this div close this div we going to take a divid we have a class called Max with small Max Auto padding Y3 space Y3 text Center it will have a H4 and that we have to display the classes so we'll have this Tex large font medium text Gray 800 inside that we have to type our text so we'll type product details tracking details and we're going to Simply close this H4 we'll come here we'll take this form and it will have a onsubmit the same approach we are taken which we have taken in the last component so that's why I'm going a little faster here so it will have a relative margin top three it will have a input tag because we need to take the number so we'll take this type is going to be a number because we have to take the index of that particular product details let's provide all of these data very quickly it will have a classes called Full WD padding left four padding right three padding Y 2 text Gray 500 background transparent outline none border Focus Border in line 16 Shadow SM arounded so so many things we have to add now we'll have on change function and we have to Simply take this index and we have to update that so that's the div we have we have to close it up we'll come here we'll take a button and we have to take this on click function and we're going to Simply call the function get shipment data and we have to take the classes block full width margin 3 y X4 medium text small text Center text white BG Indigo 600 over flow we have 500 active Indigo 7 round large ring offset 2 ring Indigo 600 Focus ring two so these are the classes we have quite unique one and we have to type our text so in this we're going to type it's something like get details because that's what it will give us close the button this is theti button component now we're going to complay we going to close the form component and now we're going to take a dynamic block and that we're going to display the data of that particular product details so that's all data we have inside this so we'll say single shipment data inside that we'll take this because if it's undefined then we have to come here and we have to simply don't need to display anything but if there is a data then we have to display the data and that's how we can do it that's pretty easy so we're going to take this div will have a class text left and inside that we going to take this P sender and in that we're going to display the data of the sender and the same thing we have to do here for all the data which we have done and which we have already done in the in the other component so let me do it very quickly we have to take the data of the pick time we have to pass into the convert time function the time stamp we have to take uh another Dev sorry P tag and it will say deliver time and we have to convert the time into a time stamp we have to display the distance we have to display the prize and status so this one is going to be dynamic if the paid is true then we have to say completed but if it's not then we have to say not completed and we have to close it and we have to close a div we have to close our Dynamic block close the dev and close the div close one and close this one and empty so hope this entire thing makes sense to all of you guys these are the things we have written for get shipments pretty simple component we have built which will allow us to call the function to display the data now let's come here and now let's test this out because we have already built we have already created the tracking product tracking one two because and now let's test this out because we have already created the product let me to the browser and right now everything looks fine you can able to create and we have already created that so this is the first tracking it's on the index position so this one is a zero and this one is the one you can assign a ID to each one of these but I'm not going with that approach I'm taking a simpler approach so this is the zero and this is the one so the function we have to call is this this function get you have to click on this component because in this component we have attached the function so if I call this get shipment so this will give us the data so if I click on this here you have the popup if you click on this it will not work because this is the component in which we have attached the function get shipment so in this I have to pass the ID so I can simply type zero if I type one it will give me the one if you click on this here you can see I got all of the data I get the sender I get the rece here I get the pickup time delivery distance and you can see this is the exact distance we have so let me scroll down here this is the exact instant the one we have assigned 4 56 but if you assign zero it will give us the first one you can see the data is changed 256 if you assign the first it will change so this one is also working fine and this is the icon which is displaying it's also looking fine and this one is also working fine now we have three more component so now we're going to start working on the start shipment then we have to work on this then we going to work on that so this looks fine let's come back to the vs and let's start working on the other component so let's come here now come here and and we have to go back close this one come to this and we have to work on the start shipment click on this and now we have to import couple of things from react so we'll use State and that's coming from react now we have to import the icons so start one the cross icon and that's coming from the index and let's make it default export and we have to receive the props so start model set start Model start shipment the function and here we going to take this variable we'll say get product and set product it's going to be an object so in that we have to take the data about the particular product which we want to Target and we have to set that that that the the deliveries got started because that's what the functionality we are working on start shipment so need we need the data for that particular product so let's define that we need the receiver when we need the index so these are the two data we need for the product let's close this out come here and here we have to Simply take a variable we'll say start shipment and in that we going to Simply call the function we'll pass the data into this start shipment and we'll pass the product data and we have to call it that's it and we have to Simply build the entire GSX now so we'll say start model if it's true then we want to display otherwise we don't want to display so let's build the GSX we'll say div it will have a class flexed incent so the same classes we have to apply because we want to have a black transparent one this one is also going to be the same one full BG background opacity and we have on click function so it will turn the to false okay set start model will turn to false looks good and we have to Simply close thetive the same logic We are following for every popup model now come here here we have to take a div it will have a class called Flex item Center Min height screen padding X4 padding Y8 inside that we go take this St it will have a class called relative full width withd full Max with large padding four MX Auto background white rounded medium Shadow large and inside that we're going to have this D will have a class called Flex justify end and so that we're going to have this button and it will have our CLA icon so we'll say class P2 text Gray 4 rounded medium over on over effect will have this gray 100 it will have on click function on the on click function we have to set the start model to false because we have to close the model and we have to Simply close this one button and we have to Simply call the icon so this is the cross icon and some component I forgot to import and some component I have imported so in whichever component I have forgot to import make sure you have to replace the csb code with the this icon it will work in the both same way and all the code is provide all the startup file is already provided to all of you guys so you guys simply download that one from my website we'll come here we'll take this button close this one we'll close this Dev and now we have to work on the body so we'll say class max with small Max Auto padding Y3 space Y3 text Center it will have H4 we have to provide the headlines the same classes we have to provide our headline and we have to say start the ship Ming we have to close the H4 and now we have to write the same description so now we have to take the form and so now we have to define the form so it will have a onsubmit we have to stop the default behavior of the form we'll say div class relative margin top three it will have the input and the type is going to be let's say text it will have the placeholder receiver it will have the class name full withd padding left five padding right three padding Y 2 text Gray 500 background transparent outline none border Focus border Indo 600 Shadow SM bred large the same classes we have to apply in every single input field okay so this time I'm going to write it very quickly so let's we have to take the data and we have to update into our state variable for get product so we'll s the set get product we'll deconstruct the get product and we'll take the data we want to update so we want to update the receiver address and we going to say to value and this looks fine looks pretty good we have to close this one close this one close the div and we have to take another div we have to S the same input fill this time for the ID so let me write it very quickly and we have to update the data so this time we have to update the index which we have inside this so we'll say index e. target. value and we'll have the data updated and now we have to close this one we have to close the div and now we have to take a button it will have the on click function in that on click function we have to call this function we have created start Shi and it will have the classes so the same classes we have to apply for every single butle so let me do it very quickly and you can think and you can do in more optimized way so right now you can see that I'm using a lot of buttons in the daav and again and again I'm tapping the button component and writing the classes you can convert this button into a component and you can import the button and you can have it without applying these classes so there's a multiple way which you can do but I'm going for the simplest approach I'm going like this where I can show you that what are the classes exist in the telin CSS so you guys can get a practice and the reason why I have taken this approach because the more you write the same classes over and over again you get memorized so when you will build project like this two to three project and after that everything will be set in your mind and you can easily able to utilize it that's the button we have now we have to say get details close this one and we have to close the form close the div close the div close the div close the div and now we have to send this empty and that's the entire component we have written everything is working fine you can see we have built all of this component all of this jsx and looks fine and that's the start shipment component we are done close this one come here and before we write any other component Let's test this out the browser things are looking fine and we are already checked this position get product details and we have this one complete shipment if you click on that and okay this one start shipment if you click on that here you can see we have the popup okay I forgot to change this one it's not get details it say start shipment but you can do it from your end so in this we have to pass the receiver address and the ID so let's do one thing this is the one we going to change the status and this is the address we have to pass so I'll click here I'll click here uh and I'll go back to the account number two because this is the account account number three I want come back here and reload the browser so you can see this is the account I'm connected I click on this I'll paste the address this is the address and I have to pass the ID so I'll paste zero I'll click on this get details but you can change this to get shipping start if you click on this here we have open the metamask and you can find that this is the contract we are interacting with click on this confirm and the transaction went through you can see the browser reload that means the transaction went through if you scroll down here you can see the status is changed in transmit so the entire logic is working fine we have changed the status so the product is out for delivery and now we have to work on this complete shipment so when when we click on this complete shipment so here we going to update this data this data okay these are the two data we going to update so things are looking fine promising we are done with this we are done with this you can type it and you can have the data looking fine you can check this one and you can simply change the status so now let's start working on this complete shipment component so let's come here we want to click on this uh complete shipment click on this and now we have to import couple of things from react so we'll say use State and that's coming from react we'll export the component we'll have to receive the props we have sent so complete model set complete models we have to get the complete shipment function and we going to say complete shipment and set complete shipment and it's going to be an object type because we have to take the data for completing the shipment so in this we going to take the receiver address and we have to take the address of the index sorry index these are the two data we need for completing the shipment let's come here let's start build the functionality which we call so we'll say change shipments change status change status and it's going to be Asing functions and we have to call the function so we'll say complete shipment this is the function we have to call and in that we have to pass the data in form of object because that's the way we are receiving the data and then we are deconstructing the data so if you have watch the first part make sure to watch it because in that I have explained everything right I'm just building the logic and then I'm going to pass the data otherwise we have to do new to anything and now we have to work on the entire GSX so if it's true then we have to display the component otherwise we don't want to display anything so true then we have to build this component so we'll say div it will have the classes and the same thing we have to do the same classes we have to apply here as well because this is the pop-up model and this this is the the overlay div we have background opacity 40 and we're going to Simply provide this on click function in that we have to set this to false the same logic we are folling okay so I hope by the time we are building this component you guys got familiar with the classes because we have already built three four components and we utilize the same classes over and over again now we have to take a div it will have the classes Flex item Center Min height screen the same classes we have to apply let me write very quickly we'll take the d it will have a class name relative full width Max WL large padding 4 Max Auto background white random same classes I have to apply David will have a class Flex justify and it will have a button so the close button we have to assign so this time I forgot to import the close button close icon component so I have to type the entire C csb file here but in your case the csb file is provided to you all you have to do is to import it and you have to place it right inside the button let's add the classes it will have on click function we have to set to false insert that we have to take the CB file and this CB file is already provided to you now we have to close the csb so that's the icon we have close the button close the div and now we have to start working on the body so we'll take a div and we have to assign the same classes we have assigned in other popup model so let me do it very quickly now we'll take this H4 and we have to assign the same classes you can see a lot of components we repeating over and over again so what you can do you can convert these component into a uh you can convert this divs this blocks into a component and you can utilize it but I want the re but I'm going with this approach so let's provide this H4 complete shipment and we'll have this one let's take a form and that we have to stop the default behavior and we have to take the div it will have a class relative top three it will have a input and the same input classes we have to assign so let me assign it very quickly or you can do one thing you can simply copy paste from other components if you don't like to write but make sure to change the data on change and you have to update it the state object we have taken so take that one and we have to Simply deconstruct that complete Shi and we have to take the data we want to pre-update so we'll take this receiver and we have to set the value and simply close that one we need to create one more input field for the index so let me do this very quickly close this one and we have to close this one and let's create the another one so I'm going to type it very quickly you can simply copy and paste and simply replace the value but let me write it very quickly because you know I'm using an extension so I cannot copy it simply the Index close that one close this one close this close this one we're going to take the button and we going to attach the function so it going to have the change status functions and we have to assign the same classes which we assign to every single button so let's assign it very quickly change status and we'll see close the button you can type complete shipment whatever you want complete the form complete the div complete the div complete the div close it and we have to say this empty and with that we are done with this entire block complete shipment hope you guys can follow with me and everything's working fine close this one and now we can test this out we are done with this we can easily able to get that one Let's test this out everything is working fine this one is also working fine and if I click on this complete shipment you can see the popup we have this is the complete shipment the address and this what we have to provide it and this is the chain status we have so what I will do I'll come here so this is the one which is in transmitted okay so if I want to change the status of those product tracking which their status is pending so I'll get an error I can call this function complete statement in only those product tracking which has the status to in transmitted because this is the logic we have applied so if I click on this and that way I have to pass the address so I'll pass the address of the receiver and I'm will go with index zero I'll click on this change it will open up the metamask and it will make the transaction so let me click on this confirm click on confirm and here you can see the transaction went through and if I scroll down here you will find the data is Chang so this is the time stamp you have got for the particular delivery this is the paid because we have made the transactions completed and this is the product is delivered so the logic is absolutely working fine if you want to do the changes here as well you can do that so first click on this provide the reian and go to the index index one one click on this get shipment you can type it start shipment confirm it and the browser will load and you can see the status is changed and if you want to convert it you can simply get the data you can type it and you can see the data is updated so status is one means we are in the transaction you can display the actual like in transmitt that value which we have defined here this one okay now we have to click on this complete statement in that we have to pass the address we'll say number two index not two one index click on this change status and we have this metamask click on confirm and the status is change and deliver this looks absolutely fine let's create one more very quickly so we can do the further testing so go to this one distance is going to be something big let's say price is going to be 12 very less but it's actually too much for in terms of ether click on confirm and the transaction went through you can see it's spending all the logic is working fine now we're going to work on the last component which is a profile component and that's what we're going to attach it right up here so let's start working on it and we are building hope you guys have follow me so far and you have understood all the component all the logic we have built in this application so let's come here and let's start working on it so the one we going to work it now is we have done all of this we have to work on the this is also we done it we have to work on the profile click on this profile and we have to import couple of things from react so react use State use effect that's coming from react now we have to import the image we have to do the internal import and we have to import the images for the Avatar which we are about to use and now we have to export the default component and then we have to receive the props we have sent open profile set open profile we have to say current user we have to say get shipment count so how many shipments a particular user have created in the contract that's what we're going to fetch it and now we're going to take this data const count and we going to Simply take this count now we'll take this use effect use effect and in that we're going to Simply call this function we'll say get shipment we'll say cons get shipment data we'll call this function and that we're going to return a syns because we are dealing with the synchronous Behavior the same logic we have followed in the index space that's what we are doing here we'll say and we're going to Simply say cons all data await ship data get shipment data once we have the data we have to Simply update the data to set counts that's looks fine and we have to Simply close this empty array so that's the function and now we have to write the entire j6 so we'll return open profile is true then we have to display the component otherwise we have to hide it so the same logic We are following here as well we'll we take a div and we have to take the same classes on the first two div so let me quickly take it or you can simply copy paste from the previous component this is the same classes we have to assign for uh opacity 41 we'll take the on click function and we have to set this to false we have to close it close this one and now we have to work on the actual component so the first header is going to be the same so let's define the same classes and inside that we will have a class it's also going to be the same full WD Max L bading 4 Auto background white so the same classes we have applied in the previous popup model the same classes we have app here as well we'll take a div it will have a flex end and inside that we're going to take this button this is going to be our close button it will have on click function and we have to set this to false so we can close the popup model and then we have to take the icon so the icon is provided to you I'm going to write the code because I forgot to import the model sorry the component icon component so let me take the csb file and let me write it very quickly for down we'll take a div it will have the classes same the body we have to Define you can simply copy the previous components bodies and you can paste and you can do the changes but let me write it very quickly it will have an image and the image is coming from the like we have to assign the vid classes we have to assign the s so we'll have a inside the image folder we have this Avatar image which is given to you we'll have this close the image and we going to take this H5 and then we're going to say margin bottom one text Xcel font medium text Gray 900 dark text white we'll say welcome Trader that's the message we want to display and we're going to Simply close this one we come here here we going to take a span and inside that it will say text small text Gray 500 dark gray 400 and inside that we have to display the address of the user so that's the one we have to P it here close this one and once we have the address we want to take this div it will have a class Flex top four space X3 and on the medium devices top six inside that we're going to take this a and this will have the HF this is going to provide you can provide any link sted up to you and in this we have a class Flex item Center panning X4 y text small font medium and the same classes we have assigned to the Anchor that's what we have to assign here and we have to close it in that we have to assign the balance of the user so I'm going with the hard code function hard code balance you can display with the functionality okay that's very easy but I'm not going to do it in this video this is the balance of the user and the only thing I want to display the number of counts that how many product tracking he or she has created in the contract so let's define that very quickly the same classes we have to assign to this as well and we have to Simply close it and in that we have to pass the actual data which is coming from the contract so we'll say total shipment and we have that in the count and we have Clos that one so for the balance you can create a function which fetch the balance for the metamask and you can render that but I'm not going to do that I just leave it for you guys because we have done almost thousands of time on my channel so I just want you to give a try and try the data looks fine close this one come here close this one close the div close the div close the div close the div and close it and we have an empty that's it so with that we are finally done with this entire project let's have a look everything's looking absolutely fine fine come here and we have done done with all the components you can see it's absolutely incredible so we have work on all of these files start tablet and that's also looking pretty good close this one and now things look good now it's time to test this out because our application is 100% ready come here reload the browser and you can see everything is looking absolutely fine and incredible so these are the things we have created and you can click here complete shipment you will have this popup which is also working you can get the data of the particular shipment that's also working you can start the shipment that's also working and this is the user profile we have work on click on this and it's also working fine so we have this text this is the address and right now he has created three three tracking product tracking that's what we are displaying here and you can display the balance of his wallet by creating a simple function which I have already done and show you a lot of time so you can can create that so everything is working fine guys everything is working fine let me come here let's do the inspect element and you can see it's 100% responsive you can simply slide it down and you can check what are the datas we have here now close this one and let's create one more click on this provide the address pick the date so we're going to go with 19 this is going to be 3455 price is going to be 45 click on this create shipment and here we have the metamask it's popped up and you are making the transaction click on this confirm and the transaction went through and we have created that one so this is the index 3 this index 0 1 2 and three so we're going to Simply change the status to this so what I will do first I have to start the shipment provide the receiver address provide the receive so it's a index two and we have to click on this get started get details in case you have to type start confirm and here the transaction went through you can see that we have changed that in transmiss it's also working fine now I have to click on this get data if I pass this let's say to I'll get the data you can see I'll get the data so this is the data we have what the data we have bar 12 you can see the data is working fine now if I want to get the complete the shipment I have to pass this and I have to pass the let's say to click on this change sters and this will complete the assignment the delivery process click on this and this looks fine you can see deliver time stamp so everything is working fine 100% I believe that you guys have enjoyed this project if you guys have stuck anywhere make sure to rewatch and try to understand the logic which we have built I have already provided the stter file on my website simply visit to do.com click on the article download the stter file which I have explained and you will get all the assets which I have provideed you to you okay so I want you to rewrite the code along with me and that will give you a maximum learning and you will not be in trap of copy paste because when you have an option of copy paste most of the time you're going to do that okay so that's why I'm not going to provide you the complete code but you will get the assets so you will get this chb file in that you will have all the icons you will get the all the configuration setups but all of these codes you have to write along with me okay so with that I'm ending this video hope you guys have enjoyed and you have likeed this project if yes then do like and subscribe and let me know my do like and subscribe to my channel Channel and let other knows about my channel because that's a really great help for me because ultimately your motivations your efforts your help I really need to grow this channel so I really need your support guys so do let me know if you guys really want me to continue working on the new projects so I really need your support with that I'm ending this video have a wonderful day bye-bye welcome to a project video in this project you going to build crowdfunding marketplace where you will allow other to create campaign and raise fund for their project so this project is absolutely beginner friendly and if you are starting with the web through development then this one is absolutely best in this you will learn how to deal with a smart contract how to communicate the smart contract with the front end how you can interact with the blockchains tons of learning you will have and you can take the inspiration from this project to build your own startup and build an application like this which can solve the problem of people's if they want to raise fund on the web3 space then they can take the help of your DB so let me give you a quick overview that what you going to build in this complete project so this is how the entire application would look like so let me scroll down this is the entire interface UI and the UI part so this is the entire things we going to build from scratch so the very first thing we have is this navigation bar we have this navigation bar this is the hero section we have this is where the user can come and they can create their campaign so they can put the title of the campaign descriptions amount they want to raise and they can set the deadline and once the campaign get create you will find that all the campaigns which is created to this Marketplace that will be reflect here so all The Campaign which I have created and you can able to find that how many days is left in this campaign so the people can contribute and this is one day left this is 4 day left this is 3 Day 8 day and 10 day left so when the campaign get over no one's can able to contribute into the contract so if I scroll down here you will find all the campaign which you have created to this Marketplace so this is The Campaign which I have created and this is the photo sections it's 100% mobile responsive so let me show you the UI part first and this is how it's going to look on a mobile device stunning a stunning UI and it has a lot of power a lot of features we have included that so let's come on top of that and if you click on this hanburger menu you're going to have a navigation something like this so you can open and you can you can close it you can connect to your wallet and you can create your campaign you can click on this and you will have this drop down menu you can able to select the date range so what I will do I'll come here and now let's create a campaign so this time I'm going to call campaign let's say doot that's the name I'm going to give you can give whatever description you want so I'll simply copy that one and that's is the exact description I'm going to paste here let's the type the amount which you want to raise through this campaign so we'll type 45 and you can pick the date that when your campaign is going to be end so I'll go with one okay in April and I will click on this create campaign and here our metamask is open and you have to Simply confirm the transaction so click on confirm and here the transaction is confirmed successfully and here you can see if I scroll down and you can see this is the campaign we have created do and it's one day left and if anybody wants to contribute into this campaign all they have to do is click on this and here the popup will open up you can able to find the name of the campaign the description and they can put the amount and they can donate into this campaign so I want to donates close to 45 ether and if you click on this donate and here we have the metamask we are donating five ether so click on confirm and the transaction went through if you scroll down you will find that we have donated 45 ethers and the target is 45 with so we have met our Target you can come and you can donate to any project so if I want to donate in into this project I can click on this and I can able to Simply type the amount I want to donate so I'll type with 40 and if I click on this donate the transaction will complete so click on this confirm and the transaction went through and if I come here if I click on this again on the same campaign you will find that all the donations is will reflect right up here so recently this address donated this much amount and the more it will get donated all the list will display down there so it's really powerful application % responsive and it's a really beginner friendly in this project I will try to explain you every single thing about the smart contract and how you can use the power of Telvin CSS to design the entire front end okay so this time we're going to use the framework Telvin CSS for the entire styling okay so hope this entire thing makes sense and you have you will learn something new in this project so let's have a look one more time everything's looking fine this is the navigation bar the phot navigation bar we have and this is our top navigation bar so hope this entire overview is amazing and you guys are really like this project so now we have to start working on the project but before we start I have also provided you the startup file so you can simply download the startup file and that I have provided all the assets which you need to build this front end so we need the icons we need the icons and the colors so all of the things which I have provided so come here click on this new tab and type do go to my website so this is my website you can come and you can check everything what I do what are the services I provide and what I have work in the past so click on this block section if you click on the Block section here you will find all the Articles which I have created and you will find all the codes so if n Marketplace the web 3 Ving dab we have ether scan and the mongodb API and today morning I released this article in that I have provided you the starta file so so you can simply come back to this article and and scolls all the way down and here you will have the startup file in that you will get all the icons you will get the colors and all the startup files okay so hope this entire thing makes sense and you guys are excited for this project do let me know that how many of you going to build this exactly project because in this you will learn a lot of new things so so far we have built nft Marketplace but in this project we going to build the campaign we're going to create a marketplace where user can create campaign and the best part is that we're not going to store the fund inside a smart contract Service so when someone is donating any fund to any campaign so that address that Campaign Will straight away receive the fund in their wallet so we are not keeping the fund into the contract okay that sounds complicated but it's not so make sure to follow the entire project I hope you will enjoy that so with that I will take you to my visual code Studio and we can start working on it so before we jump straight away and write the first piece of code into our project I really want to thank JavaScript Mastery for the project idea and for the data structures so let's start building this amazing application so this is the folder I have created so let's open that in my visual code Studio and you can see that this is the exact folder I have opened and right now I don't have anything into this project so let's cut this one now the very first thing we have to do is open up your terminal and now we have to initialize next app so for that we going to type npm create next app and we want to create the app in the same directory that that's why we have to put this Dot and slash so this will create the directory in the same folder crowdfunding so hit enter this process might take a little bit time but first we have to initialize this command so in this project we not going to use typescript we're going to use normal framework so we'll say no we don't need sent because if you want you can go with that but I'm not using in this project and just hit enter so this will happen very quickly so just wait the process is taking a little bit time and when it's done you you will find the entire app right up here so you can see we have successfully created the entire project simply clear the terminal and you can see here we have all the folder and file structure created by next app so the this is the pages folder we have inside that we have this folder API and inside that we have this file hello.js and the best part of this nextjs that you can easily able to build your server you can easily able to make your API in this folder you can see you can be able to make all the requests to your back hand so this one is a pretty interesting add-on they have done in the nextg and that's make it so powerful and this is the abgs here we're going to do all the configuration for the context management so it looks pretty nice so far and this is the document which you don't need to worry about it this is the index file we have and this is the predefined code which next jits generate when you initialize the project so that looks also good and by the way if you guys think that I'm speaking too past I'm going so fast then you can simply adjust uh speed in the YouTube setting so click on the setting and here you can adjust the speed you can either increase it or decrease it so that's everything look fine now let me do one thing let me start the application and let me show you that how it looks right now so for that what we have to do we have to run this command npm run Dev because we have to start in development environment I'll show you where I'm getting this all commands so hit enter and this will initialize the project and this is how it will look in your browser so we are using nextg 13 which is the latest one and you can see they have all of these things so that's how it looks let's come back to the codor and now what we have to do is uh let's simply bring this down and we going to come here let's close this one come back to the public in this you will find all the CSV files all the images they have used pretty fine that's all you will find here so simply close this one come back to the style and that you will have this two style file Global CSS and home node module CSS so let's come here we're going to Simply select all and delete because we don't need this one we're going to add our custom so that's the global now we have to delete this CSS file because we don't need that and this is the get ignore file and that we going to add the name of the folder which we don't want to push to get up this looks fine now close this one and this is the nextjs right now we don't need to do any configuration but when you are getting data from the external resource when you are making an API call at that point of time you have to configure that particular locations which we are not doing in this project so that looks fine let's come back to the package file and here you will find the entire module entire data about the project so whatever dependency whatever packages you will install that all packages you will find right up here so right now you can see that we have dependency we have script so inside the script we have these four scripts types so the first one is the dev then second build then we have start and then we have lint so you can run this command as per the project you are progressing on and here we have the dependency so all of these dependency are only will use during the development so when we will switch to production we don't need this one okay everything will mix and just follow along with me so this looks pretty fine to me let's come back to the readed me and this is the entire read me file and what I will do I will simply delete this one because we're going to create another because when we'll install the harded the harded will create the rme file so simply delete this one we don't need it and this list there is all the folder file which we don't need so we don't need this API we don't need the document and make things clean let's come back here and remove all the code and we going to type RFC and by the way I'm getting this snippet because I have installed like react snippet extension in my in my visual code Studio so once you install that extension in your visual code Studio if you type rafc it will generate the snippet okay because many of you have asked me this that's why I'm telling you so this looks pretty fine to me it looks prettyy good now let's come back here let's go back to the browser and you can see we have did all the setups all the files and folders and we have removed all the extra code and the folder so this is how it's looking index pretty clean okay so this is the blank canvas we have white canvas so close this one now what we have to do is come back here in this project we going to use stelvin CSS so I believe that you guys are already familiar with telin CSS but if you don't know don't need to worry about that because in this in this video we will learn that how you can use telin CSS in your project and it's so powerful it will save a lot of your time so in my earlier project what we did we follow normal CSS structure for building the application for in installing the website like we are writing the custom CSS by our sales but telin CSS is so powerful that all you have to do is to call the classes and it will automatically take place okay so it's so powerful that and this is the technology we going to utilize you can see they have a amazing documentations they have explained every single thing which you can find here and that's what we going to utilize so what we have to do click on this and here you will find all the modules all the templates all the background playground all the resources you will find here but the one we are interested in here so let's click on this Frame guide and here you will find all the framework but we are looking for the text stage because that's what we have chosen and this is the command we have to initialize in our project to include delway so we have already done the very first part we have created our project so this is the npm packages we have to install simply select that one and come back to your visual Cod Studio open up your terminal so make it properly now this looks good copy this entire One open up your terminal and simply paste and install so let me stop the application from running for timing so now I'm going to Simply paste it and it's going to install all the packages these three packages still wi CSS post CSS and autofixer so we have installed that one and now we have to initialize it so simply grab this command and that's what we going to call it so call it and here we have this initialized project of tvin Cs and the moment you will initialize it will create couple of files in your project so we have this Telvin config file post CSS if you click on that here you can able to add all the custom styling which you want to include from your end so if you want to include the media colors phones and uh like the media query all of those things you can configure here but we not going to do anything like that in this video because I want to make it simple for all of you so we're going to utilize whatever we'll get from the telin CSS so this is our telin CS config file let's come back to the post don't need to do anything in here now come back here and now we have to do a couple of things so click here and come back to the global one and before we do that simply come here and we have to grab all of these code simply grab that one come back to the tailin CSS and here we're going to Simply paste this one okay it's just a general convention which you have to follow we defining that where the content will where the content will allow the GSX and where we don't okay so just follow this General convention the way I'm following it looks fine to me so this is our telin config file we have come back here and this is the and this is the thing which we have to include simply grab that one and this one we going to include in our Global file so this will allow you to add your own custom CSS what I mean by that just imagine that you want to add your own brand color so the color classes you going to Define here and once you define all of this telwin base telin base component utilties so what these will do that this will allow you to add the add your custom classes into the project if you don't allow if you don't add these command it's not going to work and that's why we are including because we're going to add our own color into the project so looks fine to me not a big deal that's the setup you have to do so this looks pretty fine now what I will do I'll simply come here grab this entire code so simply trb this one and test whether our telin CSS is working or not so to test this out we going to go to pages and inside the pages here we going to P this out so past this okay I made a mistakes so let's come back and I'm going to grab this one H1 complete H1 and if I'm going to paste here so here you can notice that we have this class name and we have assigned the text font size bolt and underline so it's so easy to use telin CSS in your project all you have to do is to write the command WR the classes and the designing will take place once you start for the very first time it will make really very complicated that how you have to remember all of these classes but as you work it will become very familiar to you and it's really easy to utilize in your project okay so save it and now we have to start the application type npm run Dev and open up your browser and you can see reload the browser and it's working fine so our tailin CS is absolutely working fine you can see that hello world is bold underline and it looks pretty good so our telin CSS is connected now let's bring this down and now what we going to do is close this one let's bring the terminal up and now we have to install a couple of things so stop the application from running and now we're going to install hard at which is the most important package we have to install because we have to write the smart contract and that will allow us to write smart contract deploy smart contract and test the smart contract so let's initialize hard it in our project so we'll type npmi harded and hit enter this might take a little bit time but I'm do using the power of editing so it will happen very quickly so just wait so it looks pretty fine to me and here we have install harded in our project so let's clear the terminal and now let's come back to the packages on file and here you will find the package we have installed so right this moment we are using 2.130 make sure to use the exact version by the time I'm recording this by the time I'm recording this video this version is absolutely compatible with the project so if you're watching this video after one year after two years make sure to use the exact exact package version I'm sorry so this looks pretty fine now let's come back to the terminal and now we have to initialize that so to initialize that we have to type npx harded in it so this will initialize the harded project in our terminal and now we have to we have to choose that what kind of configuration we want to allow hard to do in our project so in this project I'm going to to use JavaScript I'm not going to use typescript or I'm not going to start with empty harded config file because I will get pred Define codes okay so let's click on this JavaScript project head enter and click on this and now we have to initialize all of this so we have to install the recommended packages which harded is telling us to do that so hit enter yes we want to install those packages and this packages will take a little bit time but I'm I I use the power of editing so it happened very quickly so we have installed the packages now now if I bring the terminal down let's come back here let's go back to the packages and we already are there and here you can see that we have installed all the packages so this is the package we have installed nomic Foundation harded toolbox which will allow us to deploy and do all the other stuff so it looks pretty fine to me and here we have this ha looks pretty good now what we have to do let's type npm I ethers so we need couple of packages to communicate our smart contract so we need ether JS we need web3 model so let's install the packages so let's install this ether and just wait here we have the package got installed in now we have to install web 3 Model web 3 model and here we have the package so just wait it's happening and here we got the package install so these are the two packages we need for the time being if we find that we need any extra packages to make things work we definitely come back and install that so that's the entire setup we have done so far so whatever we have done so far all the folder and file structure all the packages it's just a setup we're going to write every single port code from scratch okay so let's come here in the so once you successfully initialize harded harded will create couple of folders and files in your project so here we have the contract folder we have the script folder we have the test folder and in that we have couple of files so let's open this this contract one inside the contract we have this demo contract which harded provides you so if you're new to Smart contract development you can have a look or if you really want to become a smart contract Pro developer you can follow my complete salty course and that I have explained every single thing okay so this is the sample smart contract simply delete this one because we're going to create our own and then we have to create a file we'll call this crowd funding do so because that's what we going to build so that's the contract this is the entire script let's remove all this command unnecessary code from our deployant script remove the name so make sure to give the exact name which you're going to provide to your contract so I'm going to provide to my Pro I'm going to call my contract crowd funding so whatever you are calling to your contract make sure to give the exact name if you don't provide that it will throw you an error so let's replace this one and replace this make it small copy that one and we have to remove this because we not going to pass any value into our contract okay and here we have to Simply replace this one and remove this code this remove this one and paste this crowd funding replace this one crowd funding and that looks pretty fine okay so these are the setups you have to do in your deploy script and that's the only thing you have to do here so we're done with this we're done with this now looks fine to me close this one close this one and come back to the test and this is the entire test script which they have already written for the lock contract which was there at the very first time so if you're new to the smart contract testing you can have a look that how they have written this test for it but in this video we not going to focus that because I have already made a lot of videos in testing so make sure to watch the complete course on hard at testing and that I've explained everything okay so this looks pretty fine close this one looks good come here and now we have to create couple of folders and files before we start actually writing the code okay we have to build the folder for components we have to build the folder for context and that we have to manage all the components of our application so let's build the folder for component first so we'll say component components now we have to build the folder for context and that we going to manage all the data which we going to retrieve and we're going to make the connection with the UI and the smart contract in the context file so inside the context file we have to create two more files so the first file let's create the component so the first component we're going to create is snap bar and we have to take this extension jsx and the second component we have to create is photo photo. GSX this looks good now the third component we have to create is index.js and in that we going to import all the components and that's the logic I follow in most of my projects so no matter how many components you have in a particular folder or where you have store all of those component it's always better that you have to export your component from one single location and in my in my case I'm going to build all the component inside the component folder and that's all I'm going to import into this index.js and from this file I'm going to export it so it becomes very easy for me to call because I don't need to remember all of those places where I have buil this component okay so that's the entire logic I'm taking in this project so let's look let's import the let's import the first footer and that's coming from the same folder same directory let's do the same thing for the next and that's also happening from the same directory and now we have to export so we have to export the folder and we have to export the nap bar and that's the only thing you have to do and this way you can easily able to call this folder anywhere in your entire application this looks pretty good so we have this components and let's come back to the pages inside the pages come here this is the index and now we have to get back to the app.js because here we going to display the napar and the footer because we want that our napar and footer is going to be in our entire application in every single page so when you have a component anything like that it's always better that you have to throw that component in your app.js so we're going to import those component here we'll say internal import and this is coming so we have to import the NAB bar bar we have to import the footer and this one is coming from the dot do components okay it's coming for the components folder looks pretty good and now we have to Simply wrap it so we have to make it instant return we have to take this block and in that we have to call the component so we have to call the napar and we have to call the footer and simply take this one cut this and place inside this and that's the only setup you have to do here in app.js now let's move to the contract and let's start working on it but before we do that come here come back to the context .js and here we have to create so this is the folder we have type RFC okay so looks good type this RFC so this looks pretty good now let's test this out that whatever component we have done whatever structure we have build so far it's working or not so open up your terminal and type npm run Dev so this will initialize the project and come here and simply reload the browser and boom you can see everything's working fine our components are dis playing on our canvas okay so we have the na bar we have hello world and we have footer as well so that's pretty good so this looks pretty nice now come back here simply come here so looks pretty good close this one close this one close this one so close this one and come back here and here we going to create one more comp component actually we need to create couple of components so let's create that so the first one we have to create is the logo because the logo we are using in this project is actually SCV file SVG file okay so that's what we're going to say I will type RFC so we have the logo one and we going to create one more which is going to be the menu we because we are using hamburger menu chv file for the for the icons okay so type menu GSX and in that we going to place the Cs file for the hurger menu so looks pretty good now let's import those component here pretty quickly so we'll say logo coming from the same directory and we have to import the menu and that's also coming from the same so simply export it so looks pretty good close this one close this one and come here so this is the footer component we have this is the logo and this is the menu and this is the nap bar so what I will do I'll simply take this one IDE the menu and I'm going to Simply copy and paste the logo icon and by the way you guys will get all those and and by the way you guys will get all the images all the icons we are using in this project so make sure to get the startup file which I have already provided on my website so simply go there download the start off file and that you will find all the icons all the resources we have used okay so in then I'm going to Simply paste this CSV icon which I have simply created and that's for for the menu so simply cut this one I'll come back to the logo and I'm going to do the same thing so simply I remove that one and I'm going to paste the logo so this is the logo I have taken in some places the logo color is going to be white in some places going to be black so that's why I've taken the color variable and I'm making Dynamic so let's come here copy that and take it as a prop so all we have to do is wherever we are utilizing this component the logo component we can send the class color class as a property and it will automatically trigger and it will give us the respective color for the icon so that's looks pretty fine close this one and looks pretty good and we are done with the component for the time being we're going to create more components so let's just focus one step at a time so now come back to the contract and now we have to write the contract that's the most important thing because without contract we cannot able to build this crowdfunding Marketplace so let's come here so without doing any further so let's write the smart contract first thing we have to provide the license identifier and then we have to provide the prma salty version so we are using 8.9 version and I'm going to create the contract and I'm going to call crowdfunding you can call whatever you name you want but make sure that whatever name you give to your contract you have to give the exact name in your deploy script okay so this is the name I have given to my contract and that's the name I have given to my deploy script as well when I'm deploying the contract okay so let's create it and now we have to Define the data type so in that I'm going to take a struct and I'm going to call it campaign inside that it will have a lot of data for individual campaign so if you have noticed in the demo when I was explaining that in that we are storing the information about the target balance the amount we wants to raise the user who have contributed given the fund and all of those data okay so let's let down the entire data model for this campign struck so we'll call this first thing we going to take the address of the owner who is creating the campaign the second thing we have to take the string title of the campaign now we have to take the description of the campaign now we have to take the target the amount we want to raise now we have to take the deadline that when the this crowdfunding is going to be stop now we have to take the amount we want to collect and now we have to take the address of the donor so those who will donate in the crowdfunding we going to keep their address into this and and we have to keep the donation that how much they have donated so that looks fine this is the entire data structure we have used for storing the information about a single campaign looks pretty good now let's come here now we will create a mapping in that we will take un and it's going to refer to our campaign so every campaign every every crowdfunding campaign will have a unique ID and once we pass that unique ID inside this mapping it will give us the respective data for that campaign and we have called it campaigns because inside this mapping all the campaign is going to be stored this is the mapping we have now let's come here here we going to take another variable we'll call a number of campaigns initially it will be zero because it's a Marketplace so it will have a lot of campaign and If one campaign is created We'll add one two and so on so now we are going to create the function so we'll say create campaign so you have noticed one thing that we are not initializing any Constructor in the contract because there is no need of that so all we have to do is to create the function which we want to include into this Cod fing so the first function we get creating is create contract and that we're going to pass the address of the owner we're going to pass the title description we'll pass the target amount we want to raise the deadline and these are the information we are passing inside the create campaign it will be public and it's going to return the data the U int unique number so that looks pretty fine now let's come here here we're going to take the reference of the stru we have created because we have to update those data so we'll say storage campaign and the reason we have taken the storage keyword in the contract because we're going to make the change in the state variables not in the memory we're going to make it exactly change in the state variable in the contract so we'll call the campaigns and we're going to pass the number of campaigns then we'll come down and here we're going to take this step statement required statement will say campaign. deadline so campaign deadline if it's smaller than the time block time St and that scenario we'll say the deadline should be a date in the future and that's the obvious time because if someone's trying to create a campaign at the same time and they also setting the deadline time is at the same time then we want to fail the transaction okay they have to provide the deadline in the future so that's the first check we have now let's come here we have to do the we have to Simply update all the data so we'll take on. campaign honor then we have to update the title we have to update the simply description so all of these data which user are providing so we have to Simply update that now we have to update the target amount we have to update the deadline we have to update the the amount collected initially it will be zero because when the contract will create there is no money in that so now let's come here we take this number of campaign and we're going to Simply increase that because the initial value of number of campaign is zero and when the campaign will create it will keep increasing so looks pretty fine let's come here and we going to return the number of campaign minus one so it will always return the actual length of the campaign so that's the thing we want to run from this and that's looks pretty Define and that's the entire function we have created for create campaign now let's come here create a new function we'll call it function donate campaign so this function user will use to donate into the contract into the crowdfunding it going to take the UN the ID so it will take the ID because a lot of contract would be a lot of campaign will be there so every campaign will have a unique ID and on the base of that we going to make the donation to that particular campaign so we'll say public payable and here we have to take the amount will say message. value we'll come down here we're going to take the campaign and we're going to use the storage we'll say campaign ID so it will give us the exact Campaign which we are looking for to donate so once we have the campaign we have to Simply take the donator donat address the one who's calling this function we have to push his address inside the donor array we have created which inside a inside the campaign and we going to Simply say donation push amount we're going to store the amount as well and we'll say Boolean send payable campaign owner call Value and amount so we have to Simply transfer the fund to the on it exactly okay so in this contract what we are doing we are not storing the fund inside the contract so whenever someone will donate any fund it will go straight away to the honor of the contract in the owner address we not storing inside the contract okay now here we have to make a check if if send if send is true okay then we'll say amount that collected then we have to Simply update the amount in collected amount okay if it's true and that's our donate function we have in the contract so that looks pretty fine come here let's create another function we'll call it get donor so like this will allow us to get the information about the donors so we'll pass the ID it will say view public return and it's going to return the address and the amount okay so this will generally give you all the data about the donors who have donated to the particular campaign so that looks pretty fine let's come here here we're going to return the entire campaign ID and the dinner datas as well so the address and the amount they have donated so looks fine so that's the only thing we have to do here in this get donor function now let's come down we have to create another function we'll say get campaign and this will allow us to get all the campaign which user have created okay so we'll say public view return and we're going to call this campaign array because we have to return the entire Campaign which the user have listed into this Marketplace memory and here we going to Simply take the the campaign in the memory and we going to create new campaign number of campaign we're going to pass because this this data will keep the track of number of Campaign which is getting created okay so that's the length we have to pass once we have the entire length of the campaign we're going to call this for Loop we'll say un I equal to z i is number of campaign then we have to Simply increase that this is just a normal follow Lo and we going to create the data item campaign I then we'll say all campaign I we'll take the item and that's what we going to return from this entire function so it will return the all campaign so hope this things Mak sense to all of you guys that what we have done inside this function so whenever someone will call this function this function will give us the entire campaign so what we are doing first first we are taking the array because this is the thing we want to return and we are creating this data in in in a memory not in a state variable okay in a memory and we have given the name then we have taken the length and we are calling it we are running this fall Loop to store the data in here and we are simply returning that so things makes that's a pretty simple function we have so now let's come here and that's the entire contract we have written for the crowdfunding that's the only thing we have to do okay so this is the strug we have and all of this function we have written so hope so far things are making sense to all of you guys and if you still have any confusion do let me know in the comment sections with that let's move next and click here come here come here and we are done with the contract simply close this one now what we have to do come here in the context and now we have to create two more files so in this project the approach I'm going to take is that we have to write all the functions so first I will write all the function which is required for the applications and then we'll start building the front end and the UI part okay so let's build the logic first and when we have the logic ready it becomes very easy to call the call the data from the contract and create data right in the UI part okay so let's come here in the context folder and create file so the very first file we'll create is context. JS and that will going to keep the track of the address and the API so that's the context for a file we have let's create one more crowd crowdfunding JS and this we're going to manage the context of the entire application so these are the two files we have created so far let click close this one and now what we have to do is now let's deploy the contract because we have our contract ready so let's deploy it so we'll get back the we'll get the address and we'll get the ab of the contract so click on this script and now everything looks good here in the deploy script make sure you have to provide the exact name which you have given to your contract and that's the name I have called to my contract so let's come here open up your terminal and now let's deploy the contract so make sure to split your terminal in two side by side in one side and this side we're going to run the local blockchain with local blockchain using hardat and here we going to deploy the contract so let's write npx hardat node head enter and this will initialize the local blockchain in your terminal and it will give you 20 Plus accounts you can see it has a account address and it has a private key so if you want to import put the any one of these address into your metamask simply grab this one go back to your metamask and import account and just simply paste this private key and you will have uh this account in your metamask and you can see that each account has close to 1,000 ether that's a lot of if it's would be a real one we would be riched okay so that looks fine and here we have to write the deploy script so let me find that the script so not this one and this is the deploy script we have npx harded run - Network Local H we are deploying this to the Local H but if you're deploying to the remote servers like hardare like polygon gorilla test Network or ethereum blockchain then you have to provide that location's name okay but we are doing on the locals so this is the intac endpoint you have Drive script so we have this file inside the script folder deploy JS hit enter and here you can see it's downloaded the compiler version and here we got the address of the contract we have deployed so simply grab that one and simply come here and paste here okay this is the address of the contract which we need to interact with the front end and the moment you simply deploy the contract it will also create the artifact and cash you in your project so this is the artifact we have inside the artifact we have the contract inside the contract we have these two file the first one is the dot b dbg Json but the second one is a interesting one in that we have the a of our contract and that's what we need so simply take that one drag drag and drop into into this context okay so that's the only thing you have to do now simply close the terminal and now so copy this one come back here and now we can start writing the code for the context so click on this context the very first thing we have to do is to import the ABI which we have in the same same directory crowdfunding do Json and now we have to Simply create we have to Simply export to to data from here so we have to type let crowdfunding marketplace now we'll take the export con we'll say crowdfunding address and this is the address we have so in your case you will have the same address so no matter no matter like from where you are calling this contract because whenever you deploy your first contract hard had generate the same addresses for all the users so this is the contract address we have now we have to get the ABI of the contracts so we'll say contract address API and this is the API we have inside the crowdfunding Json files and that's the only thing you have to do here so make sure you have done the same setups here let's close this one now come here and now we have to start writing the function so that's function we going to write into this crowd funding click on this and here we are in the crowd funding and now we have to import all the packages we need actually in this project to make the connection so let's write that so let's import the react use effect use State and that's coming from react let's import the web3 model we have already installed that's coming from web3 model let's import The Ether and that's coming from ethers let's come here let's do the couple of internal import so we'll say internal import now we have to import the ABI and the address of the contract so we'll say contract funding ABI contract address and that's coming from the context context file we have created constants file we have created inside a context file so this is the internal Port now let's come here now let's give this command fetch smart contract okay so this function we are about to write it allow us to fetch the contract so let's take this cons fetch contract and it will take the signer or provider and in that we have to pass the data so what we going to pass we'll pass this new ether do contract and we using ether do ether ether package to interact with our contract okay so we'll say contract inside that we have to pass the ABI address and the sign up provider so let's pass the address of the contract then we have to pass the ABI then we have to pass the signer or provider so that's how we can able to fetch the contract once we have the contract let's export and create the create the context so we'll say crowdfunding context and we're going to use this react do context create context sorry so hope whatever I'm doing so far everything is making sense and you guys can relate that okay let's do the same thing export const crowdfunding provider so this is the name I given make sure you have to give the exact name and we going to call this children and that's looks pretty good and now we're going to write all the functions inside this crowdfunding provider and this looks good to me let's take couple of variables we'll take this title data and we'll create crowd funding contract so this is the one variable I have taken just for testing purpose now let's come here we'll take a couple of US state so current account and it's coming from us initially the current account would be empty now let's come here we'll take this constant create campaign so this is the very first function we are creating which allow us to interact with our contract which is responsible for creating the campaign so we'll say sing in that we have to pass the data so we'll pass the campaign we'll come here we'll take this cons title descriptions amount deadline and that's all coming from a campaign because we going to send the data into this function in form of object and we are using deconstruction okay so that's why we are getting all of these data from this campaign we have we got up the data now let's come here we're going to take another variable we're going to call the web 3 model and we're going to make the connection with the contract and the the RPC so we can easily able to interact so we'll use new web3 model once we have the web3 model initialize in our project now then we're going to take this connection and we'll say await web3 model. connect so once we have the connection now we have to build the provider and that's how we can do it nothing complicated once we have the provider we have to Simply come here we have to get the signer and that signer we going to provide into our fetch contract function we'll say provider. get signer so this will give us the signer now we going to take the contract and we going to provide this to our fetch contract in that we're going to Simply pass the signer hope things making sense to all of you guys so come here now we going to console log out the current account to see that we have current account or not let's come here we going to take this try catch block if anything goes wrong so we have to figure that as that as well so we'll say come here we'll take the cons transaction ction and that we have to call the await so await because it's going to be a asynchronous behavior and now we have to call the contract and we have to call the function create campaign create campaign in that we have to pass the entire data which the contract need so the data let's pass it out so we going to pass the current address the owner then we going to pass the let's say title we have to pass the description now we have to pass the let's say ethers and we have to convert this into ether okay the fund we going to take it's not going to be in the terms of way so if anybody wants to deposit they can but we will Define that value in terms of ether so that's why pass in amount and we are using this 18 18 decimal point come here now we have to take this new date because it will also have a deadline so we have to convert that deadline we'll call Temp and this is the deadline so this is the entire data we are passing into the contract and let's come here and we'll say await do transaction so we have to wait for the transaction to be completed on the blockchain and then we'll simply console log out the entire data so contract called successfully and the transaction and that's and here we have the try catch block and that we have to check for the error which we will have if anything goes wrong while creating the campaign and that's pretty much so this is the very first function we have created for creating campaign hope these things are making sense if you guys are stuck make sure to rewatch the video try to understand that what we are doing okay because that's the most important thing as a developer you have to focus now let's come here now let's create the another function and this function will call get campaign and this function will allow us to get all the data from the smart contract about all the contracts all the campaigns were created in the past get campaign we'll say asynchronous you don't in that we don't need to pass anything okay we'll take the provider and that's coming from this RPC provider once we have the provider then we're going to Simply call the contract in that contract we going to pass the signer or provider we'll pass the provider and it will give us the contract so once we have the contract we have to Simply make the call so we'll say campaign await contract and we have to call the exact function have for getting all the data so we'll say get contract we don't need to pass anything in else anything on that and now we have to Simply deconstruct the data we have to design the data in such a way so we can easily able to retrieve and use it in our front end so we'll say campaign we sorry we'll say con we'll take a variable call Par send campaigns and we'll s the campaign actual data and we're going to run the map we're going to Loop over it we'll say campaign I and we going to say instant return in it so here we have to Simply set the data so we'll say honer is going to be the campaign. owner and this entire data is coming from this campaign function so it will come in the form of array we are using map function to Loop over it and now we have to Simply set the data like the way we want okay so we are calling honor so in our font end we can simply call the owner and we'll have that otherwise you have to give you have to call the data in such way which is not that readable format okay so we have the honor now we have to get the title we have to get the description and we have to get the target ethers and we have to Simply convert that in ether and we have to Simply get the deadline timing and we have to convert that as well we have to get the collected amount that how much amount we have collected so far and now simply convert that okay so we once we have the amount we have to provide into a string so these are the data we are getting looks fine to me let's come here and this is the ID we have because every single campaign will have a unique ID and that's we have call I and that's the function we have for here so once we have written this now we have to Simply return the entire data and the entire data we have here par send campaign and that we'll have the entire data in form of array in well organized so it becomes very easy for us to call the data in front it so simply close this function so we are done with this another function get all campaign now let's build other function so let's call it cons get user campaign it's going to be asnc function and this will give us the information about all the campage which a single user will create so we're going to call this we have to build the connections we'll get the provider once we have the provider then we have to Simply get the connected with the contracts in that the fetch contract we have to pass the provider so we have the ins of the contract and then we have to Simply take all campaign I'm just giving this name you can give call whatever you want and here I'm going to call the exact function name this will give me all the campaign in form of array once we have the campaign now I'm going to call this accounts and we'll say wait window. ethereum so we have to get that account of that particular user so let's get the account so here we have the account and this will come in the form of array and here we I'll say that current user and this is the array so I'll say accounts and I will say zero index so it will give me the first account address so I have the user now let's come here once I have the user I'm going to call this filter filter campaign because this get campaign will have all the campaigns all the campaign of this marketpl place but on the base of the account address we have to simple filter the data and we have to get only those campers which user that particular user have created who is connected with our application right now in case of me I have created campaign and I'm connected with the applications so I will only see my campaigns which I have created so let's filter the data we'll say all campaign. filter and then we have to Simply take the campaign and we take the campaign honor so we'll say campaign honor is going to be equal to this right now I'm going with this hardcode value but later we going to make it Dynamic okay so this is my address World address which I got from the harded in your case you will have the same address so just simply write it so this is how we can filter now whatever data we'll get after this filter method and that's the data we going to send back to the user so let's take this V variable called user data we'll use this filter campaign and we're going to take this map because we have to Loop over it and we have to redesign the data into a readable format so we'll say campaign we have to make it instant return and here we going to Simply take owner is going to be a account campaign owner we'll have the campaign title we have the camp description we have the target amount and once we have the target amount now we have to take the deadline time convert it to a number so we have a deadline time now we have to take the collected amount that how many amount we have created and we going to Simply pass this to string so we we can easily convert it and we have to get the ID of that particular particular campaign so that looks pretty fine so this is once we done with this entire thing now we have to Simply H return the data for this particular user okay and that's what we have here user data and that's it that's the only thing we have to write for this particular function now let's come here let's create another function called donate this function will allow user to donate the fund into the campaign it's going to be aing function it will take the particular donate particular campaign ID and the amount so these are the two data we're going to pass inside the Donate function so what we have to do is first thing we have to take this web3 model and this time we are taking this web3 model because this time we going to change the data into a smart contracts so when you read it at that point of time you don't need to build use the web3 model and build all the connections it's only get use when you write the when you try to write something in the smart contract so we'll say new web3 model once we have the web3 model we have to build the connections await web3 model. connect so once we have the connections then we have to Simply take the provider and inside that we have to pass the connection so once we have the provider then then we have to Simply get the signer which we have inside the provider so we have the signer and now we have to make a contract with the contract the fetch contract we I will pass the signer and it will give us the contract and now we can easily able to make the function call so let's take a variable we'll call campaign data await contract. donate so this is the function we have into our smart contract donate to campaign we'll pass the ID and the amount so value is going to be this so whatever the amount user will provide and we're going to Simply convert that into a ether and that looks pretty good here we're going to Simply say campaign of wait because we have to wait till the transaction got complete after that we have to Simply reload the browser and we have to Simply return the campaign data and this looks pretty fine simple but very powerful now let's come here we have to create one more function called get donation so this will give us all the donation which user have given to a particular campaign so we'll pass the ID of the campaign and in that we have to Simply Pro get the provider and we have to Simply get the contract so we'll say contract in that we have to Simply pass the provider and this will give us the contract once we have the contract we going to Simply call this donation do get donation and in that we have to pass the ID so we'll say number of donations donation. length this will give us the number of donations now we'll take this Paris part donation person donation it's going to be an array now we'll take this for Loop and we have to Simply Loop over the entire donations and we have to Simply push that data into this area we have taken over of so that looks pretty fine we have to Simply update the Donate donor address and we have to update the amount of money he has donated donations that looks pretty good and pretty easy so that looks com let come here and now we have to Simply return the data so the data we want to return is this array we have taken which keep the track of all the donors on the marketplace so looks fine so this this is the function we have for the return let's come here now we have to create two common function which you have to create if you really allow your user to connect with your applications so the first function we going to write check wallet is connected so I'll click on that we'll check now we let's create the function we'll say check if wallet connected Asing functions and and then we have to take this try and catch if anything goes wrong then we have to prepare for ourself for that now now we looking for ethereum object in our browser once we have the ethereum object we'll say set open true and we have to Simply say set error to this the error message and once we have that we have to get the account so let's get the account we have the account we'll say if account length is there then we have to Simply take the very first account Set current account else we have to Simply display this message account not found and this looks pretty fine and here we have to take this catch in error catch eror if anything goes wrong then we have to display the error message as well and this will be something wrong while connecting to a wallet close this one and that's the function for check if wallet is connected now last we have to write one more function which allow user to connect with the wallet on click event okay so when they will click on the button the metamask will open and they can connect so let's take a variable and let's before we do that let's call this function check if ballet is connected because this will check when the user will R the browser and then we will simply call the function now let's write the function connect wallet function and the same logic we have to follow here as well the same exactly logic we have to follow so we'll say try and catch and then we have to take this if statement look for the ethereum object if we if we if we don't have the ethereum object then we have to Simply throw this error message otherwise we have to go ahead and we have to get the address of the contract sorry address of the user which we have already done so this time we have to make this method is going to be e request accounts okay so we got the address in form of array now we have to Simply take the first address and set it as a current account else we have to throw the error message so else do error while containing to wallet so let's pretty good close this one and that's the function we have for the click V click button for connecting for the wallet now let's come here here we going to return and in that we have to Simply take the context we'll take the context we have built above for our state management so we'll take the construct. provider and in that we going to Simply pass the all the data so this is what logic we have follow in our n Marketplace if you haven't watched that make sure to go and check that NFP Marketplace in that I've explained every single thing that's why I'm going a little faster here okay so in that value we're going to pass all the data which we want to share in our entire application so just pass the title current account created campaign all the function get campaign we have the get user campaign and we have donate donate function and we have get donation function we have the connect wallet and we have all of these functions here looks pretty fine okay come here here we have to Simply provide the child and we'll close this CR funding context provider and that's it so hope this entire thing makes sense to to all of you guys and you guys are able to follow along me all the function we have written if you have stuck make sure to rewatch the video because it's a fairly easy and the same logic We are following here what we have follow in the NFP Marketplace so if you haven't watched I must tell you to go and build that project as well but just build this one first okay so close this one so we have written the context code we have written the constant code so it looks pretty fine and promising so far now let's come back here go to the pages come to the app and here we're going to Simply import that so we'll type import and it's coming from that's context and crowdfunding looks fine now come back to the context and here we have to take this data so right now you can see this is the context provider we have simply grab that one and that's what we going to import here simply paste here so come here wrap the entire app with this and that way we can EAS able to share the data so we'll pay Simply get this crowdfunding and simply get this one cut and paste down below so this is our state managements looks good close this one close close now this is the package and file we have and I noticed one thing that I have installed the wrong ether package it's eth but this is not what we have to install we have to install ethers with s so come here and we have to first uninstall the package we have install so let me install that ether so we have no longer here now we have to Simply get the ether is the real one hit enter and it says that it depreciate but don't need to worry about it and here we have got our ether looks pretty fine so it's pretty good I of you hope you guys are great so I took half an hour break and we are starting once again so this time we going to start working on the components okay so simply click on this component folder and let's create all the other component we need in our app so let's click a file and create a file by the name card. JS and that jsx sorry and that we're going to write the entire code for the card so when someone will create the campaign that's the campaign we going to design right up here okay so this is the card component we have now come here let's create one more this will be the hero section of our application and we're going to have a popup with capital. jsx so these are the three component we're going to create so that looks fine let's come back to the index page so you can see this is our application how it's looks so everything's looking fine no breaking changes is there so we have nabar hello world and photo reload things looks fine to me come back to the let's settle this down and come here click here so close this one and come back to the script and before we get started I have already written CSS file which we going to utilize it basically it's a color okay so what I will do I simply copy as select this one and I'm going to paste this one so I have done the basic configuration so the Stalin CSS component utilties are there but here I have added some extra classes for the app color okay so you will get this colors in the startup file so when you will download the startup file you will get all the assets all the colors classes we have defined okay so that looks good and background color new color cover length so these are the colors we have now so play come here close this one and let's come back and start working on the navigation bar okay so let me remove this one and let's start writing for the beginning so down here you can see this is the component we going to start building so we're going to build this section so let's import couple of things from reacts so we're going to take this use State use context and that's coming from react then we'll take this internal input and then we're going to import the component sorry context and that's coming from the context crowdfunding and let's import the logo menu and that's coming from the component index now let's create the nap bar now let's come here let's create a NAB bar and you can see that I'm writing my code is going something like that so when I'm creating a bracket it's creating one bracket and it's going to create the another bracket because you guys cannot see that I'm using extension that's why I'm getting this Behavior but in your case you will have normal bracket creation and normal function creation so when you will create a div you will have the opening div and the closing div but and but I will create the div it will have the only opening div and because of the extension okay so hope you guys can cope up with that now let's define couple of State variables so we'll take this before we Define let's import the data from the context so we'll take this a current account and connect wet function that's coming from the cloudd context so this is the data we are getting from there and now let's take this state variable is menu open and let's come here let's take this menu list because it's going to be the list so you will have these menu so let's take white paper project donations and member now we're going to return it and in that we're going to write the entire GSX for our navigation bar so as I told you that I you you can't able to see the closing div and this is how I'm going to write but in your case it would be fine and I'm getting this weird Behavior because of the extension which I'm using currently we are testing that so that's why it's happening like that so let's define the classes and I I told you that we going to utilize the telin CSS so it's become very easy to use it so let's provide the background color the main custom class we have created now let's define come here let's take another div in that we have to take the PEX padding X is going to be four padding Y is going to four Max Auto then we have to set the media query then Max with full Max with screen large medium pixel 2 large pixel 8 so these are the classes and this large is for the media query for the large screen this MD is for the medium device and this MD is for the medium device this SM is for the small device so basically what I'm doing here I'm saying that PX stand for padding in the X Direction both in left and right y sorry four and this is for the y means top and bottom is going to be a five pixels Auto is going to be the width and this is the width we have so on the medium device we want to go with the full width and the large device we going to go with the max width SC screen l so these are the classes is already given so all you have to do is to Simply go to the telin CSS and you will type this command you can able to find that okay but in this video I'm going to write it very quickly so let's come here we create another div it will have a class call relative we'll have Flex we'll have a item Center we'll have a justify between let's come down we're going to create a another div it will have a class called Flex it will have a item Center and we'll come down we'll going to create a another di we'll create a anchor tag and in that we have to take this HF we want to do direct to the homepage then we have to take this areial attribute and we'll say company we'll provide the title is going to be a company let's give the classes we'll say inline Flex item Center margin right8 pixel let's come down we'll close that one and then we have to write our text so in that we going to take the logo component we have created and as I told you that in the logo component we are setting say we are passing the dynamic style so this time the logo would look like white color so let's say text white so that looks fine that's the our logo let's come here here we going to take a span and it will have a class called margin left two pixels text is going to be Excel font Boldt tracking wide and text Gray 100 and upper uppercase so this is the one we are building come here we'll say company and we have to Simply close that one span looks fine come here then we'll take a UL tag and we have to display this list items so it will have a class called Flex item Center hidden span X8 on the last device we'll say Flex we'll take the menu so as you have on so we have already created the list now we're going to map over it so LM I and we have to make it instant return so we'll take this Li we'll provide the key inside the AL will take a a tag and it will have all the problem property we have defined so we'll have a HF and it will have the aial attribute our product you can type whatever you want will have a title our product and it will have a class called font medium tracking white text Gray 100 transaction color and duration 200 over text tail ACN 400 so these are the classes we have now close this one and we have to type our text we'll call it element okay so now we have to close this one and we have to close our lii so this is this will render the entire menu okay this is our Dynamic block looks fine now let's come down close this one close the div and now we have to display this button so this button is going to be dynamic so when the user is not connected then they can only see the button but once they connected they cannot see this button okay so and in this current account we have the address of the user the one who's connected with the application so we are saying that if the address is there in that context we don't want to display this button okay so we'll say that and here we're going to take the button so we'll take this Flex item Center hidden span X8 large device Flex we come here we'll take a Li and in that we have to Simply display the button so we'll take a button and it will have the onclick functions and that we're going to call this correct wallet function we have created so that's the function we're going to call it once we have the call button we'll say classes inline Flex item Center justify Center H height 4 sorry 12 pick a padding X is going to be six font middle tracking y text y transaction duration 200 routed rounded Shadow medium and background is going to be a d purple asent 400 and on over effect we want to change the color to the Asian 7 and we will have the focus class as well so when someone will click it will have the focus so we have the shadow outline focus and we have another one s outline none background so these are a lot of classes we have added to get the button styling like that okay now we have to add the areial label now we have to take this connect wallet looks fine now simply close the button once we close the button close the Li and we have to close the uls and this is our button now we going to make a responsive navigation so whatever code we have written for our navigation that's for the large screen that's for our desktop now we have to make it responsive and for a mobile device so you can see this is how it will look on the mobile device so we have to write the custom course for this as well so this will be only visible in Mobile not on the desktop on desktop we going to display this one so let's come here we'll take a divid we'll have a class called on large scen we want to hide it and we will make it Z index 40 so it will be on top of everything we'll take a button and in the button we going to take this aial attribute open menu in that we're going to provide the title open menu we'll provide the classes padding two from all the SED minus negative R negative margin right transaction duration 200 round focus on outline none Focus Shadow outline these are the classes we are adding let's click on click function will say set menu open true so when someone will click on that menu icon it will open this menu component so that looks good now simply close that one and that we going to display the menu component we have created so the icon so that looks fine then we have the button com here and we'll take this if is menu open then only we want to display this component so let's come here let's take this div it will have a class called absolute top zero left zero with full screen and we'll have another divid will have a class padding five big background white and border is going to be rounded Shadows SM we'll have a div it will have a class Flex item Center justify by between margin bottom is going to be a 4M and it will have a div let's take a ankle tag and we have to Define all the variables so it will have a HF where we want to redirect to the user on the click event and let's provide the aial attribute will say company and now this time we have to exactly provide all the variable because this is going to be our icon so we'll say title is going to be a company we'll have the classes inline Flex item Center um we'll close this one and in that we going to type the text so before we do that let's take the logo and we have to pass the color logo color is going to be a black so this is the logo we have and we we take a span and that we going to say margin left is going to two text Excel font bold tracking white text gr 8 upper scale and in that we have to Simply write our text that is company and we have to close this span so that looks fine now we have to Simply close this one close the dev and simply take a div in that we have to display the cross icons we'll say take a button because we want to display a button which user can click and close it so we'll simply take a button tag and in that we're going to take this aial attribute we'll say close menu and and we'll say type color title is going to be close menu and we'll take the pro classes padding to negative margin minus stop two Ram minus rice minus 2 RAM transition duration 200 rounded over effect may we have to change the background color we'll say Focus BG gray to focus outline none Focus Shadow outline and that's the color we want to assign to our Buton that looks pretty fine and we will attach on click function and on that we going to Simply call this set um set item menu open and that's look absolutely perfect so that's our Burton and now we have to Simply close the div so I'm going to take a chb file so let me write it down very quickly it will have a classes so it will have withd is going to be five text Gray 600 and viewport is going to be this value and by the way you will get this csb file in the starter file okay so let me Define all the parts very quickly because I can type it very quickly by seeing in my computer so let me write down all the variables so fill is going to be a color current color will have the dimensions so let me write this very quickly actually I forgot to export this chb file as a as a component but in your case you will get this in a start file so don't need to worry about that we don't need to type it all you have to do is to import it as a component so you can add that one now simply close that and that's our cross icon we have let's come down close the CSV file and we'll close the button as well we'll close the div and we'll close the div and let's take a navigation back because we have to display all these menu items so we'll take a NAB and in that we going to take this ul and we'll have a class called space y4 so it will give a space from top and bottom and and that we're going to display our entire menu so we have menu list we'll Loop over it so inside that we will take this Li it will have a key and then we going to take this eight Andor tag and we have to provide all the variables so we'll provide the HF the destination where we want to redir to the users and let's provide other variables so aial label is going to be our product and come on we'll have the title our product we'll have the classes font medium tracking wide text Gray 700 transaction color duration 200 over text D purple Asians and 400 so these are the classes we have apply on these menus now we have to Simply close this anchor and we have to close the lii we'll pass the data so the menu itself and then we simply close this anchor we'll close this Li and we have to Simply close the entire Dynamic component and then we have to Simply close this Li and that's the that's the dynamic now we have to take a li and that we going to take another one because we have to display the button so we're taking anchor and we have to provide all the variables so let me do it very quickly we have a class in Netflix item center background justify con Center WID is going to be full height is going to be 12 padding X is going to be six font medium tracking white text wi transition duration 200 rounded and Shadow medium and background is going to be a bgd purple Asian 400 and on over effect we going to attach this background and on the focus we going to attach this one and on the double Focus we'll provide the outline done so looks pretty fine to me all these classes simp play come here here we going to display the areial label is going to be a sign up on okay now we have to Simply provide the title sign up once we provide the title we have to close this anchor and now we have to display our text message so we'll say connect wallet and we'll close this we to close the Li and we have to take this UL close it and we have to close this nav tag so that's the entire navigation we have and we have to Simply close the div one so far things are looking good to all of you guys simply close this div and we have to close our Dynamic block and that looks fine to me simply close the div and take this close ative close ative and here we going to Simply export this component so in my case I have to close all the divs one by one but in your case you won't have this issue because when you will declare a div it will automatically create a open and close one but in my case my extension is not doing that one because I'm testing something and because of that is happening okay so hope this things make sense to all of you and you guys can follow this entire project so that's the entire navigation bar component we have built so looks fine to me now you can see that we have done with that now it's time to test this out so let's come here in the global CSS so by mistake I simply remove that so I'll simply copy and paste the entire Global CSS you can see now we have all these classes looks fine to me so simply close this one and now what we can do is come back to the components and we have build the nabar component now before we write any compon Let's test this out so you can see our component is looking absolutely fine okay the entire CSS everything's working fine you can see our button is not displaying because we are already connected with this application so let's come here reload the browser you can see this looks fine let's me open the metamask we are connected and if I simply log out out you can see we'll have our button we'll click on this and it will open the metamask okay so things are looking fine everything's working fine hope you guys can follow that now we can come back to the navigation part so this is the current wallet function we have and this is the import context import we are doing and that's what we are attaching here okay all of these data and this is the function we have buil so if we have the address then we want to hide it but if we don't have the user connected with us uh application we want to display the B so looks fine to me CU let me close this one close this one and close this one looks fine to me and let's check the responsiveness do the inspect element and this is how it will look on a mobile device so if I click on this you can see now we have a nice this popup where we can have this entire menu okay close open and we have this close one so it looks fine we have this looks amazing 100% responsive for all the devices cut this one make it and if you click on this and you can able to have this metamask popped up and you can simply log in click on this and you will log to the application so the functions are already working and that's the power when you start working on the function first and then we move to the eyi part okay so that's also very important so whenever you build any project try to to focus on the functionality first test every function and then move to the UI part because UI part will is just a designing the main timing you have to spend in the logic so that's the entire navigation now we have to come here and we have to work on the fotter okay simply remove that one so this is the entire photo component we're going to build so we'll have this four section the Highlight section the product section the useful link and the contact and we'll have this this copyright section so let's quickly import all the thing which we need so we have to import react from react we have to take this phot we'll take a cons we'll say product list so and that we it going to be an array we'll have a market erc20 token we have a donation so this is the first product list now we have to take the another one which is a contacts list and that we going to take this support email ID we'll take the another one and we'll take this contact us you can type anything okay I just want to fill out all the data that's why I'm just going with this variables now we have to take another one it's going to be a useful link and that we'll say home about us company bio so these are the arrays we have taken for the menu list looks fine and we have to Simply return and we have to write all the jsx in this return so first thing we have to take a footer tag and it will have a classes so it will have a text Center text y text background Main and background main will have a on the large devices we have to say text left it will have a div it will have a classes called margin X6 margin y sorry padding Y is going to be a 10 and text Center on the medium devices we will say text left we'll take a div it will have a class called grid one grid Gap gap eight on the medium device we'll say grid column 2 and on the last divide we'll say grid column 4 and it's super easy to divide make grids all you have to do is to pass all of this data so we are saying that we need one grid we're defining the value that grid we want providing the Gap that how much Gap we want in between the grids and here we are adding the media query so on the medium devices we are saying that we need only two columns but on the large scales we need only four so it's super easy I know at the very start it sounds intuitive and you guys think that from where I'm getting all this variable but just follow along the tutorial and once you complete this project you can play with this value and you can see the documentation you can go to the telin CSS and you can read all about this simply copy this value and paste and it will show you that what it does and what functions you are calling looks fine now come here we have to take another D we have a class call nothing okay so we'll come here we'll take a h six tag heading tag and will have a margin bottom four it will have a flex item Center justify Center font semi bold and upper scale and on the medium device we will say justify start in that we have to type out title crypto King and we have to Simply close that one now we have to take a b tag and in that we have to write all the text so let me write the entire text very quickly you can use row and columns to organize your footer content and this is the low M perum so let me write it very quickly sometime then extension becomes useful sometimes becomes very irritating but you have to deal with that okay because sometime it saves a lot of time for me when I'm making this kind of tutorials so let me close this diff so this is the first component in the photo section now let's create the another one it will have this blank one and and in that we going to take this title so it will say my team 4 the same classes we have to apply what we have apply above Start center now we'll say this product and now we have to define the manual list close this one and Define the dynamic block so in that we're going to take this products list we'll Loop over it and we're going to render the entire data so we'll take a P tag it will have a class margin bottom four it will have a key and in that we have to display the value so we'll take a ARF tag and in that we will to display the value we'll close the P tag and this looks fine so this is the entire menu we have now come here we'll close this div we'll take another we will have class empty and that we have take the heading H6 and provide all the classes we have above provided upper scale MD justify started and and in that we'll say useful link simply close that one and now we have to Simply take this D for dynamic block and we have to render the entire menu so we'll go with the B tag it will have the same classes margin bottom 4 key it will have a anchor and that we are displaying our Li items and now we have to Simply close it it will random that now we have to Simply close this and close the div so this is the third component we have now let the last one is going to be is the it will have a class so we'll take HC and in that we we say md4 Flex justify Center photo semi bolt upper case medium justify Center okay so the best part of this CSS class is that when you work with this it's you get memorized okay and that will happen to you also when you will start working with the Sten CSS now let's close this one we'll say contact and in that we'll close this one and now we have to render the entire list so we have the contact list we'll take a p and then we have to provide the classes the same classes we have provided above and now we'll take anchor and we have to render all list close this one we have to close the Dynamic blog and we have to close the div so this is the entire div now come here we have to Simply close the main div we have to close the another one and now we going to create another div and this will hold the copyright section so this section we to hold so we'll say classes background main padding six text Center down there we going to take a span in that we going to Define this text c260 cop copyright Krypto King and by the way it's an emoji I have used so in your case you won't find it so simply search in copyright Emoji in Google and you will find the icon like this and you can paste that so that's the copyright section and we're going to Simply take this classes font semi both and we have to define the location so we are providing the telin CSS so you guys can click and you can check that what the components provided okay because these are the dice stylings I'm getting from the telin CSS and they have a lot of compon components which you can utilize it so here we're going to pass the text copyright King we'll close that one and we have to close the T as well now come here close the photo section and that's it so this is the entire photo component and now we have to Simply export this photo component so this looks pretty fine so hope this entire thing makes sense to all of you guys you can guys can understand that we have written the entire footer section so this is the menus we have this is the entire footer components this is the product list this is the product block this is the useful link block and this is the contact block and this is the copyright one so far things are looking fine and let's come here save it click on this come here and we done with this two component and you can see our photo is already looking good so let me bring here and let me show you so let's come here simply make P skit and you can see this looks pretty fine so let's click here and you can see it's looking absolutely great we have this section four section product section useful Link contact let's check the media query and you can see it's 100% responsive for all the devices so if you click on this it's absolutely perfectly aligned and you can click on the menu it's also looking perfect can see it looks good and this is the medium devices we have applied that we want to display in two columns looks fine and this one is also looking great this is the large skin we have four columns so our photo is also working fine now we're going to start working on the main component so let's come here close this one and go to the pages so before we build the component for the main Pages we have to work on the index page so click on this and now we have to Simply write down Okay so let's quickly do that so simply select and remove and let me activate my extension so we'll say import react and it's coming from use effect use context use State and that's coming from react now I'm going to do internal import so first thing we have to import the context the data and that's coming for context crowdfunding now we have to import the hero card and popup because these are the three component we going to display in the index page and that's coming from the components now we have to take this index the main block now let's import all the data from our context so all the functions we're going to call all the all the data like current wet accounts all of this things so let's take this value and we'll say title data we'll take the get campaign so function which will allow us to get all the campaigns we'll take this current create campaign sorry and we'll take this donate function we'll take the get user campaign we'll take this get donation we'll take this and this is coming from the cont Contex we have imported so this is all the function and the data we have imported into this index page and from this page we going to inject in all the component so that's why I've taken this approach you can individually Import in single component but that's not the good idea now come here we going to take a state variable so we'll say all campaign and this we're going to keep all the campaign of the use all the campaign of the marketplace now we'll take another use State user campaign we'll keep in this so we have and now we have to Simply call the function so we'll take this use effect and in that we're going to take a variable called get campaign data and in that we're going to Simply call the get campaign function which will return us the entire campaign the user have created in the NFP Marketplace not a single user all campaigns for the marketplace so we'll call the function get campaign and here we're going to call the another function for the user campaign okay individual so we'll call user campaign data and user campaign these are the two function we are calling and now we have to Simply return this one it's going to be Asing function Asing function so we'll say we'll say const all data of weight and we have to call the function we have declar here okay not this one this one because when I was calling the function straight away I was getting an error so I took this approach and it's absolutely working fine so we'll say get campaign data so we have all the data now we'll take the same thing for the user user campaign data so once we have the data now we have to Simply set the data for all the campaign and we have to set the data for the user campaign so in that way we'll have all the data set in our use State and we going to Simply close that one so that's the first use effect hope things make sense to all of you guys now keep working now we're going to Simply create a function called donation popup model so we'll take a variable const open model and set open model 2 initial set going to be a false now we'll come here we'll take another one donate campaign set donate campaign is going to be the empt data so that looks fine to me let's come here we have to console log out the entire donate cam now we have to Simply WR the jsx so we'll come here we're going to take this block and in that we're going to first call the hero component and in that hero components send couple of props so we'll send the title title data it's going to be a title data we have to send the create campaign function so this is the props we are setting now come here we have to take the card components right now we haven't created the card component we are just building the layout we'll create that card component and then we have to send the data so the first card component will have all the campaigns so let me give the title all listed campaign and it will have the all the campaign data and it will have the set open model because we when someone will click on the campaign we have to open the popup model where they can donate the fund so that's the function we have to call and we have to set donation function we have to also pass it looks fine to me now let's come here we have to take another card component because in this card component we're going to display all the campaign created by a single user okay so if I have created campaign if I log to the app I can see that my Campaign which I have created and how it's performing and we have to pass the title I'll say that your created campaign we'll provide the all campaign and that we going to pass the user campaign data we have to set the open model and we have to also pass the set donation function so they can see that how many users have donated and what is the data of that so looks fine now we have simply close this one and here we going to take the popup model so we'll say open model if it's true then we want to display the popup model in that popup model we going to send couple of props so we'll say set open model is going to be set open models and we have to set donation get donation so all the data that how many users have donated what fund so that's what we are passing in this and here we're going to take the donation function is Ste so where we're going to pass the donation function so so sorry this one is donation campaign and this is the donation function so when someone will call this function they can EAS able to donate the fund into this campaign so let's come here here we're going to Simply close this one and we have to close this Dynamic block close this one and close this one and we have to Simply exports default index so this looks pretty fine and that's the entire code we have to write for the index.js we have three more components to build so it looks pretty fine to me no more error we have and here we have to make a change so I noticed that I made a mistake instead of c r o u d we have to say w okay save it and this will fix all the issues that's the only fix you have to do and looks pretty fine let's come here and that's the pages let's come back to the component card and now we can start working on the card section so save it come back to the popup section Type R and looks fine cut this one and come back to the browser and let's test this out so here we are getting an error message that somehow we have forgot to import something so reload the browser and I noticed that what I have forgot so come here in the index inside the component we have this index JS here we have to import the component then we can use it so let's import the component so we have to import the hero component that's coming from the same directory and we have to import the let's say popup popup component and that's coming from the popup and we have to import the last component which is a card component and that's coming from the card component so looks fine now simply export all of the component popup commer so that looks pretty fine save it and now it will work fine so let me uncomment this because when I was getting that error I was tesing that that what is wrong with my code so I uncomment this out so uncomment this entire section and now it will work fine so save it so make sure to do all of the changes and looks fine here we are getting an error it says that ether do provider. rcbc and that's the error message I'm getting okay this one is looking good so we have the same ether let's come back to the package file and let's see what's wrong in there so we have the this ether package now just do one thing we have to install un install this ether package because I don't know why it's working let's let's uninstall this first uninstall and we have to install this one so first unstall The Ether package and we have to install the other version of The Ether so what I'll do let's install this one and we say MPN I install and we have to install this version okay so I'm just testing out that what's going wrong for you just keep it like that and if it's working then it's absolutely fine so this is the version I'm installing it's look absolutely fine no more changes we have to do now let me deploy the contract here here you can see so there was some issue in the contract in the contract okay right now you can see our contract is deployed successfully and it looks fine and here we have the Json file now we can simp play start npm run Dev and now it looks fine so there was some issue I don't know why with that package and if I cut this one and you can see it looks absolutely fine so this is the component we have built the entire component you can see it's it's already build but we going to build this one from scratch so what I will do I'll come here I'll so looks good to me close this one close this one now close this one and this looks good to me close this one and now we can start working on the component so you can see in the earlier you saw the hero card component but I remove that because we going to build it from scratch okay so in your case you will have something like this so this looks absolutely fine now come back the browser and let's build all of these three component come here and now we're going to start writing on the hero component remove that one and this is what we are building you can see the image and now let's activate my extension and let's type it very quickly so import react use State and that's coming from react we have to take this hero and the the the props we have to receive title data create campaign and if you guys can think that I'm going a little faster make sure to adjust the speed which you will have an option in the yoube so adjust the speed as per your comfortability now we have take a campaign set campaign and it's and then we have to Simply Define all the data okay so we'll have the title we'll have the descriptions we'll have the amount we'll have the deadline we'll have the nothing okay so these are the four data we are taking for the campaign you can add multiple data depends on your complexity of your smart contract and the application you want to build so this is the state variables we have for the campaign now let's come here we're going to take a variable called create new campaign and inside this we're going to call the function so it's going to be Asing function in that we have to first prevent the devolve behavior of the form because the data we going to take we going to take it in in from the form okay so prevent default we'll say try and catch and we have to Simply call the function so create campaign and in that we have to send the entire data in form of object okay we'll say catch and we have to throw an error message if anything goes wrong so that's the function we have to build and now we have to Simply write the entire j6 in this return so take a David will have a class called relative inside that we'll have a span it will have a cover link now inside that we'll have a image and here we going to take the image for the for the hero component okay all because we are we going to hide this image so you will have an option to display or you will have option to hide it okay so just go with this approach and I will provide you this entire image path which I'm using in the project so when you will install the starta file you will have the path of this image let's have a class name absolute instant zero and object is going to be cover full width and height is going to be full so it will take the entire withd and height of the screen looks fine now we have to Simply provide the alt is going to be empty and that's the image tag we have now let's come here we'll take a div it will have a class called relative background is going to be oppos 75% we'll have a background color main inside that we'll have a SBG file and again I will provide you this SBG file in the startup file I forgot to export it so I'm just typing it very quickly so it will have a class called absolute inside x0 bottom zero text white we'll have this view P view box you can call it viewport both are same but it's better to call view box and then we have to define the values so that's the SVG file now we have to define the path so let me write it down very quickly so we'll have a current color and the dimension we have to declare you will get this CSV in the starta file so you can copy it from there you don't need to type this one so that's the entire path for the chb now here we're going to take a CSV file close it and we're going to take a div it will have a class called relative padding X red right for padding y16 MX Auto overflow hidden on a small device Max with XEL medium devices is going to be a Max x with full on the large screen we'll say Max with screen Xcel and on the medium point we'll say padding is going 24 on the large is going to be a padding is going to be eight and on the Y we'll have a 20 on the large devices it will have a it will have a class called Flex Flex column item Center justify between on the large schem on the on the extra large we'll say Flex row and we'll take a divid we'll have a class called with full Max with Excel my margin bottom is going to be 12 Excel on the mobile margin bottom is going to be zero Excel padding right is going to be 16 p and Excel on the last screen we'll say w with itna okay so I'm writing all of these classes which I'm getting from telin and so powerful so when you build one project you can EAS able to remember all of these classes and you can type it very fast so we'll take H2 and we'll have a class called Max with large marging bottom six font sensitive and text is going to be 3x font bolt tracking tight and we have say white text white on the small devices we'll say text Excel 5 XEL on a small device we say loading none sorry leading none and here we going to Simply take this crypto King we'll have a break and we're going to say hidden on a small devic it in our medium devices and we have to pass our data crowdfunding CK so close this one we'll take a P tag and in that we going to start the entire descriptions we'll have a class called Max with Excel margin bottom four text basis text grade 200 on the medium device we'll have text large and we'll have this entire so let me write this very quickly so that's the entire paragraph now we have to come down here and here we going to take anchor tag inside that we going to take this HF we'll provide all the variables called labels we'll take a class it will have an inine Flex item Center font semi Bol tracking wider transition color and duration 200 and text stale Asian 400 and on over we going to make the change in the text color we'll say Asian 70 and text is gray is going to be 200 that'ss fine here we're going to take this learn more and we have to show the CSV icon so let me write it very quickly it will have a class inline block with three margin left is going to be two we have to fill current color viewport we have to Define and we have to define the path so let me write it down and again you will get this chb file in the Str file so don't forget to download that as well so H will come it close this one close this one and we have to take another D it will say have a class called with full Max with Excel on an extra large scen we'll say padding X going to be eight y eight and Excel lar we'll say that with is going to be 5x 12 and we'll say div it will have a class called BG white rounded Shadow to Xcel padding 7 will'll say on a small devic will say padding 12 10 and here we going to take this H three tag and we'll have a class call margin bottom four text Xcel and font semi bolt and a small devic will say text Center on a small devisor we'll say margin bottom six and we'll have the text is going to be 2x on the small devices we'll have this text campaign so this is our title for the form now we'll come here we'll take the form tag and in that we have to Define all the input Fields so we'll take a div we have a class called margin bottom one our small device we'll take margin bottom two and we'll have a label and we'll have this HTML form we'll say first name we'll take the classes inline block margin bottom one font medium we'll close that one and now we have to take this title we have to close the label we have to Simply take the input and we have to Define all the values so we will say on change event we have to Simply update the data we have taken so we're going to call this set campaign data actually it's a straight variable and in that we are simply updating the data so we'll say campaign and we deconstruct the entire data and then we have to Simply pass the data so we're going to take this title and we're going to say e. target. value okay I believe this is nothing new to all of you guys we are simply updating our campaign data so this is the title we have simply close this one we'll close this one we'll assign the placeholder title we'll say required and we'll type is going to be a text we'll say class is going to be a flex grow withd is going to be full height is going to be 12 padding X is going to be four medium bottom margin bottom is going to be two and transation duration 200 background is going to be wide border border grade 300 and Brower Shadow and appearance none Focus we'll have this color and we'll have the focus on outline none and focus outline sha Shadow outline so these are the classes we have applied and we'll have the ID so first name then we have to assign the name first name and then we have going to close the one close thetive we'll take another Dave because this is the first input field we have and now we have to create three more so let's create it very quickly we'll provide the same values we'll provide the label and in the label we have to Simply take this HTML form we'll say last name we have to assign all the classes we have assigned inline block md1 font medium and we have to assign the label description and we simply do it so let me do it very quickly because we have to write the same thing we have to Simply update our state data for the campaign so we'll say this is set campaign and we going to Simply deconstruct the entire campaign data and from there we going to pick the description and we're going to Simply update that so this is the same logic we have to follow for three more components so let me do it very quickly this is the third component and that we going to take the amount okay so we'll say email it will have the inline blocks margin bottom one font medium the exact classes we have to assign here and this will call the target amount we want to raise let's provide all the data into the input field e and this one is the last one for the date okay so let's take the same values and close this one and this time we're going to say Target amount label that's the label we want to provide and this is going to be our input paid and here we're going to take this input as a form of date so from here user can select that what date they want to P pick for raising the campaign fund okay so from campaign we need to select the deadline and we have to Simply pass all of the data so the exact thing we have to do here in this input as well so let's do it very quickly spe so we are done with all the four components so we are done with all the four input fils now we have to create the button so we have to provide the same classes to our main Di and now we have to come here we'll take a button in the button we have to take this on click event and in that we going to call this function create event in that we'll pass the event and here we going to type submit it will have the classes called inline Flex item Center justify center with WID is going to be full height is going to be 12 pixes padding X is going to be six font medium and tracking is going to be a wide and color is going to be white for the button and we'll have a transation duration is going to be 200 and the button is going to be a rounded one and it will have this Shadow MD background is going to be purple asan 400 and on over effect we want to set couple of properties so the exact property we want to set which we have set above okay but we're going to assign the color to our text is going to be a new color so that's the custom color we going to assign for the text so that's the button we have now we have to Simply close it and that we have to type the name of the button and finally we have to close it so that's the button we have here now simply close the D we here we going to take the P tag where we're going to display a small message so we'll have a class called text X extra small text Gray 600 and we'll have this on the small devices we'll have this on medium okay and then we have to Simply display create your campaign and raise font and we're going to close this P tag and that's pretty much we have to close the form we have to close the div close the div and we have to close the div close the word close this one close this one and that's the entire GSX we have written and now we have to Simply export this one hero so this entire thing makes sense hope you guys have understood what we have done and all the csb file all the images you will find in the startup file so make sure to get it from there so this is the entire one we have now let's come here go back to the browser and you can see it's looking absolutely fine it's looking absolutely fine so these are the two section we have so this is the left section and this is the right section so this is the entire phone component we have this four input fill button and the small descriptions and this is what we have here so let's put the data everything's looking fine this is the date fill we have you can select the date and time this looks absolutely great and you can create a campaign so let's check the responsiveness for this component so it's also very beautiful make a full screen and you can see it's 100% responsive for all the devices this looks great and let's come here and you can see that the functionality is already there okay okay so we can straight away call the function and create the campaign so let's go to the advance and reset the account so sometime what will happen the transaction will fail so and that transaction is getting failed because of the metamask there's no problem in the code so reset your account and that will fix the issue and reload the browser so once you do that here you will have this one and now we have to create a campaign because we have set the data we have called the functions so let's provide the title so the title of the campaign is going to be nft crypto King and for the description what I will do I'll come back to the tailb CSS and from here I will get the Demi text so get this one Demi one you can type whatever you want so type the demo one here we have to price the amount we want to raise and here we have to define the deadline so click on this you can that you can assign the deadline so it's in the future 31st and now click on this create campaign it will open the metamask that looks fine create campaign click on this confirm and the transaction went through you can see everything's looking fine because we have already the function and this is the one campaign we have created and that looks absolutely stunning you can see the design looks pretty good so we have one campaign and the moment we will Design the card it will reflect on the applications so this looks fine now we have to build the card component come back to the code close this one and move to the card component so click on the card component okay let's come back here go to the card component and and this is the card component how it will look like so let's import all the thing from react so react let's do the create a card component and that we going to receive the props so the card component will receive the props data so we'll call it all campaign because this is what we have said when we have send the prop so we'll say set open model and we'll set donate and title so these are the prop we going to receive into the card component and this is what we have sent in the props so so we have that one now we'll take this console.log and we'll say all campaigns so we can have a look about all the campaigns let's create this function which will convert the time St into date okay so we have to show in our component that 2 days left 3 days left for for campaign before it get end so they can deposit the fund so let's create this function with say day left it will have the deadline inside that we're going to take this differentiate so we're going to make the difference between now and the future so that's why we have called this dis FR we'll take the date and we have to minus this with the current date so whatever the time stamp whether it's in the future obviously it will be in the future so it will have the convert that date in the date time and we are taking the current date and we are subtracting so we'll get the remaining date left we'll take a variable we'll say remaining date in that we're going to take the difference and we're going to Simply do the multiplication to convert that into a day and then we have to Simply return the day and we have to convert it to a number so that's why we have to use two fix with zero and that's it that's the thing we have to do so what this function will do it will take the time stem and will give us the date then we are taking the current date we are subtracting and we getting the differences and we whatever differences we are getting in terms of time stand we are converting that in day okay so that's why we have multiply with this this this and we returning that one that's a simple JavaScript come here we going to Simply return and write the entire GSX so we'll take a div it will have a class will padding X4 padding y16 and MX Auto will have on the small screen we go to say MX du with XL well on the medium devices we will say x with full and the large screen we will say screen excels and the medium device will say padding x424 and the large will say 8 and X extra large going to be 20 now we have to take the P tag and then we have to define the classes Y is going to be 16 Tex is going to be 2XL font bolt leading five and we have to display the props we are getting so the title so the title we have now we will take a div will have a class grid Gap five on the large we'll have three and a small we'll have this withd or two and on the large we'll have this extra withd four so these are the S so we have all of these classes close this one and we'll take this all campaign because it will come in the form of error so we have to Loop it so say map so we are using question mark that because sometime what will happen that the data will when the contract when the browser will reload the reload the page sometime for the very first time the data will not load it will take a little bit time then the data comes okay so that's why we have to check for this condition that so this will prevent the error so we have to provide the question marks we'll say campaign I and we have to instantly return that so in that we will take a div it will have the on click function on the on click function we going to Simply call this one so we'll say set donor and in that we're going to Simply pass the entire campaign and we'll also call this set open model will turn it to true so when someone will click on the card it will open the popup model and in that we're going to Simply set the data okay so that looks fine to me come here here we have a key we'll have this classes we'll say cursor pointer border overflow hidden transition Shadow duration 300 background white rounded so these are the classes we have assigned now we're going to close this div so we'll provide the image and this image is fix you can make it Dynamic image but I'm going with the fixed image and I'll provide you this image okay so this is the image which I found in Internet I'll provide you in the start file so all you have to do is to Simply copy and utilize in the source so that's the image we have now we have to Simply take the classes we'll say object fit cover full WID is going height is going to be 64 rounded that's the image we have let's take the alt we'll close this one image now we're going to take this div it will have a class called padding Y is going to be five padding left is going to be two we'll have a p it will have a class called margin B B is going to text small font semi bold text Gray 600 up case we'll have this day left so here we have to display the time it's left so we going to Simply call the function and we going to pass this time stamp which we have inside the campaign deadline and it will return the exact day is left for the campaign to end so that's what we have and now we have to display the title so we'll say a and that we're going to Simply pass the hre we'll say areal label call article we'll call classes inline block margin three text black transition color duration 200 Edge over effect we'll have this text D purple Asian 17 so that's the data we want to assign and here we going to Simply type the data so it will have the padding and it will have the classes called text 2XL font bolt leading five and we have to define the title of the campaign so we'll close that one and we going to take the class P tag and we have the class margin bottom for text gr 17 and we have to display the entire description so we have the descriptions looks fine we'll take a div and it will have a flex space X4 and in that we're going to take this P it will have a class called font semi bolt it will have the target amount and we have to display the target amount the campaign want to raise so that's the Target Fund and we have to Simply display that what amount of fund the campaign has raised so we have to say for same bolt we'll say raised and we have to display the amount we have collected so far and all of these data we have inside the campaign so that's why we are importing like that so that's the card component simply close that one and close this div close this div and simply close that one close this one close this one and we have to Simply export the card component so that's pretty amazing so we are done with this entire card component hope entire thing makes sense okay I went through a little faster so if you guys can think that I'm going a little faster make sure to adjust the speed from the settings and that will fix the issues so save it bring it back okay so this is the card component we have and if we come back to the application you will find that we have already created one campaign so that will reflect there so let's come here let's come back to the browser and come here reload the browser and scroll down and you can see see this is the one campaign we have created it's reflecting we have the title listed campaign and this is the entire data we have 2 days left before the campaign get end and this is the description and the mount V raay and you can see this is the create campaign so I'm the one who created this campaign so you can able to find that The Campaign which I have created so it's also looking fine if you if you click on that so if you come here and if you click on this it will throw this error because this component is not ready so that's why we are getting this error message now we have to Simply build this component so let's come back here and looks fine to me everything's looking good click uh so this is the amount we have raised now come here and now we can start working on the popup this is the last component we have to build so we have to import all of the data from the react so use State use effect that's coming from react we'll take this popup component and in that we have to receive the props we have sent so we have the set open model donation and the functions donation function it will take this get donation all the data from the donations sorry actually the function and here we going to take the use State amount and set amount because the user will donate so that's why we have to store the amount they want to donate in a straight variable so we can pass into the function so here we will say all donations set all donation we'll take the use State here we going to take this variable cons create donations and will be a Asing function and in that we'll take this try and catch block we'll say cons data wait and we're going to call the function donate function and in that we going to pass the ID because our donate function needs an ID of the campaign and the amount that's what we have to pass we'll say console.log and we're going to Simply St catch error in that we're going to Simply say console. error okay we're going to log the error message so that's the create campaign donation function so come here we're going to take this use effect and in that we have to Simply take a variable called donation list so every single campaign will have the history of donations so like how many users have donation what are the amounts they have donations so that's the function we going to call it okay so this is the function we have called get donation so this will give us the donation of the particular campaign so in that we have to pass the ID and we have to Simply return it it's going to be async function and that's the data we're going to store into our state variable so this is the exact logic we have follow in the last in the hero component and that's what we are doing here and we're going to Simply send all of the data into our state variable empty array so that looks fine and now we have to write the entire j6 for this pop-up model we'll take this block we'll have a we have a class called justify Center item Center Flex over x hidden overflow y Auto fixed instant zero Zed 0 outline none Focus outline none so these are the classes we have assigned it will have a div it will have a class called relative with is going to be A2 margin Y is going to be six margin X is going to be A2 margin x with Xcel and here we'll take this content it will have the D it we have a class called border zero rounded L large Shadow large relative Flex Flex column full withd and background white outline none Focus outline none here we're going to take this header component and that we're going to take this div it will have a class called Flex items start justify between padding five border bottoms and Border solid border salt 200 rounded top okay come here we'll take this H3 and we going to take this text text large 3x l means large okay font semi bold and we have to display the title now we'll take this button inside that we'll have the class we say say padding one or margin left or two background transparent border zero text black opacity 5 float right text extra large leading none font semi bold outline none Focus outline none here we have a on click function and on the onclick function we going to Simply set the two fals set open model is going to be false so that's the close one we have now simply commit here we're going to Simply take the span we have a class called B transparent text black opacity 5 height six width six text 2 XEL block outline none Focus outline none here we going to display this x cross X and we going to Simply close the span we'll have this button and here we're going to close the dev and now we going to write the body so the body is pretty simple we'll take a div we'll have a class called realtive and we'll have a padding six Flex Auto inside that we'll have the P tagget we have a class called margin y4 text small so text salt 500 text large leading relaxed and we'll have the entire description in in here inside the ptag so that's the body tag and now we have to write this we have to take a input field in that user can type the amount and they can donate the fund so we'll say on change it will update the amount in a straight variable and it will have the placeholder called amount it will have a required it will have the type text it will have the class name Flex grow full width High 12 pix four and margin bottom two transaction duration is going to be 200 Big ground white border border gray 300 rounded Shadow small appearance none focus is going to be a border Deep Purple asent 400 Focus outline none Focus Shadow outline none so these are the classes we're going to assign to our input it will have an ID first name you can call whatever you want and we're going to say time is going to be first name and we're going to Simply close that one so that's the input fill we have now we have to take a list here we going to display all the donations so we have all donation data in that we'll take the dynamic block with donation I and here we will to display all the donation which users are doing so we'll take this B tag it will have a class called margin 4 text SL 500 text large leading relaxed and in that we have to Simply display the donations so we'll have the I + one the number then the donations the donation amount and now we have display the donation user so the one who is donated there so we'll say donation donate donor and we have to slice it down to 35 characters so the address is pretty huge we have to make it 235 length and now we have to Simply close this P tag so that's the D damic block we have close this Dynamic component now we have to work on the footer so before we do that we have to come simply close the div now let's work on the footer so the footer will have two buttons so we'll take a div it will have a class called Flex item Center justify cont end padding six border top and we'll have the Border solid border solid 200 gray rounded bottom that's the D we have now we'll save this button and it will have the classes text red 500 background transparent font bold uppercase padding X6 padding Y2 text semi outline none Focus outline none margin right one margin bottom one easy inliner transaction all duration 115 so I'm I'm just tying very quickly okay and I'm saying very quickly so type is going to be a button and it will have on click function on the on click function we want to splick close the model because this button is going to be the cancel button so we'll say close so that's the close button we have now let's write the other button so we'll take a button and now we have to create a donate button we have a class called background text white active BG merge 600 font bold uppercase text semi padding X6 padding Y3 rounded shaded over shaded a large outline none Focus outline none margin right one margin bottom one easy in liner transaction all duration 150 looks pretty good now type is going to be a button we'll have the on click function create this donation so this is the function we have built above and that's the function we are calling here create donation and we're want to Simply close the button and we say that donate this looks fine simply come here close the button we have to close the div close the div close the div close the div and we have to close this creat div and this D will have an opacity so we'll say opacity 2.5 fixed and insert zero Z index 40 background is going to be a black and we'll close that one and now we have to Simply export the component and this looks fine so this is the entire pop-up component we have built hope so far everything's looking good to all of you guys now come here and now we have almost work on every single component in our application so let's come here close let's come back to the applications things looks pretty fine nothing's broken now what we have to do is reload the browser and if we try to click on this still we are getting this okay that's weird and that's some problems we have in our code in the popup model so let's come here and I noticed come here in the popup model so this is the popup model we are importing in our index index.js index page and this is the change we have to name because our popup model called po popup and here we have called P so we have to make the changes so make sure to do that and we have to do the changes here as well save it come back to the index here we have done the right way now this looks fine come here this one is also looking good now come back to the popup and here we have to make the changes so this is it's o scroll all the way down and we have to fix this as well oh save it and come back to the browser and simply reload the browser and everything's will be fine so now if you click on that you can see our model is working fine we have the title we have the description we have the input fill the close button and the Donate button so looks fine so open close close and everything's looking fine let's come here and let's try to make a transaction so let's create a new campaign so we'll say crypto King we'll type the description so I'll simply copy the test I write the text live without time and if you haven't subscribed to my channel yet do so okay here we have to provide the amount here we have to pick the date so this time I'll go with one create campaign click on confirm and the transaction went through reload the browser and you can see the campaign we have created and we haven't raised any Fund in both the campaigns so now we have to raise the fund so if anybody wants to donate they can click and they can put the amount so this one is pretty small come here close this one click on this this one is pretty big this depend on the length because this this one is a dynamic popup you can make it f fixed with or you can make it full with it's totally up to you so let's click here and we have to pass the amount we want to raise so we'll say 20 ether click confirm and you can see this is the amount we have donated 20 ether is donated to this particular campaign that looks fine and it's absolutely great so everything's working fine so hope this entire tutorial makes sense to all of you guys and if you still have any confusion any doubt let me know in the comment section and all the start iile have already provided to all of you guys so make sure to go and check it that and it will make more sense okay so hope this tutorial taught you something new that how you can create a crowdfunding project into a marketplace where you can allow to create their campaign and raise their fund okay so that's the only thing I want to talk about hope this video makes sense to all of you guys and if you're new to my channel hit like And subscribe that motivate me a lot and do let me know what other project you want me to build so that I will try to build that as well