MZ DevClass
Platforma do nauki programowania webowego: materiały Markdown z wbudowanym edytorem kodu, zadania HTML/CSS/JS oceniane przez AI i sprawdziany na żywo.
- Rola
- Full-Stack Developer
- Czas trwania
- 3 miesiące
- Wielkość zespołu
- 1
- Rok
- 2026
MZ DevClass to platforma, którą zbudowałem na potrzeby własnych zajęć z programowania aplikacji webowych w technikum. Nauczyciel zarządza klasami i grupami, publikuje materiały w Markdown z uruchamialnymi przykładami HTML/CSS/JS, przypisuje zadania praktyczne z banku zadań i prowadzi sprawdziany w czasie rzeczywistym przez WebSocket.
Uczniowie pracują w edytorze w przeglądarce (CodeMirror 6) z podglądem na żywo i konsolą JS. Przesłane rozwiązania dostają wstępną ocenę z Groq API według kryteriów nauczyciela, a nauczyciel przegląda i zatwierdza każdą ocenę przed publikacją. Logowanie aktywności ucznia daje ślad audytowy podczas sprawdzianów.
Backend to modułowa aplikacja Laravel 12 (nwidart/laravel-modules) z uwierzytelnianiem Sanctum SPA, kolejkami Redis z Horizonem, Laravel Reverb jako serwerem WebSocket, Pulse i Telescope do monitoringu oraz storage zgodnym z S3. Frontend to osobne SPA w Vue 3 z Pinia i Tailwind CSS. Całość działa w Dockerze za tym samym reverse proxy nginx, co to portfolio.
Najważniejsze funkcje
- Zarządzanie klasami, grupami i uczniami z zaproszeniami e-mail
- Materiały Markdown z edytorem "Try it": zakładki HTML, CSS i JS, podgląd na żywo i konsola JS
- Bank 50 zadań w stylu egzaminacyjnym, przypisywanych klasie lub grupie z terminem
- Edytor zadań w przeglądarce, automatyczna blokada po terminie, poprawki za zgodą nauczyciela
- Ocenianie AI (Groq) według kryteriów nauczyciela, z jego zatwierdzeniem przed publikacją
- Sprawdziany w czasie rzeczywistym z losową kolejnością pytań i statusem uczestników przez WebSocket
- Logowanie aktywności ucznia jako ślad audytowy (anti-cheat)
- Osobne panele nauczyciela i ucznia, interfejs PL/EN, tryb ciemny i jasny
- Powiadomienia e-mail i w aplikacji
Wyzwania i rozwiązania
- Przewidywalne ocenianie AI: ustrukturyzowane prompty, limity zapytań i obowiązkowa weryfikacja nauczyciela
- Bezpieczne uruchamianie kodu uczniów (DOMPurify w przeglądarce, HTMLPurifier na backendzie)
- Niezawodne dostarczanie WebSocket dla sprawdzianów przez reverse proxy (Reverb za nginx)
- Podział dużej aplikacji Laravel na niezależne moduły z własną dokumentacją i testami
- Wdrożenie API, serwera WebSocket, workerów kolejek i SPA jako osobnych kontenerów na jednym VPS
Wyniki
- Produkcyjnie pod adresem devclass.michal-ziolek.dev
- Materiały dla dwóch poziomów klas (HTML/CSS i JavaScript) oraz bank 50 zadań egzaminacyjnych
- Wstępna ocena w kilka minut, ostatnie słowo należy do nauczyciela
- Architektura modułowa: 9 modułów Laravel, testy Pest, dokumentacja API w Swaggerze