• Stars
    star
    824
  • Rank 55,348 (Top 2 %)
  • Language
    TypeScript
  • License
    GNU Affero Genera...
  • Created over 2 years ago
  • Updated 7 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

The complete toolbox to create web3 applications.

Create Web3 DApp



create-web3-dapp

Everything you need to create Web3 Dapps in 4 minutes.

Stargazers Forks Contributors Issues MIT License

This package includes the global command to start the Create Web3 DApp CLI builder.

Please refer to this package's documentation and the following links for an in depth explanation:

  • 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!

🟑 No need to clone: run "npx create-web3-dapp@latest" in your terminal to get started


What's included?

Your environment will have everything you need to start building a dapp:

  • Next.js
  • Wagmi Hooks
  • Ethers.js
  • Rainbowkit
  • Alchemy SDK

Supported chains

With create-web3-dapp you can create multi-chain dapps supporting all of the major EVM based chains:

  • Ethereum
  • Polygon
  • Polygon zkEVM
  • Arbitrum
  • Optimism

Support for non EVM chains is in the roadmap


What is create-web3-dapp?

create-web3-dapp is an npx tool that allows developers to create web3 applications in ~4 minutes.

The dapp created with create-web3-dapp are NextJS-based, and compatible with the most used blockchains such as Ethereum, Polygon, Optimism, Arbitrum, and Solana. Create-web3-dapp allows web3 developers to build production-ready decentralized applications at lightning speed, using pre-made React components, webhooks, and APIs.

No complicated configuration or folder structures, only the files you need to build your Dapp.

templates


Philosophy

  • One Dependency: There is only one build dependency. It uses webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them.

  • No Configuration Required: You don't need to configure anything. A reasonably good configuration of both development and production builds is handled for you so you can focus on writing code.

  • No Lock-In: You can β€œeject” to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off.

When to use CW3D

Create web3 dapp is a great fit for:

  • Learning Web3 in a comfortable and feature-rich development environment.
  • Starting new Web3 Applications
  • Testing things and experiment with React for your libraries and components.

Usage

npx create-web3-dapp@latest

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 suggest you to run using the latest available version by running npx create-web3-dapp@latest.

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)


Quick Start

To create a new app:

  1. In your terminal run:
  npx create-web3-dapp@latest
  1. Select and create the dependencies, components, and contracts you want to include in your web3 application.

Create web3 dapp will then create a directory containing the files to kickstart your project and install the install dependencies you'll need

npx create-web3-dapp@latest
cd my-create-web3-dapp
npm run dev

In case you've installed a blockchain development environment, navigate to the frontend folder before running npm run dev.

Now navigate on http://localhost:3000/ to see your dapp.

Next, learn how to add a web3 ready component from the create-web3-dapp library.


Smart Contracts Backpack - CLI Smart Contract creator

Create web3 dapp doesn't only set up your blockchain development environment, that to the built-in smart contracts backpack it also allows to create fully fledged Solidity Smart Contracts directly from the CLI.

Note: This will work only if you have installed a blockchain development environment

The smart contracts backpack can create audited smart contracts, deployment scripts and tests, of one of the following standards:

  • ERC721: NFT collection smart contract
  • ERC20: Crypto currency smart contract
  • ERC1155: Fungibility agnosting smart contract

Learn more on how to create, build and deploy, the smart contracts backpack in the docs.


Web3 React Components Library

Create web3 dapp allows developers to prototype their dapps in minutes thanks to a full library of responsive, production ready, web3 React components.

Note: The components work best inside create-web3-dapp projects, but are compatible with any NextJS project.

Use the following links to learn how to implement the components in the library:

  • Docs: a brokendown guide for every component
  • Github: see the components implemented in a real-world project

component


Example implementation:

  1. In /components create nftCreator.jsx
  2. In/styles create NftCreator.module.css
  3. In /pages/apicreatepinFileToIpfs.jspinJsonToIpfs.js
  4. Copy the corresponding code below into each of the created files above.
  5. Import the NftCreator component at the top of your page:

import styles from "../styles/Home.module.css";
import NftCreator from "../components/nft-creator";
import contract from "../abis/smartContractAbi.json";

export default function Home() {
	return (
		<div>
			<main className={styles.main}>
				<NftCreator
					abi={contract.abi}
					contractAddress={
						"0x9FaCAf075Cda7C0947DA0F0B4164332e01422E97"
					}
				/>
			</main>
		</div>
	);
}

