template web3 app

Web3應用模板使用Next.js，RainbowKit，Tailwind，與以太坊登錄等等。

文件

• 入門
  • 環境變量
  • JSON-RPC
  • Wagmi CLI
  • UI組件
  • 後端數據庫
• 核心集成
  • ？ Rainbowkit
  • ？與以太坊登錄
• 智能合同集成
  • ERC20
• API集成
  • 迪斯科
  • etherscan

入門

pnpm CLI是推薦的軟件包管理器，但npm和yarn也應該工作。

pnpm install

發展

pnpm dev

建造

pnpm build

Web3核心

• WAGMI CLI-自動式鉤子生成
• RainbowKit-錢包連接經理
• 與以太坊登錄 - 帳戶身份驗證

Web2框架

• Vercel-應用基礎架構
• Prisma-數據庫ORM

開發人員的經驗

• 打字稿 - 端到端typesafety的靜態類型檢查器
• Prettier - 一致的代碼樣式的自以為是的代碼格式
• Eslint - Next.js和Typescript的可插入襯裡

使用者介面

• parwindcss - 公用事業第一CSS快速UI開發框架
• radix - 模態，彈出窗口等原始人，以構建出色的用戶體驗
• 制定者運動 - 輕鬆對動畫組件的運動庫
• React圖標 - 精美，簡單，像素完美的圖標

UI.shadcn.com組件包含在/components/shared/ui文件夾中。

開發人員的經驗

？什麼是沙啞的

沙啞改善了您的git提議。

您可以使用它來提交提交消息，運行測試，絨毛代碼等...提交或推送時。沙啞的支持所有git鉤。

？鉤子

• 預訂：棉絨應用程序代碼庫
• commit-msg：應用commintlint

？什麼是commlint

commitlint檢查您的提交消息是否符合常規提交格式。

通常，模式通常看起來像這樣：

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

現實世界的例子看起來像這樣：

 chore: run tests on travis ci

 fix(server): send cors headers

 feat(blog): add comment section

根據commlint-config-contentional（基於角度慣例）的常見類型可以：

• 建造
• 瑣事
• CI
• 文件
• 壯舉
• 使固定
• perf
• 重構
• 恢復
• 風格
• 測試

致謝

原始模板摘自https://github.com/wslyvh/nexth

謝謝@wslyvh

---

版權2023 Kames Geraghty