ai-hackaton-frontend/README.md
2025-09-09 21:31:34 +05:00

6.0 KiB
Raw Blame History

HR AI Frontend

Современная платформа для поиска работы с искусственным интеллектом, построенная на Next.js и TypeScript.

Возможности

  • 📋 Просмотр списка вакансий с поиском и фильтрацией
  • 🔍 Детальная информация о каждой вакансии
  • 📄 Загрузка резюме с уведомлением о подготовке сессии собеседования
  • 🎤 Проведение AI-собеседований с проверкой микрофона
  • 📊 Создание вакансий из файлов (PDF, DOC, DOCX, RTF, TXT)
  • 📈 Просмотр отчетов по кандидатам для каждой вакансии
  • 🔐 Авторизация через cookie-сессии (без JWT)
  • 🎨 Современный и адаптивный дизайн
  • Быстрая загрузка и отзывчивый интерфейс

Технологический стек

  • Framework: Next.js 14 (App Router)
  • Language: TypeScript
  • Styling: Tailwind CSS
  • Icons: Lucide React
  • HTTP Client: Fetch API с cookie-авторизацией

Быстрый старт

  1. Установите зависимости:
yarn install
  1. Создайте файл .env.local (уже создан):
NEXT_PUBLIC_API_BASE_URL=http://localhost:8000
  1. Запустите development сервер:
yarn dev
  1. Откройте http://localhost:3000 в браузере

Структура проекта

├── app/                    # Next.js App Router
│   ├── globals.css        # Глобальные стили
│   ├── layout.tsx         # Корневой layout
│   ├── page.tsx          # Главная страница (список вакансий)
│   ├── vacancy/[id]/     # Страница детальной информации о вакансии
│   │   └── report/[id]/  # Страница отчетов по вакансии
│   └── interview/[id]/   # Страница AI-собеседования
├── components/           # React компоненты
│   ├── ResumeUploadForm.tsx    # Форма загрузки резюме
│   ├── VacancyUploadForm.tsx   # Форма создания вакансии
│   ├── VacancyReports.tsx      # Отчеты по вакансии
│   └── InterviewSession.tsx    # AI-собеседование
├── hooks/               # React Query хуки
│   ├── useVacancy.ts
│   ├── useResume.ts
│   └── useReports.ts
├── services/           # API сервисы
│   ├── vacancy.service.ts
│   ├── resume.service.ts
│   └── reports.service.ts
├── lib/                # Утилиты и API клиент
│   └── api-client.ts
├── types/             # TypeScript типы
│   └── api.ts
└── public/           # Статические файлы

API Integration

Приложение интегрируется с HR AI Backend API:

Основные эндпоинты:

  • GET /api/v1/vacancies/ - Получение списка вакансий
  • GET /api/v1/vacancies/{id} - Получение вакансии по ID
  • POST /api/v1/vacancies/parse-file-async - Создание вакансии из файла
  • POST /api/v1/resumes/ - Загрузка резюме
  • GET /api/v1/resumes/by-vacancy/{vacancy_id} - Получение резюме по вакансии
  • GET /api/v1/sessions/current - Получение информации о сессии
  • GET /api/v1/reports/vacancy/{vacancy_id} - Получение отчетов по вакансии

Авторизация:

Все запросы выполняются с credentials: 'include' для работы с cookie-сессиями.

Особенности реализации

Создание вакансий

  • Загрузка из файлов: PDF, DOC, DOCX, RTF, TXT
  • Drag & Drop интерфейс
  • Максимальный размер файла: 10 МБ
  • Toast уведомления об успешной обработке
  • Автоматическое обновление списка каждые 5 секунд

Загрузка резюме

  • Поддержка файлов: PDF, DOCX
  • Drag & Drop интерфейс
  • Максимальный размер файла: 10 МБ
  • Валидация формы перед отправкой
  • Автоматическая проверка микрофона перед собеседованием
  • Статусы обработки: обрабатывается → обработано → готово к собеседованию

AI-собеседования

  • Проверка доступа к микрофону
  • WebRTC соединение с сервером
  • Реальное время голосового взаимодействия
  • Обработка ошибок подключения

Поиск вакансий

  • Поиск по названию вакансии
  • Фильтрация активных вакансий
  • Заглушки для незаполненных рядов в сетке 3x3
  • Обработка null значений ("Не указано")

Детальная страница вакансии

  • Полная информация о вакансии
  • Контактные данные
  • Форма для отклика прямо на странице
  • Переход к отчетам по кандидатам

Отчеты по вакансии

  • Список всех кандидатов
  • Информация о собеседованиях
  • Статусы кандидатов
  • Ссылки на PDF отчеты
  • Заметки интервьюера и следующие шаги