Проект: Messenger

Описание:

Этот проект представляет собой мессенджер, который позволяет пользователям регистрироваться, входить в систему, просматривать список чатов и отправлять сообщения. Это учебный проект для развития навыков.

Используемые технологии:

• Vite
• Handlebars
• Express.js
• SCSS
• TS

Спринты:

• 1 спринт:

  • Верстка экранов:
    • Авторизация (/signin)
    • Регистрация (/signup)
    • Список чатов (/chats)
    • Профиль (/profile)
    • Страница 404 (/404)
    • Страница 500 (/500)
  • Настройка сборки проекта при помощи Vite
  • Выбор препроцессор для сборки CSS:
    • SCSS
    • вынесены константы переменных
  • Подключен шаблонизатор Hаndlebars к проекту
  • Настроен Express-сервер с раздачей статики — файла index.html на 3000 порту
  • Настроен Netlify:
    • подключен репозиторий
    • настроен автодеплой из ветки deploy
  • Подключен и настпроен ESLint + Pretter
  • защищена ветка sprint_1 от изменений

• 2 спринт:

  • Создание ветки в Git для выполнения заданий второго спринта.
  • Внедрение TypeScript
  • Добавление компонентов в проект.
  • Реализация сбора данных из формы и добавление валидации на все формы.
  • Генерация страниц на стороне клиента
  • Bспользование Vite для сборки.
  • Структурирование проекта в соответствии с советами по архитектуре.
  • Настройка правильных экспортов и импортов, декомпозиция и минимизация связности.
  • Реализация MVC-приложения и настройка взаимодействия сервисов и вьюшек через контроллеры.
  • Добавление работы с запросами, использование Promise и XHR.
  • Настройка ESLint, настройка editorconfig и статических анализаторов.
  • Добавление Stylelint и обновление README.md.
  • Проверка и сдача проектной работы после выполнения всех заданий.
  Основные задания:

  1. Создайте в Git ветку sprint_2. Не меняйте её название, в ней вы будете выполнять задания этого спринта.

  2. Внедрите TypeScript.

  3. Сделайте страницу со списком чатов и лентой переписки. Не забудьте, что поле ввода сообщения должно называться message.

  4. Добавьте компонентный подход в проект:

     • Используйте реализацию блока (Block) и Event Bus;
     • Разделите проект на папки с компонентами и страницами (components и blocks или pages).

     💡 Вы сами решаете, насколько сильно декомпозировать проект. Мы настоятельно рекомендуем хотя бы часть повторяющихся элементов вынести в отдельные компоненты. Это могут быть, например, инпуты, формы, кнопки, сообщение в чате. Так вы сможете их переиспользовать и не дублировать логику.

  5. Сделайте сбор данных из формы. В console.log должен выводиться объект со всеми заполненными полями формы.

  6. Добавьте валидацию на все формы. Валидация должна работать по blur-событиям и второй раз проверяться при нажатии на submit. Используйте регулярные выражения. У валидации должен быть единый механизм:

     • авторизация,
     • регистрация,
     • отправка сообщения (например, недопустимые символы),
     • настройки пользователя.
     • Должны быть следующие проверки (добавлять дополнительные правила валидации не нужно):
       • first_name, second_name — латиница или кириллица, первая буква должна быть заглавной, без пробелов и без цифр, нет спецсимволов (допустим только дефис).
       • login — от 3 до 20 символов, латиница, может содержать цифры, но не состоять из них, без пробелов, без спецсимволов (допустимы дефис и нижнее подчёркивание).
       • email — латиница, может включать цифры и спецсимволы вроде дефиса и подчёркивания, обязательно должна быть «собака» (@) и точка после неё, но перед точкой обязательно должны быть буквы.
       • password — от 8 до 40 символов, обязательно хотя бы одна заглавная буква и цифра.
       • phone — от 10 до 15 символов, состоит из цифр, может начинается с плюса.
       • message — не должно быть пустым.

  7. Генерация страниц должна происходить на стороне клиента;

  8. Сборка должна быть при помощи Vite;

  9. Структурируйте проект в соответствии с советами по архитектуре:

     • Разбейте на папки единым образом. Например, если у вас в папке Button лежит Button.ts, index.ts, Button.css, types.ts, то в папке Input не должен быть просто Input.ts. Как минимум там тоже должен быть свой index.ts;

     💡 Нет понятия «идеальная файловая структура». В вашей структуре должны быть логика, единообразие и декомпозиция. Представьте себя на месте другого разработчика, который открыл ваш проект. Сколько времени потребуется, чтобы понять, что где лежит? А если нужно добавить новый компонент или что-то исправить в коде? Чем понятнее будет структура, тем лучше.

     • Настройте правильные экспорты и импорты;
     • Декомпозируйте и максимально уменьшите связность.
     • Проверьте, что ваше приложения соответствует шаблону MVC (тема «Паттерны», урок "MV*?").

       💡 Реализация MVC-приложения:

       • Шаг 1. Создаём базовый класс (он же View в MVC);
       • Шаг 2. Наследуем от него страницы — "Chats" и т. д.;
       • Шаг 3. Внутри описываем отображение определённой части приложения;
       • Шаг 4. Содержимое генерируем с помощью шаблонизатора;
       • Шаг 5. Создаём сервисы и модули для управления бизнес-логикой работы с данными;
       • Шаг 6. Настраиваем взаимодействие сервисов и вьюшек через контроллеры. Например, через паттерн «Медиатор».

  10. В следующем спринте вы напишете свой роутер и добавите его в проект, использовать express.Router() нельзя. Сейчас для перехода между страницами можете применить, например, ссылки в тегах <a>.

  11. Добавьте класс для работы с запросами:

      • Fetch, axios и подобные инструменты использовать нельзя. Только Promise и XHR;
      • Реализуйте методы GET, POST, PUT, DELETE;
      • Добавьте работу с query string в GET-запросе и с body для других методов.

      💡 Вам поможет пример HTTPTransport из урока «Реализация fetch» (тема про API) или напишите свою реализацию. Fetch, axios и другие подобные инструменты вы сможете использовать во втором модуле.

  12. Добавьте ESLint:

      • Опишите свои правила или наследуйтесь от уже готовых наборов: например, Airbnb или Google;
      • Настройте editorconfig и другие статические анализаторы и инструменты для кода;
      • Весь код должен проходить проверку типов, линтинг и тесты.

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

  13. Добавьте Stylelint.

  14. Обновите README.md, а именно информацию о функциональности и использованных инструментах.15. Проверьте, что pull request из прошлого спринта «смёрджен» после того, как его принял ревьюер. Если да, после выполнения всех заданий этого спринта откройте pull request из ветки sprint_2 в ветку main. Назовите его “Sprint 2”. В PR должны входить только те изменения, которые были сделаны в рамках конкретного спринта.

  15. Когда будете готовы к сдаче проектной работы, отправьте ссылку на пул-реквест, открытый из ветки sprint-2, через форму в интерфейсе Практикума.

Команды:

• npm i - установка пакетов
• npm run dev — запуск проекта в режиме разработки,
• npm run build — сборка стабильной версии,
• npm run preview — локальный просмотр продакшен-сборки,
• npm run start - сборка и запуск проекта,

Муршруты на свёрстанные страницы:

• Авторизация (/signin)
• Регистрация (/signup)
• Список чатов (/chats)
• Профиль (/profile)
• Страница 404 (/404)
• Страница 500 (/500)

Ссылки:

• GitHub
• Figma Макет
• Deploy Netlify

Автор:

Dmitry Tokmak