Code Monkey home page Code Monkey logo

build-onchain-apps's Introduction

Build Onchain Apps

Accelerate your web3 creativity with the Build Onchain Apps Toolkit. ☕️

Current version GitHub contributors GitHub Stars GitHub


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

The generated onchain app aims to provide everything you need to run a web product, along with additional tools, documentation, and tricks for building onchain.

Whether you're a hackathon participant or an ambitious entrepreneur looking to establish the next successful company, this toolkit is designed with you in mind. 💙


Building blocks out of the box 🧰 🧙 ✨

  • Web: Next.js + Tailwind CSS + Radix UI 🟡
  • Onchain: Base + RainbowKit + wagmi + Viem 🔵
  • Experiences: send, mint 🌁
  • Onchain UI components: AccountConnectButton 🎨
  • Support EOA Wallet integration 👛
  • Linting and Prettier 💅
  • Tests Suite
  • Support Progressive Web Apps ⚡️
  • Foundry integration
  • Web Vitals analytics
  • In-depth step by step documentation (Coming Soon)
  • 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

Build Onchain Apps

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

Build Onchain Apps

Step 2: Kick start your contracts

# Install Foundry

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

Step 2.1: Build, test and format the sample contracts

cd contracts

# Install dependencies
forge install

# 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


Contributing ☕️ 🔵

Read below to learn how you can take part in improving Build Onchain Apps Toolkit.

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

The Team and Our Community ☁️ 🌁 ☁️

Build Onchain Apps Toolkit is all about community; for any questions, feel free to:

  1. Open an issue
  2. Tell us what project you build ⛵️
  3. Reach out to the core maintainers on Twitter or Farcaster

Leonardo Zizzamia

Sneh Koul

Alvaro Raminelli

Wesley Pickett

Chris Nascone

Rose Kuan

Rob Polak

License

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

build-onchain-apps's People

Contributors

zizzamia avatar github-actions[bot] avatar alvaroraminelli avatar sneh1999 avatar wespickett avatar codynova avatar alvaroraminelli-cb avatar cnasc avatar renanmav avatar joshuahyde-cb avatar robpolak avatar surajama avatar lixuejiang avatar robpolak-cb avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.