diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..af41179 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,81 @@ +# 📝 Changelog + +Все важные изменения в проекте Space SQL документируются в этом файле. + +Формат основан на [Keep a Changelog](https://keepachangelog.com/ru/1.0.0/), +и проект следует [семантическому версионированию](https://semver.org/lang/ru/). + +## [Unreleased] + +### Планируется +- 🔄 Система прогресса пользователей +- 🏆 Достижения и бейджи +- 📊 Аналитика выполнения заданий +- 🌍 Интернационализация (i18n) +- 🔍 Поиск по урокам + +## [2.0.0] - 2025-01-09 + +### ✨ Добавлено +- 🎨 **Полный рефакторинг фронтенда** с единой дизайн-системой +- 🌌 **Космическая тема** с анимированными звездами и эффектами +- 🎭 **Framer Motion** для плавных анимаций и переходов +- 🎨 **Tailwind CSS** с кастомной конфигурацией +- 🧩 **Система UI компонентов**: Button, Card, Input, Loading +- 🚀 **CosmicNavigation** - новая навигация в космическом стиле +- ⚡ **Page Transitions** - анимированные переходы между страницами +- 📱 **Полная адаптивность** для всех устройств +- 📚 **Обновленная документация** с дизайн-системой + +### 🔄 Изменено +- 🏠 **Главная страница** - новый дизайн с hero секцией +- 🔐 **Формы аутентификации** - космический стиль с анимациями +- 📚 **Страница уроков** - карточки с hover эффектами +- ⚡ **Практические задания** - улучшенный интерфейс +- 🎯 **Состояния загрузки** - единые компоненты Loading + +### ❌ Удалено +- 🗑️ **Bootstrap** зависимости полностью удалены +- 🗑️ **Старые стили** заменены на Tailwind +- 🗑️ **Inline стили** заменены на компоненты + +### 🐛 Исправлено +- ✅ Консистентность дизайна на всех страницах +- ✅ Производительность анимаций +- ✅ Адаптивность на мобильных устройствах +- ✅ Доступность компонентов + +## [1.0.0] - 2024-12-15 + +### ✨ Добавлено +- 🚀 Первый релиз Space SQL +- ⚛️ React 18 фронтенд +- ☕ Spring Boot 3 бэкенд +- 🗄️ PostgreSQL база данных +- 🔐 JWT аутентификация +- 📚 Система уроков +- ⚡ Практические задания +- 🎯 Проверка SQL запросов + +### 🛠️ Техническое +- 📡 REST API с Swagger документацией +- 🗄️ Liquibase для миграций БД +- 🔒 Spring Security конфигурация +- 📝 Базовая документация + +--- + +## Типы изменений + +- ✨ **Добавлено** - новые возможности +- 🔄 **Изменено** - изменения в существующей функциональности +- 🗑️ **Устарело** - функции, которые скоро будут удалены +- ❌ **Удалено** - удаленные функции +- 🐛 **Исправлено** - исправления ошибок +- 🔒 **Безопасность** - уязвимости + +## Ссылки + +- [Unreleased]: https://github.com/your-username/space-sql/compare/v2.0.0...HEAD +- [2.0.0]: https://github.com/your-username/space-sql/compare/v1.0.0...v2.0.0 +- [1.0.0]: https://github.com/your-username/space-sql/releases/tag/v1.0.0 diff --git a/README.md b/README.md index f405a4d..f75391c 100644 --- a/README.md +++ b/README.md @@ -2,27 +2,44 @@

🚀 Space SQL

-

Интерактивная платформа для изучения SQL в игровой форме

+

Интерактивная платформа для изучения SQL в космическом стиле