More components? Check detailed instructions on the Docs.


Dapp Templates Library

Create web3 dapp gives you access to a library of production ready, web3 applications to kickstart your project with. NFTs Explorer, and much more coming soon.

The templates are available for developers to use as is, or they can be customized to fit the needs of their particular project.

Note: keeping dependencies to the minimum, and the code lean is our top priority, this to grant the templates, full customisability.

Use the following links to learn how to kickstart your dapp using the templates library:


templates



Folder Structure

create-web3-dapp has two folders structures, based on the presence of a blockchain development environment, or not.

With Blockchain Development Environment

πŸ“¦Root
 ┣ πŸ“‚components
 ┃ ┣ πŸ“‚navigation
 ┃ ┃ β”— πŸ“œnavbar.jsx
 ┃ β”— πŸ“œInstructionsComponent.jsx
 ┣ πŸ“‚layout
 ┃ β”— πŸ“œmainLayout.jsx
 ┣ πŸ“‚pages
 ┃ ┣ πŸ“‚api
 ┃ ┣ πŸ“œ_app.js
 ┃ β”— πŸ“œindex.jsx
 ┣ πŸ“‚public
 ┃ β”— πŸ“œalchemy_logo.svg
 ┣ πŸ“‚styles
 ┃ ┣ πŸ“œHome.module.css
 ┃ ┣ πŸ“œNavbar.module.css
 ┃ ┣ πŸ“œInstructionsComponent.module.css
 ┃ β”— πŸ“œglobals.css
 ┣ πŸ“œ.env.local
 ┣ πŸ“œ.gitignore
 ┣ πŸ“œnext.config.js
 ┣ πŸ“œpackage-lock.json
 β”— πŸ“œpackage.json

Without Blockchain Development Environment

πŸ“¦Root
 ┣ πŸ“‚.vscode
 ┃ β”— πŸ“œsettings.json
 ┣ πŸ“‚backend
 ┃ ┣ πŸ“‚contracts
 ┃ ┃ β”— πŸ“œMyContract.sol
 ┃ ┣ πŸ“‚scripts
 ┃ ┃ β”— πŸ“œMyContract_deploy.js
 ┃ ┣ πŸ“‚test
 ┃ ┃ β”— πŸ“œLock.js
 ┃ ┣ πŸ“œ.env.local
 ┃ ┣ πŸ“œhardhat.config.js
 ┃ ┣ πŸ“œpackage-lock.json
 ┃ β”— πŸ“œpackage.json
 ┣ πŸ“‚frontend
 ┃┣ πŸ“‚components
 ┃ ┃┣ πŸ“‚navigation
 ┃ ┃ β”— πŸ“œnavbar.jsx
 ┃  ┃┗ πŸ“œInstructionsComponent.jsx
 ┃┣ πŸ“‚layout
 ┃┃ β”— πŸ“œmainLayout.jsx
 ┃┣ πŸ“‚pages
 ┃┃ ┣ πŸ“‚api
 ┃┃ ┣ πŸ“œ_app.js
 ┃┃ β”— πŸ“œindex.jsx
 ┃┣ πŸ“‚public
 ┃┃ β”— πŸ“œalchemy_logo.svg
 ┃┣ πŸ“‚styles
 ┃┃ ┣ πŸ“œHome.module.css
 ┃┃ ┣ πŸ“œNavbar.module.css
 ┃┃ ┣ πŸ“œInstructionsComponent.module.css
 ┃┃ β”— πŸ“œglobals.css
 ┃┣ πŸ“œ.env.local
 ┃┣ πŸ“œ.gitignore
 ┃┣ πŸ“œnext.config.js
 ┃ ┣ πŸ“œpackage-lock.json
 ┃ β”— πŸ“œpackage.json
 ┣ πŸ“œ.DS_Store
 ┣ πŸ“œ.env.local
 ┣ πŸ“œ.gitignore
 ┣ πŸ“œLICENSE
 β”— πŸ“œREADME.md

Contributing

We'd love to have your helping hand on create-web3-dapp! See contributing.md for more information on what we're looking for and how to get started.

Supporting Create Web3 DApp

Create Web3 DApp is a community maintained project and all contributors are volunteers. If you'd like to support the future development of Create React App then please consider donating to our Open Collective.

