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启用云功能。然后部署云功能。