Build Onchain Apps

screenshot of Build Onchain Apps
nextjs
react
tailwind

Accelerate your onchain creativity with the Build Onchain Apps Template.

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.
nextjs
Next.js

Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

postcss
Postcss

PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.