Job Tapper

Job Tapper - это интерактивное приложение для автоматической отправки откликов на вакансии в форме увлекательной игры. Пользователи должны быстро нажимать на появляющиеся элементы, чтобы отправлять отклики через API HeadHunter.

---

Назначение комплекса

Job Tapper предназначен для создания увлекательного и эффективного способа поиска работы. Комплекс объединяет игровую механику с реальным процессом отклика на вакансии, что делает поиск работы более интересным и мотивирующим. Основная цель комплекса — упростить и геймифицировать процесс отправки откликов на вакансии, повышая вовлеченность пользователей и эффективность поиска работы.

Состав комплекса

1. Клиентское приложение (Frontend)

Веб-интерфейс, разработанный с использованием Vue 3 и TypeScript, предоставляет пользователю игровой интерфейс для взаимодействия с вакансиями.

2. Серверное приложение (Backend)

Node.js сервер, обрабатывающий запросы клиента, взаимодействующий с API HeadHunter и управляющий игровой логикой.

3. Модуль интеграции с HeadHunter API

Обеспечивает взаимодействие с API HeadHunter для получения вакансий и отправки откликов.

4. Модуль управления игровым процессом

Отвечает за генерацию игровых элементов, подсчет очков и управление уровнями сложности.

5. Модуль аутентификации

Управляет авторизацией пользователей через HeadHunter OAuth.

6. Система реального времени

Использует Socket.IO для обеспечения мгновенных обновлений игрового состояния.

Функциональность и принципы работы

1. Клиентское приложение (Frontend)

Клиентское приложение предоставляет пользовательский интерфейс для игры и взаимодействия с вакансиями.

Основные компоненты:

• GameView: Основной игровой экран
• ResumeCard: Отображение информации о резюме
• GameArea: Игровая область с появляющимися вакансиями

Пример использования игровой области:

<template>
  <GameArea
    @click="handleClick"
    @vacancy-click="handleVacancyClick"
    :start-countdown="startCountdown"
    :get-vacancy-emoji="getVacancyEmoji"
  />
</template>

2. Серверное приложение (Backend)

Сервер обрабатывает запросы клиента, взаимодействует с API HeadHunter и управляет игровой логикой.

Основные модули:

• vacancyController: Управление вакансиями
• resumeController: Управление резюме
• authController: Аутентификация пользователей

Пример обработки запроса на получение похожих вакансий:

handleGetSimilarVacancies: async (socket: Socket, userSessions: Map<string, any>, data: { resumeId: string }) => {
  const userData = userSessions.get(socket.id);
  if (userData) {
    try {
      const vacancies = await vacancyService.getSimilarVacancies(userData.accessToken, data.resumeId);
      socket.emit('similar-vacancies', vacancies);
    } catch (error) {
      console.error('Error fetching similar vacancies:', error);
      socket.emit('error', { message: 'Ошибка при получении похожих вакансий' });
    }
  }
}

Технологии

• Frontend: Vue 3, TypeScript, Tailwind CSS, DaisyUI
• Backend: Node.js, Express, Socket.IO
• API: HeadHunter API

Настройка переменных окружения

⚠️ ВАЖНО! Перед запуском проекта необходимо настроить переменные окружения.

Получение ключей доступа HeadHunter API

1. Перейдите на официальную документацию HeadHunter API
2. Зарегистрируйтесь как разработчик в личном кабинете HeadHunter
3. Создайте новое приложение в разделе "Мои приложения"
4. Получите Client ID и Client Secret
5. Настройте Redirect URI в соответствии с вашими доменами

Настройка сервера

1. Скопируйте файл-пример переменных окружения:

   cd server
   cp .env.example .env

