Чат

Опубликованное в Netlify приложение: https://bucolic-paprenjak-cebd36.netlify.app

Что это?

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

Текущий этап

Спринт 4 из 4

Спринт 1

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

Спринт 2

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

Спринт 3

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

Спринт 4

• Переход с Parcel на Webpack
• Dockerfile для создания docker -контейнера с дистрибутивом и сервером на Express
• Настроен pre commit (husky)

Установка и запуск

Установка

Установка зависимостей проекта:

npm i

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

Подготовка проекта (установка Husky):

npm run prepare

Сборка проекта. Используемый сборщик Webpack:

npm run build

Сборка контейнера docker (./dist + ./server):

npm run build

Старт сервера Express для раздачи статики из ./dist:

npm run start

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

npm run test

Статический анализ css и scss файлов. Используются правила Airbnb.

npm run stylelint