Інтерактивна платформа навчання

## Опис проекту

Інтерактивна веб-платформа для онлайн-навчання. Додаток надає структуровані навчальні матеріали у форматі модулів та уроків з різними типами контенту: інформаційні блоки, відеоуроки, інтерактивні квізи, відкриті питання та практичні завдання.
Проект частково написаний, важливо довести його до стану MVP у найкоротші терміни (до двох тижнів), проект знаходиться на гітхаб у закритому репозиторії, доступ надам людині, з якою зійдемося по умовах і термінах. Важливе розуміння роботи supabase та Vercel, знання vue js буде перевагою.

## Основні функціональні можливості

- **Система авторизації користувачів** через Supabase

- **Освітній контент** у вигляді модулів та уроків

- **Інтерактивні елементи** для залучення користувачів до навчання

- **Відстеження прогресу** навчання та система винагород

- **Збереження прогресу** в localStorage для продовження навчання

- **Адаптивний дизайн** для різних пристроїв

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

```

app/

├── index.html              # Головна сторінка

├── assets/                 # Статичні ресурси

│   ├── css/                # Стилі

│   │   ├── main.css        # Основні стилі

│   │   ├── components.css  # Стилі компонентів

│   │   └── auth.css        # Стилі для аутентифікації

│   ├── js/                 # JavaScript файли

│   │   ├── app.js          # Основний скрипт додатка

│   │   ├── auth.js         # Логіка аутентифікації

│   │   ├── lessons.js      # Логіка уроків

│   │   └── progress.js     # Відстеження прогресу

│   └── img/                # Зображення

├── components/             # HTML компоненти

│   ├── header.html         # Шапка сайту

│   ├── auth-modals.html    # Модальні вікна аутентифікації

│   └── lesson-modal.html   # Модальне вікно уроку

└── README.md               # Документація проекту

```

## Технології

- **Frontend**: HTML5, CSS3, JavaScript (ES6+)

- **Backend**: Supabase для аутентифікації та зберігання даних

- **Зберігання даних**: LocalStorage для збереження прогресу на пристрої користувача

- **Модульна архітектура** для забезпечення масштабованості додатка

### Етап 1: Розробка базової структури

- Створення каркасу HTML

- Налаштування стилів CSS з використанням змінних та модульного підходу

- Створення компонентів для повторного використання

### Етап 2: Реалізація основних функцій

- Розробка модуля авторизації через Supabase

- Створення модуля для управління уроками та контентом

- Розробка системи відстеження прогресу

### Етап 3: Інтеграція та тестування

- Об'єднання всіх модулів в єдине додаток

- Тестування користувацьких сценаріїв

- Перевірка адаптивності для різних пристроїв

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

- Додавання API для завантаження контенту уроків

- Розширення типів інтерактивних завдань

- Реалізація системи оцінок та зворотного зв'язку