## Opis projektu
Interaktywna platforma internetowa do nauki online. Aplikacja dostarcza zorganizowane materiały edukacyjne w formie modułów i lekcji z różnymi typami treści: bloki informacyjne, wideo, interaktywne quizy, pytania otwarte i zadania praktyczne.
Projekt jest częściowo napisany, ważne jest, aby doprowadzić go do stanu MVP w jak najkrótszym czasie (do dwóch tygodni), projekt znajduje się na GitHubie w zamkniętym repozytorium, dostęp udzielę osobie, z którą się dogadamy co do warunków i terminów. Ważne jest zrozumienie działania Supabase i Vercel, znajomość Vue.js będzie atutem.
## Główne funkcjonalności
- **System autoryzacji użytkowników** przez Supabase
- **Treści edukacyjne** w formie modułów i lekcji
- **Elementy interaktywne** do zaangażowania użytkowników w naukę
- **Śledzenie postępów** nauki i system nagród
- **Zapis postępów** w localStorage do kontynuacji nauki
- **Responsywny design** dla różnych urządzeń
## Struktura projektu
```
app/
├── index.html # Strona główna
├── assets/ # Zasoby statyczne
│ ├── css/ # Style
│ │ ├── main.css # Główne style
│ │ ├── components.css # Style komponentów
│ │ └── auth.css # Style dla autoryzacji
│ ├── js/ # Pliki JavaScript
│ │ ├── app.js # Główny skrypt aplikacji
│ │ ├── auth.js # Logika autoryzacji
│ │ ├── lessons.js # Logika lekcji
│ │ └── progress.js # Śledzenie postępów
│ └── img/ # Obrazy
├── components/ # Komponenty HTML
│ ├── header.html # Nagłówek strony
│ ├── auth-modals.html # Modalne okna autoryzacji
│ └── lesson-modal.html # Modalne okno lekcji
└── README.md # Dokumentacja projektu
```
## Technologie
- **Frontend**: HTML5, CSS3, JavaScript (ES6+)
- **Backend**: Supabase do autoryzacji i przechowywania danych
- **Przechowywanie danych**: LocalStorage do zapisywania postępów na urządzeniu użytkownika
- **Modularna architektura** dla zapewnienia skalowalności aplikacji
### Etap 1: Opracowanie podstawowej struktury
- Tworzenie szkieletu HTML
- Konfiguracja stylów CSS z użyciem zmiennych i podejścia modułowego
- Tworzenie komponentów do ponownego użycia
### Etap 2: Realizacja podstawowych funkcji
- Opracowanie modułu autoryzacji przez Supabase
- Tworzenie modułu do zarządzania lekcjami i treściami
- Opracowanie systemu śledzenia postępów
### Etap 3: Integracja i testowanie
- Połączenie wszystkich modułów w jedną aplikację
- Testowanie scenariuszy użytkowników
- Sprawdzenie responsywności dla różnych urządzeń
## Uruchomienie projektu
- Dodanie API do ładowania treści lekcji
- Rozszerzenie typów interaktywnych zadań
- Wdrożenie systemu ocen i informacji zwrotnej
