{"id":36741,"date":"2022-09-26T17:40:00","date_gmt":"2022-09-26T21:40:00","guid":{"rendered":"https:\/\/coinscreed.com\/staging\/?p=36741"},"modified":"2022-09-26T17:46:19","modified_gmt":"2022-09-26T21:46:19","slug":"how-to-create-a-free-web3-app","status":"publish","type":"post","link":"https:\/\/coinscreed.com\/staging\/how-to-create-a-free-web3-app\/","title":{"rendered":"How to create a free web3 app: Step by Step"},"content":{"rendered":"\n

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<\/p>\n\n\n\n

\"How
How to create a free web3 app<\/figcaption><\/figure>\n\n\n\n

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. <\/p>\n\n\n\n

A reason why you\u2019d see your apps recommending you a book you searched up on google but that\u2019s where web3 apps come in.<\/p>\n\n\n\n

What is web3?<\/h3>\n\n\n\n

Web3 <\/a>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. <\/p>\n\n\n\n

While web3 might have started a bit earlier, the phrase \u201cweb3\u201d 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.<\/p>\n\n\n\n

What is a web3 app?<\/h3>\n\n\n\n

A web3 app<\/a> (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). <\/p>\n\n\n\n

The data is stored on blockchains that cannot be modified. <\/p>\n\n\n\n

This means you do not need to give your information before making transactions, enjoy increased privacy and ensure your information isn\u2019t being censored or controlled.<\/p>\n\n\n\n

Web2 and Web3. What\u2019s the difference?<\/h3>\n\n\n\n

Most of us are accustomed to web2; the traditional style but compared to the newer web three what are the differences?<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

2. Sometimes users can\u2019t 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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

What makes up a Web3 app?<\/h3>\n\n\n\n

Dapps are similar to regular applications with frontend, backend, and the use of smart contracts.<\/p>\n\n\n\n

Frontend<\/h2>\n\n\n\n

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\r\n \r\n \r\n \r\n <\/g>\r\n \r\n \r\n \r\n <\/clipPath>\r\n <\/defs><\/svg><\/span><\/a>.<\/p>\n\n\n\n

Backend<\/h2>\n\n\n\n

The back end of the Web3 application is rather expensive to maintain so transactions and vital data are stored on the blockchain <\/a>and use data storage services for storing other information.<\/p>\n\n\n\n

Smart Contract<\/h2>\n\n\n\n

This is the highlight of Web3 apps and what makes them different from traditional apps. A smart contract<\/a> 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.<\/p>\n\n\n\n

What you should know before you build a Web3 app<\/h2>\n\n\n\n

It\u2019s obvious if you\u2019ve 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:<\/p>\n\n\n\n

  1. React<\/li>
  2. Solidity language(for smart contracts)<\/li>
  3. Blockchain programming<\/li>
  4. Crypto wallets<\/li><\/ol>\n\n\n\n

    Tools you\u2019ll need to build your own Dapp<\/a><\/h2>\n\n\n\n

    You can\u2019t go to war without weapons, it\u2019s a no-brainer you\u2019ll need the right tools to start your journey. Some tools you can use to build a Dapp are:<\/p>\n\n\n\n

    1. Visual Studio Code\/ Typescript<\/li>
    2. Metamask<\/li>
    3. Hardhat<\/li>
    4. Vercel\/ Alchemy<\/li>
    5. React<\/li><\/ol>\n\n\n\n

      Once you\u2019ve got those tools, it\u2019s time to begin creating a Dapp.<\/p>\n\n\n\n

      Setting up our Smart Contract<\/h2>\n\n\n\n

      You\u2019ll need a local Ethereum <\/a>network to test whatever you\u2019re working on to see whether it\u2019s functional. That\u2019s where Hardhat comes in, it allows you to test your smart contract with fake ETH and mock accounts,<\/p>\n\n\n\n

      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.<\/p>\n\n\n\n

      Create a PickupLine in the Contract directory. This will be the Smart contract, To run it, you\u2019ll 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.<\/p>\n\n\n\n

      You need to make sure that the Pickup line being sent to you can be stored in the blockchain. So you\u2019ll have to program a code that stores the contract permanently.<\/p>\n\n\n\n

      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\u2019ll need to use Vercel or Alchemy, this will help you mimic the transactions of an Ethereum application and give you fake coins for testing.<\/p>\n\n\n\n

      Ensure to change your network and set the function to export the private key when it\u2019s run. Then go to the deploy folder and run the command.<\/p>\n\n\n\n

      You should get a message showing the account successfully deployed and the address on the blockchain.<\/p>\n\n\n\n

      Building the Frontend.<\/h3>\n\n\n\n

      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\u2019t get overwhelmed by complex functions.<\/p>\n\n\n\n

      Conclusion<\/h2>\n\n\n\n

      Now you\u2019ve 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.<\/p>\n","protected":false},"excerpt":{"rendered":"

      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 […]<\/p>\n","protected":false},"author":40,"featured_media":36746,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[11411,11404],"tags":[7082,202,132],"class_list":["post-36741","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web3","category-learn","tag-web-3-0-applications","tag-blockchain","tag-crypto"],"jetpack_featured_media_url":"https:\/\/coinscreed.com\/staging\/wp-content\/uploads\/2022\/09\/web-3.0.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/coinscreed.com\/staging\/wp-json\/wp\/v2\/posts\/36741","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coinscreed.com\/staging\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coinscreed.com\/staging\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coinscreed.com\/staging\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/coinscreed.com\/staging\/wp-json\/wp\/v2\/comments?post=36741"}],"version-history":[{"count":0,"href":"https:\/\/coinscreed.com\/staging\/wp-json\/wp\/v2\/posts\/36741\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coinscreed.com\/staging\/wp-json\/wp\/v2\/media\/36746"}],"wp:attachment":[{"href":"https:\/\/coinscreed.com\/staging\/wp-json\/wp\/v2\/media?parent=36741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coinscreed.com\/staging\/wp-json\/wp\/v2\/categories?post=36741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coinscreed.com\/staging\/wp-json\/wp\/v2\/tags?post=36741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}