Chat App

これは TypeScript、React、Vite、Firebase 及びその他の技術を使用して構築したリアルタイムチャットアプリです。

機能一覧

• Google アカウントを使用したサインイン（認証）
• 自分のプロフィール、メールアドレス、名前、ID を表示
• 会話の作成（個人 or グループ）
• 下記の送信：
  • ファイル
  • 画像
  • テキスト
• リンクを送信した場合はアンカータグを追加
• 各メッセージへのリプライ（テキスト、画像、ファイルなど）
• ドラッグアンドドロップによるファイル or 画像アップロード
• 新規メッセージの通知
• 既読機能（見られた場合は、小さなアバターが下に表示される）
• メッセージへのリアクション送信
• 絵文字の送信
• 各メッセージへのリアクションを表示
• 送信された画像とファイルを表示
• グループの画像とグループ名の変更
• ライトモードとダークモードの切り替え
• メッセージを削除。削除後は「メッセージが削除されました」を表示
• グループ内の管理者権限の付与
  • グループからユーザーを退出させる
  • グループへの招待

主要な技術

• TypeScript
• React
• Styled Components
• Material UI
• Firebase
• Vite

経緯・苦労した点

リアルタイムで動くアプリケーションについて学びたいと思い作り始めました。

Firebase に触れること自体始めてだったため、 初めは特に Firebase 周りの扱いに慣れるのに苦労しました。

Firestore などを使えばリアルタイムでのアプリの実装は想像の何倍も簡単に実装することができて驚きました。

また今回はアプリで扱うデータの構造について考えるのにも苦労しました。

初めはどういった構造にすべきかわからなかったため、手を動かしながら進めていきました。

改善点

Jest 等のテストフレームワークはマストで導入したいです。

デモキャプチャ