twitter clone frontend

트위터 클론 프론트 엔드

프로젝트 설명

내 자신의 트위터 웹 앱을 사용합니다. Nextjs 및 Tailwindcss와 함께 제작되었으며 여기에서 구축 한 Fastapi 백엔드 (https://github.com/dericf/twitter-clone-server-fastapi)와 함께 작동합니다.

개요

이것은 데스크탑 및 모바일에서 작동하도록 만들어졌습니다 (모바일에서 확실히 예상되는 일부 버그 포함)

모든 것이 처음부터 TypeScript로 작성되었으며 가능한 한 async / await 사용합니다.

나는 실제로 트위터와 모든 기능이나 디자인을 "복제"하지 않았다. 대신, 나는 처음부터 내 자신의 테이크를 디자인했습니다.

사용자 인증/승인

서버는 HTTP 전용 쿠키 또는 인증 헤더를 통해 JWT 토큰을 처리하도록 설정되었습니다. 쿠키는 물건을 단순하게 유지하는 데 사용됩니다.

인증이 필요한 모든 fetch 요청은 credentials: "include" 옵션.

인증은 매우 기본적입니다. 사용자 유형은 1 개 뿐이며 서버는 사용자가 실제로 소유 한 리소스에만 액세스/수정/삭제되도록합니다.

트윗

사용자는 트윗을 작성, 편집 및 삭제할 수있을뿐만 아니라 다른 사용자가 게시 한 트윗을 볼 수 있습니다. 현재 트윗은 텍스트 만 지원합니다. 풍부한 텍스트, 이미지, 라이브 링크 미리보기 등이 향후 구현 될 수 있습니다.

트윗이 좋아요

사용자는 모든 트윗을 좋아하고 비슷하지 않을 수 있습니다 (단순성을 위해 자신의 포함)

의견

사용자는 모든 트윗에서 댓글을 작성, 편집 및 삭제할 수 있습니다 (자신의 포함).

댓글이 좋아요

사용자는 모든 의견을 좋아하고 비슷하지 않을 수 있습니다 (단순성을 위해 자신의 포함)

수행원

사용자는 팔로우하여 다른 사용자를 팔로우하지 않고 현재 팔로우중인 사용자 목록을 볼 수 있습니다.

추종자

사용자는 현재 팔로우하는 모든 사용자 목록을 볼 수 있습니다.

채팅

Websockets와 React Hooks/Context를 사용하여 실시간 채팅을 구현했습니다. 현재 그룹 채팅을 지원하지 않지만 앞으로 구현 될 수 있습니다. 채팅은 모달 기반이므로 흐름을 전혀 삽입하지 않고 리디렉션하지 않고도 모든 페이지에서 채팅 모달을 열거나 닫습니다.

개요

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> 는 각 응답이 반환하는 사용자 정의 일반 인터페이스입니다. value 이라는 속성에서 일반 유형 T 해당 엔드 포인트의 적절한 리턴 유형으로 대체합니다.

예를 들어:

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

class APIResponseError 는 오류가있을 때만 인스턴스화되는 래퍼 클래스입니다 (비 2000 응답 상태 또는 TypeScript 오류가 발생). 이 클래스는 객체 메소드를 제공합니다 .errorMessageUI 는 토스트 알림 또는 팝업에 사용자에게 표시 할 적절한 텍스트를 갖도록합니다.

interface EmptyResponse 일반적으로 레코드를 삭제하거나 업데이트 한 후 명시 적으로 반환하지 않도록 정의되는 리턴 유형의 엔드 포인트를 나타내는 데만 사용됩니다. 나는 아마 방금 null 사용할 수 있었지만 명백하고 추측을 제거하고 싶었습니다.

---

테스트

구성 요소 테스트

TODO

기술

다음 JS

https://nextjs.org/

Tailwindcss (JIT와 함께)

https://tailwindcss.com/

순간

https://momentjs.com/

반응-통화

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

React-Select

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 프로젝트를 작성하고 호스팅 된 API 서버를 가리키는 Next_public_api_url 및 NEXT_PUBLIC_API_URL 및 NEXT_PUBLIC_API_WS_URL 추가하십시오.

새 버전을 배치하려면 Git Push on Mas

결국 Docker와 함께 NextJS를 배포하기위한 원활한 워크 플로를 개발하고 싶습니다. 현재 서버리스 기능이 사용되지 않으므로 간단해야합니다.