Virtual Classroom — Live Teaching Starter Kit

A focused, browser-based virtual classroom built for one specific scenario: a
teacher running a live lesson for up to 30 students. No accounts, no downloads,
no plugins — the teacher clicks "Start Lesson" copies an invitation link, and
the class begins.

Unlike general-purpose video-conferencing scripts, this starter kit is
purpose-built for education: a strict host/student model, a mandatory
waiting room, teacher-only whiteboard authorship, and explicit controls for
raised hands and individual student unmuting. Every flow — from the pre-join
screen to disconnect recovery — is specified in production-grade detail.

Who is this for?

Primary audience — developers and development teams building:
- Online tutoring and coaching platforms
- K-12 and university e-learning products
- Corporate training tools
- Language schools and private-lesson marketplaces
- Any product that needs a live classroom module without the bloat of a full
  conferencing suite

Not for: organizations that need user accounts, recordings, breakout
rooms, or more than 30 simultaneous students. This is a deliberately minimal,
well-specified foundation — you extend it with the features your market needs.

Why a "Starter Kit"?

Because this is a clean, extensible base, not a SaaS-ready behemoth.
You get:

- A complete PRD (90+ pages, 60+ functional requirements, every edge case
  specified: permission denials, network drops, session-full, waiting-room
  flows, reconnection windows, input validation, empty states)
- Production-ready code covering every acceptance criterion in the PRD
- Zero vendor lock-in on the real-time transport layer — swap the
  signalling/media layer without touching product logic
- A fork-friendly structure so you can add recording, scheduling,
  breakout rooms, or LMS integration in your own implementation

Core Feature Set

Session Management
- Instant-start sessions (no scheduling, no accounts)
- Cryptographically unguessable session IDs (128-bit entropy)
- Separate host URL and student invitation URL
- Optional session name (1–100 characters)
- Hard participant cap with graceful "session full" message (31st visitor)
- Session-ended and link-expired states for all participants

Pre-Join Screen (teacher & student)
- Display name input with live validation (1–50 chars)
- Live camera self-preview
- Camera / microphone toggles with permission-denied fallbacks
- Initials avatar when camera is off or denied
- Graceful degradation: join without camera, without mic, or both

Waiting Room
- Every student must be explicitly admitted by the teacher
- Stacked notifications in arrival order
- Admit / Decline actions with inline feedback to the student
- Declined students see Try Again / Leave options

Live Classroom Layout
- Dominant teacher tile (≥60% of main content area)
- Horizontally scrollable student thumbnail strip
- Tile order fixed by admission order
- Green glow speaking indicator (active-audio detection)
- Muted-mic icon overlay on every muted tile
- Initials fallback on any tile with camera off

Audio & Video Controls
- Teacher: mute/unmute own mic, camera on/off
- Students: camera on/off, self-mute when unmuted by the teacher
- Teacher mute/unmute of any individual student
- Students are muted by default on entry

Participant Management (teacher-only)
- Participant panel with full admitted list
- Raise hand (student) with queue-ordered raised-hand list for the teacher
- Call on student (unmute + promote to speaker)
- Lower hand without unmuting
- Remove student from the session (per-session block, no rejoin)

Whiteboard (teacher-only authorship)
- Tools: Pen, Pencil, Text, Rectangle, Circle, Line, Arrow
- Color palette, thickness, font size
- Undo / Redo / Clear
- Students see the whiteboard in real time but cannot edit
- Mutually exclusive with screen share

Screen Sharing
- Full screen, application window, or browser tab (browser-native picker)
- Mutually exclusive with whiteboard
- Stop button returns to default video layout

Chat
- Plain-text chat for all participants (up to 500 chars/message)
- Collapsible side panel
- Unread-message badge
- No attachments, no Markdown rendering, no file uploads (by design)

Session Lifecycle
- Teacher ends session with confirmation dialog
- 60-second reconnection window for teacher disconnection
- 30-second reconnection window for student disconnection
- User-facing countdown messages during reconnection
- Session-ended screen for every participant, every path

Input Validation & Empty States
- Every input bounded (display name 1–50, session name 0–100, chat 1–500)
- Specific human-readable error for every failure path
- No generic "Something went wrong" messages anywhere
- Empty-state messages for student strip, participant panel, chat, and
  waiting-room queue

Accessibility & Responsive Layout
- WCAG 2.1 AA compliance
- Keyboard navigation for every primary control
- Color + icon shape for all state indicators (not color-only)
- All UI strings externalized — ready for i18n
- Desktop (1024+) and tablet (768–1023) for teacher UI
- Mobile support (320–767) for student UI
- Supported browsers: Chrome 90+, Firefox 90+, Safari 14+, Edge 90+

What's Included in the Package

- Full source code (frontend + signalling/transport layer)
- Complete PRD document (the same 90-page specification the product was built from)
- Setup and installation guide
- Deployment guide for Node.js and Docker
- Browser compatibility reference
- Extension guide (how to add recording, scheduling, breakout rooms, LMS integration)
- Six months of free updates

