Messenger

Web-приложение Messenger позволяет общаться в чатах тет-а-тет и в группах, обмениваясь realtime сообщениями.

Проект выполнен в рамках обучения на курсе «Мидл фронтенд-разработчик» от Яндекс.Практикум.

🚀 Деплой

Netlify

💡 Функциональность

1. Регистрация в приложении. Необходимо заполнить форму регистрации
2. Авторизация. Авторизация происходит по логину и паролю
3. Изменение личных данных и аватара, изменение пароля
4. Работа с чатами: создание и удаление чата, изменение аватара чата
5. Работа с пользователями в чате: добавление и удаление пользователей
6. Отправка и получение realtime сообщений

🔧 Технологии

1. Typescript: реализация реактивного фреймворка
2. Шаблонизарор Handlebars
3. Стили: SCSS
4. Работа с REST API и Web Sockets API
5. SPA роутинг
6. Webpack-сборка
7. Pre-commit (Husky, lint-staged)
8. Тесты: Chai, Mocha
9. Линтеры: Eslint, Stylelint
10. Dockerfile

🚗 Роуты

/ авторизация
/signup регистрация
/messenger страница с чатами
/messenger#:id страница отдельного чата
/settings профиль пользователя
/settings-password страница изменения пароля

Обращение к несуществующему роуту направляет пользователя на страницу /404. Непредвиденные ошибки сервера направляют пользователя на страницу /error.

📦 Скрипты

npm run start сборка проекта и запуск локального сервера (localhost:3000)
npm run build сборка проекта
npm run dev сборка для режима разработки
npm run eslint проверка Eslint
npm run eslint:fix автоматическое исправление ошибок Eslint
npm run stylelint проверка Stylelint
npm run stylelint:fix автоматическое исправление ошибок Stylelint
npm run ts:check проверка на типы
npm run test запуск тестов
lint:all запуск всех линтеров

📺 Превью

Видео