walicaという、旅行などの立替を記録しておくと、最終的に誰が誰にいくら払えばいいのかを計算してくれる素晴らしいサービスがあります。 これを再現してみようという試みです。
フロントエンドはこのリポジトリ、バックエンドはwalica-clone-backendにあります。
実際に作ったものに関しては、こちら(https://walica-clone.uchijo.com)で公開しており、実際に動作しているところを確認いただけます。
- next.js(page router)
- SWR
- grpc-gateway
- swagger-typescript-api
動かす際に、以下の環境変数の設定が必要です。
NEXT_PUBLIC_API_BASE: バックエンドのapiのエンドポイントのベースを指定します。
これを設定した上で以下のコマンドを使用することで動作確認を行えます。
npm run devnpm build && npm startapiはswaggerで自動生成しており、最新のapi.swagger.jsonはこちらから確認できます。
なお、バックエンドのapiのスタブ生成はgrpc-gatewayを用いており、api.protoから諸々のコードを生成しています。
api.swagger.jsonに関しても、上記のapi.protoからバックエンド用のスタブを生成する際に自動生成されるようになっています。