twitter clone

Twitter克隆內置Next.js + Typescript + tailwind CSS使用雲Firestore和存儲

預覽 ？

showcase.mp4

特徵

• 使用Firebase身份驗證的身份驗證
• 用打字稿強烈鍵入的反應組件
• 用戶可以添加推文，例如，轉發和回复
• 用戶可以刪除推文，在書籤中添加推文，然後固定他們的推文
• 用戶可以將圖像和gif添加到推文中
• 用戶可以關注並取消關注其他用戶
• 用戶可以看到他們和其他關注者以及以下列表
• 用戶可以看到所有用戶和趨勢列表
• 實時更新喜歡，轉發和用戶資料
• 來自Twitter API的實時趨勢數據
• 用戶可以編輯他們的個人資料
• 移動，平板電腦和台式機的響應式設計
• 用戶可以自定義站點配色方案和顏色背景
• 所有圖像上傳都存儲在Firebase Cloud存儲中

技術？

• next.js
• 打字稿
• 尾風CSS
• 火基
• SWR
• 無頭UI
• 反應熱吐司
• 制定運動

發展

這是本地運行該項目的步驟。

1. 克隆存儲庫

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

2. 安裝依賴項

   npm i

3. 創建一個firebase項目並選擇Web應用程序

4. 將firebase配置添加到.env.development中。請注意， NEXT_PUBLIC_MEASUREMENT_ID是可選的

5. 確保您啟用了以下Firebase服務：

   • 驗證。啟用Google登錄方法。
   • 雲命中。創建數據庫並將其位置設置為您最近的區域。
   • 雲存儲。創建一個儲物桶。

6. 全球安裝Firebase CLI

   npm i -g firebase-tools

7. 登錄到firebase

   firebase login

8. 獲取您的項目ID

   firebase projects:list

9. 選擇您的項目ID

   firebase use your-project-id

10. 此時，您有兩個選擇。要么使用雲上的火箱在本地使用模擬器運行此項目。

    1. 使用Firebase Cloud後端：

       1. 部署Firestore規則，Firestore索引和雲存儲規則

          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索引規則時，可能需要幾分鐘才能完成。因此，在啟用索引之前，當您從Firestore獲取數據時，您將出現錯誤。

您可以使用下面的鏈接檢查Firestore your-project-id狀態

選修的：

• 如果您想從Twitter API獲取趨勢數據，則需要創建一個Twitter開發人員帳戶並獲取API鍵。然後將您的API鍵添加到.env.development中。我希望Elon Musk不會付錢嗎？
• 如果要使用戶統計數據與已刪除的推文同步，則需要為Firebase啟用雲功能。然後部署雲功能。