Демо

Проект на Render.com: https://mountain-messenger.onrender.com

Дизайн мессенджера

Дизайн в Figmа: https://www.figma.com/file/nW7r9fME8TXq78BxTierQU/Snowball-messenger?node-id=0%3A1&t=t4OB52eyYYkxEpyp-1

В процессе верстки показалось излишне разбивать редактирование профиля на несколько страниц, поэтому решил добавить возможность редактировать профиль в пределах одной страницы

Установка проекта

Для запуска проекта необходимо предварительно установить зависимости:

• npm install — установка зависимостей

Для сборки стабильной версии можно запустить команду:

• npm run build — сборка стабильной версии

Для разработки используются следющие команды:

• npm run serve — запуск проекта для разработчика.
• npm run test — запуск тестов.

О мессенджере

Для генерации id используется пакет uuid

Функционал страниц:

• Навигация:
  • Постраничная навигация реализована в верхней части страниц
  • При отсутствии авторизованного пользователя доступ возможен только на страницы авторизации и регистрации
• Авторизация:
  • Если пользователь уже в системе то произойдет редирект сразу к чатам.
  • По кнопке "Войти" проихсодит проверка полей формы. При валидном заполнении данные отправляются на сервер
  • После снятия фокуса с полей форм выполняется проверка заполнения с выводом ошибки в подсказке
  • По кнопке "Нет аккаунта?" происходит переход на страницу регистрации
• Регистрация:
  • Если пользователь уже в системе то зайти на страницу регистрации не получится.
  • По кнопке "Зарегистрироваться" проихсодит проверка полей формы. При валидном заполнении данные отправляются на сервер
  • После снятия фокуса с полей форм выполняется проверка заполнения с выводом ошибки в подсказке
  • По кнопке "Войти" происходит переход на страницу авторизации
• Чат:
  • В основном окне стоит заглушка
  • При выборе любого чата подгружаются сообщения чата
  • При нажатии кнопки "Профиль" происходит переход на страницу Профиля
  • По кнопке с иконкой стрелки проихсодит проверка поля сообщения
  • После снятия фокуса с поля сообщения выполняется проверка заполнения с выводом ошибки в плейсхолдер
  • После отправки сообщения скролл будет внизу переписки
  • При скроле до верха переписки будут подгружены старые записи, а скролл останется на месте последнего элемента перед подгрузкой старых сообщений.
  • Слева в сайдбаре можно добавить новый чат введя название и нажав кнопку с иконкой плюс. Чат добавится в список
  • Каждый чат можно удалить, нажав на иконку мусорной корзины. При удалении всплывет модальное окно с просьбой подтвердить действие.
  • К каждому чату можно добавить пользователя, введя его логин в строку поиска в окне переписки. Пользователи подгружаются автоматически с задержкой при вводе. Добавить пользователя к чату можно нажав на него в выпавшем списке
  • У каждого чата можно изменить иконку, нажав на нее
  • Удалить чат может только тот, кто его создал.
• Профиль
  • Есть возможность смены аватара и редактирования полей аккаунта
  • При нажатии кнопки назад происходит переход на страницу Чата
  • По кнопке "Сохранить" проихсодит проверка полей формы. При валидном заполнении данные отправляются на сервер
  • После снятия фокуса с полей форм выполняется проверка заполнения с выводом ошибки в подсказке

Инструменты разработки

Для единообразия стилей используется stylelint и конфигурация stylelint-config-property-sort-order-smacss

Для исправления стилей исползуется команда: npx stylelint '**/*.css

Для автоматической работы плагина в VScode необходимо добавить в settings.json: "editor.codeActionsOnSave": { "source.fixAll": true },

Для линтинга js когда используется eslint с конфигурацией "eslint-config-airbnb-base"

Сборка проекта в Docker контейнер

Для запуска проекта через Docker необходимо выполнить следующие команды

• docker build -t project . — сборка проекта в контейнер с названием project (можно поменять на свое усмотрения)
• docker run -p 3000:3000 project — запуск контейнера с привязкой открытова 3000 порта контейнера к 3000 порту машины, на которой происходит запуск
• docker stop -t 0 [CONTAINER ID из команыд docker ps] - остановка запущенного контейнера

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