🚀 QuickDapp - Web3 dApp Starter Template

Next.js + Foundry + Thirdweb ready - Your complete Web3 dApp starter template with smart contracts and wallet connectivity.

✨ Features

🔐 Secure - Enterprise-grade security with Thirdweb
🚀 Fast - Built with Next.js 15 and Turbopack
⛽ Gasless - Account abstraction with gas sponsoring
🌟 Multi-chain - Support for 50+ blockchain networks
⚡ Modern Stack - TypeScript, Tailwind CSS, Motion animations

🏗️ Project Structure

quickdapp/
├── app/                          # Next.js App Router
│   ├── api/ai-chat/             # AI chat API endpoint
│   ├── globals.css              # Global styles with Tailwind
│   ├── layout.tsx               # Root layout with metadata
│   └── page.tsx                 # Main landing page
├── components/
│   ├── ui/                      # Reusable UI components
│   │   ├── HeroSection.tsx      # Hero with typewriter effect
│   │   ├── SetupWarning.tsx     # Configuration instructions
│   │   ├── DemoSocialCreator.tsx # Video, social links, creator info
│   │   ├── Navbar.tsx           # Fixed navigation bar
│   │   ├── BackgroundParticles.tsx # Animated background
│   │   └── ClaimAirdrop.tsx     # Airdrop claiming interface
│   ├── AiBot.tsx                # AI Bot component
│   ├── AIChat.tsx               # AI Chat interface
│   └── ConnectWallet.tsx        # Multi-chain wallet connector
├── lib/
│   ├── client.ts                # Thirdweb client configuration
│   └── contracts.ts             # Smart contract addresses and instances
├── contracts/                   # Foundry smart contracts
│   ├── src/                     # Solidity source files
│   ├── test/                    # Contract tests
│   ├── script/                  # Deployment scripts
│   ├── .env.example             # Contracts environment variables
│   └── foundry.toml            # Foundry configuration
├── public/                      # Static assets
└── .env.example                # Frontend environment variables template

🚀 Quick Start

Prerequisites

Node.js (v18 or higher)
npm or yarn or pnpm
Foundry - Install here
Thirdweb Account - Get API keys

Installation

Clone the repository

git clone https://github.com/moayaan1911/quickdapp.git
cd quickdapp

Install dependencies
```
npm install
```
Set up environment variables

Frontend (.env.local):
```
cp .env.example .env.local
```
Edit .env.local and add your Thirdweb credentials:
```
NEXT_PUBLIC_THIRDWEB_CLIENT_ID=your_client_id_here
THIRDWEB_SECRET_KEY=your_secret_key_here
```
Contracts (.env):
```
cd contracts
cp .env.example .env
cd ..
```
Edit contracts/.env and add your deployment credentials (RPC URLs, private keys, etc.)
Build smart contracts
```
cd contracts
forge build
cd ..
```
Start development server
```
npm run dev
```

Visit http://localhost:3000 to see your dApp! 🎉

📜 QuickDapp Scripts

QuickDapp includes custom scripts for streamlined development:

`npm run quickdapp-build`

Build everything - Compiles smart contracts and builds Next.js app

npm run quickdapp-build

Equivalent to: forge build + next build

`npm run quickdapp-dev`

Start development - Compiles contracts and starts dev server

npm run quickdapp-dev

Equivalent to: forge compile + next dev --turbopack

`npm run quickdapp-test`

Run all tests - Tests contracts and lints frontend code

npm run quickdapp-test

Equivalent to: forge test + next lint

`npm run quickdapp-clean`

Clean build artifacts - Removes all build files

npm run quickdapp-clean

Equivalent to: forge clean + removes .next and out directories

⚙️ Configuration

Thirdweb Setup

Visit Thirdweb Dashboard
Create a new project
Copy your Client ID and Secret Key
Add them to your .env.local file

Smart Contracts

The contracts/ directory contains a complete Foundry setup:

src/ - Your Solidity contracts
test/ - Contract unit tests
script/ - Deployment scripts
foundry.toml - Foundry configuration

Smart Contract Integration

QuickDapp includes seamless contract integration through lib/contracts.ts:

Contract Addresses - Centralized management of deployed contract addresses
Contract Instances - Pre-configured Thirdweb contract instances
Multi-chain Support - Easy switching between different networks
Type Safety - Full TypeScript support for contract interactions

Example usage:

import { simpleUSDContract } from "@/lib/contracts";
import { prepareContractCall, sendTransaction } from "thirdweb";

const transaction = prepareContractCall({
  contract: simpleUSDContract,
  method: "function claimAirdrop()",
  params: [],
});

Wallet Configuration

QuickDapp supports 50+ blockchain networks out of the box:

Mainnets: Ethereum, Polygon, BSC, Arbitrum, Optimism, Base, Avalanche
Testnets: Sepolia, Mumbai, BSC Testnet, Arbitrum Sepolia, Base Sepolia
Layer 2s: Polygon zkEVM, Linea, Scroll, Mantle

Add more chains in components/ConnectWallet.tsx.

🤖 AI Features

QuickDapp includes a powerful AI Bot and Chat system powered by Thirdweb AI:

AI Bot Component

Smart Integration - Seamlessly integrates with your dApp
Context-Aware - Understands wallet connections and chain info
Real-time Responses - Instant AI-powered assistance

AI Chat Interface

Interactive Chat - Full-featured chat interface with message history
Multi-chain Support - Works across all supported blockchain networks
Wallet Integration - Automatically includes user's wallet context
Error Handling - Graceful handling of API errors and configuration issues

AI Capabilities

🔍 Blockchain Queries - Check balances, transaction history, token info
📊 DeFi Operations - Help with swaps, liquidity, and protocol interactions
📝 Smart Contracts - Assistance with contract deployment and interaction
🖼️ NFT Operations - Support for minting, transfers, and NFT analysis
💡 Web3 Education - Explanations of blockchain concepts and best practices

🎨 UI Components

Hero Section

Typewriter animation for "QuickDapp" title
Tech stack badges highlighting key technologies
Gradient text effects and smooth animations

Wallet Connection

50+ blockchain networks with automatic switching
Dynamic theming based on connection status
Account abstraction with gas sponsoring
ENS support for readable addresses

Airdrop Claiming

Conditional visibility - Only appears when wallet is connected
Smart contract integration - Directly calls contract functions
Transaction handling - Secure transaction preparation and execution
Status feedback - Loading, success, and error states with animations
One-click claiming - Simple interface for token airdrops

Social Integration

GitHub repository linking
Creator support via Buy Me Coffee
Professional profile with contact information
Demo video showcase

🛠️ Development

Adding New Components

Create components in components/ui/ directory:

// components/ui/MyComponent.tsx
"use client";
import { motion } from "motion/react";

export default function MyComponent() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      className="p-4">
      {/* Your component content */}
    </motion.div>
  );
}

Smart Contract Development

Create contract in contracts/src/
Write tests in contracts/test/
Compile with forge build
Test with forge test
Deploy with forge script

Environment Variables

Required environment variables:

# Thirdweb Configuration
NEXT_PUBLIC_THIRDWEB_CLIENT_ID=your_client_id_here
THIRDWEB_SECRET_KEY=your_secret_key_here

📚 Tech Stack

Frontend

⚡ Next.js 15 - React framework with App Router
🎨 Tailwind CSS - Utility-first CSS framework
✨ Motion - Animation library (Framer Motion v12)
🔷 TypeScript - Type-safe JavaScript
🎯 React Icons - Comprehensive icon library

Web3

🌐 Thirdweb v5 - Web3 development platform
⚡ Ethers.js v6 - Ethereum JavaScript library
🔗 Multi-chain - 50+ blockchain networks

Smart Contracts

⚒️ Foundry - Fast Solidity development framework
📝 Solidity - Smart contract programming language
🧪 Forge - Testing and deployment tools

Development

📦 npm/yarn/pnpm - Package management
🔧 ESLint - Code linting and formatting
🏗️ Turbopack - Fast bundler for development

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the project
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

⭐ Support

If you found this helpful, please give it a ⭐ on GitHub and consider buying me a coffee!

Name		Name	Last commit message	Last commit date
Latest commit History 18 Commits
app		app
components		components
contracts		contracts
lib		lib
public		public
.env.example		.env.example
.gitignore		.gitignore
.gitmodules		.gitmodules
README.md		README.md
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

🚀 QuickDapp - Web3 dApp Starter Template

✨ Features

🏗️ Project Structure

🚀 Quick Start

Prerequisites

Installation

📜 QuickDapp Scripts

npm run quickdapp-build

npm run quickdapp-dev

npm run quickdapp-test

npm run quickdapp-clean

⚙️ Configuration

Thirdweb Setup

Smart Contracts

Smart Contract Integration

Wallet Configuration

🤖 AI Features

AI Bot Component

AI Chat Interface

AI Capabilities

🎨 UI Components

Hero Section

Wallet Connection

Airdrop Claiming

Social Integration

🛠️ Development

Adding New Components

Smart Contract Development

Environment Variables

📚 Tech Stack

Frontend

Web3

Smart Contracts

Development

🤝 Contributing

⭐ Support

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Contributors

Uh oh!

Languages

`npm run quickdapp-build`

`npm run quickdapp-dev`

`npm run quickdapp-test`

`npm run quickdapp-clean`