Tools to try with create web3 dapp:

  • coming soon - partners.

Credits

This project exists thanks to all the people who contribute.


Maintainers


License

Create React App is open source software licensed as GNU-AGPL.

More Repositories

1

alchemy-sdk-js

The easiest way to connect your dApp to the blockchain.
TypeScript
364
star
2

rundler

An ERC-4337 Bundler in Rust
Rust
265
star
3

alchemy-web3

Web3 client extended with Alchemy integration
TypeScript
245
star
4

nft-minter-tutorial

JavaScript
236
star
5

aa-sdk

TypeScript
220
star
6

NFT-Marketplace-Tutorial

NFT marketplace tutorial by Alchemy
JavaScript
201
star
7

learn-solidity-presentations

All of the presentations in the Learn Solidity course
Solidity
198
star
8

Build-Your-NFT-Explorer

A simple demo to show case how Alchemy's NFT API works.
JavaScript
118
star
9

modular-account

Solidity
100
star
10

light-account

Solidity
95
star
11

ecdsa-node

JavaScript
81
star
12

nft-api-javascript-scripts

A collection of Javascript scripts running with Alchemy Web3.js, Fetch, or Axios
JavaScript
60
star
13

RTW3-Week2-BuyMeACoffee-Website

JavaScript
52
star
14

RTW3-Week2-BuyMeACoffee-Contracts

JavaScript
46
star
15

hardhat-ethers-react-ts-starter

A web3 starter project using Typescript, Hardhat, ethers.js and @web3-react
TypeScript
44
star
16

GiftList

Gifts under the Merkle Tree
JavaScript
40
star
17

cw3d-nft-explorer

JavaScript
39
star
18

RTW3-Week7-NFT-Marketplace

Road to Web3 Week7 tutorial on building an NFT Marketplace from Scratch
JavaScript
36
star
19

alchemy-docs

The publicly-accessible documentation for Alchemy.com!
36
star
20

hello-world-part-four-tutorial

JavaScript
36
star
21

web3-starter-projects

Fork a blockchain repo and build your dapp. Fast.
32
star
22

alchemy-flow-contracts

Cadence
31
star
23

alchemy-sdk-py

Python
30
star
24

embedded-accounts-quickstart

An application that demos how to quickly build with Alchemy Embedded Accounts.
TypeScript
28
star
25

hello-world-tutorial

Solidity
25
star
26

eth-provider-benchmark

Compare the accuracy and consistency of Ethereum service providers head to head on a suite of tests.
Python
25
star
27

Contract-Puzzles

JavaScript
20
star
28

solana-nft-tutorial

19
star
29

blockexplorer

JavaScript
19
star
30

escrow-hardhat

JavaScript
18
star
31

Alchemy-Hacker-Handbook

JavaScript
18
star
32

RTW3-Week-4-NFT-Gallery

JavaScript
16
star
33

aa-benchmarks

TypeScript
16
star
34

aa-starter-zksync

TypeScript
15
star
35

Local-Hardhat-Games

Solidity
14
star
36

uniswap-trading-example

TypeScript
14
star
37

Build-Your-NFT-Explorer-walkthrough

JavaScript
13
star
38

webhook-examples

Examples of using Alchemy Notify
Python
13
star
39

polygon-smart-contract-tutorial

A guide for coding and deploying a basic Polygon (MATIC) smart contract!
JavaScript
9
star
40

netlify-alchemy-dapp-boilerplates

JavaScript
8
star
41

create-web3-dapp-examples

JavaScript
8
star
42

docs-openapi-specs

OpenAPI Specs for methods on Alchemy docs
TypeScript
8
star
43

nft-indexer

Display all of an addresses's NFTs using Alchemy's Enhanced APIs + Alchemy SDK!
JavaScript
8
star
44

MintGovernance

JavaScript
7
star
45

nft-api-demo-scripts

Shell
7
star
46

embedded-accounts-demo

Demo for Alchemy Embedded Accounts
TypeScript
7
star
47

modular-account-plugin

A very basic ERC6900 compliant plugin
Solidity
7
star
48

multisig-plugin

Solidity
7
star
49

alchemy-web3-webpack-example

Simple project demonstrating Alchemy-Web3 in a browser
JavaScript
6
star
50

nft-api-example

Repository with some example calls to the Alchemy NFT API
TypeScript
6
star
51

