Chat-Web-App

WEB APP

LINEやDiscordなどのリアルタイムチャットの仕組みに興味があり、
メッセージがどのように即時に同期されるのかを実装を通して理解したいと考えました。また、友人と気軽に使えるチャットアプリを自分で作ってみたいという思いもあり、チャンネル単位で会話できるWebアプリを開発しました。
開発にはAI技術のキャッチアップも意識し、ClaudeやCodexを活用しながら
実装や設計の理解を深めました。

OVERVIEW

チャンネル（公開/非公開）・DM・リアクション・メンション・添付ファイル・ピン留め・メッセージ検索・タイピングインジケータ・未読バッジを備えた、Slack ライクなリアルタイムチャット Web アプリです。
React 19 + TypeScript（strict） + Redux Toolkit + Firebase（Auth / Firestore / Storage / App Check / Hosting）構成で、Firestore Rules によるメンバーシップベースのアクセス制御や publicProfiles 突合による表示名偽装防止など、本番運用を想定したセキュリティを実装しました。
Vitest 単体 / Testing Library 統合 / Firebase Rules テスト / Playwright + axe-core による E2E + アクセシビリティ検証の多層テスト戦略と、GitHub Actions の 8 段階 CI（lint / typecheck / test / rules-test / e2e / pnpm audit / build / commitlint）により品質を担保しています。

主な実装内容

チャンネル(公開/非公開) / DM / リアクション / メンション / 添付ファイル (画像・PDF・テキスト最大 5 件) / ピン留め / メッセージ検索 / タイピングインジケーター / 未読バッジ
メンバーシップベースのアクセス制御 (Firestore Rules で実装、publicProfiles 突合による表示名偽装防止)
reCAPTCHA Enterprise (App Check) による不正リクエスト防御
CSP / HSTS / COOP / CORP / Permissions-Policy のヘッダー設定
Storage の Content-Type 検証とファイルサイズ上限 (添付 10MB / アバター 2MB) を Rules で厳格化、SVG はホワイトリストから除外
多層テスト戦略: Vitest 単体 / Testing Library 統合 / Firebase Rules テスト / Playwright + axe-core による E2E + アクセシビリティ
GitHub Actions による 8 段階 CI (lint / typecheck / test / rules-test / e2e / pnpm audit / build / commitlint)
9 本の設計ドキュメント（要件・アーキ・画面・データモデル・セキュリティ・状態管理・テスト戦略・CI/CD・開発ログ）

SCREENS

実装画面のスクリーンショット。クリックで拡大表示。

Desktop 12 枚

Mobile 14 枚