GITRIS

🧩 概要

1. ログイン 🌱 ・ログインボタンを押して、GitHubでログイン！ ・スコープはemailだけなので、安心してください

トップページ

2. デッキ編成 🃏 【はじめての人へ🙏】 　CONNECTボタンを押した後、完了が出たらブラウザをリロードしてください❗️（CONNECTでPOST, リロードでGETしているため...） 　　　👇👇👇 【Contributionが出たら】 ・左のテトリミノをポテンシャルスコアが大きくなるようにうまく組み合わせて並べよう！ ・７つ並べられたら、保存ボタンが押せるよ！ ・自動でホーム画面に戻るよ！

デッキ編成イメージ

3. いざ、対戦！！！！！！ 🔥 ・ゲームプレイを押して、ゲーム画面に移動してね！ ・対戦したい人と同じ合言葉を入力して、入室してね！ ・2人揃うと、自動で対戦が始まるよ！

マッチング画面イメージ

🎮 操作方法

・←→: 左右移動 ・↑: ハードドロップ ・↓: ソフトドロップ ・Space: 回転 ・C: ホールド

エンジニアとしての『積み上げ』を『積み上げ』ろ‼️❤️‍🔥

🛠 技術スタック

フロントエンド

🔗 フロントエンド リポジトリ

・Next.js ・React ・TypeScript ・認証： Supabase（プロバイダーはGitHub） ・デプロイ： Vercel

バックエンド

🔗 バックエンド リポジトリ

・Go ・Websocket ・Contributionの取得：GraphQL

AI PM (後述)

🔗 AIPM リポジトリ

🤖 AI活用

Gemini

チーム共通の要件定義書を作り、Geminiとのチャット開始時に共有することで効率的に協力してもらえた

実際の要件定義書はこちら

GitHub

・Copilotにコードレビューさせた

・AIPM にタスクを作らせた

AIPM？

AIがmilestoneとissueを作成してくれるGitHub Actionsのこと

requirements.md（要件定義ファイル）

実際に生成されたマイルストーン

Projectsタブにも自動で反映

🔥 チームメンバー

🪵 まる(バックエンド)：

初挑戦ポイント

・初Goバックエンド ・初Websocket ・初GitHubActions ・初GraphQL

難しかったところ

・大量のゲーム情報をサブスクライブしていたから、WebSocketサーバーがほんとにすぐ強制終了していた ▶︎パフォーマンスチューニングがんばった... 　・fps下げた 　・リクエスト頻度を下げた

・何から手をつければ良いのかわからなかった ▶︎ 先述のAI活用がかなり効いた

・WebSocketの処理改善するとゲームが 動かなくなる時があった ▶︎ テストコードを書いて、Cursorに実行を強いた

ひとこと

ギリギリまで頑張りつつ、かなり計画的に進めることが出来たと思う！AIPM推します！

🦛 mini(フロントエンド&デザイン)

初挑戦ポイント

・初figmaデザイン (頑張ったので、ぜひみてください！) ・初React ・初tailwind.css ・初Supabase ・初デプロイ(Vercel)

難しかったところ

・フロントからバックエンドのAPIを呼び出すのが難しかった ▶︎エラーと向き合った！

・デプロイ時にESLintがめちゃくちゃエラー 出してきた ▶︎そもそもLinterを知らなかった！メンターさんと相談しながらひとつひとつ対応した

ひとこと

はじめてだらけの中で、たくさん成長することが出来ました！ 他チームの発表を見て、次はモバイルに挑戦したくなった！😎