twitter clone frontend

Twitter Clone Frontend

Описание проекта

Мой собственный взгляд на веб -приложение Twitter. Построенный из NextJS и TailWindcss и работает с моим бэкэнд FastApi, который я построил здесь (https://github.com/dericf/twitter-clone-server-fastapi).

Обзор

Это построено для работы на рабочем столе и мобильных

Все было написано в TypeScript с самого начала и использует async / await , где это возможно.

Я не пытался «клонировать» Twitter и все его функциональность или дизайны. Вместо этого я разработал свой собственный взгляд с нуля.

Пользовательская аутентификация/авторизация

Сервер настроен для обработки токенов JWT через HTTP-файлы cookie или заголовок авторизации. Куки используются, чтобы сделать вещи простыми.

Каждый запрос fetch , который требует Auth credentials: "include" .

Авторизация очень простой - существует только 1 тип пользователя, и сервер гарантирует, что пользователи только когда -либо получают доступ/изменять/удалять ресурсы, которые им действительно владеют.

Твиты

Пользователь может создавать, редактировать и удалять твиты, а также увидеть твиты, опубликованные другими пользователями. В настоящее время твиты поддерживают только текст. Богатый текст, изображения, превью в прямом эфире и т. Д. Могут быть реализованы в будущем.

Твитнуть лайки

Пользователь может любить и не похож на любой твит (включая ваш собственный для простоты)

Комментарии

Пользователь может создавать, редактировать и удалять комментарии на любом твите (включая свой собственный)

Комментарий любит

Пользователь может любить и не похож на любой комментарий (включая ваш собственный для простоты)

Следующий

Пользователь может следить за другими пользователями и просмотреть список пользователей, которых они в настоящее время следуют

Последователи

Пользователь может увидеть список всех пользователей, которые в настоящее время следуют за ними

Чат

Я внедрил чат в реальном времени с использованием веб-питания и реагирования крючков/контекста. В настоящее время он не поддерживает групповые чаты, но это может быть реализовано в будущем. Чат основан на модальном, поэтому он вообще не вмешивается в ваш поток, просто открывайте/закрывайте модал чата с любой страницы, не перенаправляя.

Схема

Я использовал 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> - это пользовательский общий интерфейс, который возвращает каждый ответ - замена общего типа T на соответствующий тип возврата этой конечной точки в свойстве, называемом value .

Например:

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

class APIResponseError -это класс обертки, который создается экземпляр только тогда, когда есть ошибка (статус ответа без 200 Класс предоставляет объект метод .errorMessageUI чтобы иметь подходящий текст, чтобы показать пользователю в уведомлении о тосте или всплывающем окне.

interface EmptyResponse используется только для представления типа возврата конечных точек, которые определяются, чтобы явно ничего не возвращал - обычно после удаления или обновления записи. Я мог бы просто использовать null , но я хотел быть явным и устранить любые догадки.

---

Тестирование

Компонентное тестирование

Тодо

Технологии

NextJs

https://nextjs.org/

Tailwindcss (с JIT)

https://tailwindcss.com/

Мгновенный

https://momentjs.com/

Реакция-тоаст

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

реагировать на выбор

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. Просто создайте новый проект Vercel, связанный с репозиторием GIT, и добавьте NEXT_PUBLIC_API_URL и NEXT_PUBLIC_API_WS_URL , который указывает на ваш хостированный сервер API.

Чтобы развернуть новую версию, просто подтолкнуть к Master/Main для развертывания производства или подталкивания к любому не мастеру/основному филиалу для предварительного просмотра/постановки развертывания.

В конце концов я хотел бы разработать гладкий рабочий процесс для развертывания следующих JOCER. Это должно быть простым, так как в настоящее время не используются функции без сервера.