DevGamify

Приложение для геймификации разработки - превращаем работу в игру!

Что это такое?

DevGamify - это мой личный проект для мотивации в разработке. Идея простая: превратить ежедневные задачи программиста в квесты с системой уровней, опыта и достижений.

Вместо скучных TODO-листов у вас будет настоящая RPG-система! 🚀

Основные фишки

• ** Система квестов** - создавайте daily, weekly или custom задачи
• ** Уровни и XP** - накапливайте опыт за выполнение квестов
• ** Стрики** - следите за ежедневной активностью
• ** Достижения** - разблокируйте награды за прогресс
• ** Аналитика** - красивые графики активности за 30 дней
• ** Локализация** - русский и английский языки
• ** Темы** - светлая и темная тема
• ** Экспорт данных** - сохраняйте прогресс в JSON/CSV

Технологии

Frontend

• React 18 - основа приложения
• TypeScript - типизация для надежности
• Vite - быстрая сборка и HMR
• Tailwind CSS - стилизация
• React Router - маршрутизация

State Management

• Zustand - легковесное управление состоянием
• React Hook Form - работа с формами
• Zod - валидация данных

Визуализация

• Recharts - графики и диаграммы

Тестирование

• Vitest - unit тесты
• Testing Library - тестирование компонентов
• Playwright - e2e тесты

Качество кода

• ESLint - линтинг
• Prettier - форматирование
• Husky - git hooks
• commitlint - проверка коммитов

CI/CD

• GitHub Actions - автоматизация
• Lighthouse CI - проверка производительности
• Vercel - деплой

Быстрый старт

# Клонируем репозиторий
git clone https://github.com/Ricbanker
cd devgamify

# Устанавливаем зависимости
npm install

# Запускаем в режиме разработки
npm run dev

Откройте http://localhost:5173 в браузере.

Доступные скрипты

npm run dev      # Запуск dev сервера
npm run build    # Сборка для продакшена
npm run preview  # Предварительный просмотр сборки
npm run test     # Запуск тестов
npm run test:ui  # Тесты с UI
npm run e2e      # E2E тесты
npm run lint     # Проверка кода
npm run format   # Форматирование кода

Архитектура проекта

src/
├── app/                    # Основное приложение
│   ├── App.tsx            # Корневой компонент
│   └── layout/            # Общий макет
├── features/              # Функциональные модули
│   ├── quests/           # Квесты
│   ├── achievements/     # Достижения
│   ├── stats/           # Статистика
│   └── user/            # Пользователь
├── pages/                # Страницы
├── shared/               # Общие компоненты
│   ├── ui/              # UI компоненты
│   ├── lib/             # Утилиты
│   └── hooks/           # Кастомные хуки
└── styles/              # Стили

Принципы архитектуры

• Feature-first - группировка по функциональности
• Чистые функции - бизнес-логика в model/ папках
• Переиспользование - общие компоненты в shared/
• Типизация - везде TypeScript

Работа с данными

Импорт/Экспорт

• JSON - полный экспорт всех данных
• CSV - экспорт истории квестов
• Демо-данные - генерация тестовых данных на 60 дней

Хранение

• LocalStorage - персистентность данных
• Zustand persist - автоматическое сохранение

Доступность и интернационализация

• A11y - поддержка скрин-ридеров, клавиатурной навигации
• i18n - русский и английский языки
• Темы - автоматическое переключение по системным настройкам

Тестирование

# Unit тесты
npm run test

# Тесты с покрытием
npm run test -- --coverage

# E2E тесты
npm run e2e

# Все тесты
npm run test && npm run e2e

Производительность

• Lighthouse Score: 95+ по всем метрикам
• Bundle Size: ~650KB (gzipped)
• First Paint: <1s
• LCP: <2s

Развертывание

Vercel (рекомендуется)

npm run build
# Деплой через Vercel CLI или GitHub интеграцию

Другие платформы

npm run build
# Файлы в dist/ готовы для деплоя

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

1. Форкните репозиторий
2. Создайте ветку для фичи (git checkout -b feature/amazing-feature)
3. Закоммитьте изменения (git commit -m 'Add amazing feature')
4. Запушьте в ветку (git push origin feature/amazing-feature)
5. Откройте Pull Request

Лицензия

MIT License - используйте как хотите!

Контакты

• GitHub: @yourusername
• Email: your.email@example.com
• Twitter: @yourusername

---