• Данное приложение, это однокомнатный чат для текстового общения. Так же есть возможность делиться изображениями. Для работы данного приложения используется backend доступный по этой ссылке. При авторизации в чате пользователю присваивается случайное имя и случайное изображение в качестве аватара.

• Приложение состоит из двух страниц. Первая страница с кратким описанием программы - Вход. Вторая страница это - Чат.
• Авторизация в чате происходит при заходе на любую страницу. Полученные данные с сервера, такие как имя, ссылка на аватарку, записываются в session storage.
• При открытие приложения в нескольких вкладках одного браузера, на каждой вкладке будет один и тот же пользователь.
• При отправке сообщения, scroll в списке сообщений смещается к последнему. То есть, если сообщение получено от другого пользователя, scroll'а не происходит.
• Изображения с backend'а отправляются в формате base64. После этого с помощью fetch запроса конвертируются в изображения привычного формата.
• В приложение реализован визуальный элемент для отображения выбранной картинки.
• Redux используется для хранения данных основного пользователя, списка сообщений и списка всех пользователей.
• В приложение реализованы middleware'ы:
• • Для логирования действий redux.
• • Для получения пользователей, которые подключаются / отключаются от чата. И для получения сообщений.

Ссылка на страницу - Введение.

Ссылка на страницу - Чат.

В приложение используется scss v.8.0.0 для node v.18.16. Если у вас другая версия node, то обновите библиотеку scss.

1. npm i
2. npm run start

Если вы находитесь в корне папки, то можете воспользоваться командой:

• для linux:

npm i && npm run start

• для windows

• • создайте файл .env с текстом

REACT_APP_URLAPI=test

• • введите команду

npm i && npm run start-w