twitter clone

Клон Twitter встроен Next.js + TypeScript + CSS с использованием Cloud Firestore и Storage

Предварительный просмотр?

Showcase.mp4

Функции

• Аутентификация с аутентификацией Firebase
• Сильно напечатанные компоненты реагируют с помощью TypeScript
• Пользователи могут добавлять твиты, например, ретвит и ответить
• Пользователи могут удалить твиты, добавить твит в закладки и прикрепить свой твит
• Пользователи могут добавлять изображения и GIF -файлы в твит
• Пользователи могут следовать и отменить от других пользователей
• Пользователи могут видеть своих и других подписчиков и следующий список
• Пользователи могут видеть всех пользователей и список трендов
• В реальном времени лайки обновления, ретвиты и профиль пользователя
• Данные о тренде в реальном времени из API Twitter
• Пользователь может отредактировать свой профиль
• Отзывчивый дизайн для мобильных, планшетных и настольных компьютеров
• Пользователи могут настроить цветовую схему сайта и цветовой фон
• Все загрузки изображений хранятся в облачном хранилище Firebase

Технология?

• Next.js
• Машинопись
• Tailwind CSS
• Пожарная база
• Квадрат
• Безголовный пользовательский интерфейс
• Реагировать горячий тост
• Движение кадров

Разработка

Вот шаги, чтобы запустить проект локально.

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.
   • Cloud Firestore. Создайте базу данных и установите его местоположение в ближайшем регионе.
   • Облачное хранилище. Создайте ведро для хранения.

6. Установите CLI Firebase во всем мире

   npm i -g firebase-tools

7. Войти в Firebase

   firebase login

8. Получите свой идентификатор проекта

   firebase projects:list

9. Выберите свой идентификатор проекта

   firebase use your-project-id

10. На данный момент у вас есть два варианта. Либо запустите этот проект, используя Firebase в облаке, либо локально, используя эмулятор.

    1. Используя бэкэнд облака Firebase:

       1. Развернуть правила Firestore, индексы Firestore и правила облачного хранения

          firebase deploy --except functions

       2. Запустите проект

          npm run dev

    2. Использование местного эмулятора Firebase:

       1. Установите Java JDK версию 11 или выше, прежде чем продолжить. Это требуется для запуска эмуляторов.

       2. Установите переменную среды NEXT_PUBLIC_USE_EMULATOR на true в .env.development . Это заставит приложение использовать эмуляторы вместо бэкэнда облака.

       3. На этом этапе вы можете запустить следующую команду, чтобы полностью функциональный клон в Твиттере локально:

          npm run dev:emulators

Примечание . Когда вы развернете правила индексов Firestore, это может занять несколько минут. Поэтому до того, как индексы будут включены, вы получите ошибку, когда вы получите данные из Firestore.

Вы можете проверить статус ваших индексов Firestore по ссылке ниже, замените your-project-id на идентификатор проекта: https://console.firebase.google.com/u/0/project/your-project-id/firestore/indexes

Необязательный:

• Если вы хотите получить трендовые данные от API Twitter, вам нужно создать учетную запись разработчика Twitter и получить ключи API. Затем добавьте свои ключи API к .env.development . Я надеюсь, что Элон Маск не делает этот API оплачивать?
• Если вы хотите, чтобы статистика пользователя синхронизировалась с удаленными твитами, вам необходимо включить облачные функции для Firebase. Затем разверните облачные функции.