walica-clone-web

walica-cloneについて

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 dev

npm build && npm start

その他注意点など

apiはswaggerで自動生成しており、最新のapi.swagger.jsonはこちらから確認できます。 なお、バックエンドのapiのスタブ生成はgrpc-gatewayを用いており、api.protoから諸々のコードを生成しています。 api.swagger.jsonに関しても、上記のapi.protoからバックエンド用のスタブを生成する際に自動生成されるようになっています。