This project is a web-based coding learning platform that allows users to learn programming by writing and executing code directly in the browser. The platform provides an interactive environment where users can practice HTML, CSS, and JavaScript using an integrated web IDE, complete lessons, and track their progress.
The system is designed to be simple, scalable, and developer-friendly, making use of modern web technologies and cloud-based development environments.
Users can write and edit HTML, CSS, and JavaScript code within the browser. The platform provides a live preview of the output, allowing users to see results instantly.
Code written in the editor is rendered in real time using a sandboxed iframe environment. This enables safe execution of user-generated code.
The platform includes structured lessons and coding challenges designed to guide users from beginner to intermediate levels.
Users can create accounts, log in, and save their progress and code.
The system tracks completed lessons, user submissions, and learning milestones.
Users can save and revisit their code at any time.
- React
- Monaco Editor (for code editing)
- HTML, CSS, JavaScript
- Node.js
- Express
- GitHub Codespaces
- MongoDB (or any preferred NoSQL/SQL database)
The application is divided into two main parts:
The frontend is built using React and is responsible for rendering the user interface, including the code editor, lesson views, and preview panel.
The backend is built with Node.js and Express. It handles authentication, lesson management, code storage, and user progress tracking.
/client
/src
/components
Editor.jsx
Preview.jsx
Lesson.jsx
/pages
Dashboard.jsx
LessonPage.jsx
/services
api.js
/server
/routes
/controllers
/models
server.js
This project is designed to run entirely in a cloud development environment and does not require a local machine setup.
Development is done using GitHub Codespaces, which provides a full Visual Studio Code-like environment in the browser.
Key benefits:
- No local installation required
- Preconfigured development environment
- Accessible from any device
- Built-in port forwarding for web applications
Create a new repository on GitHub and add this project structure.
Click on "Code" → "Codespaces" → "Create Codespace on main".
Run the following commands in the Codespaces terminal:
cd client
npm install
cd ../server
npm install
Start both frontend and backend servers:
# Start backend
cd server
npm run dev
# Start frontend (in a new terminal)
cd client
npm run dev
Codespaces will automatically forward ports. Open the provided URL in your browser to view the application.
User code is dynamically combined into a single HTML document and rendered inside a sandboxed iframe.
Example:
<html>
<head>
<style>
/* User CSS */
</style>
</head>
<body>
<!-- User HTML -->
<script>
// User JavaScript
</script>
</body>
</html>This approach avoids the need for server-side code execution and improves security for frontend languages.
POST /api/auth/register
POST /api/auth/login
GET /api/lessons
GET /api/lessons/:id
POST /api/progress
POST /api/code/save
- Use iframe sandboxing to isolate user code execution
- Validate and sanitize all inputs on the backend
- Implement secure authentication mechanisms (JWT or sessions)
- Prevent unauthorized access to user data
- Avoid executing arbitrary code on the server
Since development is cloud-based, deployment can also follow a cloud-first approach.
- Frontend: Vercel or Netlify
- Backend: Render, Railway, or similar Node hosting platforms
- Database: MongoDB Atlas
- Support for additional programming languages
- Real-time collaboration between users
- AI-powered coding assistance
- Automated code validation and grading
- Custom themes and UI personalization
- Version history for user code
Contributions are welcome. Fork the repository and submit a pull request with a clear description of your changes.
This project is licensed under the MIT License.