What a (Web3) Moment!! — A DApp Using Polygon, MetaMask and Infura
Web3 core technologies like Blockchain, IPFS and Crypto Wallets gives essential components for designing a true DApp. We will see in Action how easily we can Build and Run a DApp.
Quick Refresher — By The Way, What is a Web3 DApp?
To understand what a DApp is in a simplistic way, I will put my explanation as:
“In Web3 a DApp or Decentralized Application is an application that has a backend built on a decentralized network and this decentralized backend is linked to a frontend that serves as a user interface. In it’s true form both the backend and frontend will be truly decentralized along with the non-custodial user identity”
To know more about what are Web3 DApps and how a DApp differs from conventional Web2.0 Apps. Refer to blog post
What a Moment: A Web3 DApp
What a Moment is a simple Web3 DApp. Through this DApp we can easily make every Moments of our life immutable. List captured moments in the Web3 enabled platform and get a chance to earn if other people likes and buys your listed Moments. Transfer your immutable life Moments to your friends and loved ones. Let’s have a look…..
Web3 enabled marketplace to List and Explore the captured life moments
This is how our DApp Home Page will look. It’s having collection of immutable Moments listed by the users.
Create and List your Moments by providing few details
To list your Moments you have to provide some details around what Name you want to give to this Moment, some other info you want put as an Highlights, give a tag to your Moment. While listing you can a quote a price for this Moment that will give you a chance to Earn.
Transfer your Moments to your friends and family
If you want then transfer these immutable Moments to your friends and family members as a Gift or Memory that can’t be erased.
Get a chance to Earn if others liked and wants to Buy your listed Moments
If you have quoted a price for your awesome Moment, and other users liked it then they can buy the from you listing. To buy a moment a user has to first connect and then pay using their Crypto Wallet (like MetaMask) once done then you will be receiving the payment in crypto in your Wallet.
How can I Design and Develop this kind of Web3 DApp?
Believe me it’s very easy and at the end you will feel that building a DApp is like……
To simplify things, I have created a DApp project in GitHub repo. You can Deploy and run this DApp on your local system by following the mentioned steps.
Before proceeding to the deploy and run steps, let’s quickly cover the core tech components we have used to build our DApp.
Using Blockchain, IPFS and Crypto Wallet
Crypto Wallet
A cryptocurrency wallet is a device, physical medium, program or a service which stores the public and private keys for cryptocurrency transactions. In addition to this basic function of storing the keys, a cryptocurrency wallet more often offers the functionality of encrypting and signing information.
For this project we will be using MetaMask as Crypto Wallet to connect to our DApp. Through MetaMask we will allow our DApp interface to build a connection internally to interact with our Smart Contract that is having functionalities like creating, listing, transferring our immutable moments. Install MetaMask on your machine browser as an extension. Refer to one of my previous blog posts that covers all the steps regarding MetaMask installation and set-up or you can refer MetaMask page link and follow the instructions.
IPFS for Decentralized Storage
The InterPlanetary File System (IPFS) is a protocol, hypermedia and file sharing peer-to-peer network for storing and sharing data in a distributed file system. IPFS uses content-addressing to uniquely identify each file in a global namespace connecting IPFS hosts.
There are plenty of IPFS services available like Infura, Web3.Storage, NFT.storage that provides Decentralized storage through IPFS protocol. Since our DApp needs a decentralized storage mechanism to store our assets like images, hence we will be using IPFS. It’s always good to know more and explore the options to choose the one which best fits your requirements. I have used Infura for this DApp.
Checkout details on Infura getting started
Checkout details on Web3.Storage getting started
Checkout details on NFT.storage getting started
Blockchain
A blockchain is a distributed ledger with growing lists of records (blocks) that are securely linked together via cryptographic hashes. Each block contains a cryptographic hash of the previous block, a timestamp, and transaction data (generally represented as a Merkle tree, where data nodes are represented by leaves). Blockchains are typically managed by a peer-to-peer (P2P) computer network for use as a public distributed ledger, where nodes collectively adhere to a consensus algorithm protocol to add and validate new transaction blocks.
Blockchain is the backbone of every DApp. I have used Polygon Blockchain which is public and permissionless and is capable of handling large numbers of transactions as compared to Ethereum due to it’s high scalability. Also, the DApp need to perform faster hence Polygon is best suited for such requirements. To make things less complex, for this DApp you can directly interact with the DApp application logic through contract address and ABI which has been part of the project files.
Project env configuration
In the project codebase you will find the network endpoint config set-up like as below. You have to create .env.local config variables in your project folder to provide the network configurations for your Blockchain and IPFS storage services. As mentioned earlier, for this project we will be using Infura. Refer to Infura docs and provide the required configurations. In this config file, ‘NEXT_PUBLIC_SECRET_SALT’ is getting used for encrypting DApp data while running the application, here feel free to provide any secret string that you want to.
Running the Project
Checkout the project from GitHub repo and move to the working project directory using the following commands
git clone https://github.com/hemantjuyal/web3-moments.git
cd web3-momentscreate a new file named as .env.local and provide all the config params values as mentioned in the above section Project env configuration. Run the following commands.
npm install
npm run devOpen the browser and access the DApp using http://localhost:3000/
Go to -> ‘Make Moment’ and create and list some of your moments and make them immutable. In the ‘Explore’ page you will find your Moments listing along with other users. Have a look at the section and pages.
This is a preliminary version of DApp to give a perspective on how we can build such kind of apps for Web3 internet. There are lots of upgrades / enhancements can do on top of this version like making payment processing through fiat currencies, as crypto at some level brings complexities in terms of having the relevant crypto currency already in the users wallet, additionally a user may not want to actually own any crypto into their wallet. Likewise, we can add some social elements to allow users comments and likes for the listed Memories.
Great we have done it. Enjoy!!! Now if someone ask you about building a DApp then you can very well say….. It’s Good ;-)
Images Credit: Jim Carrey Morgan Freeman, Universal Pictures, Buena Vista International
