Tailwind Resources Logo Tailwind Resources
Build Onchain Apps screenshot

Build Onchain Apps

Author Avatar Theme by Coinbase
Updated: 9 Sep 2024
728 Stars

Accelerate your onchain creativity with the Build Onchain Apps Template.

Github Live Preview

Categories

Nextjs React

Overview

The Build Onchain Apps Toolkit is a comprehensive toolkit designed to streamline and automate the process of building onchain apps. It aims to provide all the necessary tools, documentation, and tricks for developers to create web products on the blockchain. Whether you’re a hackathon participant or an ambitious entrepreneur, this toolkit is designed to save you time and effort by eliminating the hassle of integrating web3 components with web2 infrastructure. With features such as Progressive Web App support, Eth L2 support, Wallet Connect integration, live examples, and documentation, this toolkit has everything you need to kickstart your onchain app development journey.

Features

  • Progressive Web App support using Next.js: Allows for the creation and deployment of Progressive Web Apps.
  • Eth L2 support through Base: Provides support for Ethereum Layer 2 solutions through Base.
  • Wallet Connect integration with RainbowKit: Allows for easy integration of Wallet Connect into your onchain app.
  • Live examples and documentation for Minting and Payments experiences with wagmi and Viem: Provides live examples and detailed documentation for creating minting and payments experiences using wagmi and Viem.
  • Latest styling best practices with Tailwind CSS: Incorporates the latest styling best practices using Tailwind CSS.
  • Easy maintenance with linting, formatting, and tests: Includes tools for easy maintenance such as linting, formatting, and testing.
  • Smart contract deployment with Foundry: Facilitates the deployment of smart contracts using Foundry.
  • Insights into Web Vitals performance metrics with Perfume.js: Provides insights into Web Vitals performance metrics using Perfume.js.

Installation

To install and run the Build Onchain Apps Toolkit, follow the steps below:

  1. Kick off your onchain app.
  2. Obtain the Wallet Connect Project ID from walletconnect.com and assign it to the .env.local file.
  3. Install and run your onchain app.
  4. Kick start your contracts by following the instructions of Foundry to set it up completely.
  5. Build, test, and format the sample contracts.
  6. Deploy the contracts to Base Sepolia by creating a .env file using the .env.example file provided in your contracts folder and adding your private key.

Note: Make sure to add a “0x” in front of your private key to convert it to a hex string.

For more information on contracts and deployment, visit the provided link.

Summary

The Build Onchain Apps Toolkit is a comprehensive toolkit designed to streamline and automate the process of building onchain apps. With features such as Progressive Web App support, Eth L2 support, Wallet Connect integration, and more, this toolkit provides developers with everything they need to kickstart their onchain app development journey. By eliminating the hassle of integrating web3 components with web2 infrastructure, developers can save time and effort, allowing them to focus on building their consumer products.