twitter clone frontend
1.0.0
Mi propia versión de una aplicación web de Twitter. Construido con NextJS y Tailwindcss y funciona con mi backend de Fastapi que construí aquí (https://github.com/dericf/twitter-clone-server-fastapi).
Esto está creado para trabajar en escritorio y móvil (con algunos errores seguramente esperados en el móvil)
Todo fue escrito en TypeScript desde el inicio y usa async / await siempre que sea posible.
No intenté y realmente "cloné" Twitter y toda su funcionalidad o diseños. En cambio, diseñé mi propia versión desde cero.
El servidor está configurado para manejar tokens JWT a través de cookies solo HTTP o encabezado de autorización. Las cookies se usan para mantener las cosas simples.
Cada solicitud de fetch que requiere Auth envía las credentials: "include" .
La autorización es muy básica: solo hay 1 tipo de usuario y el servidor garantiza que los usuarios solo accedan/modifiquen/eliminen los recursos que realmente poseen.
Un usuario puede crear, editar y eliminar tweets, así como ver tweets publicados por otros usuarios. Actualmente, los tweets solo admiten texto. Se pueden implementar texto enriquecido, imágenes, avances en vivo de enlaces, etc.
A un usuario le puede gustar y no cualquier tweet (incluido el suyo por simplicidad)
Un usuario puede crear, editar y eliminar comentarios sobre cualquier tweet (incluido el suyo)
A un usuario le puede gustar y no cualquier comentario (incluido el suyo por simplicidad)
Un usuario puede seguir y no seguir a otros usuarios y ver una lista de usuarios que están siguiendo actualmente
Un usuario puede ver una lista de todos los usuarios que los siguen actualmente
Implementé un chat en tiempo real usando WebSockets y reaccionar ganchos/contexto. Actualmente no es compatible con los chats grupales, pero eso puede implementarse en el futuro. El chat está basado en modales, por lo que no interrumpe su flujo, simplemente abra/cierre el modal de chat desde cualquier página sin redirigir.
Utilicé TypeScript para definir un esquema estricto para los datos que fluyen hacia y desde el servidor.
Un ejemplo de un esquema es el siguiente para 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> es una interfaz genérica personalizada que cada respuesta regresa, reemplazando el tipo genérico T con el tipo de retorno apropiado de ese punto final en una propiedad llamada value .
Por ejemplo:
// T could be something like Array<CommentLike> or EmptyResponse
export interface APIResponse < T > {
value ?: T ;
error ?: APIResponseError ;
} class APIResponseError es una clase de envoltorio que se instancia solo cuando hay un error (se lanzó un error de respuesta no 200 o un error de TypeScript). La clase proporciona un método de objeto .errorMessageUI para tener el texto apropiado para mostrar al usuario en una notificación tostada o ventana emergente.
interface EmptyResponse solo se usa para representar el tipo de retorno de puntos finales que se definen para no devolver explícitamente nada, generalmente después de eliminar o actualizar un registro. Probablemente podría haber usado null , pero quería ser explícito y eliminar cualquier adivinanza.
HACER
https://nextjs.org/
https://tailwindcss.com/
https://momentjs.com/
https://github.com/Jossmac/react-Tast-notifications
https://github.com/jedwatson/react-select
Cree un archivo .env y agregue la siguiente variable:
NEXT_PUBLIC_API_URL="http://localhost:<SERVER_PORT>"
NEXT_PUBLIC_API_WS_URL="ws://localhost:<SERVER_PORT>/ws"
Ejecute npm install y luego ejecute npm run dev para iniciar el siguiente servidor de desarrollo
Asegúrese de que su servidor de backend se esté ejecutando (puerto predeterminado 8001)
La forma más fácil de desplegarse es en Vercel. Simplemente cree un nuevo proyecto VERCEL VELINADO AL REPO GIT y agregue el NEXT_PUBLIC_API_URL y NEXT_PUBLIC_API_WS_URL que apunte a su servidor API alojado.
Para implementar una nueva versión, solo git Push a Master/Main para una implementación de producción o empuje a cualquier rama no maestro/principal para una vista previa/implementación de puesta en escena.
Finalmente, me gustaría desarrollar un flujo de trabajo suave para implementar el NextJS con Docker. Debería ser sencillo ya que actualmente no se están utilizando funciones sin servidor.
