template web3 app

Web3 App 템플릿 Next.js, Rainbowkit, Tailwind, Ethereum과의 로그인 등을 사용하여 구축되었습니다.

선적 서류 비치

• 시작하기
  • 환경 변수
  • JSON-RPC
  • WAGMI CLI
  • UI 구성 요소
  • 백엔드 데이터베이스
• 핵심 통합
  • ? 레인보우 키트
  • ? 이더 리움과 로그인
• 스마트 계약 통합
  • ERC20
• API 통합
  • 디스코
  • 에테르 스캔

시작하기

pnpm CLI는 권장 패키지 관리자이지만 npm 및 yarn 도 작동해야합니다.

pnpm install

개발

pnpm dev

짓다

pnpm build

Web3 Core

• WAGMI CLI- 자동 반응 후크 생성
• Rainbowkit- 지갑 연결 관리자
• 이더 리움과 로그인 - 계정 인증

Web2 프레임 워크

• Vercel- 앱 인프라
• 프리즘 - 데이터베이스 ORM

개발자 경험

• TypeScript-엔드 투 엔드 타입 안전을위한 정적 유형 검사기
• 더 예쁘다 - 일관된 코드 스타일을위한 의견이 많은 코드 포맷터
• eslint - 다음 .js 및 typescript 용 플러그 가능한 린터

사용자 인터페이스

• Tailwindcss-빠른 UI 개발을위한 유틸리티 우선 CSS 프레임 워크
• RADIX - Modal, Popover 등과 같은 프리미티브 등은 훌륭한 사용자 경험을 구축합니다.
• 프레이머 모션 - 애니메이션 구성 요소에 쉽게 반응하는 모션 라이브러리
• 반응 아이콘-아름답게 단순하고 픽셀 완벽한 아이콘

ui.shadcn.com 구성 요소는 /components/shared/ui 폴더에 포함되어 있습니다.

개발자 경험

? 허스키는 무엇입니까?

허스키는 당신의 git 커밋을 향상시킵니다.

커밋 또는 푸시 할 때 커밋 메시지를 보풀, 테스트 실행, 보풀 코드 등을 보풀에 묶을 수 있습니다. 허스키는 모든 git 훅을 지원합니다.

? 후크

• 사전 커밋 : Lint App Codebase
• Commit-MSG : ComminTlint를 적용하십시오

? Commitlint는 무엇입니까?

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

Commitlint-Config-Conventional (Angular Convention에 따른)에 따른 일반적인 유형은 다음과 같습니다.

• 짓다
• 하기 싫은 일
• CI
• 문서
• 위업
• 고치다
• 성전
• 리팩터
• 돌아가는 것
• 스타일
• 시험

감사의 말

원본 템플릿은 https://github.com/wslyvh/nexth에서 포크되었습니다

감사합니다 @wslyvh

---

Copyright 2023 Kames Geraghty