- Данное приложение, это однокомнатный чат для текстового общения. Так же есть возможность делиться изображениями. Для работы данного приложения используется backend доступный по этой ссылке. При авторизации в чате пользователю присваивается случайное имя и случайное изображение в качестве аватара.
- Приложение состоит из двух страниц. Первая страница с кратким описанием программы - Вход. Вторая страница это - Чат.
- Авторизация в чате происходит при заходе на любую страницу. Полученные данные с сервера, такие как имя, ссылка на аватарку, записываются в session storage.
- При открытие приложения в нескольких вкладках одного браузера, на каждой вкладке будет один и тот же пользователь.
- При отправке сообщения, scroll в списке сообщений смещается к последнему. То есть, если сообщение получено от другого пользователя, scroll'а не происходит.
- Изображения с backend'а отправляются в формате base64. После этого с помощью fetch запроса конвертируются в изображения привычного формата.
- В приложение реализован визуальный элемент для отображения выбранной картинки.
- Redux используется для хранения данных основного пользователя, списка сообщений и списка всех пользователей.
- В приложение реализованы middleware'ы:
-
- Для логирования действий redux.
-
- Для получения пользователей, которые подключаются / отключаются от чата. И для получения сообщений.
Ссылка на страницу - Введение.
В приложение используется scss v.8.0.0 для node v.18.16. Если у вас другая версия node, то обновите библиотеку scss.
- npm i
- npm run start
Если вы находитесь в корне папки, то можете воспользоваться командой:
- для linux:
npm i && npm run start
-
для windows
-
- создайте файл .env с текстом
REACT_APP_URLAPI=test
-
- введите команду
npm i && npm run start-w