CodePath LiveLab

Live Web Development Classroom & Online Compiler

---

✨ What makes it live?

Teacher experience	Student experience
Create a protected live classroom	Join with only a name — no room code needed
See every connected student in real time	Separate HTML, CSS and JavaScript editors
Watch code updates while students type	Instant sandboxed browser preview
Open any student's code + last output	JavaScript console with logs, warnings and errors
Broadcast live teaching code to all students	Teacher Live view updates automatically
Lock practice, focus the lesson, announce messages	Save locally, reset, download and practice on mobile

⚡ Live workflow

Teacher starts class
        ↓
Student enters name
        ↓
Student types HTML / CSS / JavaScript
        ↓
Teacher sees code live · Student clicks Run · Both see output

🚀 Open the app

• Home: webdev-editor.vercel.app
• Teacher Console: webdev-editor.vercel.app/teacher
• Student Editor: webdev-editor.vercel.app/student

Start a class

1. Open the Teacher Console.
2. Enter the teacher password shared privately by the classroom administrator.
3. Create the live class.
4. Send students the Student Editor link.
5. Students enter their name and start coding from any phone, laptop, Wi‑Fi, or mobile data connection.

🧩 Built with

HTML5 · CSS3 · Vanilla JavaScript · Node.js · Express · Socket.IO · Vercel · Railway

💻 Run locally

git clone https://github.com/khushisoni2004/WEBDEV_EDITOR.git
cd WEBDEV_EDITOR
npm install
npm start

Open http://localhost:9001.

Teacher → http://localhost:9001/teacher
Student → http://localhost:9001/student

Create a .env file to change local settings:

PORT=9001
TEACHER_PASSWORD=choose-a-private-password

🔒 Safety by design

• User JavaScript runs only in a sandboxed browser iframe.
• The Node.js server never executes student code.
• Realtime events stay inside the active classroom.
• Student drafts remain available in local browser storage.

_{Made for modern web development classrooms — learn, build and ship together.}