Проект: Messenger

• Figma
• Netlify
• Heroku
• Surge CDN
• Swagger

Описание

Cамостоятельная практическая работа, выполняемая в рамках обучения на курсе Мидл фронтенд-разработчик от Яндекс.Практикум на спринтах №1-4.

Текущий этап

Спринт 4 из 4

Спринт 1

#1

• Свёрстан макет приложения чат в Figma с использованием шаблонизатора Handlebars. Ссылка на макет
• Настроена сборка с использованием Parcel и раздача статики сервером на Express
• Приложение автоматически деплоится на Netlify из ветки deploy. Ссылка на приложение

Спринт 2

#2

• Переход на TypeScript
• Реализация шины событий (core/EventBus.ts)
• Реализация компонента (core/Block.ts) с собственными пропсами, жизненным циклом и реактивным ререндером при изменении пропсов (использованы Proxy)
• Приложение переписано с учётом новых компонентов
• На основных формах реализована клиентская валидация
• Реализация аналога fetch для запросов к серверу (utils/core/HTTPTransport.ts)

Спринт 3

#3

• Реализация клиентского роутера (core/Route.ts, core/BrowseRouter.ts)
• Добавлен слой api
• Добавлен слой services
• Реализация центрального хранилища (Store.ts)
• Использован WebSocket для сообщений чата
• Реализован виртуальный список для сообщений чата
• В приложении реализованы следующее возможности:
  • Регистрация
  • Логин
  • Выход
  • Обновление данных профиля
  • Изменение аватара
  • Создание и удаление чата
  • Поиск, добавление и удаление пользователей в чате
  • Отправка и получение текстовых сообщений

Спринт 4

#5

• Написаны unit тесты для основных модулей (Jest)
• Переход с Parcel на Webpack
• Настройка образа Dockerfile
• Деплой контейнера на Heroku
• Настроен pre commit (Husky)
• Настройка Surge CDN
• Добавлена защита от DDoS

Планы по доработке проекта

• Дополнить EventBus в Store
• Добавить HOC для STORE
• Оптимизировать кол-во рендеров (mapStateToProps реализовать)
• Добавить возможность отправлять файлы в чаты
• Реализовать возможность видеозвонков
• Поиск сообщений

Сборка и запуск

Сборка проекта в Webpack

npm run build

Запуск статического сервера на Express:

npm run start

Запуск проекта в dev режиме

npm run dev

Проверка на стилистические и типовые ошибки

npm run lint:ts

Статический анализ css и postcss файлов

npm run lint:style

Запуск docker образа

npm run docker

Запуск тестов

npm run test

Технологии

• HTML
• CSS (PostCSS)
• TypeScript
• Parcel
• Webpack
• Handlebars
• Jest
• Express
• Netlify
• Heroku
• Surge CDN
• Docker