| app | ||
| components | ||
| hooks | ||
| lib | ||
| services | ||
| types | ||
| .env.example | ||
| .eslintrc.json | ||
| .gitignore | ||
| next-env.d.ts | ||
| next.config.js | ||
| package.json | ||
| postcss.config.js | ||
| README.md | ||
| tailwind.config.js | ||
| tsconfig.json | ||
| yarn.lock | ||
HR AI Frontend
Современная платформа для поиска работы с искусственным интеллектом, построенная на Next.js и TypeScript.
Возможности
- 📋 Просмотр списка вакансий с поиском и фильтрацией
- 🔍 Детальная информация о каждой вакансии
- 📄 Загрузка резюме с уведомлением о подготовке сессии собеседования
- 🔐 Авторизация через 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]/ # Страница детальной информации о вакансии
├── components/ # React компоненты
│ └── ResumeUploadForm.tsx
├── 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/resumes/- Загрузка резюмеGET /api/v1/sessions/current- Получение информации о сессии
Авторизация:
Все запросы выполняются с credentials: 'include' для работы с cookie-сессиями.
Особенности реализации
Загрузка резюме
- Поддержка файлов: PDF, DOC, DOCX, TXT
- Максимальный размер файла: 10 МБ
- Валидация формы перед отправкой
- Уведомление об успешной отправке
Поиск вакансий
- Поиск по названию вакансии
- Фильтрация активных вакансий
- Красивое отображение карточек вакансий
Детальная страница вакансии
- Полная информация о вакансии
- Контактные данные
- Форма для отклика прямо на странице