# Next.js Web3 Dashboard Starter (Wagmi + RainbowKit + The Graph)

A production-ready Web3 dashboard starter built with Next.js, Wagmi, RainbowKit, The Graph, and Tailwind CSS for building DeFi analytics platforms and on-chain data dashboards.

Live Demo → https://nextjs-web3-dashboard-starter.vercel.app/dashboard

This starter helps developers quickly build modern Web3 dashboards with wallet integration, blockchain data fetching, and scalable architecture.

• 🔗 Wallet Integration with Wagmi and RainbowKit
• 📊 DeFi Analytics Dashboard structure
• ⛓️ On-chain Data Fetching using The Graph (Subgraphs)
• ⚡ Optimized API Layer for blockchain data queries
• 📈 Charts & Metrics using modern dashboard components
• 🧱 Modular Architecture for scalable Web3 applications
• 🎨 Tailwind CSS UI for rapid interface development
• 🚀 Production-ready project structure

• Next.js – React framework for scalable applications
• TypeScript – Type-safe development
• Wagmi – React hooks for Ethereum
• RainbowKit – Wallet connection UI
• The Graph – Decentralized blockchain data indexing
• Tailwind CSS – Utility-first CSS framework
• Tremor / Chart Libraries – Data visualization

nextjs-web3-dashboard-starter/

app/
  dashboard/
  analytics/
  pools/

components/
  charts/
  metrics/
  tables/

hooks/
  usePools.ts
  useWalletPositions.ts

lib/
  subgraph/
  web3/

services/
  pool-service.ts
  token-service.ts

types/
  pool.ts
  token.ts

docs/
  architecture.md
  data-flow.md

The architecture separates:

• UI components
• Data fetching logic
• Blockchain integrations
• Reusable hooks

This makes the project easier to scale for real production dashboards.

Clone the repository:

git clone https://github.com/YOUR_USERNAME/nextjs-web3-dashboard-starter.git
cd nextjs-web3-dashboard-starter

This project uses RainbowKit + WalletConnect for wallet connections.

Every dApp using WalletConnect must provide a WalletConnect Project ID.

Go to:

https://dashboard.reown.com/sign-in

Create a free account and generate a Project ID.

WalletConnect Cloud is free and only takes a few minutes to set up.

Create a file in the root of the project:

Add your WalletConnect Project ID:

NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your_project_id_here

Install dependencies:

npm install

Run the development server:

npm run dev

Open in your browser:

http://localhost:3000

This starter can be used to build:

• DeFi analytics dashboards
• Liquidity pool monitoring tools
• On-chain analytics platforms
• Wallet portfolio dashboards
• Blockchain data visualization tools

Planned features:

• Liquidity pool analytics
• Token price charts
• Wallet portfolio tracking
• Subgraph caching layer
• DeFi APR calculators
• Multi-chain support

Contributions are welcome!

If you have suggestions or improvements:

1. Fork the repository
2. Create a feature branch
3. Submit a pull request

Khalil Ahmed

Frontend Engineer building Web3 analytics platforms and scalable blockchain dashboards.

• Portfolio: https://www.khalilahmed.dev
• LinkedIn: https://www.linkedin.com/
• GitHub: https://github.com/khalilahmed63

If you find this project useful, consider starring the repository to support the project and help others discover it.