Skip to main content

​
Prerequisites

Before setting up the frontend, ensure you have the following installed:
  • Node.js: v18.19.50 or higher (tested with v24.13.1)
  • Package Manager: Yarn 3.2.3 (recommended) or npm/pnpm
  • Git: For cloning the repository

​
Installation

1

Navigate to the frontend directory

From the project root, navigate to the Next.js package:
cd packages/nextjs
2

Install dependencies

Install the required dependencies using your preferred package manager:
yarn install
The project uses Yarn 3.2.3 as specified in package.json. If you use Yarn, it will automatically use the correct version via Corepack.
3

Configure environment variables

Copy the example environment file and configure your variables:
cp .env.example .env.local
See Configuration for details on required environment variables.
4

Start the development server

Run the development server:
yarn dev
The application will start at http://localhost:3000

​
Available Scripts

The frontend package includes several useful scripts defined in package.json:
ScriptCommandDescription
devnext devStart development server
startnext devAlias for dev
buildnext buildBuild for production
servenext startServe production build
lintnext lintRun ESLint
check-typestsc --noEmit --incrementalTypeScript type checking
formatprettier --write .Format code with Prettier

​
Development Workflow

yarn check-types

​
Project Structure

The frontend follows a standard Next.js 15 App Router structure: 
packages/nextjs/
├── app/                    # Next.js App Router pages
│   ├── _components/        # Page-specific components
│   ├── api/               # API routes
│   ├── blockexplorer/     # Block explorer pages
│   ├── configuration/     # DAO configuration pages
│   ├── dao/               # DAO detail page
│   ├── daos/              # DAOs list page
│   ├── debug/             # Debug tools
│   ├── task/              # Task management pages
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Home page
├── components/            # Reusable UI components
│   ├── scaffold-eth/      # Scaffold-ETH components
│   └── ui/                # shadcn/ui components
├── contracts/             # Contract ABIs and addresses
├── hooks/                 # React hooks
│   ├── scaffold-eth/      # Scaffold-ETH hooks
│   └── custom hooks
├── services/              # Service layer
│   └── web3/              # Web3 configuration (Wagmi, RainbowKit)
├── styles/                # Global styles
│   └── globals.css        # Tailwind CSS imports
├── utils/                 # Utility functions
├── scaffold.config.ts     # Scaffold-ETH configuration
├── next.config.ts         # Next.js configuration
└── package.json           # Dependencies and scripts

​
Key Directories

Contains all Next.js 15 App Router pages and layouts. Each directory represents a route in the application.
Reusable React components including:
  • scaffold-eth/: Scaffold-ETH 2 framework components
  • ui/: shadcn/ui component library
Custom React hooks for blockchain interactions, contract reads/writes, and application state.
Web3 configuration including Wagmi and RainbowKit setup for wallet connections and blockchain interactions.
Generated contract ABIs and deployment addresses. Auto-updated when contracts are deployed.

​
Technology Stack

The frontend is built with modern web technologies:

​
Core Framework

  • Next.js 15.2.3: React framework with App Router
  • React 19.0.0: UI library
  • TypeScript 5.8.2: Type safety

​
Web3 Integration

  • Wagmi 2.16.4: React hooks for Ethereum
  • Viem 2.34.0: TypeScript Ethereum library
  • RainbowKit 2.2.8: Wallet connection UI

​
Styling

  • Tailwind CSS 4.1.3: Utility-first CSS framework
  • daisyUI 5.0.9: Component library
  • shadcn/ui: Accessible component primitives (Radix UI)
  • next-themes: Dark mode support

​
Additional Libraries

  • React Hook Form: Form management
  • Zod: Schema validation
  • Zustand: State management
  • Recharts: Data visualization
  • Framer Motion: Animations

​
Next Steps

Configuration

Configure environment variables, networks, and styling

Deployment

Deploy to Vercel or IPFS

Smart Contracts

Learn about the smart contract architecture

Components

Explore available hooks and components

Build docs developers (and LLMs) love

Get started for freeTalk to us