erc20-indexer

Index all of an address's ERC-20 token balances in an instant using Alchemy's Enhanced APIs!
JavaScript
6
star
52

smart-accounts-from-scratch

JavaScript
6
star
53

accountkit-react-native-boilerplate

Alchemy AA-SDK React Native boilerplate with Typescript, Viem, and Wagmi
TypeScript
5
star
54

zksync-paymaster-example

Solidity
5
star
55

MintNFT

Mint Your Own NFT!
JavaScript
5
star
56

nft-explorer-vercel

JavaScript
5
star
57

aa-virtual-cold-storage

Supercharging smart contract account security with custom virtual cold storage plugin functionalities | Built with @alchemyplatform Modular Smart Contract Account (ERC 6900) & aa-sdk | Learn More: https://accountkit.alchemy.com/
Solidity
5
star
58

solana-hello-world

Alchemy's Introductory Tutorial for Solana
TypeScript
4
star
59

polygon-nft-finder

Simple demo for finding NFT drops on Polygon (MATIC) via Alchemy Transfers API
HTML
4
star
60

token-api-javascript-scripts

A collection of Javascript scripts running with Alchemy Web3.js, Fetch, or Axios Topics Resources
JavaScript
4
star
61

Transaction-Lifecycle-via-SMS

Python
4
star
62

transfers_api_javascript_scripts

A collection for scripts for using the Alchemy Transfers API
JavaScript
3
star
63

historical_transactions_polygon_scripts

Script for querying historical transactions on Polygon (MATIC) via Alchemy Transfers API
Python
3
star
64

cw3d-evm-boilerplate

JavaScript
3
star
65

entrypoint-hash-poc

Solidity
3
star
66

viem-speedrun

TypeScript
3
star
67

netlify-alchemy-nft-explorer-template

JavaScript
3
star
68

alchemy-multichain-demo

Demo on how to manage multiple chains when using the Alchemy SDK
TypeScript
2
star
69

get-nfts-script

JavaScript script to get all NFTs owned by a specified address
JavaScript
2
star
70

netlify-alchemy-dapp-boilerplates-w-hardhat

JavaScript
2
star
71

vercel-alchemy-dapp-boilerplates

JavaScript
2
star
72

AWS-serverless-blockchain-data-ingesting-infrastructure

JavaScript
2
star
73

alchemy-chainlink-spring-hackathon-nft

JavaScript
2
star
74

block-race

A simple script for comparing how quickly Eth providers publish new blocks.
TypeScript
2
star
75

alchemy-asset-transfers-benchmark

TypeScript
2
star
76

Alchemy-Notify-Tutorial

Tutorial for integrating transaction activity notifications into your dApp.
JavaScript
2
star
77

spearmint-sdk

An SDK for Alchemy's free and automated web3 allowlist platform.
2
star
78

gasless-minter-tutorial

Tutorial on setting up a full-stack application with account abstraction to enable gasless minting.
TypeScript
2
star
79

aa-simple-dapp

A simple Next.js app allows for gas-less ERC-20 mints using Account Abstraction.
TypeScript
2
star
80

creating-smart-contract-and-sending-userops

TypeScript
2
star
81

aa-sdk-rn-expo

Example repo using aa-sdk with react native and expo
TypeScript
2
star
82

aa-sdk-userops

TypeScript
2
star
83

erc20-example-foundry

A simple Foundry Repo to build, test, and deploy an ERC-20 token.
Solidity
2
star
84

try-alchemy-sdk

super quick repo to get started with the alchemy-sdk
JavaScript
1
star
85

transaction-receipts-scripts

A collection of Ethereum transaction receipt scripts
Python
1
star
86

usdc-token-gate

Demo project for ETH Denver!
JavaScript
1
star
87

gm

JavaScript
1
star
88

Alchemy-Transfers-Tutorial

Tutorial for integrating historical transaction activity into your dApp dashboard.
Python
1
star
89

vercel-alchemy-dapp-boilerplates-w-hardhat

JavaScript
1
star
90

sponsoring-userops

TypeScript
1
star
91

aa-demo

Demo of account abstraction functionality using CW3D + Userbase.
TypeScript
1
star
92

creating-light-smart-account-and-sending-user-ops

TypeScript
1
star
93

token_api_javascript_scripts

Javascript Scripts for Token API tutorials
JavaScript
1
star