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

131 lines
6.0 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 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. Установите зависимости:
```bash
yarn install
```
2. Создайте файл `.env.local` (уже создан):
```env
NEXT_PUBLIC_API_BASE_URL=http://localhost:8000
```
3. Запустите development сервер:
```bash
yarn dev
```
4. Откройте [http://localhost:3000](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 отчеты
- Заметки интервьюера и следующие шаги