概要

遊べるToDo どんどんToDoをクリアしてほかの人のToDoを文字化けさせたりできます。かっこよくいえば追随を防げます。

技術スタック

アーキテクチャ図？

フロントエンド

Viteを使うReactの構成で作成されています Three.jsも併用して使い、3DのToDoを実現しています。 これはとても難しかったです

(難しかったことを書きます) 最初は3Dで全部作ろうと思ったんですけど、3D入力フォームを作れない（難しい）ことに気づき、HTMLで入力フォームを設置しました。 HTMLを3D空間に置いちゃうと入力フォームがクソでかく表示され、画面全部埋まりました。 このHTML要素をZ座標ー５まで引き下げることでやっと解決しました。 これはひどい笑

また、homeファイルをコード内で指定する際に 大文字・小文字を間違えていることに気づかず、 原因が分からないまま 3時間 悩み続けるという地獄を味わいました……。
今では一瞬で気づけます（成長しまくりです笑）。

バックエンド

AWSのBedrockのamazon-nova-microを使ってAIを使っています。 API GatewayからLambdaを通してBedrockを呼び出しています。 これはToDo批判とUserをあおるために使われています。 初期はamazon-nova-proをつかってさんざんに煽ってもらおうと思ったのですが、暴力的なコンテンツになってしまい、出力がガードされてしまいました。

対戦機能WebSocketつかっています

API Gateway → Lambda → DynamoDB { “type”: string, “description”: string }

WebSocketで送受信できるのはこのボディだけですｗ THE 遊び心

インフラ(デプロイ)

Production

ECSとVPCでデプロイしています やったことなき挑戦で頑張りました

GoTrueClient@sb-wvrasvtknnsfenuglxbq-auth-token:1 (2.87.1) 2025-12-14T02:49:08.700Z Multiple GoTrueClient instances detected in the same browser context. It is not an error, but this should be avoided as it may produce undefined behavior when used concurrently under the same storage key.

このようなエラーが起きて1時間奮闘して以下のようにすることで解決できました

二つあったsupabaseクライアント初期化ファイルを一つに統一し、

self.crypto.randomUUID()

これはHTTPSやlocalhostのみ動き、今回の本番環境のHTTPでは動かないことがわかりました。 そのために、uuidという外部のライブラリを利用して解決しました。

Staging

Deploy on Amplify

開発プロセス中のAI活用

チームメンバーが以下のエディタ／AI等を使っています ・Gemini ・ChatGPT ・Copilot ・Antigravity ・Notion AI(議事録)

また、GithubでPRを出したとき本文をあまり書かなくてもほかの人が要点をとって見れるようにActionsを使って自作レビューを作成しました。 Pull Request -> Github Actions -> AWS(API Gateway -> Lambda -> Bedrock(aws-nova-pro3))

このような感じで見やすく、PRの内容をコードから要約してくれています。 これめちゃくちゃ難しかったんで評価してください。お願いします。

ついでに、CIパイプラインを作って、サイトで動作確認できるようにしました Push(すべてのブランチを対象) -> Github Actions -> AWS Amplify (12/12) (12/14) { めっちゃデプロイしていることに触れるプレイス } 初めてのことながら一人で頭を悩ませ、開発中