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

2. Создайте файл .env.local (уже создан):

NEXT_PUBLIC_API_BASE_URL=http://localhost:8000

3. Запустите development сервер:

yarn dev

4. Откройте 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 отчеты
• Заметки интервьюера и следующие шаги