web-itmo-match

Курсовая по вебу 3 курс 5 семестр

Стек проекта

Фронт

• Фронт — react + redux redux tool kit
  Выбрали, т. к. больше всего опыта в работе с этими технологиями и они очень популярны, чтобы опыт мог пригодиться в будущем

• Инструмент сборки — Vite
  Также имеем больше всего опыта + проста в освоении и хорошо подходит для реакта с редуксом

• Линтнеры — ESLint + Stylelint + Prettier
  Выбрали, т. к. это самые основные литнеры для js

• Тесты — Jest + React Testing Library (фронт) и Jest + Supertest (бэк)
  Наиболее простые в освоении, по сравнению с конкурентами (например - Mocha/Chai требуют доп настроек и технологий)

• e2e тесты — Playwright
  Наиболее быстрый и хорошо дружит с Vite + много возможностей из коробки

• Либы внешних компонентов — MUI (Material UI)
  Самая популярная, будет проще всего найти документацию и интересные примеры

• Аналитика — yandex metrika
  Мы патриоты :)

• Веб воркер — Dedicated Worker
  Простой в освоении, хорошо дружит с react + reux tk + vite

• API — Canvas API
  Понравилось больше остальных + есть функционал, под который канвас идеально подходит

• Моки — msw для клиента, nock для Node.js-тестов
  Удобные и простые в освоении

• Баг трекинг — Sentry
  Хорошо дружит с react, более популярен => больше документации и примеров

---

Бэк

• ЯП — JavaScript (ESM) Выбрали JS, т.к. он максимально совместим с фронтом, быстро интегрируется, и по ТЗ требуется именно node.js-стек.

• Фреймворк — Node.js + Express Express — лёгкий, быстрый и гибкий. Позволяет просто реализовать REST API, middleware, авторизацию и загрузку файлов. Подходит для небольших и средних проектов.

• Авторизация — JWT (JSON Web Tokens) Простая, быстрая и стандартная схема токенной авторизации. Хорошо работает с React-приложениями и не требует серверных сессий.

• ORM — Prisma Современный, типобезопасный ORM с автогенерацией клиента. Очень удобен при работе с PostgreSQL и позволяет легко синхронизировать схему БД через prisma db pull + prisma generate.

• БД — PostgreSQL (pg) Надёжная, быстрая SQL-база. Используется вместе с Prisma. Хранит финализированные коллекции, айтемы, пользователей и остальные сущности доменной логики.

• Хранение черновиков (constructor) — In-Memory (RAM) Draft-коллекции (конструктор) хранятся в оперативной памяти, т.к. это временные данные, которые не должны занимать БД. После выполнения save_exit — данные сохраняются в PostgreSQL.

• Загрузка файлов — multer + статический express middleware Для обработки изображений коллекций и айтемов, с сохранением в uploads/.

• Описание API — OpenAPI 3.0 (openapi.yaml) Описывает все ручки бекенда: авторизация, конструктор, работа с коллекциями и т. д. Удобно для фронтенда и автогенерации типов/клиента.

• Баг трекинг — Bugsnag Лёгкая интеграция с Express, автоматически собирает ошибки сервера, показывает stack trace, окружение и контекст запроса. Используется для мониторинга backend-части проекта.

• Тестирование — Jest + Supertest Используются для тестирования контроллеров и API-эндпоинтов. Supertest позволяет отправлять HTTP-запросы непосредственно к Express-приложению.

• CI/CD — GitHub Actions Проверка линтинга, сборки, тестов и форматирования. (Зелёный статус CI внизу README.)

---

Допы (Backend)

• Документация контрактов — OpenAPI 3.0 Файл openapi.yaml хранится в репозитории и описывает все методы бекенда для фронтенда.

• PWA-готовность (со стороны API) Бекенд отдаёт данные так, чтобы фронтенд мог кешировать статику и запросы в сервис-воркере.

---

Допы для плюсов

• Сревис воркер — vite-plugin-pwa
  (формальность, но почему нет)

• Описание контракта — openapi

• PWA — через сервис воркер (можно ещё добавить пуш, но ориентируемся на прогресс)

CI ok: Mon Oct 6 01:34:01 MSK 2025

Yandex Metrika Setup

Во фронте подключен счётчик через ym (SPA tracking + goals).

1. Добавь id счётчика в frontend/.env.local: VITE_YANDEX_METRIKA_ID=<your_counter_id>
2. Перезапусти фронт.
3. Проверь цели в Метрике (ниже), их можно использовать для воронок и сегментов.

Ключевые цели:

• session_start
• page_view
• auth_login_attempt, auth_login_success, auth_login_failure
• auth_register_attempt, auth_register_success, auth_register_failure
• home_connect_click, home_create_room_click, home_history_click, home_collection_open
• room_create_attempt, room_create_success, room_create_failure
• room_connect_attempt, room_connect_success, room_connect_failure
• room_vote_open, room_vote_yes, room_vote_no
• room_drawing_open, room_show_results_click
• room_results_open, room_results_match, room_results_no_match, room_drawings_open
• room_leave, logout