Приложение разработано для общения. На основной странице приложения размещена лента переписки и окно отправки сообщений. Предусмотрены формы авторизации и регистрации. В разделе профиль можно изменять картинку аватара, а также данные о пользователе.
В корневой папке проекта вы можете запустить следующие команды:
Выполняет сборку проекта через Webpack, запускает локальный сервер с раздачей статики.
Откройте http://localhost:3000, чтобы увидеть приложение в браузере.
Выполняет сборку проекта в папку dist.
Запускает webpack-dev-server, который в режиме релаьного времени отслеживает изменения в проекте.
Запускает unit-тесты.
На данном этапе в приложении реализованы следующие функции:
При запуске приложения открывается страница авторизации. В низу формы есть ссылки перехода в чат и на страницу регистрации. Из страницы чата можно перейти на страницу профиля, в нижней части которой есть ссылка Выйти, нажав на которую вы снова окажетесь на странице авторизации.
Если пользователь не авторизован, при попытке перейти на страницу профиля или чата будет происходить автоматический переход на страницу авторизации. И наоборот, если пользователь авторизован, на страницу авторизации или регистрации не перейти.
Данные, вводимые в формах регистрации, авторизации, изменения профиля проходят валидацию при вводе и при попытке отправки данных на сервер. Если валидация не пройдена, появляется соответствующее сообщение. В случае успешной проверки происходит отправка данных на сервер.
После перехода на страницу чата необходимо выбрать существующий чат или добавить новый. Добавление нового чата осуществляется кнопкой +, расположенной под полем поиска по чатам.
После выбора чата справа появляется окно с сообщениями. В нижней части экрана находится поле для отправки сообщений. Пустое сообщение не отправляется.
Добавление и удаление пользователей чата осуществляестя из выпадающего меню, вызываемого кнопкой в правом верхнем углу страницы чата. Добавление/удаление выполняется по логину. После создания нового чата необходимо добавить хотя бы одного пользователя.
Реализован поиск по названию чата.
Для изменения аватарки чата необходимо выбрать чат и кликнуть по аватарке. Будет вызвано модальное окно с диалогом выбора файла аватарки.
Для удаления чата нужно выбрать соответствующий чат, в правом верхнем углу чата появится кнопка х, после нажатия на которую чат удалится. Удаление чата доступно только для пользователя, который его создал.
На странице профиля отображена информация, введенная при регистрации. Внизу имеются кнопки для изменения данных и смены пароля. Также можно изменить аватар.
При разработке использованы следующие инструменты:
- Сборщик проекта
Webpack - Шаблонизатор
Handlebars - Препроцессор CSS
Sass - Анализатор JS кода
ESLint - Анализатор CSS кода
StyleLint - Язык
TypeScriptдля типизации - API
XMLHttpRequestдля работы с данными пользователя, чатов - Протокол
WebSocketдля отправки и получения сообщений - Фреймворк
Mochaи библиотекаChaiдля тестирования Dockerдля контейнеризации и развертывания приложения
Приложение развернуто на сервисе render.com. Перейдите по ссылке https://chat-app-r6wa.onrender.com.