pay-crew2

ドキュメント

https://pay-crew.github.io/pay-crew2/

セットアップ

0. いくつかのツールをインストール

• docker-compose
• Docker
• Node.js
• pnpm
• vscode
• vscode extensions
  • astro-build.astro-vscode
  • esbenp.prettier-vscode
  • dbaeumer.vscode-eslint
  • clinyong.vscode-css-modules

1. このレポジトリをクローン

git clone https://github.com/Pay-Crew/pay-crew2.git
cd pay-crew2

2. レポジトリのルートに.envファイルを作成

.env.exampleを参考に適当な値を設定してください。

3. コンテナを起動

sudo docker compose up -d

4. 以下のコマンドを実行

pnpm i && pnpm run setup:generate && pnpm run backend:drizzle:generate && pnpm run backend:migrate

docker-compose の操作 (基本操作のみ掲載)

• 起動

sudo docker compose up -d

• コンテナに入る

sudo docker exec -it postgres psql -U <POSTGRES_USER> -d <POSTGRES_DB>

<POSTGRES_USER> と <POSTGRES_DB> には、.env ファイルで設定した値を入力する。

例: .env の設定例を使っている場合は以下のようになる。

sudo docker exec -it postgres psql -U postgres -d sample

• 停止

sudo docker compose down

• クリーンアップ

docker compose down --rmi all --volumes

API情報の更新

1. openapi.jsonを更新

pnpm run backend:openapi

2. openapi-react-queryを実行して、コードを生成

pnpm run frontend:openapi

開発時のデータベースの中身を確認する

Drizzle Studioというものを利用することで、ブラウザ上でデータベースの中身を確認することができる。

以下のコマンドでDrizzle Studioを起動できる。

pnpm run backend:studio

本番環境 (Xata Lite) のマイグレーション

1. products/backend/.envを本番環境のURLに変更

2. 以下のコマンドを実行

pnpm run backend:migrate

3. products/backend/.envを開発環境のURLに戻す

技術スタック

Frontend (products/frontend)

• TypeScript
• CSS Modules
• Vite + React
• React Router (for routing)
• react-hook-form (for form handling)
  • validator: Zod (with @hookform/resolvers)
• typescript-react-query (type safe tiny wrapper for @tanstack/react-query)
• msw (mocking API)
• Sentry (for error tracking)

Live Demo

• https://pay-crew2.yukiosada.work/

Source Code

• https://github.com/Pay-Crew/pay-crew2/tree/dev/products/frontend/

Details

• https://github.com/Pay-Crew/pay-crew2/tree/dev/products/frontend/README.md

Vitest UI Report

• https://pay-crew.github.io/pay-crew2/vitest/frontend/

Coverage Report

• https://pay-crew.github.io/pay-crew2/coverage/frontend/

Backend (products/backend)

• TypeScript
• Hono (Web Framework)
• @hono/zod-openapi (for validation and OpenAPI spec generation)
• fetch API (for calling Webhook)
• Drizzle (ORM)

Web UI for OpenAPI

• https://pay-crew2-api.yukiosada.work/docs

OpenAPI Spec

• https://pay-crew2-api.yukiosada.work/openapi

Source Code

• https://github.com/Pay-Crew/pay-crew2/tree/dev/products/backend/

Details

• https://github.com/Pay-Crew/pay-crew2/tree/dev/products/backend/README.md

Vitest UI Report

• https://pay-crew.github.io/pay-crew2/vitest/backend/

Coverage Report

• https://pay-crew.github.io/pay-crew2/coverage/backend/

Validator (products/validator)

• TypeScript
• Zod

Source Code

• https://github.com/Pay-Crew/pay-crew2/tree/dev/products/validator/

Details

• https://github.com/Pay-Crew/pay-crew2/tree/dev/products/validator/README.md

Vitest UI Report

• https://pay-crew.github.io/pay-crew2/vitest/validator/

Coverage Report

• https://pay-crew.github.io/pay-crew2/coverage/validator/

Database

• development
  • PostgreSQL with docker-compose
• production
  • Xata Lite

Docs (docs)

• Astro

Docs

• https://github.com/Pay-Crew/pay-crew2/tree/dev/docs/

Details

• https://github.com/Pay-Crew/pay-crew2/tree/dev/docs/README.md

Setup (setup)

• TypeScript

Source Code

• https://github.com/Pay-Crew/pay-crew2/tree/dev/setup/

Details

• https://github.com/Pay-Crew/pay-crew2/tree/dev/setup/README.md

Vitest UI Report

• https://pay-crew.github.io/pay-crew2/vitest/setup/

Coverage Report

• https://pay-crew.github.io/pay-crew2/coverage/setup/

CI/CD

• GitHub Actions with Nix

CI/CD

• https://github.com/Pay-Crew/pay-crew2/tree/dev/.github/workflows/

テストツール

• Vitest

開発ツール

Warning

このプロジェクトは、 pnpmのみサポートしています。 npmやyarnなどはサポートしていません。

• pnpm (with workspace feature)
• turbo (monorepo management tool)
• Nix (optional tool)

システム構成図 ~ 開発環境 ~

システム構成図 ~ 本番環境 ~

ER図

ブランチ戦略

main

main branch is the release branch.

dev

dev branch is the development root branch.

feature

• feat/#[issue-number]-[issue-summary]

  example) feat/#12-add-card-button-component

chore

• chore/#[issue-number]-[issue-summary]

  example) chore/#12-add-prettier-config

fix

• fix/#[issue-number]-[issue-summary]

  example) fix/#12-change-title

update

• update/#[issue-number]-[issue-summary]

  example) update/#12-update-dependencies

test

• test/#[issue-number]-[issue-summary]

  example) test/#12-add-unit-test

flowchart LR
    feature["feat/*"]
    chore["chore/*"]
    fix["fix/*"]
    update["update/*"]
    dev["dev"]
    test["test/*"]
    main["main"]
    feature --with checks--> dev
    chore --with checks--> dev
    fix --with checks--> dev
    update --with checks--> dev
    dev --with checks--> main
    test --with checks--> dev
    main --with checks (cron)--> main

Loading

with checks (dev branch)

• test (push and pull requests)
• CodeQL Scanning
• docs (push)
• preview-frontend (pull requests)

with checks (main branch)

• test (pull requests)
• CodeQL Scanning
• deploy-frontend (push)
• deploy-backend (push)

with checks (cron) (main branch)

• test (cron)