[![License](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE) [![Java](https://img.shields.io/badge/Java-17%2B-orange.svg)](https://java.com/) [![Spring Boot](https://img.shields.io/badge/Spring%20Boot-3.x-6DB33F.svg)](https://spring.io/projects/spring-boot) [![React](https://img.shields.io/badge/React-18.x-61DAFB.svg)](https://reactjs.org/) + [![Tailwind CSS](https://img.shields.io/badge/Tailwind%20CSS-3.x-38B2AC.svg)](https://tailwindcss.com/) + [![Framer Motion](https://img.shields.io/badge/Framer%20Motion-10.x-FF0055.svg)](https://www.framer.com/motion/) - [Документация](docs/README.md) | [Установка](#установка) | [Разработка](#разработка) | [Лицензия](#лицензия) + [📚 Документация](docs/README.md) | [⚡ Быстрый старт](#быстрый-старт) | [🎨 Дизайн-система](docs/DESIGN_SYSTEM.md) | [🧩 Компоненты](docs/COMPONENTS.md)
## 📋 О проекте -Space SQL - это интерактивная образовательная платформа, которая помогает изучить SQL в увлекательной игровой форме. Проект разработан для пользователей, которые хотят освоить основы SQL и улучшить свои навыки работы с базами данных. +Space SQL - это современная интерактивная образовательная платформа с космической тематикой для изучения SQL. Проект сочетает в себе мощный бэкенд на Spring Boot и красивый фронтенд на React с анимациями и космическим дизайном. -### 🎯 Основные возможности +### ✨ Особенности -- 📚 Интерактивные уроки по SQL -- 🎯 Практические задания с автоматической проверкой -- 🏆 Система достижений и прогресса -- 👥 Профили пользователей -- 🔐 Безопасная аутентификация +- 🌌 **Космический дизайн** - уникальная тематика с анимированными звездами и плавными переходами +- 📚 **Интерактивные уроки** - пошаговое изучение SQL от основ до продвинутых тем +- ⚡ **Практические задания** - реальные задачи с автоматической проверкой SQL запросов +- 🎭 **Современный UI** - кастомная дизайн-система на Tailwind CSS и Framer Motion +- 🔐 **Безопасная аутентификация** - JWT токены и защищенные API endpoints +- 📱 **Адаптивность** - полная поддержка мобильных устройств и планшетов + +### 🛠️ Технологический стек + +**Backend:** +- ☕ Java 17 + Spring Boot 3.x +- 🗄️ PostgreSQL + Liquibase +- 🔒 Spring Security + JWT +- 📡 REST API + Swagger + +**Frontend:** +- ⚛️ React 18 + React Router +- 🎨 Tailwind CSS + кастомная дизайн-система +- 🎭 Framer Motion для анимаций +- 📡 Axios для API запросов ## 🚀 Быстрый старт @@ -62,23 +79,40 @@ Space SQL - это интерактивная образовательная п ## 🛠️ Разработка -### Структура проекта +### 📁 Структура проекта ``` space-sql/ -├── backend/ # Бэкенд на Spring Boot -│ ├── src/ # Исходный код -│ ├── pom.xml # Maven конфигурация -│ └── ... -├── frontend/ # Фронтенд на React -│ ├── public/ # Статические файлы -│ ├── src/ # Исходный код React -│ └── ... -├── docs/ # Документация -│ ├── api/ # API документация -│ ├── guides/ # Руководства -│ └── ... -└── README.md # Этот файл +├── src/ # Backend (Spring Boot) +│ ├── main/java/com/spacesql/ +│ │ ├── controller/ # REST контроллеры +│ │ ├── service/ # Бизнес-логика +│ │ ├── repository/ # Data Access Layer +│ │ ├── entity/ # JPA сущности +│ │ ├── dto/ # Data Transfer Objects +│ │ ├── config/ # Конфигурация Spring +│ │ └── security/ # Безопасность и JWT +│ └── main/resources/ +│ ├── db/changelog/ # Liquibase миграции +│ └── application.properties +├── frontend/ # Frontend (React) +│ ├── src/ +│ │ ├── components/ # React компоненты +│ │ │ ├── ui/ # Базовые UI компоненты +│ │ │ └── layout/ # Компоненты макета +│ │ ├── pages/ # Страницы приложения +│ │ ├── contexts/ # React контексты +│ │ ├── services/ # API сервисы +│ │ └── styles/ # Стили и дизайн-система +│ ├── tailwind.config.js # Конфигурация Tailwind +│ └── package.json +├── docs/ # Документация +│ ├── FRONTEND.md # Документация фронтенда +│ ├── COMPONENTS.md # Документация компонентов +│ ├── DESIGN_SYSTEM.md # Дизайн-система +│ └── api/ # API документация +├── pom.xml # Maven конфигурация +└── README.md # Этот файл ``` ### Сборка @@ -111,11 +145,71 @@ npm test ## 📚 Документация -Подробная документация доступна в [документации проекта](docs/README.md). +### 📖 Полная документация + +| Документ | Описание | +|----------|----------| +| [📚 Фронтенд](docs/FRONTEND.md) | Подробная документация по React приложению | +| [🧩 Компоненты](docs/COMPONENTS.md) | Описание всех UI компонентов и их API | +| [🎨 Дизайн-система](docs/DESIGN_SYSTEM.md) | Космическая дизайн-система и стили | +| [📡 API](docs/api/SPECIFICATION.md) | Спецификация REST API | +| [🗄️ База данных](docs/architecture/database.md) | Схема и архитектура БД | + +### 🚀 Скриншоты + +
+🏠 Главная страница + +*Космическая главная страница с анимированным фоном и hero секцией* + +
+ +
+🔐 Аутентификация + +*Красивые формы входа и регистрации с космическими эффектами* + +
+ +
+📚 Уроки + +*Интерактивные карточки уроков с hover эффектами* + +
+ +
+⚡ Практика + +*SQL редактор с подсветкой синтаксиса и проверкой запросов* + +
+ +## 🤝 Участие в разработке + +Мы приветствуем вклад в проект! + +### 🛠️ Как начать разработку + +1. Форкните репозиторий +2. Создайте ветку для новой функции (`git checkout -b feature/amazing-feature`) +3. Следуйте [стандартам кодирования](#стандарты-кодирования) +4. Убедитесь, что все тесты проходят +5. Создайте Pull Request + +### 📋 Стандарты кодирования -## 🤝 Участие +**Frontend:** +- Используйте функциональные компоненты с хуками +- Следуйте космической дизайн-системе +- Добавляйте анимации с Framer Motion +- Тестируйте на всех устройствах -Вклады приветствуются! Пожалуйста, прочитайте [руководство по участию](CONTRIBUTING.md) для получения подробной информации о процессе отправки запросов на включение. +**Backend:** +- Следуйте принципам SOLID +- Используйте Spring Boot best practices +- Покрывайте код тестами +- Документируйте API с помощью Swagger ## 📄 Лицензия diff --git a/docs/COMPONENTS.md b/docs/COMPONENTS.md new file mode 100644 index 0000000..d6fa687 --- /dev/null +++ b/docs/COMPONENTS.md @@ -0,0 +1,457 @@ +# 🧩 Документация по компонентам Space SQL + +## Обзор + +Этот документ описывает все компоненты, используемые в приложении Space SQL, их API, примеры использования и лучшие практики. + +## 🎨 UI Компоненты + +### Button + +Универсальная кнопка с космической тематикой и анимациями. + +#### Props + +| Prop | Тип | По умолчанию | Описание | +|------|-----|--------------|----------| +| `children` | `ReactNode` | - | Содержимое кнопки | +| `variant` | `'primary' \| 'secondary' \| 'danger' \| 'ghost'` | `'primary'` | Вариант стиля | +| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Размер кнопки | +| `disabled` | `boolean` | `false` | Отключена ли кнопка | +| `loading` | `boolean` | `false` | Показывать ли спиннер загрузки | +| `onClick` | `() => void` | - | Обработчик клика | +| `type` | `'button' \| 'submit' \| 'reset'` | `'button'` | Тип кнопки | + +#### Примеры использования + +```jsx +import { Button } from './components/ui'; + +// Основная кнопка + + +// Кнопка с загрузкой + + +// Кнопка-призрак + +``` + +### Card + +Карточка с эффектами hover и glow для отображения контента. + +#### Props + +| Prop | Тип | По умолчанию | Описание | +|------|-----|--------------|----------| +| `children` | `ReactNode` | - | Содержимое карточки | +| `hover` | `boolean` | `true` | Включить hover эффекты | +| `glow` | `boolean` | `false` | Добавить эффект свечения | +| `onClick` | `() => void` | - | Обработчик клика | +| `className` | `string` | `''` | Дополнительные CSS классы | + +#### Примеры использования + +```jsx +import { Card } from './components/ui'; + +// Простая карточка + +

Заголовок

+

Описание карточки

+ + +// Интерактивная карточка с эффектами + +
+

Кликабельная карточка

+
+ + +// Карточка урока + +
+
+

Урок 1: Основы SQL

+

Изучите основы языка запросов

+
+ +
+ +``` + +### Input + +Поле ввода с анимированными лейблами и валидацией. + +#### Props + +| Prop | Тип | По умолчанию | Описание | +|------|-----|--------------|----------| +| `label` | `string` | - | Лейбл поля | +| `type` | `string` | `'text'` | Тип input | +| `value` | `string` | - | Значение | +| `onChange` | `(e: ChangeEvent) => void` | - | Обработчик изменения | +| `placeholder` | `string` | - | Плейсхолдер | +| `error` | `string` | - | Текст ошибки | +| `disabled` | `boolean` | `false` | Отключено ли поле | +| `required` | `boolean` | `false` | Обязательное ли поле | + +#### Примеры использования + +```jsx +import { Input } from './components/ui'; + +// Простое поле + setEmail(e.target.value)} + required +/> + +// Поле с ошибкой + setPassword(e.target.value)} + error={passwordError} + required +/> + +// Отключенное поле + +``` + +### Loading + +Компонент загрузки с космическим спиннером. + +#### Props + +| Prop | Тип | По умолчанию | Описание | +|------|-----|--------------|----------| +| `message` | `string` | `'Загрузка...'` | Текст сообщения | +| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Размер спиннера | +| `className` | `string` | `''` | Дополнительные CSS классы | + +#### Примеры использования + +```jsx +import { Loading } from './components/ui'; + +// Простая загрузка + + +// Кастомное сообщение + + +// Встроенная загрузка +
+ +
+``` + +## 🏗 Layout Компоненты + +### CosmicNavigation + +Главная навигация приложения с поддержкой мобильных устройств. + +#### Особенности +- Адаптивный дизайн +- Интеграция с системой аутентификации +- Анимированные переходы +- Мобильное меню + +#### Примеры использования + +```jsx +import CosmicNavigation from './components/layout/CosmicNavigation'; + +// Использование в App.js + +``` + +### StarBackground + +Анимированный звездный фон с параллакс эффектами. + +#### Props + +| Prop | Тип | По умолчанию | Описание | +|------|-----|--------------|----------| +| `children` | `ReactNode` | - | Дочерние элементы | +| `isMainPage` | `boolean` | `true` | Главная страница или нет | + +#### Примеры использования + +```jsx +import StarBackground from './components/StarBackground'; + +// Для главной страницы + + + + +// Для внутренних страниц + + + +``` + +## 📄 Page Компоненты + +### Home + +Главная страница с hero секцией. + +#### Особенности +- Анимированное появление контента +- Адаптивный дизайн +- Интеграция с аутентификацией + +### Login/Register + +Страницы аутентификации с космическими формами. + +#### Особенности +- Анимированные формы +- Валидация в реальном времени +- Обработка ошибок + +### Lessons + +Страница со списком уроков. + +#### Особенности +- Сетка уроков с анимациями +- Состояния загрузки и ошибок +- Фильтрация и поиск + +### Practice + +Страница с практическими заданиями. + +#### Особенности +- Интерактивный SQL редактор +- Проверка запросов +- Система подсказок + +## 🎭 Анимационные паттерны + +### Page Transitions + +```jsx +const PageTransition = ({ children }) => ( + + {children} + +); +``` + +### Stagger Children + +```jsx +const containerVariants = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { + staggerChildren: 0.1 + } + } +}; + +const itemVariants = { + hidden: { opacity: 0, y: 30 }, + visible: { + opacity: 1, + y: 0, + transition: { duration: 0.5 } + } +}; +``` + +### Hover Effects + +```jsx +const hoverVariants = { + hover: { + scale: 1.05, + y: -5, + transition: { type: 'spring', stiffness: 300 } + } +}; +``` + +## 🔧 Utility Компоненты + +### ProtectedRoute + +Компонент для защиты приватных роутов. + +```jsx +import ProtectedRoute from './components/common/ProtectedRoute'; + + + + +``` + +## 🎨 Стилевые компоненты + +### CSS Utility классы + +```css +/* Кнопки */ +.cosmic-button +.cosmic-button:hover + +/* Карточки */ +.cosmic-card +.cosmic-card:hover + +/* Инпуты */ +.cosmic-input +.cosmic-input:focus + +/* Текст */ +.cosmic-title +.glow-text + +/* Анимации */ +.animate-float +.animate-twinkle +.loading-spinner +``` + +## 📱 Адаптивность + +### Рекомендации по использованию + +```jsx +// Адаптивные сетки +
+ +// Адаптивный текст +

+ +// Скрытие на мобильных +
+ +// Показ только на мобильных +
+``` + +## 🧪 Тестирование компонентов + +### Примеры тестов + +```jsx +import { render, screen, fireEvent } from '@testing-library/react'; +import { Button } from './components/ui'; + +test('кнопка отображается с правильным текстом', () => { + render(); + expect(screen.getByText('Тест')).toBeInTheDocument(); +}); + +test('кнопка вызывает onClick при клике', () => { + const handleClick = jest.fn(); + render(); + + fireEvent.click(screen.getByText('Клик')); + expect(handleClick).toHaveBeenCalledTimes(1); +}); +``` + +## 🚀 Производительность + +### Оптимизация компонентов + +```jsx +import React, { memo, useMemo, useCallback } from 'react'; + +// Мемоизация компонента +const ExpensiveComponent = memo(({ data }) => { + const processedData = useMemo(() => { + return data.map(item => ({ ...item, processed: true })); + }, [data]); + + return
{/* рендер */}
; +}); + +// Мемоизация колбэков +const ParentComponent = () => { + const handleClick = useCallback(() => { + // обработка клика + }, []); + + return ; +}; +``` + +## 🎯 Лучшие практики + +### Создание новых компонентов + +1. **Структура файла:** +```jsx +import React from 'react'; +import { motion } from 'framer-motion'; + +const MyComponent = ({ prop1, prop2, ...props }) => { + // логика компонента + + return ( + + {/* JSX */} + + ); +}; + +export default MyComponent; +``` + +2. **PropTypes или TypeScript:** +```jsx +import PropTypes from 'prop-types'; + +MyComponent.propTypes = { + prop1: PropTypes.string.isRequired, + prop2: PropTypes.number +}; +``` + +3. **Стилизация:** +- Используйте Tailwind классы +- Следуйте космической цветовой схеме +- Добавляйте hover эффекты + +4. **Анимации:** +- Используйте Framer Motion +- Применяйте consistent timing +- Тестируйте на мобильных + +--- + +*Документация обновляется по мере добавления новых компонентов* diff --git a/docs/DESIGN_SYSTEM.md b/docs/DESIGN_SYSTEM.md new file mode 100644 index 0000000..235eda9 --- /dev/null +++ b/docs/DESIGN_SYSTEM.md @@ -0,0 +1,539 @@ +# 🎨 Space SQL Design System + +## Обзор + +Space SQL использует кастомную дизайн-систему с космической тематикой, построенную на основе Tailwind CSS и дополненную уникальными компонентами и анимациями. + +## 🌌 Философия дизайна + +### Принципы +- **Космическая тематика** - все элементы вдохновлены космосом +- **Плавные анимации** - создание ощущения невесомости +- **Интуитивность** - простота использования несмотря на сложную тематику +- **Консистентность** - единообразие во всех компонентах + +### Целевая аудитория +- Разработчики, изучающие SQL +- Студенты компьютерных наук +- Энтузиасты космической тематики + +## 🎨 Цветовая палитра + +### Основные цвета + +```css +/* Космический фон */ +--space-dark: #0d0221 /* Глубокий космос */ +--space-purple: #2d0b59 /* Темно-фиолетовый */ +--space-deep: #0f0c29 /* Космическая глубина */ +--space-medium: #302b63 /* Средний космос */ +--space-light: #24243e /* Светлый космос */ +``` + +### Акцентные цвета + +```css +/* Неоновые акценты */ +--cosmic-blue: #2de2e6 /* Электрический голубой */ +--cosmic-purple: #8a2be2 /* Магический фиолетовый */ +--cosmic-pink: #ff2e88 /* Космический розовый */ +--cosmic-green: #00ff9d /* Матричный зеленый */ +--cosmic-cyan: #00aaff /* Киберпанк голубой */ +--cosmic-magenta: #ff00ff /* Неоновый пурпур */ +``` + +### Текстовые цвета + +```css +--starlight: #ffffff /* Звездный белый */ +--text-muted: #b8b8b8 /* Приглушенный текст */ +``` + +### Использование в Tailwind + +```jsx +// Фоны +
+
+ +// Текст +

+

+ +// Границы +

+``` + +## 🎭 Градиенты + +### Основные градиенты + +```css +/* Космические градиенты */ +--cosmic-gradient: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%); +--cosmic-purple-gradient: linear-gradient(90deg, #8a2be2, #00ff9d); +--cosmic-blue-gradient: linear-gradient(45deg, #2de2e6, #8a2be2); +--space-dark-gradient: linear-gradient(135deg, #0a081a 0%, #201d47 50%, #18182f 100%); +``` + +### Применение + +```jsx +// Кнопки + + +// Secondary - вторичная кнопка + + +// Danger - кнопка удаления/отмены + + +// Ghost - прозрачная кнопка + +``` + +#### Размеры + +```jsx +// Small + + +// Medium (по умолчанию) + + +// Large + +``` + +### Карточки + +```jsx +// Базовая карточка +
+

Заголовок

+

Содержимое

+
+ +// Интерактивная карточка +
+

Кликабельная карточка

+
+ +// Карточка с эффектом свечения +
+

Светящаяся карточка

+
+``` + +### Поля ввода + +```jsx +// Базовое поле + + +// Поле с ошибкой + + +// Поле с фокусом + +``` + +## ✨ Эффекты и анимации + +### Эффекты свечения + +```css +/* Текст с эффектом свечения */ +.glow-text { + text-shadow: 0 0 10px currentColor, 0 0 20px currentColor; +} + +/* Тень с эффектом свечения */ +.shadow-cosmic { + box-shadow: 0 0 20px rgba(138, 43, 226, 0.5); +} + +.shadow-cosmic-lg { + box-shadow: 0 0 30px rgba(138, 43, 226, 0.7); +} +``` + +### Анимации + +```css +/* Плавание */ +@keyframes float { + 0% { transform: translatey(0px); } + 50% { transform: translatey(-10px); } + 100% { transform: translatey(0px); } +} + +.animate-float { + animation: float 6s ease-in-out infinite; +} + +/* Мерцание звезд */ +@keyframes twinkle { + 0% { opacity: 0.3; } + 100% { opacity: 1; } +} + +.animate-twinkle { + animation: twinkle 3s infinite alternate; +} + +/* Пульсация свечения */ +@keyframes glow-pulse { + 0%, 100% { box-shadow: 0 0 10px rgba(138, 43, 226, 0.5); } + 50% { box-shadow: 0 0 20px rgba(138, 43, 226, 0.8); } +} + +.animate-glow-pulse { + animation: glow-pulse 2s infinite; +} +``` + +## 📱 Адаптивность + +### Breakpoints + +```css +/* Tailwind breakpoints */ +sm: 640px /* Мобильные устройства (большие) */ +md: 768px /* Планшеты */ +lg: 1024px /* Ноутбуки */ +xl: 1280px /* Десктопы */ +2xl: 1536px /* Большие экраны */ +``` + +### Адаптивные компоненты + +```jsx +// Адаптивная сетка +
+ +// Адаптивный текст +

+ +// Адаптивные отступы +
+ +// Скрытие/показ на разных экранах +
Только на десктопе
+
Только на мобильных
+``` + +## 🌟 Специальные эффекты + +### Звездный фон + +```jsx +// Компонент StarBackground + +
Контент с звездным фоном
+ +``` + +### Параллакс эффекты + +```jsx +// Элементы с параллаксом +
+ Элемент с увеличением при hover +
+``` + +### Космические частицы + +```jsx +// Анимированные частицы +
+ {[...Array(5)].map((_, i) => ( +
+ ))} +
+``` + +## 🎮 Интерактивные состояния + +### Hover эффекты + +```jsx +// Кнопки + + +// Использование CSS переменных +
+ Элемент с переменной +
+``` + +## 🚀 Производительность + +### Оптимизация анимаций + +```css +/* Оптимизация для анимаций */ +.animate-optimized { + will-change: transform; + backface-visibility: hidden; + transform: translateZ(0); +} +``` + +### Ленивая загрузка эффектов + +```jsx +// Условные анимации +const shouldAnimate = useReducedMotion(); + + + Контент + +``` + +## 📋 Чек-лист для новых компонентов + +- [ ] Использует космическую цветовую палитру +- [ ] Имеет hover эффекты +- [ ] Адаптивен для всех экранов +- [ ] Включает анимации с Framer Motion +- [ ] Следует принципам доступности +- [ ] Оптимизирован для производительности +- [ ] Документирован с примерами + +## 🎯 Лучшие практики + +### Do's ✅ +- Используйте установленные цвета из палитры +- Добавляйте плавные переходы ко всем интерактивным элементам +- Следуйте космической тематике в иконографии +- Тестируйте на всех устройствах +- Используйте семантически правильные HTML теги + +### Don'ts ❌ +- Не используйте цвета вне установленной палитры +- Не создавайте резких переходов без анимаций +- Не забывайте про доступность (контрастность, фокус) +- Не перегружайте анимациями +- Не нарушайте космическую тематику + +--- + +*Дизайн-система создана для покорения космоса через красивый и функциональный интерфейс* ✨ diff --git a/docs/FRONTEND.md b/docs/FRONTEND.md index 9609def..2054a11 100644 --- a/docs/FRONTEND.md +++ b/docs/FRONTEND.md @@ -1,15 +1,29 @@ -# Документация по фронтенду +# 🚀 Space SQL Frontend Documentation ## Обзор -Фронтенд-часть приложения Space SQL представляет собой React-приложение, которое взаимодействует с бэкендом через REST API. +Фронтенд Space SQL — это современное React-приложение с космической тематикой, построенное на принципах единого дизайна и плавных анимаций. Приложение использует кастомную систему дизайна с Tailwind CSS и Framer Motion для создания захватывающего пользовательского опыта. -## Установка и запуск +## 🛠 Технологический стек -### Требования +### Основные технологии +- **React 18** - основной фреймворк +- **React Router Dom 6** - маршрутизация +- **Framer Motion** - анимации и переходы +- **Tailwind CSS** - utility-first CSS фреймворк +- **Axios** - HTTP клиент для API запросов + +### Дизайн система +- **Кастомная космическая тема** с CSS переменными +- **Responsive дизайн** для всех устройств +- **Анимированные компоненты** с Framer Motion +- **Единая типографика** (Orbitron, Press Start 2P, Roboto Mono) + +## 📦 Установка и запуск -- Node.js (рекомендуется версия 16.x или выше) -- npm (идёт в комплекте с Node.js) или Yarn +### Требования +- Node.js 16.x или выше +- npm или yarn ### Установка зависимостей @@ -19,8 +33,6 @@ cd frontend # Устанавливаем зависимости npm install -# или, если используете Yarn -yarn install ``` ### Запуск в режиме разработки @@ -28,57 +40,372 @@ yarn install ```bash # Запускаем фронтенд npm start -# или -yarn start ``` Приложение будет доступно по адресу: [http://localhost:3000](http://localhost:3000) -## Структура проекта +## 🏗 Архитектура проекта + +### Структура файлов ``` frontend/ -├── public/ # Статические файлы +├── public/ # Статические файлы ├── src/ -│ ├── components/ # Переиспользуемые React-компоненты -│ ├── pages/ # Страницы приложения -│ ├── services/ # Сервисы для работы с API -│ ├── styles/ # Глобальные стили -│ ├── App.js # Корневой компонент -│ └── index.js # Точка входа -├── package.json # Зависимости и скрипты -└── README.md # Локальная документация +│ ├── components/ # React компоненты +│ │ ├── ui/ # Базовые UI компоненты +│ │ │ ├── Button.jsx +│ │ │ ├── Card.jsx +│ │ │ ├── Input.jsx +│ │ │ ├── Loading.jsx +│ │ │ └── index.js +│ │ ├── layout/ # Компоненты макета +│ │ │ └── CosmicNavigation.jsx +│ │ ├── common/ # Общие компоненты +│ │ ├── StarBackground.js +│ │ ├── Footer.js +│ │ └── ... +│ ├── pages/ # Страницы приложения +│ │ ├── Home/ +│ │ ├── auth/ +│ │ │ ├── Login.js +│ │ │ └── Register.js +│ │ ├── Lessons/ +│ │ └── Practice/ +│ ├── contexts/ # React контексты +│ │ └── AuthContext.js +│ ├── services/ # API сервисы +│ │ └── authService.js +│ ├── styles/ # Стили +│ │ └── globals.css # Главный файл стилей +│ ├── App.js # Корневой компонент +│ └── index.js # Точка входа +├── tailwind.config.js # Конфигурация Tailwind +└── package.json # Зависимости и скрипты +``` + +## 🎨 Система дизайна + +### Цветовая палитра + +```css +/* Космические цвета */ +--space-dark: #0d0221 /* Основной фон */ +--space-purple: #2d0b59 /* Темно-фиолетовый */ +--space-deep: #0f0c29 /* Глубокий космос */ + +/* Акцентные цвета */ +--cosmic-blue: #2de2e6 /* Космический голубой */ +--cosmic-purple: #8a2be2 /* Космический фиолетовый */ +--cosmic-green: #00ff9d /* Космический зеленый */ +--cosmic-pink: #ff2e88 /* Космический розовый */ +``` + +### Типографика + +- **Заголовки**: Press Start 2P (космический пиксельный шрифт) +- **Основной текст**: Roboto Mono (моноширинный) +- **UI элементы**: Orbitron (футуристический) + +### Utility классы + +```css +/* Кнопки */ +.cosmic-button /* Основная космическая кнопка */ + +/* Карточки */ +.cosmic-card /* Базовая карточка с эффектами */ + +/* Инпуты */ +.cosmic-input /* Стилизованное поле ввода */ + +/* Заголовки */ +.cosmic-title /* Анимированный заголовок */ + +/* Эффекты */ +.glow-text /* Текст с эффектом свечения */ +.animate-float /* Анимация плавания */ +``` + +## 🧩 UI Компоненты + +### Button +Универсальная кнопка с различными вариантами: + +```jsx +import { Button } from './components/ui'; + + + +// Варианты: primary, secondary, danger, ghost +// Размеры: small, medium, large +``` + +### Card +Карточка с hover эффектами: + +```jsx +import { Card } from './components/ui'; + + +

Заголовок

+

Содержимое карточки

+ +``` + +### Input +Поле ввода с анимированными лейблами: + +```jsx +import { Input } from './components/ui'; + + setEmail(e.target.value)} + error={errorMessage} +/> ``` -## Настройка окружения +### Loading +Космический спиннер загрузки: -Создайте файл `.env` в корне фронтенд-проекта и настройте переменные окружения: +```jsx +import { Loading } from './components/ui'; + + +``` + +## 🎭 Анимации + +### Page Transitions +Плавные переходы между страницами: + +```jsx +import { motion, AnimatePresence } from 'framer-motion'; + + + + {children} + + +``` + +### Stagger Animations +Последовательные анимации для списков: + +```jsx +const containerVariants = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { staggerChildren: 0.1 } + } +}; + +const itemVariants = { + hidden: { opacity: 0, y: 30 }, + visible: { opacity: 1, y: 0 } +}; +``` + +## 🛣 Маршрутизация + +### Структура роутов + +```jsx + + } /> + } /> + } /> + + {/* Защищенные роуты */} + + + + } /> + + + + } /> + + + + } /> + +``` + +## 🔐 Аутентификация + +### AuthContext +Глобальное состояние аутентификации: + +```jsx +import { useAuth } from './contexts/AuthContext'; + +const { currentUser, login, logout, isLoading } = useAuth(); + +// Вход в систему +await login(email, password); + +// Выход +logout(); + +// Проверка авторизации +if (currentUser) { + // Пользователь авторизован +} +``` + +### ProtectedRoute +Компонент для защиты приватных страниц: + +```jsx + + + +``` + +## 📱 Адаптивность + +### Breakpoints (Tailwind CSS) + +```css +sm: 640px /* Планшеты */ +md: 768px /* Небольшие ноутбуки */ +lg: 1024px /* Десктопы */ +xl: 1280px /* Большие экраны */ +2xl: 1536px /* Очень большие экраны */ +``` + +### Примеры использования + +```jsx +
+ {/* Адаптивная сетка */} +
+ +

