web3-app-starter-kit

Intro

This repo is a chill starter kit for casual/hobbyist coders who vibe with agentic tooling to whip up web3 apps. It's designed to be super friendly for agentic tools while letting you dive into smart contract development. Maintained by Zilliqa.

Quick Start

Starting the Web Application

1. Navigate to the webapp directory:

   cd webapp

2. Install dependencies:

   npm install

3. Set up environment variables: Create a .env.local file in the webapp/ directory:

   NEXT_PUBLIC_CHAIN_ID=33101
   NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your_walletconnect_project_id

   Get your WalletConnect Project ID from WalletConnect Cloud

4. Start the development server:

   npm run dev

5. Open your browser: Navigate to http://localhost:3000

Using AI Assistants with This Project

This starter kit is optimized for use with AI coding assistants like Claude Code. The project includes:

• CLAUDE.md: Development guidelines in webapp/CLAUDE.md that AI assistants should follow
• guidelines/: Comprehensive guides for web3 development tasks (wallet integration, smart contracts, deployment, etc.)
• Structured prompts: When working with an AI assistant, reference the guidelines for specific tasks

MCP Grep Requirement

To help AI assistants effectively search and understand code patterns, you should install the MCP grep server:

In Cursor:

{
  "mcpServers": {
    "grep": {
      "url": "https://mcp.grep.app"
    }
  }
}

With Claude Code:

claude mcp add --transport http grep https://mcp.grep.app

Starter Prompt Example:

"Help me build a [feature description] for my Zilliqa web3 app.
Please follow the guidelines in webapp/CLAUDE.md and check
guidelines/ for relevant web3 development patterns."

The AI assistant will automatically read the guidelines and apply best practices for:

• Modern dark theme UI with glassmorphism
• Wallet integration with RainbowKit
• Smart contract interactions
• Zilliqa testnet configuration

Project Structure

• contracts/: Solidity contracts managed with Forge. [See contracts/README.md for details.]
• webapp/: NextJS web application. [See webapp/README.md for details.]
• guidelines/: Set of guidelines on how to carry on a variety of web3 development tasks. [See guidelines/README.md for details.]