Twitter(X) Clone App

📌 概要

https://react-twiiter-clone-app.vercel.app/

• ログインはGoogleアカウントやGithubアカウント、メール（認証不必要）で出来ます。
• 会員登録をしない方はテスト用アカウント使ってください。
  • email: [email protected]
  • password: 12345678

1. プロジェクト紹介

ブログプロジェクに続いてFireBaseを理解し、勉強する目的でReact Twitter(X)を制作しました。

PC(Laptop) & Tablet 画像

ログイン・会員登録

ホーム

検索

通知

プロフィール

---

Mobile 画像

- Mobile

ログイン・会員登録

ホーム

---

2. 開発環境

2.1 技術

フロントエンド	バックエンド	バージョン、イシュー管理

2.2 パッケージモジュール

• react-toastify
• ract-slick
• react-toggle-dark-mode
• fireStore
• fireStorage
• lodash
• uuid

3. コア機能

3.1 ログイン・ログアウト・新規会員登録

• ログイン

  • 認証されたユーザーのみ、ポストを書く・修正・削除・閲覧できます。（全てのサービスが利用できます）
  • Firebase AuthenticationのOAuth（Google・GitHub）でログインできます。
  • Firebase Authenticationのメールでログインできます。

• 新規会員登録

  • 信用できるGoogleのfirebaseーAuthで認証し、React Hook Formで簡単にログインできるようにしました。
  • React Router Domでrouter機能を実装し、認証されていない方にはルートページを見せるようにしました。
  • パスワード入力時に右側にある目のマークをクリックすると、入力したパスワード情報が見れます。

3.2 ポストCRUD

• NoSQL DataBaseであるfirebaseの fireStoreでデータを管理します。

• イメージ（写真）ファイルはfirebaseのfireStorageでデータを管理しています。

• React Toastifyライブラリーを利用し、ログイン、会員登録、ログアウト、CRUDなど実行した後は右上に状態メッセージが見えるようになっています。

• モーダルを追加しました。

• C(Create)

  • ポストを書くフォームはどのページでも書くことができます。
  • イメージ（写真）を追加・削除できます。
  • ハッシュタグ機能を追加しました。
  • コメント機能を追加しました。

• R(Read)

  • ルートページ・ポストディテールページ・プロフィールページでポストを読み込むことができます。
  • ポストを書くとリアルタイムでポストの投稿が反映されます。
  • おすすめのタブは今までのポストが全部見れます。
  • フォロー中のタブはフォローしているポストのみ見れます。

• U(Update)

  • ポストを修正する機能は自分の投稿のみ修正できるようにしました。他のアカウントでログインすると、修正ができません。
  • イメージ（写真）とコンテンツ内容が修正できます。

• D(Delete)

  • ポストを削除する機能もupdateと同じく機能しています。

3.3 検索機能

• 検索
  • 検索はサーチしたキーワードが存在するポストのハッシュタグのキーワードと一致するポストを探します。
  • 検索されたポストをクリックすると、そのポストページへ飛びます。
  • onChangeイベントで検索するたびに結果が反映されます。
  • モバイルではない環境は検索ページ以外でもエンターキーで検索できるようになっています。

3.4 プロフィール

• ポストタブは自分が書いたポストのみ見れます。
• いいねタブはいいねしたポストのみ見れます。
• フォロー中・フォロワー
• 修正
  • イメージ（写真）変更・更新ができます。
  • ユーザーネームを変更・更新ができます。
• ログアウト
  • プロフィールページからログアウトができます。

3.5 フォロー機能

• ポストの右上にあるアイコンを押すと、ポストを書いたユーザーをフォローできます。
• フォローを削除することもできます。

3.6 通知機能

• 他のユーザーから下の三つの通知がもらえるようになっています。（他のアカウントからの通知のみ）
• いいね
  • 他のユーザーが自分のポストにいいねを押した時
• フォロー
  • 他のユーザーが自分のポストにフォローした時
• コメント
  • 他のユーザーが自分のポストにコメントを残した時

3.7 ダークモード

• react toggle dark modeで簡単にダークモードのUIを向上させました。
• useContextでダークモードを実装しました。
• Tailwind cssでclass名をdark:にするだけで簡単にダークモードによるUIを変えるようにしました。

3.8 レスポンシブ

• モバイル環境でも使えるようにレスポンシブデザインにしました。
• Tailwind cssを利用したため、モバイル優先デザインです。