目次
操作デモ
アプリ概要
このアプリは、Firebase認証とSocket.ioによるリアルタイム通信を実現した
フルスタックチャットアプリケーションです。
ユーザー認証・グループ管理・メッセージ送受信・GIF投稿など、
実運用を想定したチャット機能を包括的に実装しています。
使用技術
- フロントエンド：React, Vite, Tailwind CSS, React Router
- バックエンド：Node.js, Express, Socket.io
- データベース：MongoDB（Mongoose）
- 認証 / ストレージ：Firebase Auth, Firebase Storage
- 外部API：Giphy API（GIF投稿機能）
- ホスティング：Render
こだわった点
本アプリでは、表示速度の向上とReactのレンダリング最適化を追求しました。
当初、グループ情報の取得にタイムラグが生じ、表示の遅延が発生するという課題がありました。この原因が「フロント側でのデータ不足」にあると特定し、バックエンドのAPI設計から見直すことで根本解決を図りました。
- APIの統合: グループの詳細情報と「未読メッセージ数」を1リクエストで一括取得できる専用エンドポイントを新設し、通信回数を削減。
- レンダリング制御:
isLoadingステートを導入し、データが完全に揃ってから一括表示する制御を行うことで、画面のチラつきやエラーを解消。
この結果、データ整合性の確保と「ストレスのない高速な表示」を両立しました。
※無料サーバーのため起動に時間がかかります。