twitter clone frontend

Twitter克隆前端

项目描述

我自己使用Twitter Web应用程序。由NextJS和TailWindCSS建造，并与我在这里建造的FastApi后端一起工作（https://github.com/dericf/twitter-clone-clone-server-fastapi）。

概述

这是在台式机和移动设备上使用的（肯定会在移动设备上有一些错误）

一切都从一开始就用打字稿写，并在可能的情况下使用async / await 。

我实际上没有尝试“克隆” Twitter及其所有功能或设计。取而代之的是，我从头开始设计了自己的拍摄。

用户身份验证/授权

设置该服务器是为了通过仅HTTP的Cookie或授权标头处理JWT令牌。饼干用于使事情变得简单。

每个需要Auth的fetch请求都会发送credentials: "include"选项。

授权非常基本 - 只有1个用户类型，服务器确保用户仅访问/修改/删除他们实际拥有的资源。

推文

用户可以创建，编辑和删除推文，并参见其他用户发布的推文。目前，这些推文仅支持文本。将来可能会实现丰富的文本，图像，实时链接预览等。

推文喜欢

用户可以喜欢并不像任何推文（包括您自己的推文）

评论

用户可以在任何推文上创建，编辑和删除注释（包括您自己的）

评论喜欢

用户可以喜欢并不像任何评论（包括您自己的评论）

下列的

用户可以关注并取消关注其他用户，并查看他们当前关注的用户列表

追随者

用户可以看到当前关注他们的所有用户的列表

聊天

我使用Websocket实现了实时聊天，并进行了React Hook/Context。目前，它不支持小组聊天，但将来可能会实现。聊天是基于模态的，因此它根本不会使您的流程爆发，只需从任何页面打开/关闭聊天模式而不会重定向。

模式

我使用Typescript来定义一个严格的架构，以用于流向服务器的数据。

模式的一个示例如下如下

 import { APIResponse } from "./API" ;
import { EmptyResponse } from "./General" ;

export interface Tweet {
  tweetId : number ;
  userId : number ;
  username : string ;
  content : string ;
  createdAt : string ;
}

export interface TweetCreateRequestBody {
  content : string ;
}

export interface TweetUpdateRequestBody {
  newContent : string ;
}

export type TweetResponse = APIResponse < Array < Tweet > > ;
export type TweetCreateResponse = APIResponse < Tweet > ;
export type TweetUpdateResponse = APIResponse < EmptyResponse > ;
export type TweetDeleteResponse = APIResponse < EmptyResponse > ;

interface APIResponse<T>是每个响应返回的自定义通用接口 - 用该T的适当返回类型替换为value中的端点。

例如：

 // T could be something like Array<CommentLike> or EmptyResponse
export interface APIResponse < T > {
  value ?: T ;
  error ?: APIResponseError ;
}

class APIResponseError是一个包装类类，仅在出现错误时才实例化（非2000响应状态或打字稿错误被抛出）。该类提供了一个对象方法.errorMessageUI具有适当的文本，以向用户显示敬酒通知或弹出窗口。

interface EmptyResponse仅用于表示端点的返回类型，这些端点定义为明确不返回任何内容 - 通常在删除或更新记录后。我可能只是使用null但我想明确并消除任何猜测。

---

测试

组件测试

托多

技术

nextjs

https://nextjs.org/

tailwindcss（带JIT）

https://tailwindcss.com/

片刻

https://momentjs.com/

反应说明

https://github.com/jossmac/react-toast-notifications

反应选择

https://github.com/jedwatson/reaeact-select

地方发展

创建一个.env文件并添加以下变量：

 NEXT_PUBLIC_API_URL="http://localhost:<SERVER_PORT>"
NEXT_PUBLIC_API_WS_URL="ws://localhost:<SERVER_PORT>/ws"

运行npm install然后运行npm run dev以启动下一个开发服务器

确保您的后端服务器正在运行（默认端口8001）

部署

最简单的部署方法是在Vercel上。只需创建一个链接到git reto的新的Vercel项目，然后添加NEXT_PUBLIC_API_URL和NEXT_PUBLIC_API_WS_URL指向您的托管API服务器即可。

要部署新版本，只需将git推到主/主而进行生产部署，或将其推向任何非主持人/主分支进行预览/分期部署。

最终，我想开发一个平稳的工作流程，以用Docker部署NextJ。由于目前没有使用无服务器功能，因此应该很简单。