Add project README and user tutorial presentation docs

README.md

@@ -0,0 +1,125 @@
+# OpWork
+
+OpWork — открытый движок поиска вакансий с разделением на backend (NestJS), frontend (Vue/Vben) и отдельный генератор Prisma DTO.
+
+## Структура репозитория
+
+- `backend/` — API, бизнес-логика, Prisma, OpenAPI-генерация.
+- `frontend/` — UI-приложения и документация фронтенд-стека.
+- `prisma-generator-nestjs-dto/` — утилита генерации DTO для NestJS.
+- `start-dev.sh` / `stop-dev.sh` — запуск и остановка dev-окружения.
+- `start-prod.sh` / `stop-prod.sh` — запуск и остановка production-окружения.
+
+## Требования
+
+- Node.js (рекомендуется версия из `.nvmrc` в корне и подпроектах).
+- npm для корневых команд.
+- pnpm для `frontend/` (устанавливается автоматически в `postinstall`).
+
+## Быстрый старт
+
+1. Установите зависимости в корне:
+
+```bash
+npm install
+```
+
+2. Сгенерируйте артефакты (OpenAPI/Prisma, если нужно):
+
+```bash
+npm run generate
+```
+
+3. Запустите проект в dev-режиме:
+
+```bash
+npm run start:dev
+```
+
+4. Остановите dev-окружение:
+
+```bash
+npm run stop:dev
+```
+
+## Первый вход в систему (туториал)
+
+После запуска приложения при первом открытии показывается экран авторизации.
+
+1. Если у вас уже есть аккаунт:
+   - введите email в поле логина;
+   - введите пароль;
+   - нажмите кнопку **«Войти»**.
+2. Если аккаунта нет:
+   - нажмите ссылку **«Создать аккаунт»** под кнопкой входа;
+   - заполните форму регистрации (email, пароль, подтверждение пароля);
+   - в поле роли выберите **«Работодатель»**;
+   - примите условия (чекбокс согласия с политикой/условиями);
+   - нажмите кнопку **«Регистрация»**;
+   - после успешной регистрации выполните вход с новыми данными.
+
+> Примечание: первый шаг для нового пользователя — именно регистрация через ссылку **«Создать аккаунт»**, иначе войти в систему не получится.
+
+3. После входа открывается панель аналитики:
+   - отображается статистика просмотров, откликов/заявок и активности;
+   - доступны графики динамики посещаемости и источников трафика;
+   - можно отслеживать актуальность и состояние ваших резюме в рабочем интерфейсе.
+4. В шапке сайта доступно переключение типа/профиля аккаунта:
+   - нажмите на иконку профиля в правом верхнем углу;
+   - выберите действие **«Сменить активный профиль»**;
+   - переключитесь на нужный тип аккаунта для соответствующего сценария работы.
+5. В режиме **Работодатель** заполните раздел **«Моя компания»**:
+   - откройте пункт меню **«Моя компания»**;
+   - укажите обязательные и основные данные: название компании, отрасль, описание, год основания, контакты;
+   - дополнительно заполните бренд-поля и соцсети (логотип, фоновое изображение, сайт, LinkedIn/Twitter/Facebook);
+   - нажмите кнопку **«Изменить»** для сохранения профиля компании.
+
+## Полезные команды
+
+### Корневые команды
+
+```bash
+npm run format              # форматирование всех подпроектов
+npm run format:backend      # форматирование backend
+npm run format:frontend     # форматирование frontend
+npm run format:generator    # форматирование prisma-generator-nestjs-dto
+
+npm run generate            # генерация backend + frontend
+npm run generate:backend    # генерация backend
+npm run generate:frontend   # генерация frontend
+
+npm run start:dev           # запуск dev окружения
+npm run stop:dev            # остановка dev окружения
+npm run start:prod          # запуск prod окружения
+npm run stop:prod           # остановка prod окружения
+```
+
+### Backend (`backend/`)
+
+```bash
+npm run --prefix backend start:dev
+npm run --prefix backend test
+npm run --prefix backend lint
+npm run --prefix backend build
+```
+
+### Frontend (`frontend/`)
+
+```bash
+pnpm --dir frontend dev
+pnpm --dir frontend build
+pnpm --dir frontend lint
+pnpm --dir frontend test:unit
+```
+
+## Переменные окружения
+
+- Для backend используйте шаблон `backend/.env.example`.
+- Перед локальным запуском скопируйте его в `backend/.env` и заполните нужные значения.
+
+## Где смотреть детальную документацию
+
+- Backend: `backend/README.md`
+- Frontend: `frontend/README.md`
+- Генератор DTO: `prisma-generator-nestjs-dto/README.md`
+- Туториал-презентация (слайды + скриншоты): `docs/user-tutorial-presentation.md`

docs/images/tutorial/manifest.md