2. Отредактируйте файл .env, заполнив следующие переменные:

   # Обязательные переменные для работы с HeadHunter API
   HH_CLIENT_ID=ваш_client_id_из_hh
   HH_CLIENT_SECRET=ваш_client_secret_из_hh
   
   # Настройки приложения
   PORT=3000
   CLIENT_URL=http://localhost:5173
   HH_API_URL=https://api.hh.ru
   HH_REDIRECT_URI=http://localhost:5173/oauth/callback

Настройка клиента

1. Для разработки скопируйте файл-пример:

   cd client
   cp .env.development.example .env.development

2. Отредактируйте файл .env.development:

   VITE_SERVER_URL=http://localhost:3000
   VITE_HH_REDIRECT_URI=http://localhost:5173/oauth/callback

3. Для продакшн среды:

   cp .env.production.example .env.production

   И настройте соответствующие домены в .env.production.

Установка и запуск

Клиент

1. Перейдите в директорию клиента:

   cd client

2. Установите зависимости:

   npm install

3. Убедитесь, что файл .env.development настроен (см. раздел "Настройка переменных окружения")

4. Запустите клиент в режиме разработки:

   npm run dev

5. Для запуска через Tuna (или Ngrok):

   tuna http localhost:5173 --subdomain={ваш домен}

Сервер

1. Перейдите в директорию сервера:

   cd server

2. Установите зависимости:

   npm install

3. Убедитесь, что файл .env настроен с правильными ключами HeadHunter API (см. раздел "Настройка переменных окружения")

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

   npm run dev

5. Для запуска через Tuna (или Ngrok):

   tuna http localhost:3000 --subdomain={ваш домен}

Особенности

• Интеграция с API HeadHunter для получения вакансий и отправки откликов
• Игровой процесс, стимулирующий быструю реакцию пользователя
• Система уровней и очков для повышения вовлеченности
• Реал-тайм обновления с использованием Socket.IO

Возможные проблемы и их решение

Ошибка "Не удается подключиться к серверу"

1. Убедитесь, что сервер запущен на правильном порту (по умолчанию 3000)
2. Проверьте файл .env в директории server/ - все переменные должны быть заполнены
3. Проверьте файл .env.development в директории client/ - URL сервера должен быть правильным

Ошибка OAuth авторизации HeadHunter

1. Убедитесь, что ключи HH_CLIENT_ID и HH_CLIENT_SECRET корректны
2. Проверьте, что HH_REDIRECT_URI в .env файле совпадает с настройками в вашем приложении на hh.ru
3. Убедитесь, что ваше приложение одобрено в личном кабинете разработчика HeadHunter

Проблемы с CORS

1. Убедитесь, что URL клиента добавлен в список разрешенных в server/src/server.ts
2. При использовании доменов через Tuna/Ngrok обновите соответствующие настройки в коде

"Module not found" ошибки

1. Выполните npm install в обеих директориях (client и server)
2. Убедитесь, что у вас установлена правильная версия Node.js (рекомендуется v18+)

TypeScript ошибки компиляции

✅ Исправлено! Все TypeScript ошибки в проекте устранены:

• Обновлена версия vue-tsc до совместимой
• Добавлен файл типов vite-env.d.ts для переменных окружения
• Исправлена типизация в компонентах и сторах
• Проект теперь собирается без ошибок как на клиенте, так и на сервере

Разработка и расширение

Job Tapper спроектирован с учетом возможности расширения функциональности. Разработчики могут создавать новые модули или расширять существующие для добавления новых возможностей.

Создание нового модуля

1. Создайте новую директорию в client/src/modules или server/src/modules в зависимости от типа модуля.
2. Реализуйте необходимую логику и компоненты.
3. Экспортируйте основные компоненты или функции модуля через index.ts.
4. Интегрируйте новый модуль в основное приложение.

Вклад в проект

Мы приветствуем вклад в развитие проекта! Пожалуйста, ознакомьтесь с руководством по внесению вклада перед тем, как начать.

Лицензия

Этот проект лицензирован под MIT License - см. файл LICENSE для подробностей.