Web3 & Blockchain App Templates: Build DeFi, NFT, and Crypto Platforms

The blockchain and Web3 ecosystem continues to expand rapidly in 2026. DeFi platforms, NFT marketplaces, crypto exchanges, and DAO governance tools are being built at an unprecedented pace. But building Web3 applications comes with unique challenges — wallet connection, smart contract interaction, transaction management, gas optimization, and blockchain data indexing all need to work flawlessly.

Web3 app templates and blockchain starter kits simplify this by providing complete, production-ready foundations with wallet integration, contract interaction, and blockchain data handling pre-configured.

The Web3 Development Stack

A modern blockchain application built with a Web3 boilerplate typically uses:

• Next.js 14 for the frontend and API routes
• Wagmi + Viem for wallet connection and contract interaction
• RainbowKit or ConnectKit for wallet UI components
• Ethers.js v6 for blockchain utilities
• Alchemy or Infura for RPC endpoints
• The Graph or Dune for on-chain data indexing
• Hardhat or Foundry for smart contract development

Wagmi has become the standard React library for Ethereum interaction. It handles wallet connection, account management, signature requests, and transaction sending through a clean hooks-based API.

Why Use a Web3 Starter Kit

Blockchain development has a steeper learning curve than traditional web development. A defi dashboard template or nft marketplace boilerplate eliminates the setup overhead:

Wallet Connection

MetaMask, WalletConnect, Coinbase Wallet, and dozens of other wallets need to be supported. A good template includes RainbowKit or ConnectKit with all major wallets configured, chain switching, and network detection.

Transaction Management

Sending transactions, tracking confirmations, handling reverts, and managing gas prices require careful UX. The boilerplate should include transaction status notifications, gas estimation, and error handling.

Smart Contract Integration

TypeScript types generated from ABI files, contract read/write hooks, and event listeners for real-time updates. A Web3 boilerplate includes the tooling to generate types from your Solidity contracts.

Setting Up a Web3 Application

Here is how to get started with a Web3 boilerplate:

# Clone the Web3 starter kit
git clone https://github.com/breafio/defi-dashboard.git my-dapp
cd my-dapp
pnpm install
cp .env.example .env.local

Environment Configuration

# .env.local
NEXT_PUBLIC_WALLET_CONNECT_ID=your-walletconnect-project-id
NEXT_PUBLIC_ALCHEMY_API_KEY=your-alchemy-key
NEXT_PUBLIC_CHAIN_ID=1
NEXT_PUBLIC_CONTRACT_ADDRESS=0xYourContractAddress

Wallet Connection with Wagmi

// lib/web3/config.ts
import { createConfig, http } from 'wagmi'
import { mainnet, polygon, arbitrum } from 'wagmi/chains'
import { walletConnect, metaMask, coinbaseWallet } from 'wagmi/connectors'
import { createClient } from 'viem'

export const config = createConfig({
  chains: [mainnet, polygon, arbitrum],
  connectors: [
    metaMask(),
    walletConnect({ projectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_ID! }),
    coinbaseWallet(),
  ],
  client({ chain }) {
    return createClient({ chain, transport: http() })
  },
})

Provider Setup

// app/providers.tsx
'use client'

import { WagmiProvider } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit'
import { config } from '@/lib/web3/config'

const queryClient = new QueryClient()

export function Web3Providers({ children }: { children: React.ReactNode }) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider theme={darkTheme()}>
          {children}
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}

Reading On-Chain Data

Wagmi hooks make reading contract state straightforward:

'use client'

import { useReadContract, useAccount } from 'wagmi'
import { formatEther } from 'viem'
import { stakingAbi } from '@/lib/web3/abis/staking'

