MZ DevClass
Teaching platform for web development classes: Markdown materials with a built-in code playground, HTML/CSS/JS assignments graded with AI, and live quizzes.
- Role
- Full-Stack Developer
- Duration
- 3 months
- Team Size
- 1
- Year
- 2026
MZ DevClass is a platform I built for my own web development classes at a technical high school. Teachers manage classes and groups, publish Markdown materials with runnable HTML/CSS/JS examples, assign practical tasks from a task bank and run real-time quizzes over WebSocket.
Students work in an in-browser editor (CodeMirror 6) with a live preview and a JS console. Submissions get a first-pass grade from the Groq API against teacher-defined criteria, and the teacher reviews and approves every grade before it is published. Activity logging on the student side provides an audit trail during exams.
The backend is a modular Laravel 12 application (nwidart/laravel-modules) with Sanctum SPA auth, Redis queues with Horizon, Laravel Reverb for WebSocket, Pulse and Telescope for monitoring and S3-compatible storage. The frontend is a separate Vue 3 SPA with Pinia and Tailwind CSS. Everything runs in Docker behind the same nginx reverse proxy as this portfolio.
Key Features
- Class, group and student management with invitation-based onboarding
- Markdown materials with a "Try it" playground: HTML, CSS and JS tabs, live preview and JS console
- Task bank with 50 exam-style tasks, assignable per class or group with deadlines
- In-browser assignment editor, automatic locking after the deadline, teacher-approved revisions
- AI grading (Groq) against teacher criteria, with teacher review before publishing
- Real-time quizzes with shuffled questions and live participant status over WebSocket
- Student activity logging as an anti-cheat audit trail
- Separate teacher and student panels, PL/EN interface, dark and light theme
- Email and in-app notifications
Challenges and solutions
- Keeping AI grading predictable: structured prompts, rate limiting and a mandatory teacher review step
- Running the code playground safely (DOMPurify in the browser, HTMLPurifier on the backend)
- Reliable WebSocket delivery for quizzes through a reverse proxy (Reverb behind nginx)
- Splitting a large Laravel codebase into independent modules with their own docs and tests
- Deploying the API, WebSocket server, queue workers and SPA as separate containers on one VPS
Results
- In production at devclass.michal-ziolek.dev
- Materials for two class levels (HTML/CSS and JavaScript) and a 50-task exam bank
- First-pass grading in minutes, with the teacher keeping the final say
- Modular architecture: 9 Laravel modules, Pest feature tests, Swagger API docs