twitter clone frontend

Frontend do clone do Twitter

Descrição do projeto

Minha própria opinião em um aplicativo da Web do Twitter. Construído com o NextJS e o TailWindcss e trabalha com meu back-end do FASTAPI que eu construí aqui (https://github.com/dericf/twitter-clone-sever-ftapi).

Visão geral

Isso é construído para funcionar no desktop e no celular (com alguns bugs certamente esperados no celular)

Tudo foi escrito no TypeScript desde o início e usa async / await sempre que possível.

Eu não tentei realmente "clonar" o Twitter e todas as suas funcionalidades ou designs. Em vez disso, projetei minha própria opinião do zero.

Autenticação/autorização do usuário

O servidor está configurado para lidar com os tokens JWT por meio de cookies somente HTTP ou cabeçalho de autorização. Os cookies são usados ​​para simplificar as coisas.

Cada solicitação fetch que requer Auth envia as credentials: "include" a opção.

A autorização é muito básica - existe apenas 1 tipo de usuário e o servidor garante que os usuários acessem/modifiquem/excluam recursos que eles realmente possuem.

Tweets

Um usuário pode criar, editar e excluir tweets, além de ver tweets postados por outros usuários. Atualmente, os tweets suportam apenas texto. Texto rico, imagens, visualizações de link ao vivo etc. podem ser implementadas no futuro.

Tweet gosta

Um usuário pode gostar e não como qualquer tweet (incluindo o seu por simplicidade)

Comentários

Um usuário pode criar, editar e excluir comentários em qualquer tweet (incluindo o seu)

Comentário gosta

Um usuário pode gostar e não como qualquer comentário (incluindo o seu por simplicidade)

Seguindo

Um usuário pode seguir e não seguir outros usuários e ver uma lista de usuários que estão seguindo atualmente

Seguidores

Um usuário pode ver uma lista de todos os usuários que atualmente os seguem

Bater papo

Eu implementei um bate-papo em tempo real usando websockets e react ganchos/contexto. Atualmente, ele não suporta bate -papos em grupo, mas isso pode ser implementado no futuro. O bate-papo é baseado em modal, para que não interrompa seu fluxo, basta abrir/fechar o modal de bate-papo de nenhuma página sem nunca redirecionar.

Esquema

Usei o TypeScript para definir um esquema rigoroso para os dados que fluem de e para o servidor.

Um exemplo de esquema é o seguinte para um 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> é uma interface genérica personalizada que cada resposta retorna - substituindo o tipo genérico T pelo tipo de retorno apropriado desse terminal em uma propriedade chamada value .

Por exemplo:

 // T could be something like Array<CommentLike> or EmptyResponse
export interface APIResponse < T > {
  value ?: T ;
  error ?: APIResponseError ;
}

class APIResponseError é uma classe de wrapper que é instanciada apenas quando há um erro (status de resposta não 200 ou um erro de digitação foi lançado). A classe fornece um método de objeto .errorMessageUI para ter o texto apropriado para mostrar o usuário em uma notificação ou pop -up de brinde.

interface EmptyResponse é usada apenas para representar o tipo de retorno de pontos de extremidade que são definidos para não retornar explicitamente nada - geralmente após excluir ou atualizar um registro. Eu provavelmente poderia ter usado null , mas queria ser explícito e eliminar qualquer adivinhação.

---

Teste

Teste de componentes

PENDÊNCIA

Tecnologias

NextJs

https://nextjs.org/

Tailwindcss (com JIT)

https://tailwindcss.com/

Momento

https://momentjs.com/

reactar-te-notificações

https://github.com/jossmac/react-toast-notifications

React-select

https://github.com/jedwatson/react-select

Desenvolvimento local

Crie um arquivo .env e adicione a seguinte variável:

 NEXT_PUBLIC_API_URL="http://localhost:<SERVER_PORT>"
NEXT_PUBLIC_API_WS_URL="ws://localhost:<SERVER_PORT>/ws"

Execute npm install e execute npm run dev para iniciar o próximo servidor de desenvolvimento

Verifique se o servidor de back -end está em execução (porta padrão 8001)

Implantar

A maneira mais fácil de implantar está no vercel. Basta criar um novo projeto de vercel vinculado ao repo Git e adicionar o NEXT_PUBLIC_API_URL e NEXT_PUBLIC_API_WS_URL que aponta para o seu servidor de API hospedado.

Para implantar uma nova versão, basta o Git Push to Master/Main para uma implantação de produção ou empurrar para qualquer ramificação não mestre/principal para uma implantação de visualização/estadiamento.

Eventualmente, eu gostaria de desenvolver um fluxo de trabalho suave para implantar os NextJs com o Docker. Deve ser simples, pois nenhuma função sem servidor está sendo usada no momento.