Dataset Collection System

Современное React приложение, построенное с использованием TypeScript, SCSS модулей и современных практик разработки.

🚀 Технологии

• React 19 - современная библиотека для создания пользовательских интерфейсов
• TypeScript - типизированный JavaScript
• SCSS Modules - модульные стили с поддержкой переменных и миксинов
• Vite - быстрый инструмент сборки
• ESLint - линтер для качества кода

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

src/
├── components/           # Компоненты приложения
│   ├── ui/              # Переиспользуемые UI компоненты
│   │   ├── Button/      # Кнопка с различными вариантами
│   │   └── Card/        # Карточка для отображения контента
│   ├── features/        # Функциональные компоненты
│   │   └── Counter/     # Компонент счетчика
│   └── layout/          # Компоненты макета (заголовок, футер, сайдбар)
├── hooks/               # Кастомные React хуки
│   ├── useLocalStorage  # Хук для работы с localStorage
│   └── useMediaQuery    # Хук для медиа-запросов
├── types/               # TypeScript типы и интерфейсы
├── utils/               # Утилиты и вспомогательные функции
├── constants/           # Константы приложения
├── styles/              # Глобальные стили и переменные
└── assets/              # Статические ресурсы

🎨 Компоненты

UI Компоненты

• Button - кнопка с поддержкой различных вариантов (primary, secondary, outline, ghost)
• Card - карточка для отображения контента с заголовком, изображением и футером

Feature Компоненты

• Counter - счетчик с возможностью увеличения, уменьшения и сброса значения

🪝 Кастомные хуки

• useLocalStorage - синхронизация состояния с localStorage
• useMediaQuery - работа с медиа-запросами и адаптивностью
• useBreakpoint - определение текущего breakpoint'а
• useOrientation - определение ориентации устройства

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

• TypeScript - полная типизация всех компонентов и функций
• SCSS Modules - модульные стили с поддержкой переменных
• Responsive Design - адаптивный дизайн для всех устройств
• Accessibility - поддержка доступности (ARIA, keyboard navigation)
• Performance - оптимизация производительности
• Modern React - использование современных React паттернов

🚀 Запуск проекта

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

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

# Сборка для продакшена
npm run build

# Предварительный просмотр сборки
npm run preview

# Проверка качества кода
npm run lint

📱 Адаптивность

Приложение полностью адаптивно и поддерживает:

• Мобильные устройства (320px+)
• Планшеты (768px+)
• Десктопы (1024px+)
• Большие экраны (1280px+)

🎨 Темы

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

🔧 Разработка

Добавление нового компонента

1. Создайте папку в соответствующей директории (ui/, features/, layout/)
2. Создайте файлы компонента (.tsx, .module.scss, index.ts)
3. Добавьте типы в src/types/index.ts
4. Экспортируйте компонент в соответствующий index файл

Стилизация

• Используйте SCSS модули для изоляции стилей
• Применяйте переменные из src/styles/_variables.scss
• Следуйте принципам BEM для именования классов

Типизация

• Все компоненты должны иметь TypeScript интерфейсы
• Используйте generic типы где это уместно
• Экспортируйте типы через index файлы

📚 Полезные ссылки

• React Documentation
• TypeScript Handbook
• SCSS Documentation
• Vite Documentation