twitter clone frontend
1.0.0
Ma propre vision d'une application Web Twitter. Construit avec NextJS et TailwindCSS et travaille avec mon backend Fastapi que j'ai construit ici (https://github.com/dericf/twitter-clone-server-fastapi).
Ceci est conçu pour fonctionner sur le bureau et le mobile (avec certains bogues attendus sur mobile)
Tout a été écrit en dactylographie dès le début et utilise async / await dans la mesure du possible.
Je n'ai pas essayé de "cloner" Twitter et toutes ses fonctionnalités ou conceptions. Au lieu de cela, j'ai conçu ma propre vision à partir de zéro.
Le serveur est configuré pour gérer les jetons JWT via des cookies ou de l'en-tête d'autorisation HTTP uniquement. Les cookies sont utilisés pour garder les choses simples.
Chaque demande fetch qui nécessite Auth envoie les credentials: "include" .
L'autorisation est très basique - il n'y a qu'un seul type d'utilisateur et le serveur garantit que les utilisateurs n'accèdent / modifier / supprimer les ressources qu'ils possèdent réellement.
Un utilisateur peut créer, modifier et supprimer les tweets, ainsi que voir les tweets publiés par d'autres utilisateurs. Actuellement, les tweets ne prennent en charge que le texte. Des textes riches, des images, des prévisualistes de liens en direct, etc. peuvent être implémentés à l'avenir.
Un utilisateur peut aimer et ne pas comme un tweet (y compris le vôtre pour la simplicité)
Un utilisateur peut créer, modifier et supprimer des commentaires sur n'importe quel tweet (y compris le vôtre)
Un utilisateur peut aimer et ne pas être un commentaire (y compris le vôtre pour la simplicité)
Un utilisateur peut suivre et ne pas suivre les autres utilisateurs et voir une liste des utilisateurs qu'ils suivent actuellement
Un utilisateur peut voir une liste de tous les utilisateurs qui les suivent actuellement
J'ai implémenté un chat en temps réel à l'aide de WebSockets et React Hooks / Context. Il ne prend actuellement pas en charge les chats de groupe, mais cela peut être mis en œuvre à l'avenir. Le chat est basé sur le modal, donc il n'interrompt pas du tout votre flux, ouvrez / fermez simplement le CHAT MODAL à partir d'une page sans jamais rediriger.
J'ai utilisé TypeScript pour définir un schéma strict pour les données qui coulent vers et depuis le serveur.
Un exemple de schéma est le suivant pour un 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> est une interface générique personnalisée que chaque réponse renvoie - en remplacement du type générique T par le type de retour approprié de ce point de terminaison dans une propriété appelée value .
Par exemple:
// T could be something like Array<CommentLike> or EmptyResponse
export interface APIResponse < T > {
value ?: T ;
error ?: APIResponseError ;
} class APIResponseError est une classe d'emballage qui n'est instanciée que lorsqu'il y a une erreur (l'état de réponse non 200 ou une erreur de typeScript a été lancée). La classe fournit une méthode d'objet .errorMessageUI pour avoir le texte approprié pour afficher l'utilisateur dans une notification ou une fenêtre contextuelle de toast.
interface EmptyResponse est uniquement utilisée pour représenter le type de retour des points de terminaison qui sont définis pour ne rien renvoyer explicitement - généralement après la suppression ou la mise à jour d'un enregistrement. J'aurais probablement pu utiliser null mais je voulais être explicite et éliminer toute supposition.
FAIRE
https://nextjs.org/
https://tailwindcss.com/
https://momentjs.com/
https://github.com/jossmac/react-toast-notifications
https://github.com/jedwatson/react-select
Créez un fichier .env et ajoutez la variable suivante:
NEXT_PUBLIC_API_URL="http://localhost:<SERVER_PORT>"
NEXT_PUBLIC_API_WS_URL="ws://localhost:<SERVER_PORT>/ws"
Exécuter npm install puis exécuter npm run dev pour démarrer le prochain serveur de développement
Assurez-vous que votre serveur backend est en cours d'exécution (port par défaut 8001)
Le moyen le plus simple de déployer est sur Vercel. Créez simplement un nouveau projet Vercel lié au repo GIT et ajoutez le NEXT_PUBLIC_API_URL et NEXT_PUBLIC_API_WS_URL qui pointe vers votre serveur API hébergé.
Pour déployer une nouvelle version, il suffit de Git Push to Master / Main pour un déploiement de production ou de pousser à n'importe quelle succursale non-maître / principale pour un déploiement de prévisualisation / de mise en scène.
Finalement, j'aimerais développer un flux de travail en douceur pour déployer le NextJS avec Docker. Il doit être simple car aucune fonction sans serveur n'est actuellement utilisée.
