プロジェクト概要

ユーザー同士をリアルタイムでマッチングし、通話やチャットを可能にするWebアプリケーションです。フロントエンドをVercel、バックエンドをKoyebにデプロイし、低遅延なユーザー体験を目標に設計しました。

技術スタック

フレームワーク	Next.js 16
言語	TypeScript
スタイリング	Tailwind CSS, Radix UI, Lucide React
認証	NextAuth.js (Discord連携)
データベース	PostgreSQL
ORM	Prisma
リアルタイム通信	Agora RTC (音声), Socket.io (データ)
開発・運用環境	Docker

取り組みのポイント

コンセプト

フロントエンド学習の目的と、自身も好んでゲームをプレイする経験から、より円滑で新しいコミュニケーションを実現するアプリケーションを開発することにしました。
技術選定には学習を進めていたReactを主軸に関連技術を選定しました。

AIコーディングの活用

学習の側面が大きいため、AIエディターは使用せず対話型AIの使用にとどめました。
フロントエンドのベースについては可能な限り独力で実装を行い、経験のなかったType Script、各種ライブラリの利用や連携にはAIを最大限活用しました。
また、バックエンドについては概略の理解にとどめ細かい実装に関してはほぼすべてAIによって実装されています。

状態とコンポーネント管理

複雑になりがちなユーザーの状態を対応するコンポーネント・状態変数を含め管理する部分に苦労しました。
初学者のためかなり細かくにコンポーネントを切り分け理解しやすいようにコーディングをし、できるだけわかりやすい設計を意識しました。

一方でコンポーネントの設計に甘い部分も多く、共通化・効率化が可能な部分も散見されるためリファクタリングを進めています。