What's Deliberately Out of Scope

- Session recording (storage, consent, and legal complexity — your call)
- Lesson scheduling / teacher dashboard (instant-start covers the core case)
- User accounts and authentication
- Breakout rooms
- Student whiteboard editing
- File attachments in chat
- More than 30 students per session

Every one of these is a documented extension point. The PRD marks them explicitly as "Future / Backlog" so you know exactly where to plug your own implementation.

Why Buy This Instead of Building From Scratch

Building a production-grade live classroom from zero takes 8–12 weeks of engineering time just to cover the edge cases (permission handling, reconnection, waiting-room race conditions, speaking detection, mobile layout, etc.). This starter kit delivers all of that, fully specified and implemented, so your team focuses on your differentiator — not on re-solving video layout and audio toggles.

Support & Updates

Six months of free updates and standard item support included. Full documentation hosted publicly. Please use the item's comment/support system for any questions.

• Zero-setup: no accounts, no downloads, no plugins
• One teacher, up to 30 students — enforced hard cap
• Cryptographically secure session IDs (128-bit entropy)
• Mandatory waiting room with teacher admit/decline
• Teacher-dominant layout + scrollable student thumbnail strip
• Raise-hand queue with teacher call-on-student action
• Teacher mute/unmute of any individual student
• Teacher-authored whiteboard (Pen, Pencil, Text, Rectangle, Circle, Line, Arrow)
• Screen sharing (full screen, window, or browser tab)
• Plain-text chat for all participants, 500 char limit
• Active-speaker detection with green glow indicator
• Full reconnection handling (30s student / 60s teacher)
• Specific error messages on every failure path — no generic fallbacks
• WCAG 2.1 AA accessibility compliance
• Desktop + tablet + mobile (student) responsive layouts
• Fully externalized UI strings — ready for localization
• Complete 90-page PRD included — every acceptance criterion documented
• Clean, extensible starter-kit architecture for adding recording, LMS, breakout rooms, etc.

• Node.js 18.x or newer
• NPM 9.x or newer
• A VPS or dedicated server with at least 2 vCPU and 2 GB RAM
• A domain name pointing to the server (for SSL and camera/microphone APIs)
• SSL certificate (Let's Encrypt works — instructions included)
• Open ports: 80, 443, and a UDP range for real-time media
• Supported client browsers: Chrome 90+, Firefox 90+, Safari 14+, Edge 90+

Optional:

• Docker + Docker Compose (alternative to bare-metal Node.js deployment)
• Nginx (reverse proxy — config template included)

No third-party SaaS API keys required. The starter kit is fully self-contained.

INSTALLATION

1. Download the ZIP package from your CodeCanyon account and extract it.

2. Install Node.js dependencies:
     npm install

3. Copy the environment template and configure it:
     cp .env.template .env
   Edit .env to set your domain, ports, and session settings.

4. Generate SSL certificates for your domain (Let's Encrypt recommended —
   see the included deployment guide).

5. Start the application:
     npm start
   Or run under PM2 / systemd for production (config templates included).

6. Point your browser to https://your-domain.com — the home screen loads.

FIRST SESSION (as a teacher)

1. Click "Start Lesson" on the home screen.
2. On the pre-join screen, enter your display name and grant camera /
   microphone permissions.
3. Click "Copy Link" to copy the student invitation link.
4. Click "Enter Classroom."
5. Share the invitation link with your students via any channel (email,
   messaging app, LMS, etc.).
6. When students arrive, they appear in the waiting-room notification stack.
   Click "Admit" to let them in.
7. Use the toolbar to open the whiteboard, share your screen, open the
   participant panel, or open the chat.
8. Click "End Session" when the lesson is over.

FIRST SESSION (as a student)

1. Open the invitation link sent by the teacher.
2. Enter your display name and grant camera / microphone permissions
   (both optional — you can join without either).
3. Click "Join." You will see the waiting screen until the teacher admits you.
4. Once admitted, you'll see the teacher's video. You are muted by default.
5. Click the raise-hand button when you want to speak. When the teacher
   unmutes you, your microphone activates.

DEPLOYMENT

Two deployment paths are documented in detail in the included guide:

  a. Native Node.js deployment (PM2 + Nginx)
  b. Docker / Docker Compose deployment

Both paths include SSL setup, reverse-proxy configuration, and a systemd
service template.

EXTENDING THE STARTER KIT

The bundled PRD marks every deferred feature with its integration point:

  - Session recording — see "Future / Backlog" section of the PRD
  - Lesson scheduling — drop-in point documented in the session-creation flow
  - LMS integration — external-auth hook documented in the pre-join flow
  - Breakout rooms — architectural notes included
  - Whiteboard export — canvas serialization example included

Full documentation available online (link provided after purchase).