⚡ TurboETH Web3 App Template

Build Web3 In Turbo Mode

Demo | Deploy

Getting Started

pnpm install

Development

pnpm dev

Build

pnpm dev

Web3 Frameworks

• RainbowKit - Wallet connection manager
• Sign-In With Ethereum - Account authentication
• Etherscan - Blockchain Metadata

Web2 Frameworks

• Vercel - App Infrastructure
• Prisma - Database ORM

Developer Experience

• TypeScript – Static type checker for end-to-end typesafety
• Prettier – Opinionated code formatter for consistent code style
• ESLint – Pluggable linter for Next.js and TypeScript

User Interface

• Tailwind CSS – Utility-first CSS framework for rapid UI development
• Radix – Primitives like modal, popover, etc. to build a stellar user experience
• Framer Motion – Motion library for React to animate components with ease
• Lucide – Beautifully simple, pixel-perfect icons

🏗️ Setup

The TurboETH application includes several core features:

• Database
• Sign-In With Ethereum
• Etherscan

Database

1. Set the DATABASE_URL in the .env file to point to your existing database. If your database has no tables yet, read https://pris.ly/d/getting-started

2. Set the provider of the datasource block in schema.prisma to match your database: postgresql, mysql, sqlite, sqlserver, mongodb or cockroachdb.

3. Run prisma db pull to turn your database schema into a Prisma schema.

4. Run prisma generate to generate the Prisma Client. You can then start querying your database.

More information in our documentation: https://pris.ly/d/getting-started

Sign-In With Ethereum

More information coming soon...

Etherscan

Etherscan API services are integrated in /pages/api/etherscan and /lib/services/etherscan folder.

More information coming soon...

💻 Developer Experience

🐕 What is husky

Husky improves your git commits.

You can use it to lint your commit messages, run tests, lint code, etc... when you commit or push. Husky supports all Git hooks.

🪝 Hooks

• pre-commit: lint app codebase
• commit-msg: apply commintlint

📋 What is commitlint

commitlint checks if your commit messages meet the conventional commit format.

In general the pattern mostly looks like this:

type(scope?): subject  #scope is optional; multiple scopes are supported (current delimiter options: "/", "\" and ",")

Real world examples can look like this:

chore: run tests on travis ci

fix(server): send cors headers

feat(blog): add comment section

Common types according to commitlint-config-conventional (based on the Angular convention) can be:

• build
• chore
• ci
• docs
• feat
• fix
• perf
• refactor
• revert
• style
• test

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

https://deploy.turboeth.xyz

Check out our Next.js deployment documentation for more details.

Sponsors

The TurboETH Web3 Build System is sponsored and maintained by District Labs.

Interested in sponsoring the development and maintenance of the TurboETH - Web3 Build System templates, utilities and modules?

Contact us today at District Labs or collect (coming soon) the TurboETH Mirror Collection.

Acknowledgements

Original template was forked from https://github.com/wslyvh/nexth

Underlying wallet manage and design systems were changed, but the template is continuing to use the original folder structure, plus other developer experience optimizations.

Thank you @wslyvh 🙏

The Precedent design system was absorbed (https://github.com/steven-tey/precedent) into TurboETH.

Muchas gracies @steven-tey 🙏

Why TurboETH? Hybrid Applications!

TurboETH blends traditional Web2 application technologies with cutting-edge Web3 cryptographic primitives.

Why? So developers can start building next-generation applications today.

https://twitter.com/ryanberckmans/status/1613947275625074696

---

Copyright 2022 Kames Geraghty