In this tutorial, you’re gonna be building the Opensea Blockchain Web 3.0 App using Next JS, Sanity.io, thirdweb, Tailwind CSS, and Vercel π₯
Get early access to thirdweb π https://thirdweb.com/start?utm_source=youtube&utm_medium=social&utm_campaign=clever+programmer&utm_term=web3clones
Get the free boosted plan with Sanity π https://www.sanity.io/cleverprogrammer
ποΈ Link to the assets: https://drive.google.com/drive/folders/1BS_tG_B7kH3pJVBu6KJiLgsk4T2gt9Jr
@TheCoderCoder How to Make a Background Image Transparent in CSS π https://www.youtube.com/watch?v=LQsjNmkqUOc&ab_channel=CoderCoder
π GitHub Repo: https://github.com/CleverProgrammers/opensea-blockchain-youtube
You’ll be learning about:
π Building a Web 3.0 Application with Next JS
π Styling your app using Styled Components
π Create and mint your own NFT Tokens using the thirdweb SDK
π Adding Web 3.0 authentication using Metamask
π Storing data and information about the tokens you created in Sanity.io
π Using GROQ to retrieve data from Sanity Studio and display it in your Web 3.0 App
π Creating a send and receive functionality for your NFTs on the blockchain
π Deploy and host the app on Vercel
Buckle up, buttercup π
β²οΈ Timestamps
00:00:00 – Intro
00:01:32 – Demo Opensea Clone App
00:06:21 – Setting up NextJS
00:22:28 – Add Navbar
00:37:24 – Add Hero
00:46:58 – Set up Metamask Authentication with NextJS
01:07:31 – Build NFT Collection Page
01:37:26 – Add NFT Detail Page
01:59:27 – Set up NFT Direct Listing Purchase using NextJS and Thirdweb
02:14:35 – Deploy NextJS App to Vercel
02:21:27 – Outro
=======================================================
π¨βπ©βπ§βπ¦ Join our Discord Community: https://cleverprogrammer.com/discord
π Join Profit with React: https://www.cleverprogrammer.com/pwr?utm_source=youtube&utm_medium=yt-description&utm_campaign=yt-build&utm_content=22-jan-coinbase-web3-clone
π€ Attend our meetups: https://www.cleverprogrammer.com/meetups
#web3 #frontend #blockchaindeveloper Biz / Sponsorships π https://www.cleverprogrammer.com/partnerships