Build Onchain Apps

Build onchain applications with the best consumer experience in a few minutes. ☕️

Build Onchain Apps takes an opinionated approach to streamlining and automating early decisions you must make in building your consumer product.

The onchain app generated by the CLI aims to be a companion that walks alongside you over the first few months of building.

So, if you are either a hackathon participant and/or an ambitious entrepreneur aiming to establish the next successful company, this is built with you in mind. 💙

Out of the box 🧰 🧙 ✨

• Web2 building blocks: Next.js + Tailwind CSS + Radix UI 🟡
• Onchain building blocks: Base + RainbowKit + wagmi + Viem 🔵
• Onchain UI components: AccountConnectButton 🎨
• Support EOA Wallet integration 👛
• Linting and Prettier 💅
• Tests Suite
• Support Progressive Web Apps ⚡️
• Foundry integration
• Client Analytics (Coming Soon)
• Web Vitals optimization (Coming Soon)
• In-depth step by step documentation (Coming Soon)
• One click deploy on Vercel
• Onchain UI components: Balances, Minting, Airdrop, etc...
• We just started; stay tuned for more to come!!! ☕️

Getting Started

Step 1: Kick off your onchain app

npx @coinbase/build-onchain-apps@latest create

Step 1.1: Obtain Wallet Connect Project ID from walletconnect.com and assign to the .env.local file

NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=ADD_WALLET_CONNECT_PROJECT_ID_HERE

Step 1.2: Install and Run your onchain app

# Install dependencies
yarn

# Run onchain app
yarn dev

Step 2: Kick start your contracts

# Initialize git
git init

# Install Foundry

curl -L https://foundry.paradigm.xyz | bash
foundryup

Step 2.1: Build, test and format the sample contracts

cd contracts

# Install openzeppelin
forge install
forge install openzeppelin/openzeppelin-contracts --no-commit
forge remappings > remappings.txt

# Build
forge build

# Test
forge test

# Format
forge fmt

Step 2.3: Deploy contracts to Base goerli

Create a .env file using the .env.example file provided in your contracts folder and add your private key.

source .env

forge script script/BuyMeACoffee.s.sol:BuyMeACoffeeScript --broadcast --verify --rpc-url ${RPC_URL} --etherscan-api-key ${BLOCK_EXPLORER_API_KEY}

Congrats ✨, Time to enjoy your onchain app with some coffee ☕️

For a Live demo use

• Stackblitz

Contributing ☕️ 🔵

The main purpose of this repository is to continue evolving Build Onchain Apps, making it better and easier to use. Development of Build Onchain Apps happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements. Read below to learn how you can take part in improving Build Onchain Apps.

Code of Conduct.

Build Onchain Apps has adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.

Contributing Guide.

Read our contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to Build Onchain Apps.

Develop

To build and test either the CLI or the main App, start by cloning the repo.

# Clone the repo
git clone https://github.com/coinbase/build-onchain-apps.git

Develop the App

# Go to main application
cd apps/build-onchain-apps

# Install and run latest template
yarn
yarn dev

Develop the CLI

# From the root repo
# Install and build latest dependencies
yarn
yarn build

# Link the local package to the global npm registry
npm link

# Test CLI using the local package
build-onchain-apps create

# After testing, unlink the package from the global npm registry
npm unlink @coinbase/build-onchain-apps
npm uninstall -g @coinbase/build-onchain-apps

Community ☁️ 🌁 ☁️

Building Onchain Applications is all about community, whether you are ready for a hackathon or building your next company; for any questions, feel free to:

1. open an issue and ask a question here on GitHub;
2. reach out to the maintainers on Twitter: @zizzamia, @alvaroraminelli, @snoopies_eth, @wespickett, @renanmav, @codyrnova
3. let us know what project you build with this library.

License

This project is licensed under the MIT License - see the LICENSE.md file for details