Chat Quiz Bot - Telegram Mini App

Полнофункциональное приложение-викторина для Telegram Web App (Mini App), созданное с использованием React, TypeScript, Vite и Tailwind CSS.

🚀 Особенности

• Интерактивная викторина с вопросами о участниках чата
• Система прогресса с сохранением в localStorage
• Разблокировка статистики в зависимости от количества правильных ответов
• Тёмная тема в стиле paycashswap.com с неоновыми эффектами
• Адаптивный дизайн для мобильных устройств
• Плавные анимации с использованием Framer Motion
• Интеграция с Telegram WebApp API

📋 Требования

• Node.js 18+ и npm/yarn/pnpm
• Telegram Bot для тестирования Mini App

🛠️ Установка

1. Клонируйте репозиторий или скачайте проект
2. Установите зависимости:

npm install

или

yarn install

или

pnpm install

🏃 Запуск в режиме разработки

npm run dev

Приложение будет доступно по адресу http://localhost:5173

📦 Сборка для продакшена

npm run build

Собранные файлы будут в папке dist/

🌐 Деплой в Telegram Mini App

Вариант 1: GitHub Pages

1. Соберите проект: npm run build
2. Загрузите содержимое папки dist/ на GitHub Pages или другой хостинг
3. В настройках вашего Telegram бота укажите URL вашего приложения

Вариант 2: Vercel/Netlify

1. Подключите репозиторий к Vercel или Netlify
2. Укажите команду сборки: npm run build
3. Укажите папку вывода: dist
4. После деплоя получите URL и добавьте его в настройки Telegram бота

Вариант 3: Любой статический хостинг

1. Выполните npm run build
2. Загрузите содержимое папки dist/ на ваш хостинг
3. Убедитесь, что index.html доступен по корневому пути

📱 Настройка Telegram Bot

1. Создайте бота через @BotFather
2. Используйте команду /newapp для создания Mini App
3. Укажите URL вашего задеплоенного приложения
4. Установите название и описание приложения

🎮 Как играть

1. Откройте Mini App в Telegram
2. Нажмите "Начать викторину"
3. Читайте описание персонажа и выбирайте правильный ответ
4. За правильные ответы получайте очки
5. Открывайте разделы статистики в зависимости от количества правильных ответов:
   • 0-2 правильных → 1 раздел
   • 3-4 → 2 раздела
   • 5-6 → 3 раздела
   • 7-8 → 4 раздела
   • 9-10 → 5 разделов
   • 10+ → все 6 разделов

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

chatquizbot/
├── src/
│   ├── components/          # React компоненты
│   │   ├── QuizStart.tsx    # Экран старта
│   │   ├── QuizQuestion.tsx # Экран вопроса
│   │   ├── QuizResult.tsx   # Экран результатов
│   │   └── StatSection.tsx  # Компонент раздела статистики
│   ├── data/                # Данные приложения
│   │   ├── questions.ts     # Вопросы викторины
│   │   └── statistics.ts   # Статистика чата
│   ├── types/               # TypeScript типы
│   │   └── index.ts
│   ├── utils/               # Утилиты
│   │   ├── storage.ts       # Работа с localStorage
│   │   └── shuffle.ts       # Перемешивание массива
│   ├── App.tsx              # Главный компонент
│   ├── main.tsx             # Точка входа
│   └── index.css            # Глобальные стили
├── index.html               # HTML шаблон
├── package.json             # Зависимости
├── vite.config.ts           # Конфигурация Vite
├── tailwind.config.js       # Конфигурация Tailwind
└── tsconfig.json            # Конфигурация TypeScript

🎨 Технологии

• React 18 - UI библиотека
• TypeScript - типизация
• Vite - сборщик и dev-сервер
• Tailwind CSS - стилизация
• Framer Motion - анимации
• Telegram WebApp API - интеграция с Telegram

📝 Лицензия

MIT

🤝 Вклад

Приветствуются любые улучшения и предложения!