@@ -0,0 +1,34 @@
+# Tutorial Images Manifest
+
+Этот файл фиксирует набор скриншотов, присланных в чате, и соответствие именам файлов,
+которые используются в `docs/user-tutorial-presentation.md`.
+
+## Именование
+
+Складывайте финальные картинки в эту же папку с такими именами:
+
+1. `slide-01-login.png` — экран входа.
+2. `slide-02-register.png` — экран регистрации.
+3. `slide-03-dashboard-analytics.png` — дашборд аналитики (режим соискателя).
+4. `slide-04-switch-profile.png` — модалка переключения профиля.
+5. `slide-05-header-profile-menu.png` — меню профиля в шапке.
+6. `slide-06-profile-contacts.png` — редактирование контактной информации профиля.
+7. `slide-07-profile-security.png` — изменение email и пароля.
+8. `slide-08-vacancy-search.png` — поиск вакансий с фильтрами.
+9. `slide-09-vacancy-details-apply.png` — карточка вакансии + кнопка отклика.
+10. `slide-10-resume-main.png` — форма «Мое резюме».
+11. `slide-11-resume-modal-education.png` — модалка добавления образования.
+12. `slide-11-resume-modal-experience.png` — модалка добавления опыта.
+13. `slide-11-resume-modal-skill.png` — модалка добавления навыка в резюме.
+14. `slide-12-resume-search-employer.png` — поиск резюме (режим работодателя).
+15. `slide-13-company-profile.png` — форма «Моя компания».
+16. `slide-14-my-vacancies.png` — список «Мои вакансии».
+17. `slide-15-create-vacancy.png` — форма создания вакансии.
+18. `slide-16-vacancy-modal-tag.png` — модалка тега вакансии.
+19. `slide-16-vacancy-modal-skill.png` — модалка навыка вакансии.
+
+## Важно
+
+В текущем окружении у агента нет прямого доступа к бинарным вложениям из чата,
+поэтому сами PNG нужно положить в репозиторий отдельно (drag-and-drop/копированием файлов),
+после чего markdown-ссылки в презентации начнут отображаться автоматически.

docs/user-tutorial-presentation.md