export function StakingInfo() {
  const { address } = useAccount()

  const { data: stakedBalance, isLoading } = useReadContract({
    address: process.env.NEXT_PUBLIC_STAKING_CONTRACT as string,
    abi: stakingAbi,
    functionName: 'getStakedBalance',
    args: [address],
  })

  const { data: rewardRate } = useReadContract({
    address: process.env.NEXT_PUBLIC_STAKING_CONTRACT as string,
    abi: stakingAbi,
    functionName: 'rewardRate',
  })

  if (isLoading) return <div>Loading...</div>

  return (
    <div className="rounded-xl border bg-white p-6">
      <h3 className="font-semibold">Your Staking Position</h3>
      <div className="mt-4 space-y-3">
        <div className="flex justify-between">
          <span className="text-gray-500">Staked</span>
          <span className="font-bold">{formatEther(stakedBalance ?? 0n)} ETH</span>
        </div>
        <div className="flex justify-between">
          <span className="text-gray-500">APY</span>
          <span className="font-bold text-green-600">
            {rewardRate ? (Number(rewardRate) / 100).toFixed(2) : '0'}%
          </span>
        </div>
      </div>
    </div>
  )
}

Sending Transactions

Writing to the blockchain requires handling the full transaction lifecycle:

'use client'

import { useWriteContract, useWaitForTransactionReceipt } from 'wagmi'
import { parseEther } from 'viem'
import { stakingAbi } from '@/lib/web3/abis/staking'

export function StakeForm() {
  const { data: hash, writeContract, isPending } = useWriteContract()
  const [amount, setAmount] = useState('')

  const { isLoading: isConfirming } = useWaitForTransactionReceipt({ hash })

  const handleStake = async () => {
    writeContract({
      address: process.env.NEXT_PUBLIC_STAKING_CONTRACT as string,
      abi: stakingAbi,
      functionName: 'stake',
      value: parseEther(amount),
    })
  }

  return (
    <div className="rounded-xl border bg-white p-6">
      <h3 className="font-semibold">Stake ETH</h3>
      <div className="mt-4 flex gap-2">
        <input
          type="number"
          value={amount}
          onChange={e => setAmount(e.target.value)}
          placeholder="0.0"
          className="flex-1 rounded-xl border px-4 py-2"
          step="0.01"
          min="0"
        />
        <button
          onClick={handleStake}
          disabled={isPending || isConfirming}
          className="rounded-xl bg-brand-600 px-6 py-2 font-semibold text-white disabled:opacity-50"
        >
          {isConfirming ? 'Confirming...' : 'Stake'}
        </button>
      </div>
      {hash && (
        <p className="mt-2 text-sm text-gray-500">
          Tx: {hash.slice(0, 10)}...{hash.slice(-8)}
        </p>
      )}
    </div>
  )
}

NFT Marketplace Integration

For NFT marketplace templates, additional functionality includes:

// hooks/useNFTMarketplace.ts
import { useReadContract, useWriteContract } from 'wagmi'
import { marketplaceAbi } from '@/lib/web3/abis/marketplace'

export function useNFTListing(tokenId: number) {
  const { data: listing } = useReadContract({
    address: process.env.NEXT_PUBLIC_MARKETPLACE as string,
    abi: marketplaceAbi,
    functionName: 'getListing',
    args: [tokenId],
  })

  const { writeContract } = useWriteContract()

  const buy = async () => {
    if (!listing) return
    writeContract({
      address: process.env.NEXT_PUBLIC_MARKETPLACE as string,
      abi: marketplaceAbi,
      functionName: 'buyItem',
      args: [tokenId],
      value: listing.price,
    })
  }

  return { listing, buy }
}

Web3 Templates Available

BreafIO offers over 200 templates including a growing collection of Web3 and blockchain templates:

The DeFi Dashboard is a complete decentralized finance dashboard with wallet connection, portfolio tracking, yield farming positions, and transaction history. Built with Wagmi, RainbowKit, and Recharts for data visualization.

NFT Marketplace Pro provides a full NFT marketplace with listing creation, buying, selling, bidding, and collection browsing. Includes IPFS metadata storage integration and royalty support.

The Crypto Exchange UI delivers a professional exchange interface with spot trading, margin trading, order book, trade history, and wallet management.

The Bottom Line

Web3 development combines the complexity of blockchain technology with the expectations of modern web applications. A well-designed blockchain boilerplate handles wallet integration, smart contract interaction, and transaction management so you can focus on your DeFi protocol, NFT marketplace, or crypto platform.

Browse all 200+ templates and starter kits and find the perfect foundation for your Web3 application.