Ethereum Dapp Starter

Ethereum Dapp Starter is an opinionated boilerplate Next.js 14 starter kit for production-ready Ethereum dapps with a focus on edge compute/storage and end-to-end type safety. This repository is expected to evolve over time. Questions and suggestions are always welcomed.

Stack

• Next.js v14 w/ React Server Components (RSC)
• shadcn/ui (Radix UI + Tailwind CSS)
• React Query
• React Hook Form + Zod
• tRPC
• wagmi v2 React Hooks + Connect Kit
• iron-session (stateless cookies)
• Drizzle and Turso
• Jest + Testing Library

Features

• 🌐 Edge runtime with Next.js, Vercel, and Turso
• 🦺 End-to-end type-safe APIs with tRPC
• 🏃 Monorepo-ready with pnpm workspaces and Turbo
• 🎨 Theme-enabled (next-themes)
• 🔃 Loading bar for async operations (nprogress)
• 🐗 Scaffolded with PostHog
• 🧪 Testing configuration to work across all Typescript (.ts, .tsx) source code
• 🌀 Lucide icon library
• 🔤 Starts with Inter fonts
• 🧼 Opinionated ESLint config extending Next.js's config
• ✨ Opinionated Prettier config to sort imports and Tailwind classes
• 🐶 Husky pre-commit hook

Try it out

$ pnpm create next-app --example https://github.com/shandysulen/ethereum-dapp-starter

Deployment

To deploy on Vercel, you must configure the General settings:

1. Select Next.js as the Framework Preset
2. Override Build Command with pnpm build
3. Override Install Command with pnpm install
4. Set the Root Directory to apps/web
5. Check Include source files outside of the Root Directory...

Make sure of this

Use the workspace version of TypeScript

The workspace version of TypeScript enables the Next.js plugin, which hooks into Intellisense to provide Next-specific contextual type info. This video explains the plugin's benefits well.

Recommended global installs

These packages are used in package.json scripts.

$ pnpm i -g rimraf dotenv-cli cross-env

High effort, low reward

This is a scratchboard of small things I'd like to figure out but don't really drive much value. This section may move to Issues at some point.

• Why doesn't trpc.invalidate() work? Likely conflicts with another package consuming @tanstack/react-query. Fixing this allows us to remove useInvalidateQueries.
• Remove ReferenceError: localStorage is not defined errors that show up due to Coinbase Wallet (WalletConnect)
• Mismatch between client and server HTML with next-themes
• Correctly type noRefetch.ts