I am really excited to introduce you to this fully functional Web3 dApplication we are going to code together in this Moralis Web3 Full Course.
🔥 BECOME A BLOCKCHAIN CERTIFIED EXPERT WITH MORALIS ACADEMY
👉 academy.moralis.io/?ref=2770
Would you like to virtually invite me for an Italian Espresso Coffee?! ☕
Buy me a Coffee 👉 www.buymeacoffee.com/theItalianDev
This is Dashboard3! A Web3 Dashboard Moralis Project in combo with Next.js that allows you to Authenticate with Metamask and shows all your ERC20 tokens balances, your last 5 transactions on the Ethereum blockchain, your NFTs and also allows you to send Ethers to other Ethereum addresses.
Believe me...you will learn a lot by coding this Web3 dApp, and the amazing thing is that you will have all the basic knowledge to leverage the Moralis SDK and API and code any kind of Decentralized Web Application you want throwing away all the complexty related to the Web3 world. Moralis will handle all this complexity for us!
Moralis (for free) will provide us a complete backend infrastructure (server, MongoDB database, Web3 Api) ready to go and to be scaled with just one click.
Last but not least, we will apply some basic styling to our dApp by using Chakra UI components.
Demo dApp ➡️ moralis-nextjs-dashboard.vercel.app/
✅ Useful resources
➡️ nextjs.org/
➡️. moralis.io/
➡️. github.com/MoralisWeb3/react-moralis
➡️ chakra-ui.com/
➡️ metamask.io/
➡️ faucets.chain.link/rinkeby
➡️ rinkeby.etherscan.io/
#web3 #nextjs #moralis #ethereum #blockchain #dapp
Chapters
00:00 Intro
01:48 Create Next.js app
04:27 Add Chakra UI
07:31 Create Moralis Server and add Moralis to Next.js
15:21 Authentication flow with Metamask
51:32 Creating the skeleton UI of the Dashboard
58:20 Profile component (show username and ETH wallet address)
01:17:10 Balance component (ETH balance and all ERC20 tokens balances)
01:41:15 Transactions component (show last 5 transactions under Rinkeby Test Network)
01:55:00 NFTs component (show ERC721 and ERC1155 NFTs)
02:08:13 Send ETH Component
02:32:25 Conclus
コメント