Molecule.dev

Virtual Classroom

Education · React + Node (Express) · 18 @molecule/* packages

Google Meet-like virtual classroom with video, whiteboard, chat, and breakout rooms — with built-in Stripe-backed subscription tiers

Open in Molecule

Try it

Opens instantly. Runs on sample data, so changes reset on reload.

Open preview in a new tab ↗View workspace ↗

What is inside

Screens (17)

  • Landing /
  • Login /login
  • Signup /signup
  • ForgotPassword /forgot-password
  • ResetPassword /reset-password
  • Dashboard /dashboard (signed in)
  • Classroom /class/:id (signed in)
  • Assignments /assignments (signed in)
  • Courses /courses (signed in)
  • Whiteboard /whiteboard/:id (signed in)
  • Settings /settings (signed in)
  • CourseDetail /courses/:id (signed in)
  • AssignmentDetail /assignments/:id (signed in)
  • Calendar /calendar (signed in)
  • Profile /profile/:id (signed in)
  • Notifications /notifications (signed in)
  • Grades /grades (signed in)

Data model (14 tables)

  • assignments — id, course_id, title, description, due_date, points, type, created_at, …
  • breakout_rooms — id, parent_room_id, name, status, created_at
  • chat_messages — id, room_id, user_id, content, type, created_at
  • comments — id, resourceType, resourceId, userId, parentId, body, editedAt, createdAt, …
  • course_enrollments — id, course_id, student_id, role, enrolled_at
  • courses — id, instructor_id, code, title, term, description, is_published, created_at, …
  • devices — id, createdAt, updatedAt, userId, name, pushPlatform, pushSubscription, hasPushSubscription
  • grades — id, assignment_id, student_id, course_id, score, max_score, letter_grade, feedback, …
  • notifications — id, user_id, type, title, body, link, read_at, created_at
  • recordings — id, room_id, file_url, duration_seconds, created_at
  • room_participants — id, room_id, user_id, role, joined_at, left_at
  • rooms — id, course_id, host_id, name, join_code, status, participant_count, scheduled_at, …
  • submissions — id, assignment_id, student_id, content, file_url, status, submitted_at
  • whiteboards — id, room_id, strokes, created_at, updated_at

API (9 handlers)

  • assignments api/src/handlers/assignments.ts
  • chat api/src/handlers/chat.ts
  • courses api/src/handlers/courses.ts
  • grades api/src/handlers/grades.ts
  • me api/src/handlers/me.ts
  • notifications api/src/handlers/notifications.ts
  • recordings api/src/handlers/recordings.ts
  • rooms api/src/handlers/rooms.ts
  • whiteboard api/src/handlers/whiteboard.ts

Subscription tiers

free / pro / team — gated by: maxChat, maxRecordings, maxRooms, maxWhiteboard, advancedFeatures, canExport, retentionDays

Built from 18 @molecule/* packages

Browse all @molecule/* packages →

Required secrets

  • DATABASE_URL PostgreSQL connection string
  • S3_BUCKET S3 bucket for shared files

The @molecule/* packages are Apache-2.0. The app you build from this template is yours to export and self-host. Licensing