NFT Explorer CW3D Template
This NFT Explorer dapp is set up to be created using the create-web3-dapp npx package.
Resources
Please refer to CW3D's documentation and the following useful links for an in depth explanation of how to work with projects bootstrapped with CW3D:
- Docs - Everything you need to know when using CW3D
- GitHub - look at the extensive code example or start contributing
- Website - Learn more about CW3D and add components to your project
- Templates - Check out the pre-built project templates
- Components Library - Add features directly to your project through components
- Examples - See the components implemented in a real world dapp
- Community - Meet other builders, get support, and give feedback!
Overview
This project contains a fully fledged Next.js based NFT Explorer capable of fetching nfts by:
- Collections
- External and connected wallet
Across all EVM compatible chains.
Created using Create Web3 Dapp. It is , providing you with a seamless way to get your dApp up and running in no time.
This boilerplate is built using CW3D (Create Web3 Dapp), a powerful tool developed by Alchemy that allows developers to rapidly create and deploy dApps.
What's Included?
This boilerplate has everything you need to start building a dapp:
- Next.js
- Wagmi Hooks
- Ethers.js
- Rainbowkit
- Alchemy SDK
Supported Chains
The project supports all the major EVM chains:
- Ethereum
- Polygon
- Arbitrum
- Optimism
Getting Started
Prerequisites
To get started with this boilerplate, you'll need to have the following software installed on your local machine:
Installation
- Run create web3 dapp in your terminal and select the NFT Explorer template:
npx create-web3-dapp@latest
- Navigate to the project directory:
cd my-create-web3-dapp
Navigate to thedocs to learn more about using cw3d to spin up your web3 applications
Running the Project
- Inside the project folder, start the local development server:
yarn run dev
- Open your browser and navigate to
http://localhost:3000/
to view the dApp in action.
Project Structure
The boilerplate consists of one root directory:
📦root
┣ 📂components
┃ ┣ 📂navigation
┃ ┃ ┗ 📜navbar.jsx
┃ ┗ 📜nftGallery.jsx
┣ 📂layout
┃ ┗ 📜mainLayout.jsx
┣ 📂pages
┃ ┣ 📂api
┃ ┃ ┣ 📜getNftsForCollection.js
┃ ┃ ┗ 📜getNftsForOwner.js
┃ ┣ 📜_app.js
┃ ┗ 📜index.jsx
┣ 📂public
┃ ┗ 📜alchemy_logo.svg
┣ 📂styles
┃ ┣ 📜Home.module.css
┃ ┣ 📜Navbar.module.css
┃ ┣ 📜NftGallery.module.css
┃ ┗ 📜globals.css
┣ 📜.env.local
┣ 📜.gitignore
┣ 📜README.md
┣ 📜package-lock.json
┗ 📜package.json
Start editing the pages/index.jsx
file in the root directory to customize the project according to your own needs!