Creating web3 apps is quite different from traditional web2 apps. From discovering the major differences between web3 and web2 to understanding the various functions. This article will give a full breakdown of how to create a web 3 app
The creation of a Web 3 app came as an answer to the cry of privacy issues on the internet. Privacy on the internet has always been one of the biggest problems yet. Personal information is constantly being mined and sold by websites that most time requires you to input your data before accessing their resources.
A reason why you’d see your apps recommending you a book you searched up on google but that’s where web3 apps come in.
What is web3?
Web3 is a new version of the World Wide Web that heavily leans on decentralization, tokens, and blockchains to reduce fraud, increase and protect users’ privacy and prevent the transaction of personal information.
While web3 might have started a bit earlier, the phrase “web3” was made by the founder and co-founder of Polkadot and Ethereum Gavin Wood in 2014, he used it to refer to a decentralized environment based on blockchain.
What is a web3 app?
A web3 app (or Dapp) is a decentralized application that runs on a peer-to-peer network that controls the flow of data, rather than having information on a central system where it can be tampered with, the data is hosted on blockchains (smart contracts).
The data is stored on blockchains that cannot be modified.
This means you do not need to give your information before making transactions, enjoy increased privacy and ensure your information isn’t being censored or controlled.
Web2 and Web3. What’s the difference?
Most of us are accustomed to web2; the traditional style but compared to the newer web three what are the differences?
1. Web2 applications are centralized, most of the data is stored in one place where it can be restricted, censored, and monetized. On Web3 applications, the data is decentralized and near impossible to be limited as it passes through many peers.
2. Sometimes users can’t access particular services even while being on the network in Web2 but on Web3 users can access information freely as far as they are on the network.
3, Payment in Web2 may require personal information and can be hindered at times but with Web3 no information is required as tokens are used for payment and can’t be restricted.
What makes up a Web3 app?
Dapps are similar to regular applications with frontend, backend, and the use of smart contracts.
Frontend
The front end of the application has to do with the functionality, and how the user interacts with the site. It is built using CSS and Javascript.
Backend
The back end of the Web3 application is rather expensive to maintain so transactions and vital data are stored on the blockchain and use data storage services for storing other information.
Smart Contract
This is the highlight of Web3 apps and what makes them different from traditional apps. A smart contract is a web tech that contains programs concerning an event or transaction. It is designed to carry out specific functions where certain conditions are met.
What you should know before you build a Web3 app
It’s obvious if you’ve read this far it means you have knowledge in web technologies and are probably familiar with one or two coding languages as a beginner may probably find it a hard task to attempt creating a Dapp without first creating traditional web applications. You would need an understanding of:
- React
- Solidity language(for smart contracts)
- Blockchain programming
- Crypto wallets
Tools you’ll need to build your own Dapp
You can’t go to war without weapons, it’s a no-brainer you’ll need the right tools to start your journey. Some tools you can use to build a Dapp are:
- Visual Studio Code/ Typescript
- Metamask
- Hardhat
- Vercel/ Alchemy
- React
Once you’ve got those tools, it’s time to begin creating a Dapp.
Setting up our Smart Contract
You’ll need a local Ethereum network to test whatever you’re working on to see whether it’s functional. That’s where Hardhat comes in, it allows you to test your smart contract with fake ETH and mock accounts,
Start by setting up a code for the basis of the project, in the terminal and directory of your choice. It allows you to create tasks, compile your code, and run tests. Ensure to install Hardhat in a directory as well.
Create a PickupLine in the Contract directory. This will be the Smart contract, To run it, you’ll need to write a run code after creating a run.js file and then run the command. You should see a message that confirms your contract being deployed.
You need to make sure that the Pickup line being sent to you can be stored in the blockchain. So you’ll have to program a code that stores the contract permanently.
To put the icing on the cake you need to deploy the smart contract, start by creating a deploy folder in the scripts directory, You’ll need to use Vercel or Alchemy, this will help you mimic the transactions of an Ethereum application and give you fake coins for testing.
Ensure to change your network and set the function to export the private key when it’s run. Then go to the deploy folder and run the command.
You should get a message showing the account successfully deployed and the address on the blockchain.
Building the Frontend.
The front end of the application should be built with applications like React, the UI should consist of easy-to-use functions and buttons that will ensure users don’t get overwhelmed by complex functions.
Link your Web3 App to your wallet
So we’ve gotten the front-end and smart contract down, now it’s time to link the application with the wallet. Metamask is a wallet extension, that allows you to transact with cryptocurrency and NFTs which you’ll then link to the application by writing a code in the App. tsk folder.
Now with the front-end functional, the contract deployed and the wallet linked, try bringing up the contract from the smart contract with the information from the deployed account. First, you’ll need to create a pickup function that will source and retrieve the information when requested by writing up the code in the App. tsk file.
Then write a code to create the function’s button that will send a line on a click. After doing this and running a message from Metamask should appear requesting a payment that you’ll make using your fake cryptocurrency.
You can also restrict the number of times a user can send a pickup line or message this is useful in the event of gifts or events so that one user may not try to claim a reward more than once. You can add a new line in the Pickup lines setting an IF statement that blocks repetitive submission of one pickup line.
Conclusion
Now you’ve got a functional Dapp that, can process and store smart contracts, buy and sell all the while retaining your anonymity over the internet. You can choose to style the website how you see fit, with fancy fonts, art, and anything that will make the website aesthetically appealing.
