twitter cloneダウンロード-Twitter twitter cloneソースコードのダウンロード

twitter clone

AI ソースコード

1.0.0

ダウンロード

next.js + typeScript + Tailwind CSSをクラウドファイアストアとストレージを使用して組み込まれているTwitterクローン

プレビュー？

showcase.mp4

特徴

FireBase認証による認証
TypeScriptを使用して強く型付けされたReactコンポーネント
ユーザーは、リツイート、返信などのツイートを追加できます
ユーザーはツイートを削除し、ブックマークにツイートを追加し、ツイートをピン留めできます
ユーザーは画像とGIFを追加してツイートできます
ユーザーは他のユーザーをフォローして解除できます
ユーザーは自分や他のフォロワーや次のリストを見ることができます
ユーザーはすべてのユーザーとトレンドリストを見ることができます
リアルタイムの更新が好き、リツイート、ユーザープロファイル
Twitter APIからのリアルタイムトレンドデータ
ユーザーはプロフィールを編集できます
モバイル、タブレット、デスクトップのレスポンシブデザイン
ユーザーはサイトの配色と色の背景をカスタマイズできます
すべての画像アップロードは、Firebaseクラウドストレージに保存されます

技術？

next.js
タイプスクリプト
Tailwind CSS
ファイアーベース
SWR
ヘッドレスUI
ホットトーストを反応します
フレーマーの動き

発達

プロジェクトをローカルに実行する手順は次のとおりです。

リポジトリをクローンします

git clone https://github.com/ccrsxx/twitter-clone.git

依存関係をインストールします
```
npm i
```
FireBaseプロジェクトを作成し、Webアプリを選択します
FireBase Configを.env.developmentに追加します。 NEXT_PUBLIC_MEASUREMENT_IDオプションであることに注意してください
次のFireBaseサービスを有効にしていることを確認してください。
- 認証。 Googleサインインメソッドを有効にします。
- クラウドファイアストア。データベースを作成し、その場所を最寄りの地域に設定します。
- クラウドストレージ。ストレージバケットを作成します。
Firebase CLIをグローバルにインストールします
```
npm i -g firebase-tools
```
FireBaseにログインします
```
firebase login
```
プロジェクトIDを取得します
```
firebase projects:list
```
プロジェクトIDを選択します
```
firebase use your-project-id
```
この時点で、2つの選択肢があります。クラウド上のFirebaseを使用してこのプロジェクトを実行するか、エミュレータを使用してローカルで実行します。
1. FireBase Cloud BackEndを使用してください：
  1. ファイヤーストアルール、ファイヤーストアインデックス、クラウドストレージルールを展開します
```
firebase deploy --except functions
```
  2. プロジェクトを実行します
```
npm run dev
```
2. FireBaseローカルエミュレーターの使用：
  1. 先に進む前に、Java JDKバージョン11以上をインストールします。これは、エミュレータを実行するために必要です。
  2. 環境変数NEXT_PUBLIC_USE_EMULATOR .env.developmentにtrueに設定します。これにより、アプリはクラウドバックエンドの代わりにエミュレータを使用します。
  3. この時点で、次のコマンドを実行して、完全に機能するTwitterクローンをローカルで実行できます。
```
npm run dev:emulators
```

注：Firestore Indexesルールを展開すると、完了するまでに数分かかる場合があります。そのため、インデックスが有効になる前に、Firestoreからデータを取得するとエラーが発生します。

以下のリンクでFirestoreインデックスのステータスを確認し、 your-project-id ID（https：//console.firebase.google.com/u/0/project/your-project-id/firestore/indexesにプロジェクトIDに置き換えることができます。

オプション：

Twitter APIからトレンドデータを取得する場合は、Twitter Developerアカウントを作成してAPIキーを取得する必要があります。次に、APIキーを.env.developmentに追加します。 Elon MuskがこのAPIを支払わないことを願っていますか？
削除されたツイートと同期したユーザーの統計を作成する場合は、FireBaseのクラウド関数を有効にする必要があります。次に、クラウド機能を展開します。

拡大する

追加情報