The complete toolbox to create web3 applications.
AGPL-3.0 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:
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, Polygon zkEVM, 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.
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)
To create a new app:
npx create-web3-dapp@latest
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.
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.
The smart contracts backpack can create audited smart contracts, deployment scripts and tests, of one of the following standards:
Learn more on how to create, build and deploy, the smart contracts backpack in the docs.
Create web3 dapp allows developers to prototype their dapps in minutes thanks to a full library of responsive, production ready, web3 React components.
Use the following links to learn how to implement the components in the library:
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.
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.
Use the following links to learn how to kickstart your dapp using the templates library:
create-web3-dapp has two folders structures, based on the presence of a blockchain development environment, or not.
📦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
📦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
This project exists thanks to all the people who contribute.
We are grateful to the authors of existing related projects for their ideas and collaboration:
Create React App is open source software licensed as GNU-AGPL.