DevLab is an AWS-powered Ed-Tech platform for learning modern web development with interactive coding challenges, real-time feedback, adaptive recommendations, and a community forum. It combines a React front-end (with Monaco editor) and a Node/Express API with a headless Chrome (Puppeteer) evaluator, plus a Flask microservice for recommendations—scalable on AWS.
DevLab enables learners to practice HTML, CSS, JavaScript, React, and Tailwind through hands-on challenges. Submissions are executed and validated in an isolated headless browser; learners receive instant feedback, scores, and personalized resources. A simple forum fosters collaboration and Q&A.
- 👤 Auth & Profiles — JWT-based auth, user profiles, role flags (user/admin).
- 🧑💻 Monaco Editor Playground — Real-time code editing with preview.
- 🧪 Instant Evaluation — Headless Chrome (Puppeteer) runs custom validation against learner output.
- 🏆 Challenges & Leaderboard — Track progress, attempts, and scores.
- 🎯 Adaptive Recommendations — Flask microservice returns learning resources based on history.
- 💬 Discussion Forum — Post questions, share tips, and discuss solutions.
- 📊 Analytics — Progress and usage insights (expandable).
- ☁️ Cloud-Native — S3 for assets/CSV, DynamoDB for users/posts, EB/EC2 for API, Amplify for frontend.
- 🔐 Security-First Defaults — Env-based secrets, IAM roles, least privilege.
Note: Current evaluator runs on Node + Puppeteer. A serverless/Lambda move is on the roadmap.
High-level AWS layout for DevLab.
Click any image to view full size. This gallery presents the product flow from sign-up to results.
1) Registration — Create an account with basic details. |
2) Login — Secure access to your learning workspace. |
3) Landing — Welcome page with quick actions & navigation. |
4) Challenges (I) — Browse curated tasks by topic & difficulty. |
5) Challenges (II) — View requirements, hints & scoring rules. |
6) Forum — Discuss problems, share tips, and get help. |
7) Coding Workspace — Monaco editor with live preview & tests. |
8) Resource Collection — Add optional study links for guidance. |
9) Results — Instant feedback, pass/fail status, and next steps. |
Frontend — React, Vite/CRA, TailwindCSS, Monaco Editor
- SPA with route guards and layout shells
- Monaco editor playground with live preview
- Utility-first styling via TailwindCSS
Backend API — Node.js, Express.js, JSON Web Tokens
- REST endpoints for auth, posts, attempts
- JWT-based sessions and role flags
- Input validation, rate limiting, CORS
Evaluator — Puppeteer (headless Chrome)
- Runs user HTML/CSS/JS in sandboxed headless Chrome
- Applies whitelisted validation scripts; returns structured results
- Timeouts and resource limits for safety
ML Recommender — Flask (Python)
- Consumes anonymized attempt history & skill tags
- Returns ranked resources from S3-backed catalog
- Pluggable for embeddings or CF later
Data — DynamoDB & Amazon S3
users,posts,attemptstables (GSIs for user/challenge lookups)- S3 for static assets, CSV datasets, screenshots
Infra — Elastic Beanstalk, Amplify, CloudWatch/CloudTrail, IAM
- EB for Node API & Flask; Amplify for static frontend
- CloudWatch logs/metrics; CloudTrail auditing
- IAM roles (least privilege) for DynamoDB/S3 access
| 🧩 Layer | 🛠️ Stack |
|---|---|
| Frontend | React · Vite/CRA · TailwindCSS · Monaco Editor |
| Backend API | Node.js · Express.js · JWT |
| Evaluator | Puppeteer (headless Chrome) |
| ML Recommender | Flask (Python) |
| Data | DynamoDB (Users, Posts, Attempts) · Amazon S3 (assets/CSV) |
| Infra | Elastic Beanstalk (API & Flask) · Amplify (Frontend) · CloudWatch/CloudTrail · IAM |
- Springer Chapter
- IEEE Xplore — Document 10497289
- IEEE Xplore — Document 10426375
- arXiv Preprint
- Springer Chapter
- Journal of Cloud Computing (SpringerOpen)
Some resources (Springer, IEEE Xplore) may require institutional access.