Virtual Lab
Explore computer hardware in 3D and learn Python, JavaScript, and SQL through guided lessons and in-browser code execution.
Problem
Learning computer architecture and programming often requires switching between static diagrams, tutorials, and separate development environments. I wanted to create a virtual lab where students could explore hardware, visualize data flow, and practice programming without installing tools.
Prior Art
Many coding platforms emphasize exercises without connecting them to the hardware beneath the software, while hardware tutorials often rely on static illustrations. Virtual Lab brings 3D component exploration, programming lessons, quizzes, and reference material together in one application.
Design Decisions
I chose Next.js 16 and TypeScript for a maintainable application, Three.js with React Three Fiber for interactive 3D hardware, and lazy-loaded browser runtimes for programming exercises. Pyodide runs Python through WebAssembly, sql.js provides SQLite in the browser, and JavaScript exercises use a Function-based runner with captured console output. Zustand manages client state, next-intl supports English and French, and JWT authentication integrates with a separate REST API.
Architecture
Localized Next.js App Router pages organize hardware study, the interactive 3D lab, quizzes, and programming tracks. Reusable React components present lessons and hardware visualizations; Markdown content powers guides and projects. A client-side execution layer supports Python, JavaScript, and SQL. Zustand manages local application state, while a separate REST API handles authentication and persistent progress and leaderboard data.
Reflection
Building Virtual Lab helped me connect interactive graphics, frontend architecture, and multiple browser-based programming environments. Lazy-loading execution engines was important for reducing initial load. I would expand the guided projects and 3D simulations, optimize lower-powered devices, and strengthen isolation for untrusted JavaScript execution; a Function-based runner is not a secure sandbox.