twitter clone frontend
1.0.0
Meine eigene Sicht auf eine Twitter -Web -App. Erstellt mit NextJs und Tailwindcss und arbeitet mit meinem Fastapi-Backend, das ich hier erstellt habe (https://github.com/dericf/twitter-clone-server-fastapi).
Dies ist so konstruiert, dass sie auf Desktop und Mobiltelefon arbeiten (mit einigen Fehler auf dem Handy erwartet sicher)
Alles wurde von Anfang an in TypeScript geschrieben und verwendet async / await , wo immer möglich.
Ich habe nicht versucht, Twitter und all seine Funktionen oder Designs zu "klonen". Stattdessen habe ich meine eigene Einstellung von Grund auf neu gestaltet.
Der Server ist eingerichtet, um JWT-Token über HTTP-Cookies oder Autorisierungsheader zu verarbeiten. Cookies werden verwendet, um die Dinge einfach zu halten.
Jede fetch , für die Auth die credentials: "include" .
Die Autorisierung ist sehr einfach - es gibt nur 1 Benutzertyp und der Server stellt sicher, dass Benutzer nur zugreifen/ändern/löschen, die sie tatsächlich besitzen.
Ein Benutzer kann Tweets erstellen, bearbeiten und löschen sowie Tweets sehen, die von anderen Benutzern gepostet werden. Derzeit unterstützen die Tweets nur Text. Reiche Text, Bilder, Live -Link -Vorschau usw. könnten in Zukunft implementiert werden.
Ein Benutzer kann jeden Tweet mögen und nicht ähnlich (einschließlich Ihrer eigenen).
Ein Benutzer kann Kommentare zu jedem Tweet erstellen, bearbeiten und löschen (einschließlich Ihrer eigenen)
Ein Benutzer kann jeden Kommentar mögen und unähnlich (einschließlich Ihres eigenen Einfachheit)
Ein Benutzer kann anderen Benutzern folgen und nicht folgen und eine Liste von Benutzern sehen, denen er derzeit folgt
Ein Benutzer kann eine Liste aller Benutzer sehen, die ihnen derzeit folgen
Ich habe einen Echtzeit-Chat mit WebSockets und React Hooks/Kontext implementiert. Es unterstützt derzeit keine Gruppen -Chats, aber das kann in Zukunft implementiert werden. Der Chat ist modal basiert, sodass er Ihren Fluss überhaupt nicht unterbrochen hat. Öffnen/schließen Sie einfach das Chat-Modal von einer Seite, ohne jemals umzuleiten.
Ich habe TypeScript verwendet, um ein striktes Schema für Daten zu definieren, die zum und vom Server fließen.
Ein Beispiel für ein Schema ist wie folgt für einen Tweet
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> ist eine benutzerdefinierte generische Schnittstelle, die jede Antwort zurückgibt. Ersetzen Sie den generischen Typ T durch den entsprechenden Rückgabetyp dieses Endpunkts in einer Eigenschaft, die als value bezeichnet wird.
Zum Beispiel:
// T could be something like Array<CommentLike> or EmptyResponse
export interface APIResponse < T > {
value ?: T ;
error ?: APIResponseError ;
} class APIResponseError ist eine Wrapper-Klasse, die nur dann instanziiert wird, wenn ein Fehler vorliegt (der Status des Nicht-200-Antwort-Status oder ein Typ-Skriptfehler wurde geworfen). Die Klasse bietet eine Objektmethode .errorMessageUI um den entsprechenden Text zu haben, um den Benutzer in einer Toastbenachrichtigung oder einem Popup anzuzeigen.
interface EmptyResponse wird nur verwendet, um den Rückgabetyp der Endpunkte darzustellen, die so definiert sind, dass sie explizit nichts zurückgeben - normalerweise nach dem Löschen oder Aktualisieren eines Datensatzes. Ich hätte wahrscheinlich nur null benutzen können, aber ich wollte explizit sein und alle Vermutungen beseitigen.
Todo
https://nextjs.org/
https://tailwindcss.com/
https://momentjs.com/
https://github.com/jossmac/react-tastast-notifications
https://github.com/jedwatson/react-select
Erstellen Sie eine .env -Datei und fügen Sie die folgende Variable hinzu:
NEXT_PUBLIC_API_URL="http://localhost:<SERVER_PORT>"
NEXT_PUBLIC_API_WS_URL="ws://localhost:<SERVER_PORT>/ws"
Führen Sie npm install aus und führen Sie npm run dev aus, um den nächsten Entwicklungsserver zu starten
Stellen Sie sicher, dass Ihr Backend -Server ausgeführt wird (Standard -Port 8001)
Der einfachste Weg zum Bereitstellen ist auf Vercel. Erstellen Sie einfach ein neues Vercel -Projekt, das mit dem GIT -Repo verknüpft ist, und fügen Sie die NEXT_PUBLIC_API_URL und NEXT_PUBLIC_API_WS_URL hinzu, die auf Ihren gehosteten API -Server verweist.
So bereitstellen Sie eine neue Version bereit, um für eine Produktionsbereitstellung zu meistern, oder für eine Vorschau-/Staging-Bereitstellung zu einem Nicht-Master/Main-Zweig.
Schließlich möchte ich einen reibungslosen Workflow für die Bereitstellung der nächsten Js mit Docker entwickeln. Es sollte unkompliziert sein, da derzeit keine serverlosen Funktionen verwendet werden.
