takeshi-arihori / slack-clone

Slack-Clone

RecursionCS の React カリキュラム、Slack の基本機能を模倣したチームコミュニケーションアプリを開発します。

このアプリは、以下の基本要件を満たす必要があります。

1. ユーザー登録と認証 ユーザーはアカウントを作成し、ログインすることが必須です。Google 認証を利用する形での登録が必要です。

2. メッセージの送受信 ユーザーはテキストメッセージを送受信できるようにする必要があります。これはリアルタイムで行われます。

3. チャンネルの作成と管理 ユーザーはチャンネルを作成し、管理できるようにする必要があります。これにより、特定のトピックやグループに関連するディスカッションを異なるチャンネルで実施できます。

ディレクトリ構造

src/
├─ app/                        # Redux設定
│  ├─ hooks.ts                 # Reduxのカスタムフック
│  └─ store.ts                 # Reduxストアの設定
│
├─ components/
│  ├─ ChatContainer/
│  │  ├─ ChannelAddModal.tsx   # チャンネルを追加するモーダル
│  │  ├─ ChannelCell.tsx       # チャンネル名の表示
│  │  ├─ ChannelList.tsx       # チャンネルリスト、チャンネルを追加ボタン
│  │  ├─ MessageArea.tsx       # メッセージリスト、メッセージのフォーム
│  │  └─ MessageTile.tsx       # メッセージ1つの表示
│  ├─ ChatContainer.tsx        # 右側部分の表示
│  ├─ Login.tsx                # Googleでログイン
│  └─ Sidebar.tsx              # サイドバーの表示
│
├─ features/                   # 機能ごとのReduxロジックとコンポーネント
│  ├─ auth/
│  │  ├─ auth.ts               # Firebase認証関連の関数（Googleログイン等）
│  │  └─ useAuthState.tsx      # 自動ログイン機能
│  ├─ channel/
│  │  ├─ channelAPI.ts         # チャンネルに関するAPI呼び出しの定義
│  │  └─ channelSlice.ts       # state管理に関するRedux Sliceの定義
│  ├─ message/
│  │  └─ messageAPI.ts         # メッセージに関するAPI呼び出しの定義
│  └─ user/
│     ├─ userAPI.ts            # ユーザー情報に関するAPI呼び出しの定義
│     └─ userSlice.ts          # state管理に関するRedux Sliceの定義
│
├─ firebase/                   # Firebase設定
│  └─ firebaseconfig.ts
│
├─ type/                      # TypeScriptの型定義
│  ├─ Channel.ts
│  ├─ Message.ts
│  └─ User.ts
│
├─ index.css                   # グローバルスタイルシート
├─ index.tsx                   # アプリケーションのエントリポイント
└─ App.tsx                     # アプリケーションのルートコンポーネント

要件

このプロジェクトでは、Slack のようなインターフェースを持つチャットアプリケーションの開発を目指しましょう。アプリケーションは、主に以下の 2 つの主要な部分で構成されます。

Sidebar: アプリケーション内のナビゲーションを提供します。 ChatContainer: ユーザーの会話を表示する場所です。 ChatContainer はさらに 2 つのセクションに分かれています。

ChatList: ユーザーが参加しているチャットチャンネルのリストを表示します。 MessageArea: 選択したチャンネルのメッセージを表示し、新しいメッセージを送信するためのテキストエリアが含まれています。

slack-clone's Issues

workPlaceの設定

機能提案: workPlaceの設定機能の追加

概要

ユーザーが自分のプロフィールにworkPlace（勤務地）を追加し、他のユーザーがその情報を参照できるようにする機能を提案します。この機能はユーザー同士のコネクションを強化し、より有意義なネットワーキングを促進することを目的としています。

要件

1. ユーザーインターフェース:

   • ユーザープロフィール編集画面に「workPlace」を入力するためのフィールドを追加。
   • このフィールドには自由形式のテキスト入力を許可し、ユーザーが自分の勤務地を自由に記述できるようにする。
   • ユーザープロフィール画面で、この勤務地情報を他のユーザーが確認できるように表示。

2. データベース設計:

   • ユーザー情報を格納するデータベーステーブルに「workPlace」という新しい列を追加。
   • この列はテキスト型で、ユーザーが入力した勤務地情報を格納する。

3. プライバシー設定:

   • ユーザーが自分の勤務地情報を公開するかどうかを選択できるプライバシー設定を提供。
   • プライバシー設定は、全てのユーザーに表示、チームメンバーのみに表示、または非公開から選択可能。

4. アクセシビリティ:

   • すべてのユーザーがアクセスしやすいUIを提供し、視覚障害があるユーザーもスクリーンリーダーで容易に情報を入力・閲覧できるようにする。

5. 国際化:

   • 多言語対応を意識した設計を行い、異なる地域での利用者も自分の言語で勤務地を入力できるようにする。

参加しているchannelの表示制限と#channel-nameでのリンク機能の追加

