Web Crypto Credentials

Демонстрационный веб-проект для шифрования credentials (учетных данных) с использованием публичных ключей в браузере.

🎯 Цель проекта

Создать интерактивное веб-приложение, которое наглядно демонстрирует различные методы шифрования с использованием Web Crypto API. Проект предназначен для образовательных целей и демонстрации возможностей современной браузерной криптографии.

🚀 Возможности

• Генерация ключей: RSA (2048-bit) - MVP
• Шифрование данных: Текст, файлы, RSA шифрование
• Управление ключами: Экспорт/импорт в различных форматах
• Интерактивное обучение: Пошаговые примеры и тесты
• Современный UI: shadcn/ui с поддержкой тем

🏗️ Архитектура

Проект построен на трехуровневой архитектуре:

• Frontend Layer: React.js 18+ + TypeScript + Vite
• Crypto Layer: Web Crypto API (RSA 2048-bit MVP)
• Storage Layer: Zustand persist + экспорт/импорт

📚 Документация

Полная документация проекта находится в папке

• project.md - Детальное описание проекта, архитектуры и технических требований
• tasktracker.md - Отслеживание прогресса разработки и задач
• diary.md - Дневник наблюдений и технических решений
• qa.md - Вопросы по архитектуре и принятые решения

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

• Frontend: React.js 18+, TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS + shadcn/ui
• State Management: Zustand + persist
• Crypto: Web Crypto API (RSA MVP)
• Testing: Jest, Testing Library, Playwright

📋 Требования

Браузерная поддержка

• Chrome 60+
• Firefox 55+
• Safari 11+
• Edge 79+

Системные требования

• Node.js 18+
• npm/yarn/pnpm

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

Локальная разработка

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

📖 Подробная документация по Docker: README-Docker.md

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

web-crypto-creds/
├── docs/                 # Документация проекта
│   ├── project.md       # Описание проекта
│   ├── tasktracker.md   # Отслеживание задач
│   ├── diary.md         # Дневник наблюдений
│   └── qa.md            # Вопросы по архитектуре
├── src/                  # Исходный код
│   ├── components/       # React компоненты (shadcn/ui)
│   ├── hooks/           # Кастомные React хуки
│   ├── utils/           # Утилиты и хелперы
│   ├── crypto/          # Криптографические функции (RSA MVP)
│   ├── types/           # TypeScript типы
│   ├── constants/       # Константы приложения
│   ├── stores/          # Zustand stores
│   └── styles/          # CSS и стили (Tailwind)
├── public/               # Статические ресурсы
├── Dockerfile            # Продакшн образ
├── Dockerfile.dev        # Образ для разработки
├── nginx.conf            # Конфигурация nginx
├── nginx-proxy.conf      # Конфигурация nginx прокси
├── docker-compose.yml    # Docker Compose конфигурация
├── .dockerignore         # Исключения для Docker
├── Makefile              # Команды для управления Docker
├── .cursorrules          # Правила для Cursor IDE
├── .gitignore           # Git ignore файл
└── README.md            # Этот файл

🔐 Криптографические алгоритмы

• RSA-OAEP 2048-bit: Асимметричное шифрование (MVP)
• ECDH P-256: Обмен ключами (будущие версии)
• AES-GCM 256-bit: Симметричное шифрование (будущие версии)
• PBKDF2: Генерация ключей из паролей (будущие версии)

🎨 UI/UX особенности

• shadcn/ui: Современные компоненты с поддержкой тем
• Адаптивный дизайн: Desktop-first с поддержкой мобильных
• Темы оформления: Автоматическое переключение тем
• Интуитивный интерфейс: Простота использования для всех пользователей
• Образовательные элементы: Пошаговые руководства и примеры

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

• Unit тесты: Jest + Testing Library
• Интеграционные тесты: Тестирование взаимодействия компонентов
• E2E тесты: Playwright для end-to-end тестирования
• Криптографические тесты: Проверка корректности RSA алгоритма

📊 Мониторинг и аналитика

• Производительность: Время генерации RSA ключей, скорость шифрования
• Безопасность: Аудит криптографических операций
• Использование: Аналитика функций и пользовательского поведения
• Ошибки: Логирование и мониторинг проблем

🔒 Безопасность

• Content Security Policy: CSP заголовки для защиты (требует изучения)
• HTTPS Only: Обязательное использование защищенного соединения
• Валидация данных: Проверка всех входных данных
• Безопасное хранение: Zustand persist для ключей

📈 Планы развития

Проект развивается в 4 этапа:

1. Phase 1 (Недели 1-2): Foundation - базовая настройка и структура
2. Phase 2 (Недели 3-4): Core Features - RSA шифрование/расшифровка
3. Phase 3 (Недели 5-6): Advanced Features - ECDH, AES, файлы
4. Phase 4 (Недели 7-8): Polish & Documentation - финальная полировка

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

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

1. Следуйте правилам проекта
2. Используйте Conventional Commits
3. Пишите тесты для новых функций
4. Обновляйте документацию при изменениях

📄 Лицензия

Проект распространяется под лицензией MIT. См. файл LICENSE для деталей.

📞 Контакты

• Tasks: Gitverse Tasks
• Pull Requests: Gitverse Pull Requests
• Wiki: Gitverse Wiki

🙏 Благодарности

• Web Crypto API Working Group
• React.js команда
• Zustand разработчики
• shadcn/ui команда
• Сообщество криптографов
• Все участники проекта

Статус: 🚧 В разработке
Версия: 0.1.0
Последнее обновление: $(date)

⚠️ Внимание: Это демонстрационный проект. Не используйте для продакшн шифрования без тщательного аудита безопасности.