Welcome back, everyone !!! You have been doing great. So far, we have learned about the fundamentals of programming, git and GitHub, fundamentals and best practices for writing good smart contracts, and testing contracts. This is great and kudos to all of you making it so far.

This week, we are going to shift our helm towards the front-end. And in the upcoming weeks, we will be going through writing a front-end, making our front-end talk to smart contracts using ethers.js, and deploying these smart contracts on testnet. This will allow us to complete the circle on developing a dApp.

Goal:

To get comfortable with the fundamentals of React. React is one of the many frameworks in The Great Land of JavaScript. Then why React? That is what some of you may be asking. React has gained a lot of popularity and become a favorite/go-to not only in Web 2.0 but also in Web 3.0. Many dApps are built with Next.js (an opinionated React framework), including most projects in BanklessDAO. Hence, having React in your toolkit will undoubtedly serve you well. And using Ethers.js to build a dApp.

P.S: This one has a relatively steep learning curve. So, please use office hours and/or contact mentors if you need help.

Assignments:

Use this article as a reference. You won't need all of this but it contains things that you will need.

1. Deploy contracts on testnet. Documentation
2. Learn React.js (Optional: for participants who don't have React experience). Tutorial
3. Building UI for AddressBook contract. The following are the requirements :
   1. Ability to connect wallet.
   2. Retrieve the user's address book data if it exists. Otherwise, display a text to reflect an empty address book.
   3. Ability to add a new address.
   4. Throw an error if Metamask is not installed.
   5. Throw an error if the address and name fields are empty.
   6. Throw an error if the name already exists.