template web3 app

Web3-App-Vorlage erstellt mit Next.js, Rainbowkit, Rückenwind, Anmelden mit Ethereum und mehr.

Dokumentation

• Erste Schritte
  • Umgebungsvariablen
  • JSON-RPC
  • Wagmi Cli
  • UI -Komponenten
  • Backend -Datenbank
• Kernintegrationen
  • ? Regenbogen
  • ? Anmelden mit Ethereum
• Smart Contract Integrations
  • ERC20
• API -Integrationen
  • Disko
  • Ethercan

Erste Schritte

Die pnpm CLI ist der empfohlene Paketmanager, aber npm und yarn sollten auch funktionieren.

pnpm install

Entwicklung

pnpm dev

Bauen

pnpm build

Web3 Core

• Wagmi Cli - Automatische React -Hook -Erzeugung
• Rainbowkit - Brieftaschenverbindungsmanager
• Anmelden mit Ethereum - Kontoauthentifizierung

Web2 -Frameworks

• Vercel - App -Infrastruktur
• Prisma - Datenbank ORM

Entwicklererfahrung

• TypeScript-statischer Typ-Checker für End-to-End-Typensicherheit
• Schöner - Meinungscode -Formatierer für einen konsistenten Codestil
• Eslint - steckbarer Linter für Next.js und Typenkript

Benutzeroberfläche

• Tailwindcss-Utility-First CSS-Framework für schnelle UI-Entwicklung
• Radix - Primitive wie Modal, Popover usw., um eine hervorragende Benutzererfahrung zu erstellen
• Framer Motion - Bewegungsbibliothek für die Reaktion auf animierte Komponenten mühelos
• Reaktikonen-wunderschön einfache, pixel-perfekte Symbole

Die Komponenten ui.shadcn.com sind im Ordner /components/shared/ui enthalten.

Entwicklererfahrung

? Was ist heiser?

Husky verbessert Ihre Git -Commits.

Sie können es verwenden, um Ihre Commit -Nachrichten abzugeben, Tests, Lintcode usw. auszuführen, wenn Sie sich begehen oder drücken. Husky unterstützt alle Git -Haken.

? Haken

• Vorvermittlung: Lint App-Codebasis
• comment-msg: commintlint beantragen

? Was ist Commitlint

CommitLint -Überprüfungen Wenn Ihre Commit -Nachrichten das herkömmliche Commit -Format erfüllen.

Im Allgemeinen sieht das Muster hauptsächlich so aus:

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

Beispiele für reale Welt können so aussehen:

 chore: run tests on travis ci

 fix(server): send cors headers

 feat(blog): add comment section

Gemeinsame Typen nach Komitee-Config-Konfiguration (basierend auf der Winkelkonvention) können sein:

• bauen
• Aufgabe
• CI
• Dokumente
• feat
• Fix
• Perf
• Refaktor
• zurückkehren
• Stil
• prüfen

Anerkennung

Die ursprüngliche Vorlage wurde von https://github.com/wslyvh/nexth gegabelt

Danke @wslyvh

---

Copyright 2023 Kames Geraghty