twitter clone

Twitter 클론 Next.js + TypeScript + Cloud Firestore 및 Storage를 사용하는 Tailwind CSS

미리보기?

쇼케이스 .mp4

특징

• Firebase 인증을 통한 인증
• 강력하게 입력 한 반응 구성 요소는 TypeScript를 사용합니다
• 사용자는 트윗, 리트 윗 및 답장을 추가 할 수 있습니다
• 사용자는 트윗을 삭제하고 북마크에 트윗을 추가하고 트윗을 고정 할 수 있습니다.
• 사용자는 트윗에 이미지와 GIF를 추가 할 수 있습니다
• 사용자는 다른 사용자를 팔로우하고 팔로우 할 수 있습니다
• 사용자는 자신의 팔로워와 다음 목록을 볼 수 있습니다.
• 사용자는 모든 사용자와 트렌드 목록을 볼 수 있습니다
• 실시간 업데이트는 좋아, 리트 윗 및 사용자 프로필을 좋아합니다
• Twitter API의 실시간 추세 데이터
• 사용자는 프로필을 편집 할 수 있습니다
• 모바일, 태블릿 및 데스크탑을위한 반응 형 디자인
• 사용자는 사이트 색 구성표 및 색상 배경을 사용자 정의 할 수 있습니다.
• 모든 이미지 업로드는 Firebase Cloud Storage에 저장됩니다

기술?

• 다음 .js
• TypeScript
• 테일 윈드 CSS
• 중포 기지
• SWR
• 헤드리스 UI
• 뜨거운 토스트를 반응합니다
• 프레이머 모션

개발

프로젝트를 로컬로 운영하는 단계는 다음과 같습니다.

1. 저장소를 복제하십시오

   git clone https://github.com/ccrsxx/twitter-clone.git

2. 종속성을 설치하십시오

   npm i

3. Firebase 프로젝트를 만들고 웹 앱을 선택하십시오

4. Firebase 구성을 .env.development 에 추가하십시오. NEXT_PUBLIC_MEASUREMENT_ID 는 선택 사항입니다

5. 다음 Firebase 서비스를 활성화했는지 확인하십시오.

   • 입증. Google 로그인 방법을 활성화합니다.
   • 클라우드 파이어 스토어. 데이터베이스를 작성하고 위치를 가장 가까운 지역으로 설정하십시오.
   • 클라우드 스토리지. 스토리지 버킷을 만듭니다.

6. 전 세계적으로 Firebase CLI를 설치하십시오

   npm i -g firebase-tools

7. Firebase에 로그인하십시오

   firebase login

8. 프로젝트 ID를 얻으십시오

   firebase projects:list

9. 프로젝트 ID를 선택하십시오

   firebase use your-project-id

10. 이 시점에서 두 가지 선택이 있습니다. 클라우드의 Firebase를 사용 하여이 프로젝트를 실행하거나 에뮬레이터를 사용하여 로컬로 사용하십시오.

    1. Firebase Cloud 백엔드 사용 :

       1. Firestore 규칙, Firestore 인덱스 및 클라우드 스토리지 규칙을 배포하십시오

          firebase deploy --except functions

       2. 프로젝트를 실행하십시오

          npm run dev

    2. Firebase 로컬 에뮬레이터 사용 :

       1. 진행하기 전에 Java JDK 버전 11 이상을 설치하십시오. 이것은 에뮬레이터를 실행하는 데 필요합니다.

       2. 환경 변수 NEXT_PUBLIC_USE_EMULATOR .env.development 에서 true 로 설정하십시오. 이렇게하면 앱이 클라우드 백엔드 대신 에뮬레이터를 사용하게됩니다.

       3. 이 시점에서 다음 명령을 실행하여 전체 기능적 트위터 클론을 로컬로 실행할 수 있습니다.

          npm run dev:emulators

참고 : Firestore Indexes 규칙을 배포하면 완료하는 데 몇 분이 걸릴 수 있습니다. 따라서 인덱스가 활성화되기 전에 Firestore에서 데이터를 가져올 때 오류가 발생합니다.

아래 링크를 사용하여 Firestore 인덱스 상태를 확인하고 your-project-id ID로 교체 할 수 있습니다.

선택 과목:

• Twitter API에서 트렌드 데이터를 얻으려면 Twitter 개발자 계정을 만들고 API 키를 가져와야합니다. 그런 다음 API 키를 .env.development 에 추가하십시오. 엘론 머스크 가이 API를 지불하지 않기를 바랍니다.
• 삭제 된 트윗과 사용자 통계를 동기화하려면 Firebase의 클라우드 기능을 활성화해야합니다. 그런 다음 클라우드 기능을 배포하십시오.