A web-based platform designed to help beginners (IT students) understand and practice pointers in C through interactive exercises and in-browser execution.
Students write C code, compile it to WebAssembly using WASM-4, and run it in a controlled sandboxed environment. The platform focuses on making memory concepts concrete and observable.
The platform provides:
- An in-browser code editor (Monaco)
- C compilation and execution via WASM-4
- Progressive challenges
- GitHub-based authentication (OAuth2)
- Stateless session management using JWT
- Persistent storage with SQLite
The system is designed to remain simple, secure, and easy to deploy.
Frontend
- Node.js
- Vite
- React
- Monaco Editor
Backend
- Python
- FastAPI
- SQLite
- Caddy (reverse proxy)
Execution Layer
- WASM-4 toolchain
- WebAssembly sandbox
- Isolated user execution
Authentication flow:
- User authenticates with GitHub (OAuth2)
- Backend validates the OAuth2 flow
- Backend issues a signed JWT
- Frontend stores and attaches JWT to API requests
- Backend remains stateless
Come from the following conventions: https://github.com/zhanymkanov/fastapi-best-practices?tab=readme-ov-file
.
├── bin/
│ └── w4-linux/w4
├── Caddyfile
├── frontend/
│ ├── public/
│ ├── src/
│ │ ├── contexts/
│ │ ├── hooks/
│ │ ├── pages/
│ │ ├── utils/
│ │ └── userWorker.js
│ └── vite.config.js
├── http_request/
│ └── test.http
├── requirements.txt
├── src/
│ ├── auth/
│ ├── challenge/
│ ├── editor/
│ ├── github/
│ ├── user/
│ ├── database.py
│ └── main.py
└── templates/
└── w4/hello-world/
auth/– OAuth2 flow, JWT generation, authentication dependenciesgithub/– GitHub API client and configurationuser/– User models, DAO, business logicchallenge/– Challenge definitions and validationeditor/– Code execution logic and WASM integrationdatabase.py– SQLite configuration and session managementmain.py– FastAPI application entry point
contexts/– Authentication contexthooks/– Custom hooks (API client, auth, local storage, iframe keyboard gating)pages/– Layouts, editor page, OAuth2 flow pagesuserWorker.js– Execution workerapi.js– Backend communication layer
python -m venv venv
source venv/bin/activate
pip install -r requirements.txt
uvicorn src.main:app --reloadcd frontend
npm install
npm run devA Caddyfile is provided to be able to test the application behind reverse proxy with managed SSL certificate.
caddy startfastapi dev src/main.py --forwarded-allow-ips="*" --root-path /apicd frontend
npm run devGo to https://localhost:8443