機能提案: 参加しているchannelの表示制限と#channel-nameでのリンク機能の追加

概要

ユーザーが参加しているチャンネルのみを表示し、チャット内で#channel-nameを使って特定のチャンネルへのリンクを生成できる機能を追加します。この機能により、ユーザーのナビゲーションが改善され、チャンネル間の移動が容易になります。

要件

1. チャンネル表示制限:

   • ユーザーインターフェースでは、ユーザーが実際に参加しているチャンネルのみが表示される。
   • 非参加のチャンネルはユーザーのチャンネルリストに表示されない。

2. チャンネルリンクの生成:

   • メッセージ入力中に「#」を入力すると、参加中のチャンネル名が候補として表示されるオートコンプリート機能を提供。
   • 選択されたチャンネル名を含むメッセージが送信されると、そのチャンネル名はリンクとして機能し、クリックすることで直接そのチャンネルにアクセスできる。

3. UI/UXデザイン:

   • チャンネルリンク機能はユーザーフレンドリーで直感的に操作できるようデザインする。
   • リンク生成機能はスムーズに動作し、適切なフィードバックをユーザーに提供する。

4. バックエンドとフロントエンドの実装:

   • チャンネルの参加状況を追跡するためのバックエンドロジックを強化する。
   • フロントエンドでは、動的なチャンネルリスト更新とリンク生成機能を実装。

channelとmessageの編集及び削除機能の追加

機能提案: channelとmessageの編集及び削除機能の追加

概要

チャンネルおよびメッセージの編集と削除機能を追加し、ユーザーが自由にコンテンツを管理できるようにします。この機能により、情報の更新や誤入力の修正、不適切な内容の削除が容易に行えるようになります。

要件

1. チャンネルの編集と削除:

   • チャンネルの作成者および指定された管理者がチャンネル名と説明を編集できる。
   • チャンネルの削除は作成者と管理者のみが行え、削除時には全ユーザーに通知が行く。

2. メッセージの編集と削除:

   • ユーザーは自分が送信したメッセージを編集・削除できる。
   • メッセージの編集可能な時間は送信後30分以内とする。
   • 編集されたメッセージには「編集済み」と表示される。
   • メッセージが削除された場合、「このメッセージは削除されました」と表示する。

3. UI/UXデザイン:

   • チャンネルとメッセージの編集・削除オプションは直感的にアクセス可能で、操作が簡単なものとする。
   • 編集と削除のためのインターフェースは、既存のUIに自然に溶け込むデザインとする。

4. セキュリティと監査:

   • すべての編集および削除操作はログに記録され、不正行為を追跡可能とする。
   • 適切なユーザー認証と権限検証を行うことで、セキュリティを確保する。

メッセージの編集と削除機能を追加

メッセージの編集と削除

要件

1. メッセージの編集機能:

   • ユーザーは自分が送信したメッセージを編集できる。
   • 編集可能な時間制限を設定できるようにする（例：送信後30分以内）。
   • メッセージが編集されたことが他のチャンネルメンバーに明確にわかるようにする（例：「編集済み」というラベルの表示）。

2. メッセージの削除機能:

   • ユーザーは自分が送信したメッセージを削除できる。
   • 削除されたメッセージの場所には「このメッセージは削除されました」という通知を表示する。
   • オプションとして、管理者がチャンネル内の任意のメッセージを削除できる権限を設定できる。

3. UI/UXデザイン:

   • メッセージの横に「編集」および「削除」のオプションを表示するドロップダウンメニューまたはアイコンを追加する。
   • 編集および削除のアクションは直感的にアクセスでき、操作が簡単であること。

4. セキュリティと監査:

   • メッセージの編集や削除のログを保持し、必要に応じてアクセス可能にする。
   • 不正な操作を防ぐために、適切な認証と権限チェックを実施する。

5. バックエンドの実装:

   • メッセージの状態を管理するためのバックエンドロジックを実装する。
   • REST APIを介してメッセージの編集と削除機能を提供する。

ダイレクトメッセージの送信機能の追加

機能提案: ダイレクトメッセージの送信機能の追加

概要

ユーザー間でプライベートなメッセージ（DM）を送受信できる機能を追加します。これにより、個別のコミュニケーションが可能となり、プライバシーを保ちつつ効率的なやり取りが行えます。

要件

1. ユーザーインターフェース:

   • ユーザーは他のユーザーを選択し、ダイレクトメッセージを送信できる。
   • 既存のチャットインターフェースと統合し、UIは直感的かつアクセスしやすいものとする。

2. 通知システム:

   • 新しいメッセージが届いた際には、ユーザーに通知を送る。
   • 通知設定はユーザーがカスタマイズ可能。

3. セキュリティとプライバシー:

   • 通信はエンドツーエンドの暗号化を採用し、セキュリティを確保する。

4. データベースとバックエンド:

   • メッセージとユーザー関連情報の管理には、既存のデータベース構造を拡張する。