@@ -0,0 +1,224 @@
+# OpWork — презентация по текущему функционалу
+
+> Версия: перегенерация по присланным скриншотам + текущим докам репозитория.
+>
+> Важно: ниже включено **только то, что уже видно в интерфейсе** (без неподтвержденных фич из ТЗ).
+
+## Как использовать
+
+- Каждый раздел = отдельный слайд.
+- Подставьте реальные изображения в `docs/images/tutorial/`.
+- Формат имен: `slide-01-*.png`, `slide-02-*.png` и т.д.
+- Готовая карта соответствия скриншотов: `docs/images/tutorial/manifest.md`.
+
+---
+
+## Слайд 1. Вход в систему
+
+![Вход](./images/tutorial/slide-01-login.png)
+
+**Что показываем:**
+- Экран авторизации с email/паролем.
+- Кнопка **«Войти»**.
+- Ссылка на регистрацию **«Создать аккаунт»**.
+
+**Связь с ТЗ:** AUTH-1 (базовый сценарий входа).
+
+---
+
+## Слайд 2. Регистрация аккаунта
+
+![Регистрация](./images/tutorial/slide-02-register.png)
+
+**Что показываем:**
+- Форма создания аккаунта.
+- Поля: email, пароль, подтверждение, тип профиля.
+- Чекбокс согласия и кнопка **«Регистрация»**.
+
+**Связь с ТЗ:** AUTH-2 (регистрация с выбором роли).
+
+---
+
+## Слайд 3. Аналитика после входа (режим соискателя)
+
+![Дашборд аналитики](./images/tutorial/slide-03-dashboard-analytics.png)
+
+**Что показываем:**
+- Карточки метрик и графики.
+- Раздел аналитики как стартовый рабочий экран.
+
+**Связь с ТЗ:** подтвержден вид личного кабинета после входа.
+
+---
+
+## Слайд 4. Переключение активного профиля
+
+![Смена профиля](./images/tutorial/slide-04-switch-profile.png)
+
+**Что показываем:**
+- Модалка **«Сменить активный профиль»**.
+- Выбор между «Специалист» и «Работодатель».
+
+**Связь с ТЗ:** AUTH-2 (роль влияет на доступные сценарии).
+
+---
+
+## Слайд 5. Профиль из шапки
+
+![Меню профиля](./images/tutorial/slide-05-header-profile-menu.png)
+
+**Что показываем:**
+- Доступ к профилю через правый верхний угол.
+- Пункт меню **«Профиль»**.
+
+---
+
+## Слайд 6. Редактирование контактной информации
+
+![Профиль контакты](./images/tutorial/slide-06-profile-contacts.png)
+
+**Что показываем:**
+- Раздел **«Основная информация»**.
+- Редактирование контактов/сайта/локации.
+- Поля медиа (аватар, фон), кнопка сохранения.
+
+**Связь с ТЗ:** PROFILE-2 (редактирование профиля — подтверждено частично по UI).
+
+---
+
+## Слайд 7. Обновление Email и пароля
+
+![Профиль email пароль](./images/tutorial/slide-07-profile-security.png)
+
+**Что показываем:**
+- Раздел **«Настройки Email и Пароля»**.
+- Изменение email.
+- Изменение пароля (текущий/новый/подтверждение).
+
+---
+
+## Слайд 8. Поиск и фильтрация вакансий
+
+![Поиск вакансий](./images/tutorial/slide-08-vacancy-search.png)
+
+**Что показываем:**
+- Левый сайдбар с фильтрами.
+- Список вакансий с сортировками и метриками.
+
+**Связь с ТЗ:** VAC-CAND-2 (фильтрация вакансий — подтвержден интерфейс).
+
+---
+
+## Слайд 9. Карточка вакансии и отклик
+
+![Карточка вакансии](./images/tutorial/slide-09-vacancy-details-apply.png)
+
+**Что показываем:**
+- Детальная страница вакансии.
+- Блоки: компенсация, описание, требования, навыки.
+- Кнопка **«Откликнуться»**.
+
+**Связь с ТЗ:** RESP-CAND-1 (вход в сценарий отклика).
+
+---
+
+## Слайд 10. Резюме соискателя (основная форма)
+
+![Мое резюме](./images/tutorial/slide-10-resume-main.png)
+
+**Что показываем:**
+- Раздел **«Мое резюме»** с базовыми полями.
+- Табличные блоки: образование, опыт, навыки.
+
+---
+
+## Слайд 11. Таблицы и модалки в резюме
+
+![Модалка образование](./images/tutorial/slide-11-resume-modal-education.png)
+![Модалка опыт](./images/tutorial/slide-11-resume-modal-experience.png)
+![Модалка навык](./images/tutorial/slide-11-resume-modal-skill.png)
+
+**Что показываем:**
+- Таблицы — это рабочие зоны для добавления/изменения параметров.
+- Добавление записей происходит через правую модалку **«Создать»**.
+- Аналогично редактируются элементы (через операции таблицы).
+
+**Связь с ТЗ:** PROFILE-3 (управление навыками — подтвержден UI добавления).
+
+---
+
+## Слайд 12. Поиск резюме (режим работодателя)
+
+![Поиск резюме](./images/tutorial/slide-12-resume-search-employer.png)
+
+**Что показываем:**
+- Фильтры кандидатов слева.
+- Список найденных резюме/кандидатов справа.
+
+---
+
+## Слайд 13. Моя компания (режим работодателя)
+
+![Моя компания](./images/tutorial/slide-13-company-profile.png)
+
+**Что показываем:**
+- Форма параметров компании.
+- Контактные и бренд-поля.
+- Сохранение по кнопке **«Изменить»**.
+
+---
+
+## Слайд 14. Мои вакансии работодателя
+
+![Мои вакансии](./images/tutorial/slide-14-my-vacancies.png)
+
+**Что показываем:**
+- Список вакансий работодателя.
+- Фильтры/сортировки.
+- Кнопка **«Добавить»**.
+
+---
+
+## Слайд 15. Создание вакансии
+
+![Создание вакансии](./images/tutorial/slide-15-create-vacancy.png)
+
+**Что показываем:**
+- Полная форма вакансии (основные поля, детали, даты).
+- Таблицы тегов и навыков внутри формы.
+
+**Связь с ТЗ:** VAC-EMP-2 (создание вакансии — подтвержден UI формы).
+
+---
+
+## Слайд 16. Таблицы и модалки в вакансии
+
+![Модалка тега вакансии](./images/tutorial/slide-16-vacancy-modal-tag.png)
+![Модалка навыка вакансии](./images/tutorial/slide-16-vacancy-modal-skill.png)
+
+**Что показываем:**
+- Табличные блоки внутри вакансии используются для параметров (теги/навыки).
+- Создание и редактирование выполняется через модалки.
+
+---
+
+## Что взято из частичного ТЗ (только подтвержденное UI)
+
+- AUTH-1: вход (экран и базовый путь).
+- AUTH-2: регистрация с выбором роли.
+- PROFILE-2: редактирование профиля (контактная часть и медиа-поля по интерфейсу).
+- PROFILE-3: управление навыками (механика добавления через модалки).
+- VAC-EMP-2: создание вакансии.
+- VAC-CAND-2: фильтрация вакансий.
+- RESP-CAND-1: кнопка и вход в сценарий отклика.
+
+> Пункты из ТЗ, которых нет на текущих скриншотах, в эту презентацию не включены.
+
+---
+
+## Чеклист перед экспортом в PDF/слайды
+
+- [ ] Подставлены реальные изображения по всем `slide-*.png`.
+- [ ] Проверены актуальные подписи кнопок/полей.
+- [ ] Убраны дубли/устаревшие кадры.
+- [ ] Экспорт выполнен в нужный формат (PDF/Google Slides/Keynote).