Проект мессенджера для курса "Мидлфронтенд разработчик" от Яндекс Практикум.

Посмотреть Демо: https://messenger-by-orekhov-ilya.netlify.app/

О проекте

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

В процессе разработки придерживался компонентного подхода и шаблона MVC.

Используется шаблонизатор Handlebars и сборщик Webpack.

Добавлены тесты с использованием Mocha и Chai, а также библиотека sinon.

В проекте реализован работа с real-time сообщениями с помощью подключения через WebSocket.

Дизайн мессенджера отличается от остальных в первую очередь аватарами и блоками без скруглённых углов. При создании этого дизайна, я вдохновлялся дизайнами Steam и Discord.

=>

Проект адаптирован под мобильные устройства.

Скрипты для локальной работы с проектом:

npm install

Установка необходимых зависимостей для работы с проектом.

npm run build

Проект соберётся в папке dist.

npm run start

Проект запуститься на Express, localhost:3000.

npm run dev

Проект запуститься с помощью Webpack dev server, на localhost:8080.

npm run clear

очищает node_modules и удаляет package-lock.json.

Как пользоваться:

1. Для входа на главную страницу надо будет пройти авторизацию.
2. Для перехода на страницу профиля, на странице с чатом нажмите на иконку settings в левом правом углу в блоке профиля.
3. На странице профиля можно переключиться на редактирование профиля, изменения пароля или открыть модальное окно с изменением аватара.
4. Создать чат можно на странице чата. При нажатии иконки user или users в заголовках списков чатов: справа от "Friends" или "Groups", Выйдет модальное окно с созданием нового чата.
5. Для добавления юзеров в чат или редактирования аватара чата, в выбранном чате нужно открыть окно настроек, нажав на три точки в верхнем правом углу экрана.
6. Для просмотра списка юзеров в чате, нужно нажать на аватар чата в хедере главного чата.