6.0 KiB
6.0 KiB
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-авторизацией
Быстрый старт
- Установите зависимости:
yarn install
- Создайте файл
.env.local
(уже создан):
NEXT_PUBLIC_API_BASE_URL=http://localhost:8000
- Запустите development сервер:
yarn dev
- Откройте 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}
- Получение вакансии по IDPOST /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 отчеты
- Заметки интервьюера и следующие шаги