twitter clone frontend
1.0.0
TwitterのWebアプリを自分のものにしました。 NextjsとTailwindcssで構築され、ここに構築したFastapiバックエンドで動作します（https://github.com/dericf/twitter-clone-server-fastapi）。
これは、デスクトップとモバイルで動作するように構築されています（モバイルで確実に予想されるいくつかのバグがあります）
すべてが最初からタイプスクリプトで書かれており、可能な限りasync / awaitを使用しています。
私は実際にTwitterとそのすべての機能またはデザインを「クローン」しようとはしませんでした。代わりに、私は自分のテイクをゼロから設計しました。
サーバーは、HTTPのみのCookieまたは承認ヘッダーを介してJWTトークンを処理するように設定されています。 Cookieは、物事をシンプルに保つために使用されます。
Authが必要なすべてのfetchリクエストはcredentials: "include"オプション。
承認は非常に基本的です - ユーザータイプは1つだけで、サーバーはユーザーが実際に所有するリソースにアクセス/変更/削除することのみを保証します。
ユーザーは、ツイートを作成、編集、削除したり、他のユーザーが投稿したツイートを見ることができます。現在、ツイートはテキストのみをサポートしています。豊富なテキスト、画像、ライブリンクプレビューなどは、将来実装される可能性があります。
ユーザーは好きなツイートを好むことができます（簡単にするためにあなた自身を含む）
ユーザーは、任意のツイート（自分のものを含む）にコメントを作成、編集、削除できます
ユーザーは好きになり、コメントが好きではありません（簡単にするためにあなた自身を含む）
ユーザーは他のユーザーをフォローしてフォローし、現在フォローしているユーザーのリストを表示できます
ユーザーは、現在フォローしているすべてのユーザーのリストを見ることができます
WebSocketsを使用してリアルタイムチャットを実装し、フック/コンテキストを反応しました。現在、グループチャットをサポートしていませんが、将来実装される可能性があります。チャットはモーダルベースであるため、フローをまったく混乱させず、リダイレクトなしで任意のページからチャットモーダルを開閉する/閉じるだけです。
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は、エラーが発生した場合にのみインスタンス化されるラッパークラスです（非200応答ステータスまたはタイプスクリプトエラーがスローされました）。クラスは、オブジェクトメソッドを提供します.errorMessageUIエロメッシェージュは、トースト通知またはポップアップにユーザーを表示する適切なテキストを用意しています。
interface EmptyResponse通常、レコードを削除または更新した後に明示的に何も返さないように定義されるエンドポイントのリターンタイプを表すためにのみ使用されます。私はおそらくnullを使用しただけかもしれませんが、私は明示的であり、推測を排除したいと思っていました。
トト
https://nextjs.org/
https://tailwindcss.com/
https://momentjs.com/
https://github.com/jossmac/react-toast-notifications
https://github.com/jedwatson/react-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 Repoにリンクされた新しいVercelプロジェクトを作成し、Hosted API Serverを指すNEXT_PUBLIC_API_URLとNEXT_PUBLIC_API_WS_URLを追加します。
新しいバージョンを展開するには、プロダクション展開のためにマスター/メインにプッシュするか、プレビュー/ステージング展開のために非マスター/メインブランチにプッシュします。
最終的に、Dockerを使用してNextJSを展開するためのスムーズなワークフローを開発したいと思います。サーバーレス関数が現在使用されていないため、簡単にする必要があります。
