Web3 Hackathon Starter

Web3 Hackathon Starter, also known as w3-starter, is an MIT-licensed boilerplate for building web3 dApps with Next.js, Tailwind CSS, and thirdweb, purpose-built to skip setup and jump into hackathon coding.

What is Web3 Hackathon Starter?

Web3 Hackathon Starter is a GitHub template that scaffolds a web3 dApp using Create T3 App (Next.js with TypeScript), Tailwind CSS, and thirdweb as the blockchain infrastructure layer. It takes a cloned repository plus two environment variables — a thirdweb client ID and a Wallet Connect project ID — and produces a development server with wallet connection, smart-contract interaction, and a styled UI already wired together. The project is authored by Envoy-VC and published as open source under the MIT License.

Key Features

• Create T3 App scaffold — Bootstraps Next.js with TypeScript and includes @t3-oss/env-nextjs for validating environment variables at build time.
• Tailwind CSS — Utility-first styling for rapid UI development without extra stylesheets.
• thirdweb integration — Handles blockchain interactions, smart-contract calls, and wallet connections; only needs a client ID.
• Wallet Connect — Pre-configured with NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID to let users connect their wallets.
• Theme switching — next-themes provides dark/light mode toggles for any component.
• Form validation — zod gives type-safe validation for forms and API input.
• State management — zustand keeps React state minimal and scalable.
• UI and feedback — Ant Design components, react-icons, react-hot-toast toasts, and next-seo meta tags cover the interface layer.

Who is it for?

• Hackathon participants — Need a pre-configured web3 stack so they can spend contest time on the idea, not on wiring providers and wallets.
• Web3 developers — Want a TypeScript-safe dApp front-end that connects to thirdweb contracts without using low-level RPC libraries.
• Prototypers — Building a demo or MVP and need a working wallet connection and a clean UI in a single afternoon.

What can you do with Web3 Hackathon Starter?

• Connect wallets: Use the built-in Wallet Connect configuration to let users log in with their wallets right after adding your project ID.
• Call smart contracts: Leverage thirdweb to read or write to deployed contracts from the front-end without writing custom ABI code.
• Build a themed dApp: Toggle dark/light mode via next-themes and style pages with Tailwind and Ant Design components.
• Focus on the core feature: Because the boilerplate is already wired, you can delete the sample content and add your own pages.

How does Web3 Hackathon Starter work?

1. Clone the repository with git clone https://github.com/Envoy-VC/web3-hackathon-starter.git or click "Use this template" on GitHub.
2. Run pnpm install to install dependencies.
3. Create a .env file containing NEXT_PUBLIC_TW_CLIENT_ID='YOUR_CLIENT_ID' and NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID='YOUR_PROJECT_ID', obtained from thirdweb and Wallet Connect respectively.
4. Start the development server with pnpm run dev and open the project in your editor to customize.

Pros and cons

• Pro: MIT license means free use in commercial and academic projects.
• Pro: Opinionated setup covers styling, web3, state, and UI so you don't have to assemble libraries yourself.
• Con: The README only documents pnpm commands, so users of npm or yarn need to install pnpm first.
• Con: The template depends on API keys from thirdweb and Wallet Connect; the dev server runs but wallet features won't work until those are configured.

Pricing

The template is free. It is released under the MIT License and hosted on GitHub as an open-source project.

Alternatives

• Scaffold-ETH — A popular web3 starter that uses Hardhat and Wagmi instead of thirdweb.

FAQ

What is Web3 Hackathon Starter?

Web3 Hackathon Starter is a Next.js and TypeScript boilerplate that combines Tailwind CSS, thirdweb, and several utility libraries to give you a runnable web3 dApp quickly. It is designed for hackathon projects where setup time matters.

Is Web3 Hackathon Starter free?

Yes, the project is licensed under the MIT License, so you can use, modify, and distribute it without paying fees. The code is publicly available on GitHub.

What environment variables are required?

You need to create a .env file with two variables: NEXT_PUBLIC_TW_CLIENT_ID from thirdweb and NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID from Wallet Connect. Without these, wallet and thirdweb functionality will not be available.

How do I install the template?

Clone the repository using git clone https://github.com/Envoy-VC/web3-hackathon-starter.git, then run pnpm install. After creating your .env file, run pnpm run dev to start the development server.

Which UI libraries does it include?

It uses Tailwind CSS for utility styling, Ant Design for pre-built components, react-icons for icons, and react-hot-toast for notifications. next-seo handles meta tags for SEO.