Create Web3 Dapp Templates

Learn about the create-web3-dapp templates for quickly bootstrapping the common web3 projects!

What are Templates?

Templates are pre-built full-stack web3 dapp projects that can be used as starting points by developers when building their own dapps. These templates have already been built and contain the basic structure and functionality that developers can use to build their own dapp. The templates are available for developers to use as is, or they can be customized to fit the needs of their particular project.

How do Templates differ from Components

Components are reusable pieces of code that perform a specific function within a dapp. They can be used across different dapps and can save developers a lot of time by providing pre-built functionality that can be used right away.

Templates, on the other hand, are full-stack dapp projects that provide a starting point for developers to build their own dapp. They contain a basic structure that includes components and other functionality, but the main purpose of a template is to provide an entire project structure that developers can customize.

How to use Templates?

To use templates, follow the steps mentioned below:

1. Install the CW3D NPX package

In your terminal, navigate to the folder you want to create your project in and run:

npx create-web3-dapp@latest
1384

🚧

If you've previously installed create-web3-dapp globally via npx create-web3-dapp:

The CLI builder will notify you if a new version has been released. In any case, we always suggest you to run using the latest available version by running npx create-web3-dapp@latest.


2. Insert a project name and starting project

You'll now get asked to insert a project name and a starting project to start from:

  • Create empty full-stack dapp: With is option you will be given an empty full-stack dapp with wallet connection built-in using Rainbow Kit, optionally, you can also choose to add a blockchain development environment (Hardhat or Foundry) in the project and adding a pre-defined smart contract like ERC721, ERC721A etc.
  • Create pre-built template: You can select a pre-built template for a dapp with this option. Right now we have the Block Explorer dapp as a template and we are actively working on adding more templates soon!

Choose the "Create pre-built template" option.

1480

3. Select a template

Select the template that you want to start with. In this case, we are selecting the "NFT Explorer" template.

880

4. Choose your chain

Once you have selected your starting template, you'll need to choose the chain you want to configure your project for. Note that you can always modify or add more chains in the future. Current choices include:

  • Ethereum
  • Polygon
  • Arbitrum
  • Optimism
1254

5. Select testnet or mainnet

Select if you want to configure with mainnet or testnet. We generally recommend starting with a testnet if you're not ready to deploy to the live chain yet. Here are the corresponding test networks for each chain:

  • Ethereum -> Goerli
  • Polygon -> Mumbai
  • Arbitrum -> Arb-Goerli
  • Optimism -> Opt-Goerli
884

6. Create an Alchemy Account or Enter your API key

Then you will be asked if you already have an Alchemy account, selecting yes or no based on if you have the Alchemy account or not.

908

If you already have an Alchemy account you will be redirected to your Alchemy dashboard from where you can copy and paste your API key into the terminal.

1426 2018

If not, you will be redirected to create a new Alchemy account and after creating the Alchemy account you can copy and paste your API key in the terminal.

We'll use an Alchemy API key to connect to the blockchain and read data.

1886

That's it! Now you're ready to rock! :rocket: To launch CW3D, simply cd into your new project folder and run:

npm run dev. This should open up the app on http://localhost:3000

2432

And you have an NFT explorer dapp ready to go! Just by using the template 🚀


List of the available Templates

  • NFT Explorer: This template is designed for developers building a dapp that allows users to explore NFTs on the blockchain. It includes functionality for searching for NFTs by address.

Currently, the NFT Explorer template is the only template available in create-web3-dapp but we are actively working on adding more templates.

Conclusion

In conclusion, templates are an excellent way for developers to save time and get started quickly on their dapp development journey.


ReadMe