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。由於目前沒有使用無服務器功能，因此應該很簡單。