CW3D Dapp Boilerplate For Vercel

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

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 boilerplate for creating decentralized applications (dApps) using Create Web3 Dapp. It is preconfigured to be deployed on Vercel, 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
• Polygon zkEVM
• Arbitrum
• Optimism

Getting Started

Prerequisites

To get started with this boilerplate, you'll need to have the following software installed on your local machine:

• Node.js
• Yarn
• Git

Installation

1. Clone the repository to your local machine:

   git clone https://github.com/alchemyplatform/vercel-alchemy-dapp-boilerplates-w-hardhat.git
   

2. Navigate to the frontend directory in the project:

   cd vercel-alchemy-dapp-boilerplates-w-hardhat
   cd frontend
   

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 Vercel

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

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

1. Sign up for a Vercel account at vercel.com if you don't already have one.
2. Install the Vercel CLI:

   npm install -g vercel
   

3. Run the following command to deploy your dApp to Vercel:

   vercel 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 two main directories:

• backend: Contains the Hardhat configuration and Solidity smart contracts.
• frontend: Contains the Next.js frontend application and related components.

📦root
 ┣ 📂backend
 ┃ ┣ 📂contracts
 ┃ ┃ ┗ 📜MyContract.sol
 ┃ ┣ 📂scripts
 ┃ ┃ ┗ 📜MyContract_deploy.js
 ┃ ┣ 📜.gitignore
 ┃ ┣ 📜hardhat.config.js
 ┃ ┗ 📜package.json
 ┗ 📂frontend
 ┃ ┣ 📂components
 ┃ ┃ ┣ 📂navigation
 ┃ ┃ ┃ ┗ 📜navbar.jsx
 ┃ ┃ ┗ 📜InstructionsComponent.jsx
 ┃ ┣ 📂layout
 ┃ ┃ ┗ 📜mainLayout.jsx
 ┃ ┣ 📂pages
 ┃ ┃ ┣ 📜_app.js
 ┃ ┃ ┗ 📜index.jsx
 ┃ ┣ 📂public
 ┃ ┃ ┗ 📜cw3d-logo.png
 ┃ ┣ 📂styles
 ┃ ┃ ┣ 📜Home.module.css
 ┃ ┃ ┣ 📜InstructionsComponent.module.css
 ┃ ┃ ┣ 📜Navbar.module.css
 ┃ ┃ ┗ 📜globals.css
 ┃ ┣ 📜.gitignore
 ┃ ┣ 📜next.config.js
 ┃ ┣ 📜package.json
 ┃ ┗ 📜yarn.lock

Start editing the pages/index.jsx file in the frontend directory to customize the project according to your own needs!