+ {/* Адаптивный размер текста */} +

+``` + +## 🔧 Конфигурация + +### Tailwind Config +Кастомная конфигурация в `tailwind.config.js`: + +```js +module.exports = { + theme: { + extend: { + colors: { + space: { /* космические цвета */ }, + cosmic: { /* акцентные цвета */ } + }, + fontFamily: { + 'cosmic': ['"Press Start 2P"', 'cursive'], + 'space': ['"Orbitron"', 'sans-serif'] + }, + animation: { + 'float': 'float 6s ease-in-out infinite', + 'twinkle': 'twinkle 3s infinite alternate' + } + } + } +} +``` + +### Environment Variables ```env -REACT_APP_API_URL=http://localhost:8080/api # URL бэкенд-сервера -REACT_APP_GH_CLIENT_ID=your_github_client_id # ID приложения GitHub OAuth (если используется) +REACT_APP_API_URL=http://localhost:8080/api ``` -## Доступные скрипты +## 📚 Доступные скрипты -- `npm start` - Запуск приложения в режиме разработки -- `npm test` - Запуск тестов -- `npm run build` - Сборка для продакшена -- `npm run eject` - Извлечение конфигурации (необратимо) +```bash +npm start # Запуск в режиме разработки +npm test # Запуск тестов +npm run build # Сборка для продакшена +npm run eject # Извлечение конфигурации (необратимо) +``` -## Деплой +## 🚀 Деплой -Для деплоя собранной версии приложения выполните: +### Сборка для продакшена ```bash # Сборка приложения npm run build -# Собранное приложение будет доступно в папке build/ +# Собранное приложение будет в папке build/ ``` -## Дополнительная информация +### Рекомендации для деплоя +- Настройте правильные переменные окружения +- Убедитесь, что все статические файлы доступны +- Настройте fallback для SPA роутинга + +## 🎯 Лучшие практики + +### Компоненты +- Используйте функциональные компоненты с хуками +- Выносите логику в кастомные хуки +- Применяйте мемоизацию для оптимизации + +### Стили +- Используйте Tailwind utility классы +- Создавайте переиспользуемые компоненты +- Следуйте космической цветовой схеме + +### Анимации +- Используйте Framer Motion для сложных анимаций +- Применяйте `will-change` для оптимизации +- Тестируйте производительность на мобильных + +## 🐛 Отладка + +### Полезные инструменты +- React Developer Tools +- Redux DevTools (если используется) +- Framer Motion DevTools + +### Логирование +```js +console.log('Debug info:', data); +// В продакшене используйте более продвинутые решения +``` + +## 📖 Дополнительные ресурсы + +- [React Documentation](https://reactjs.org/) +- [Tailwind CSS](https://tailwindcss.com/) +- [Framer Motion](https://www.framer.com/motion/) +- [React Router](https://reactrouter.com/) + +## 🤝 Вклад в проект + +При добавлении новых компонентов: +1. Следуйте существующей структуре папок +2. Используйте космическую тематику +3. Добавляйте анимации с Framer Motion +4. Тестируйте на всех устройствах +5. Обновляйте документацию + +--- -- [Документация React](https://reactjs.org/) -- [Создание React-приложения](https://create-react-app.dev/) -- [Руководство по стилю](https://github.com/airbnb/javascript/tree/master/react) +*Создано с ❤️* \ No newline at end of file diff --git a/docs/README.md b/docs/README.md index 03b4f53..3dcd314 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,56 +1,229 @@ # 📚 Документация Space SQL -## 🚀 Быстрый старт - -- [Установка и настройка](./guides/installation.md) -- [Запуск приложения](./guides/running.md) -- [Настройка окружения](./guides/environment.md) - -## 📖 Руководства - -- [Руководство по фронтенду](./FRONTEND.md) -- [Руководство по бэкенду](./guides/backend.md) -- [Работа с API](./api/README.md) -- [Разработка и вклад в проект](./development/CONTRIBUTING.md) - -## 🏗 Архитектура - -- [Обзор архитектуры](./architecture/overview.md) -- [Схема базы данных](./architecture/database.md) -- [Безопасность](./architecture/security.md) - -## 🔍 API Документация - -- [Спецификация API](./api/SPECIFICATION.md) -- [Аутентификация](./api/authentication.md) -- [Уроки и задания](./api/lessons.md) -- [Пользователи](./api/users.md) - -## 🛠 Разработка - -- [Настройка окружения разработки](./development/setup.md) -- [Руководство по стилю кода](./development/code-style.md) -- [Тестирование](./development/testing.md) -- [Развертывание](./development/deployment.md) - -## 📋 Требования - -- Node.js 16+ -- npm 8+ -- Java 17+ -- Maven 3.8+ -- PostgreSQL 14+ - -## 🤝 Участие - -Вклад приветствуется! Пожалуйста, прочитайте [руководство по участию](./development/CONTRIBUTING.md) для получения подробной информации о процессе отправки запросов на включение. - -## 📄 Лицензия - -Этот проект лицензирован в соответствии с лицензией MIT - подробности см. в файле [LICENSE](../LICENSE). +Добро пожаловать в документацию проекта Space SQL - интерактивной платформы для изучения SQL с космической тематикой! + +## 🗂️ Структура документации + +### 🎨 Frontend +- [**📚 Фронтенд**](FRONTEND.md) - Полная документация по React приложению +- [**🧩 Компоненты**](COMPONENTS.md) - Описание всех UI компонентов и их API +- [**🎨 Дизайн-система**](DESIGN_SYSTEM.md) - Космическая дизайн-система, цвета, типографика и стили + +### 🔧 Backend & API +- [**📡 API Спецификация**](api/SPECIFICATION.md) - REST API endpoints и схемы данных +- [**🗄️ База данных**](architecture/database.md) - Схема БД и архитектурные решения + +## 🚀 Быстрые ссылки + +### Для разработчиков +- [Установка и настройка](FRONTEND.md#установка-и-запуск) +- [Создание новых компонентов](COMPONENTS.md#лучшие-практики) +- [Использование дизайн-системы](DESIGN_SYSTEM.md#utility-классы) + +### Для дизайнеров +- [Цветовая палитра](DESIGN_SYSTEM.md#цветовая-палитра) +- [Типографика](DESIGN_SYSTEM.md#типографика) +- [Анимации и эффекты](DESIGN_SYSTEM.md#эффекты-и-анимации) + +### Для QA +- [Тестирование компонентов](COMPONENTS.md#тестирование-компонентов) +- [Адаптивность](DESIGN_SYSTEM.md#адаптивность) + +## 🎯 Архитектура проекта + +### Frontend Architecture + +```mermaid +graph TD + A[React App] --> B[React Router] + A --> C[Framer Motion] + A --> D[Tailwind CSS] + + B --> E[Home Page] + B --> F[Auth Pages] + B --> G[Lessons Page] + B --> H[Practice Page] + + I[UI Components] --> J[Button] + I --> K[Card] + I --> L[Input] + I --> M[Loading] + + N[Design System] --> O[Colors] + N --> P[Typography] + N --> Q[Animations] + N --> R[Spacing] +``` + +### Backend Architecture + +```mermaid +graph TD + A[Spring Boot App] --> B[Controllers] + A --> C[Services] + A --> D[Repositories] + A --> E[Security] + + B --> F[Auth Controller] + B --> G[Lesson Controller] + B --> H[Query Controller] + + C --> I[Auth Service] + C --> J[Lesson Service] + C --> K[Query Service] + + D --> L[User Repository] + D --> M[Lesson Repository] + D --> N[Task Repository] + + E --> O[JWT Filter] + E --> P[Security Config] +``` + +## 🛠️ Технологический стек + +### Frontend Technologies + +| Технология | Версия | Назначение | +|------------|--------|------------| +| **React** | 18.x | Основной фреймворк | +| **React Router** | 6.x | Маршрутизация | +| **Framer Motion** | 10.x | Анимации | +| **Tailwind CSS** | 3.x | Стили | +| **Axios** | 1.x | HTTP клиент | + +### Backend Technologies + +| Технология | Версия | Назначение | +|------------|--------|------------| +| **Java** | 17+ | Язык программирования | +| **Spring Boot** | 3.x | Основной фреймворк | +| **Spring Security** | 6.x | Безопасность | +| **PostgreSQL** | 13+ | База данных | +| **Liquibase** | 4.x | Миграции БД | + +## 🎨 Дизайн-принципы + +### 🌌 Космическая тематика +- Темные фоны с градиентами +- Неоновые акценты и свечения +- Анимированные звезды и частицы +- Футуристическая типографика + +### 🎭 Анимации +- Плавные переходы между страницами +- Hover эффекты для интерактивности +- Stagger анимации для списков +- Микроанимации для обратной связи + +### 📱 Адаптивность +- Mobile-first подход +- Breakpoints для всех устройств +- Гибкие сетки и компоненты +- Оптимизация для касаний + +## 🔧 Инструменты разработки + +### Рекомендуемые расширения VS Code +```json +{ + "recommendations": [ + "bradlc.vscode-tailwindcss", + "esbenp.prettier-vscode", + "ms-vscode.vscode-typescript-next", + "formulahendry.auto-rename-tag", + "christian-kohler.path-intellisense" + ] +} +``` + +### Настройка Prettier +```json +{ + "semi": true, + "trailingComma": "es5", + "singleQuote": true, + "printWidth": 80, + "tabWidth": 2 +} +``` + +## 📋 Чек-листы + +### ✅ Создание нового компонента +- [ ] Создать файл компонента в правильной папке +- [ ] Использовать TypeScript или PropTypes +- [ ] Добавить анимации с Framer Motion +- [ ] Следовать дизайн-системе +- [ ] Сделать адаптивным +- [ ] Добавить в индексный файл +- [ ] Написать документацию +- [ ] Добавить тесты + +### ✅ Создание новой страницы +- [ ] Создать компонент страницы +- [ ] Добавить роут в App.js +- [ ] Настроить защиту (если нужно) +- [ ] Добавить анимации переходов +- [ ] Протестировать на всех устройствах +- [ ] Добавить в навигацию +- [ ] Обновить документацию + +## 🐛 Отладка + +### Частые проблемы + +**Анимации не работают:** +- Проверьте импорт Framer Motion +- Убедитесь в правильности variants +- Проверьте initial/animate props + +**Стили не применяются:** +- Проверьте правильность Tailwind классов +- Убедитесь в сборке CSS +- Проверьте конфигурацию Tailwind + +**API не отвечает:** +- Проверьте CORS настройки +- Убедитесь в правильности endpoints +- Проверьте аутентификацию + +### Полезные команды + +```bash +# Проверка линтера +npm run lint + +# Форматирование кода +npm run format + +# Анализ bundle +npm run analyze + +# Проверка типов +npm run type-check +``` + +## 🤝 Вклад в документацию + +Документация - это живой документ, который развивается вместе с проектом. + +### Как улучшить документацию: +1. Найдите неточность или пробел +2. Создайте issue с описанием проблемы +3. Предложите исправление через PR +4. Следуйте стилю существующей документации + +### Стиль документации: +- Используйте эмодзи для визуального разделения +- Добавляйте примеры кода +- Создавайте диаграммы для сложных концепций +- Пишите понятно и структурированно ---
-

