CW3D NFT Explorer For Netlify

This boilerplate is set up to be deployed on Netlify and you can directly deploy this project by clicking the button below:

Deploy to Netlify

image

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 serves as a starting point for creating decentralized NFT Explorer (dApps) using Create Web3 Dapp. It is preconfigured to be deployed on Netlify, 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

  1. Clone the repository to your local machine:
    git clone https://github.com/alchemyplatform/netlify-alchemy-nft-explorer-template
    
  2. Navigate to the project directory:
    cd netlify-alchemy-nft-explorer-template
    
  3. Install the required dependencies:
    yarn install
    

Running the Project

  1. Start the local development server:
    yarn run dev
    
  2. Open your browser and navigate to http://localhost:3000/ to view the dApp in action.

Deploying to Netlify

This boilerplate is set up to be deployed on Netlify and you can directly deploy this project by clicking the button below:

Deploy to Netlify

If you prefer to deploy it manually, you can follow these steps:

  1. Sign up for a Netlify account at netlify.com if you don't already have one.
  2. Install the Netlify CLI:
    npm install -g netlify-cli
    
  3. Run the following command to deploy your dApp to Netlify:
    netlify deploy
    
  4. Follow the prompts and provide the required information. Your dApp will be deployed and accessible via a unique URL.

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!