TL;DR
- Paddle を使った支払いの仕組みを、クライアントとサーバの両方に実装するプロジェクトテンプレートである。
- クライアントは XState でチェックアウトの流れを管理し、サーバは Effect で Paddle の Webhook を検証・処理する。
内容
作るもの
Paddle は Merchant of Record として、支払いと税金、コンプライアンスへの対応を引き受けるサービスである。このコースでは、Paddle を使って動く支払いの仕組みをフルスタックで実装する。
クライアント側では、@paddle/paddle-js で Paddle のインラインチェックアウトを組み込み、チェックアウトの流れを XState で管理する。サーバ側では、@paddle/paddle-node-sdk で Paddle の Webhook を受け取る。署名を検証し、イベントを Effect で処理する。
使う技術
モノレポの構成には Turborepo を使う。クライアントは React、React Router v7、Effect、XState、Tailwind CSS v4、React Aria で作る。サーバは Effect（@effect/platform）と Node.js の node:http、dotenv、tsx で作る。
進め方
このコースは手順を一つずつ追うものではなく、プロジェクト全体の構成とコードのアーキテクチャに重点を置いている。技術ごとの長所と短所や、実装の要点を説明する。モジュールは次の 4 つである。
- Project configuration
- Shared API definition
- Server implementation
- Client implementation
キーワード
- TypeScript
- React
- XState
- Effect（TypeScript）
- Drizzle
- React Router
- モノレポ
- Paddle
- Webhook