Создано с ❤️ командой Space SQL

-
+

Документация создана с ❤️ для покорения космоса через изучение SQL

+ + **[⬆️ Вернуться к началу](#-документация-space-sql)** +
\ No newline at end of file diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 2dba0cb..fd2e430 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,14 +10,20 @@ "dependencies": { "@splinetool/react-spline": "latest", "axios": "^1.11.0", - "bootstrap": "^5.3.2", "framer-motion": "^10.18.0", "react": "^18.2.0", - "react-bootstrap": "^2.9.1", "react-dom": "^18.2.0", "react-router-dom": "^6.14.2", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" + }, + "devDependencies": { + "@types/react": "^19.1.9", + "@types/react-dom": "^19.1.7", + "autoprefixer": "^10.4.21", + "postcss": "^8.5.6", + "tailwindcss": "^3.4.17", + "typescript": "^5.9.2" } }, "node_modules/@alloc/quick-lru": { @@ -3100,31 +3106,6 @@ } } }, - "node_modules/@popperjs/core": { - "version": "2.11.8", - "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", - "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", - "license": "MIT", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/popperjs" - } - }, - "node_modules/@react-aria/ssr": { - "version": "3.9.10", - "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.10.tgz", - "integrity": "sha512-hvTm77Pf+pMBhuBm760Li0BVIO38jv1IBws1xFm1NoL26PU+fe+FMW5+VZWyANR6nYL65joaJKZqOdTQMkO9IQ==", - "license": "Apache-2.0", - "dependencies": { - "@swc/helpers": "^0.5.0" - }, - "engines": { - "node": ">= 12" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" - } - }, "node_modules/@remix-run/router": { "version": "1.23.0", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz", @@ -3134,60 +3115,6 @@ "node": ">=14.0.0" } }, - "node_modules/@restart/hooks": { - "version": "0.4.16", - "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz", - "integrity": "sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==", - "license": "MIT", - "dependencies": { - "dequal": "^2.0.3" - }, - "peerDependencies": { - "react": ">=16.8.0" - } - }, - "node_modules/@restart/ui": { - "version": "1.9.4", - "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.9.4.tgz", - "integrity": "sha512-N4C7haUc3vn4LTwVUPlkJN8Ach/+yIMvRuTVIhjilNHqegY60SGLrzud6errOMNJwSnmYFnt1J0H/k8FE3A4KA==", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.26.0", - "@popperjs/core": "^2.11.8", - "@react-aria/ssr": "^3.5.0", - "@restart/hooks": "^0.5.0", - "@types/warning": "^3.0.3", - "dequal": "^2.0.3", - "dom-helpers": "^5.2.0", - "uncontrollable": "^8.0.4", - "warning": "^4.0.3" - }, - "peerDependencies": { - "react": ">=16.14.0", - "react-dom": ">=16.14.0" - } - }, - "node_modules/@restart/ui/node_modules/@restart/hooks": { - "version": "0.5.1", - "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.5.1.tgz", - "integrity": "sha512-EMoH04NHS1pbn07iLTjIjgttuqb7qu4+/EyhAx27MHpoENcB2ZdSsLTNxmKD+WEPnZigo62Qc8zjGnNxoSE/5Q==", - "license": "MIT", - "dependencies": { - "dequal": "^2.0.3" - }, - "peerDependencies": { - "react": ">=16.8.0" - } - }, - "node_modules/@restart/ui/node_modules/uncontrollable": { - "version": "8.0.4", - "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz", - "integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==", - "license": "MIT", - "peerDependencies": { - "react": ">=16.14.0" - } - }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -3568,15 +3495,6 @@ "url": "https://github.com/sponsors/gregberge" } }, - "node_modules/@swc/helpers": { - "version": "0.5.17", - "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.17.tgz", - "integrity": "sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==", - "license": "Apache-2.0", - "dependencies": { - "tslib": "^2.8.0" - } - }, "node_modules/@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", @@ -3860,18 +3778,20 @@ "version": "19.1.9", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.9.tgz", "integrity": "sha512-WmdoynAX8Stew/36uTSVMcLJJ1KRh6L3IZRx1PZ7qJtBqT3dYTgyDTx8H1qoRghErydW7xw9mSJ3wS//tCRpFA==", + "dev": true, "license": "MIT", "dependencies": { "csstype": "^3.0.2" } }, - "node_modules/@types/react-transition-group": { - "version": "4.4.12", - "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz", - "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==", + "node_modules/@types/react-dom": { + "version": "19.1.7", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.7.tgz", + "integrity": "sha512-i5ZzwYpqjmrKenzkoLM2Ibzt6mAsM7pxB6BCIouEVVmgiqaMj1TjaK7hnA36hbW5aZv20kx7Lw6hWzPWg0Rurw==", + "dev": true, "license": "MIT", "peerDependencies": { - "@types/react": "*" + "@types/react": "^19.0.0" } }, "node_modules/@types/resolve": { @@ -3946,12 +3866,6 @@ "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==", "license": "MIT" }, - "node_modules/@types/warning": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz", - "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q==", - "license": "MIT" - }, "node_modules/@types/ws": { "version": "8.18.1", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz", @@ -5364,25 +5278,6 @@ "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", "license": "ISC" }, - "node_modules/bootstrap": { - "version": "5.3.2", - "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz", - "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/twbs" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/bootstrap" - } - ], - "license": "MIT", - "peerDependencies": { - "@popperjs/core": "^2.11.8" - } - }, "node_modules/brace-expansion": { "version": "1.1.12", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz", @@ -5704,12 +5599,6 @@ "integrity": "sha512-9z8TZaGM1pfswYeXrUpzPrkx8UnWYdhJclsiYMm6x/w5+nN+8Tf/LnAgfLGQCm59qAOxU8WwHEq2vNwF6i4j+Q==", "license": "MIT" }, - "node_modules/classnames": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", - "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==", - "license": "MIT" - }, "node_modules/clean-css": { "version": "5.3.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz", @@ -6470,6 +6359,7 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", + "dev": true, "license": "MIT" }, "node_modules/damerau-levenshtein": { @@ -6660,15 +6550,6 @@ "node": ">= 0.8" } }, - "node_modules/dequal": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", - "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", - "license": "MIT", - "engines": { - "node": ">=6" - } - }, "node_modules/destroy": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", @@ -6792,16 +6673,6 @@ "utila": "~0.4" } }, - "node_modules/dom-helpers": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", - "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.8.7", - "csstype": "^3.0.2" - } - }, "node_modules/dom-serializer": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", @@ -9398,15 +9269,6 @@ "node": ">= 0.4" } }, - "node_modules/invariant": { - "version": "2.2.4", - "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", - "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", - "license": "MIT", - "dependencies": { - "loose-envify": "^1.0.0" - } - }, "node_modules/ipaddr.js": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz", @@ -12342,9 +12204,9 @@ } }, "node_modules/postcss": { - "version": "8.5.5", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.5.tgz", - "integrity": "sha512-d/jtm+rdNT8tpXuHY5MMtcbJFBkhXE6593XVR9UoGCH8jSFGci7jGvMGH5RYd5PBJW+00NZQt6gf7CbagJCrhg==", + "version": "8.5.6", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz", + "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==", "funding": [ { "type": "opencollective", @@ -12875,9 +12737,9 @@ } }, "node_modules/postcss-load-config/node_modules/yaml": { - "version": "2.8.0", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz", - "integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==", + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz", + "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==", "license": "ISC", "bin": { "yaml": "bin.mjs" @@ -13746,25 +13608,6 @@ "react-is": "^16.13.1" } }, - "node_modules/prop-types-extra": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz", - "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==", - "license": "MIT", - "dependencies": { - "react-is": "^16.3.2", - "warning": "^4.0.0" - }, - "peerDependencies": { - "react": ">=0.14.0" - } - }, - "node_modules/prop-types-extra/node_modules/react-is": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "license": "MIT" - }, "node_modules/prop-types/node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -13955,36 +13798,6 @@ "node": ">=14" } }, - "node_modules/react-bootstrap": { - "version": "2.9.1", - "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.9.1.tgz", - "integrity": "sha512-ezgmh/ARCYp18LbZEqPp0ppvy+ytCmycDORqc8vXSKYV3cer4VH7OReV8uMOoKXmYzivJTxgzGHalGrHamryHA==", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.22.5", - "@restart/hooks": "^0.4.9", - "@restart/ui": "^1.6.6", - "@types/react-transition-group": "^4.4.6", - "classnames": "^2.3.2", - "dom-helpers": "^5.2.1", - "invariant": "^2.2.4", - "prop-types": "^15.8.1", - "prop-types-extra": "^1.1.0", - "react-transition-group": "^4.4.5", - "uncontrollable": "^7.2.1", - "warning": "^4.0.3" - }, - "peerDependencies": { - "@types/react": ">=16.14.8", - "react": ">=16.14.0", - "react-dom": ">=16.14.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -14115,12 +13928,6 @@ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "license": "MIT" }, - "node_modules/react-lifecycles-compat": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", - "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==", - "license": "MIT" - }, "node_modules/react-merge-refs": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/react-merge-refs/-/react-merge-refs-2.1.1.tgz", @@ -14245,22 +14052,6 @@ } } }, - "node_modules/react-transition-group": { - "version": "4.4.5", - "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", - "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", - "license": "BSD-3-Clause", - "dependencies": { - "@babel/runtime": "^7.5.5", - "dom-helpers": "^5.0.1", - "loose-envify": "^1.4.0", - "prop-types": "^15.6.2" - }, - "peerDependencies": { - "react": ">=16.6.0", - "react-dom": ">=16.6.0" - } - }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -16606,17 +16397,16 @@ } }, "node_modules/typescript": { - "version": "4.9.5", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", - "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "version": "5.9.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz", + "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==", "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" }, "engines": { - "node": ">=4.2.0" + "node": ">=14.17" } }, "node_modules/unbox-primitive": { @@ -16637,21 +16427,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/uncontrollable": { - "version": "7.2.1", - "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz", - "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.6.3", - "@types/react": ">=16.9.11", - "invariant": "^2.2.4", - "react-lifecycles-compat": "^3.0.4" - }, - "peerDependencies": { - "react": ">=15.0.0" - } - }, "node_modules/underscore": { "version": "1.12.1", "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.12.1.tgz", @@ -16904,15 +16679,6 @@ "makeerror": "1.0.12" } }, - "node_modules/warning": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", - "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", - "license": "MIT", - "dependencies": { - "loose-envify": "^1.0.0" - } - }, "node_modules/watchpack": { "version": "2.4.4", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.4.tgz", diff --git a/frontend/package.json b/frontend/package.json index c06153e..567a557 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -6,10 +6,8 @@ "dependencies": { "@splinetool/react-spline": "latest", "axios": "^1.11.0", - "bootstrap": "^5.3.2", "framer-motion": "^10.18.0", "react": "^18.2.0", - "react-bootstrap": "^2.9.1", "react-dom": "^18.2.0", "react-router-dom": "^6.14.2", "react-scripts": "5.0.1", @@ -36,5 +34,13 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "@types/react": "^19.1.9", + "@types/react-dom": "^19.1.7", + "autoprefixer": "^10.4.21", + "postcss": "^8.5.6", + "tailwindcss": "^3.4.17", + "typescript": "^5.9.2" } } diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js new file mode 100644 index 0000000..72e309d --- /dev/null +++ b/frontend/postcss.config.js @@ -0,0 +1,7 @@ +module.exports = { + plugins: { + '@tailwindcss/postcss': {}, + }, +}; + + diff --git a/frontend/public/index.html b/frontend/public/index.html index d4bbdcd..6af6cae 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -3,8 +3,8 @@ - - Space SQL - Космический тренажер + + DevUniverse diff --git a/frontend/src/App.js b/frontend/src/App.js index e47b3af..f3b02f8 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -1,8 +1,9 @@ import React from 'react'; import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'; +import { motion, AnimatePresence } from 'framer-motion'; import { AuthProvider } from './contexts/AuthContext'; import ProtectedRoute from './components/common/ProtectedRoute'; -import Navigation from './components/layout/Navigation'; +import CosmicNavigation from './components/layout/CosmicNavigation'; import Footer from './components/Footer'; import Home from './pages/Home'; import Lessons from './pages/Lessons'; @@ -11,59 +12,94 @@ import LessonDetails from './components/LessonDetails'; import Login from './pages/auth/Login'; import Register from './pages/auth/Register'; import StarBackground from './components/StarBackground'; -import './styles.css'; -// Обёртка для страниц с тёмным фоном -const DarkLayout = ({ children }) => ( +// Обёртка для страниц с космическим фоном +const CosmicLayout = ({ children }) => ( - -
+ + {children} -
-