🎮 Valorant HUB

Valorant HUB — це сучасна веб-платформа для фанатів гри Valorant, яка об'єднує всю необхідну інформацію про гру та інтелектуального AI-асистента (Astra) на базі GPT-4o. https://valorantasistent.vercel.app/

📋 Про проект

Valorant HUB створений для того, щоб надати гравцям зручний доступ до актуальної інформації про:

• Агентів — детальні описи здібностей, ролей та стратегій використання всіх персонажів
• Карти — огляди локацій, тактичні поради та ключові позиції
• Зброю — повна статистика, характеристики відкату та рекомендації по використанню
• AI-чат — розумний асистент, який допоможе з порадами, статистикою та відповідями на питання про гру

✨ Ключові особливості

• 🤖 AI-асистент на базі OpenAI Assistants API — інтелектуальний чат-бот з доступом до інструментів пошуку, статистики гравців, новин та патчів
• 🎨 Сучасний дизайн — стилізований під естетику Valorant з темною темою та червоними акцентами
• ⚡ Швидкість — побудовано на Vite для миттєвого завантаження
• 📱 Адаптивність — повністю responsive дизайн для всіх пристроїв
• 🔒 Безпека — API ключі зберігаються на сервері, всі запити до AI проходять через захищений бекенд

🛠️ Технологічний стек

Frontend

• React 18 — сучасна бібліотека для побудови UI
• TypeScript — типізація для надійності коду
• Vite — швидкий збірник та dev-сервер
• React Router — маршрутизація між сторінками
• TailwindCSS — utility-first CSS фреймворк
• Material-UI — компоненти для UI
• Lucide React — іконки
• React Markdown — рендеринг markdown у чаті

Backend

• Vercel Serverless Functions — безсерверні функції для API
• OpenAI Assistants API — інтеграція з GPT-4o
• Axios — HTTP клієнт для запитів

Інструменти AI-асистента

• Пошук статистики гравців
• Історія матчів
• Гібридний пошук агентів та гравців
• Веб-пошук
• Новини про Valorant
• Інформація про патчі
• Дані про турніри
• Актуальна інформація про агентів

🚀 Швидкий старт

Локальний запуск

1. Клонуйте репозиторій

   git clone https://github.com/Sharik3k/ValorantHub.git
   cd ValorantHub

2. Встановіть залежності

   npm install

3. Налаштуйте змінні оточення

   Скопіюйте .env.example у .env та додайте свої ключі:

   OPENAI_API_KEY=your_openai_api_key_here
   OPENAI_ASSISTANT_ID=your_assistant_id_here
   AI_MODEL=gpt-4o

4. Запустіть dev-сервер

   npm run dev

5. Відкрийте браузер за адресою http://localhost:5173

📦 Деплой на Vercel

1. Завантажте код на GitHub
2. Зайдіть на Vercel та підключіть репозиторій
3. Додайте змінні оточення:
   • OPENAI_API_KEY
   • OPENAI_ASSISTANT_ID
   • AI_MODEL
4. Vercel автоматично задеплоїть проект

📁 Структура проекту

valorant-hub/
├── api/
│   └── chat.ts              # Serverless функція для AI-чату
├── src/
│   ├── components/          # React компоненти
│   │   └── ChatAssistant.tsx
│   ├── data/                # Дані про агентів, карти, зброю
│   │   ├── agents.ts
│   │   ├── maps.ts
│   │   └── weapons.ts
│   ├── pages/               # Сторінки додатку
│   │   ├── HomePage.tsx
│   │   ├── AgentsPage.tsx
│   │   ├── MapsPage.tsx
│   │   ├── WeaponsPage.tsx
│   │   └── ChatPage.tsx
│   ├── services/            # Сервіси для API
│   │   └── aiService.ts
│   ├── ui/                  # UI компоненти
│   │   ├── Layout.tsx
│   │   ├── Navbar.tsx
│   │   └── ThemeSwitcher.tsx
│   ├── App.tsx              # Головний компонент
│   ├── main.tsx             # Точка входу
│   └── index.css            # Глобальні стилі
├── .env.example             # Приклад змінних оточення
├── package.json
├── vite.config.ts
└── tailwind.config.js

🔐 Безпека

• API ключі OpenAI зберігаються виключно на сервері
• Всі запити до AI проходять через захищений endpoint /api/chat
• Файл .env додано до .gitignore для запобігання витоку ключів
• Використовується GitHub Secret Scanning для додаткового захисту

📝 Ліцензія

Цей проект створено в освітніх цілях. Valorant та всі пов'язані матеріали є власністю Riot Games.

🤝 Внесок

Якщо ви хочете покращити проект, створюйте pull request або відкривайте issue з пропозиціями!

---

Зроблено з ❤️ для спільноти Valorant