dApp Starter Boilerplate

A dApp starter kit template to quick start a dapp project with Next.js + Tailwind CSS + Ethers + wagmi + RainbowKit.

Other tools/components included: Headless UI, Heroicons, Autoprefixer, Sass, PostCSS, ESLint, Prettier.

Live preview for this repo: https://dapp-starter.aris.ac

Getting Started

# Install Dependencies
yarn

# Run the development server
yarn dev

ENV

# Copy ENV File
cp .env.example .env.local

Configs

• src/appConfig.ts: app name, title, SEO etc.
• src/pages/_app.tsx: chains, providers, wallet connectors

Scripts

Next.js

# Build
yarn build

# Start server with build files
yarn start

Prettier

# Use Prettier to do Format Check for files under ./src
yarn fc

# Use Prettier to do Format Fix for files under ./src
yarn ff

Contract Types

# Generate contract types from src/contracts/*.json
yarn compile-contract-types

Deployment

The easiest way to deploy your Next.js app is to use Vercel, by the creators of Next.js.

Check out the Next.js deployment documentation for more details.

More

Learn about components of this kit is using:

• Next.js - React Framework by Vercel
• Tailwind CSS - Utility-first CSS Framework
• Ethers.js - Compact library for interacting with Ethereum.
• wagmi - React Hooks for Ethereum
• RainbowKit - React library for wallet connections with dApp.
• Headless UI - Unstyled, fully accessible UI components

License

This app is open-source and licensed under the MIT license. For more details, check the License file.