Viyad

What it is

Viyad is a production-ready, multi-tenant online-classroom / live-teaching SaaS — a complete classroom experience: real-time WebRTC video, an interactive whiteboard, realtime-synced PDF materials, quizzes, chat, screen sharing and recording, all behind a React 19 frontend and a modular Node.js backend.

This is one of the largest projects in this portfolio — 513 backend files, 521 frontend files, 104 docs files, a full deploy/ directory (nginx, LiveKit, TURN, systemd) and a documented development history from Phase 1 to Phase 22.

Live: viyad.ir

Feature highlights

Classroom

• Real-time WebRTC video/audio with STUN/TURN NAT traversal
• Interactive whiteboard — draw, shapes, text, eraser, synced to the room
• Real-time chat — public rooms + private DMs
• Screen sharing
• Recording — chunked upload with finalization
• Role-based permissions — teacher vs student capabilities

PDF materials (جزوه)

• Realtime follow: when the teacher opens the جزوه tab, every student’s PDF panel opens automatically; page navigation, scroll position and every annotation (pen, highlighter, line, shapes, text, eraser) sync to the whole room in real time. Late joiners receive the current share state instantly.
• Auto font embedding: every uploaded PDF is scanned in the background and broken (non-embedded) fonts are replaced — Vazirmatn for Persian/Arabic pages, Inter for Latin — so text never renders as boxes. Fail-safe: on any error the original file is kept. A backfill script re-processes pre-feature PDFs.
• Fullscreen with native Fullscreen API (+ CSS fallback for iOS)

Platform

• Multi-tenant with organization context (34 frontend feature modules)
• Admin dashboard with analytics (admin, admin-users, admin-settings, analytics…)
• Billing webhooks — Stripe integration
• Public landing CMS — editable features, FAQ, news, testimonials; SEO-friendly
• Public API + developer API for third-party integrations
• Quiz system, attendance, license, search, notifications (web-push + Twilio), PWA support, super-admin, role management

Architecture

viyad/
├── backend/                # Node.js/Express — modular monolith
│   └── src/
│       ├── config/         # env parsing & configuration
│       ├── core/           # logger, error handling, shared utils
│       ├── domain/         # entities & business rules
│       ├── application/    # use cases (business logic)
│       ├── infrastructure/ # DB repos, external services, media config
│       └── interfaces/     # HTTP controllers, routes, sockets
├── frontend/               # React 19 + Vite SPA (Feature-Sliced Design)
│   └── src/
│       ├── app/            # app shell & routing
│       ├── features/       # 34 feature modules (classroom, whiteboard, quiz…)
│       ├── shared/         # shared UI & utilities
│       └── providers/      # context providers (media, auth…)
├── packages/shared/        # shared types & contracts
├── deploy/                 # production config: nginx, LiveKit, TURN, systemd, logrotate
├── docs/                   # 104 files: ADRs, audits, phase reports (1–22), runbooks
├── scripts/                # DB/file backups, SSL, pdf-fonts (Vazirmatn/Inter)
└── docker-compose.dev.yml  # local dev stack (mongo + redis + backend + frontend)

Key dependencies

Backend: Express 5, Mongoose, Redis + @socket.io/redis-adapter, BullMQ, Stripe, Twilio, web-push, LiveKit SDK, Elasticsearch, Sentry, fluent-ffmpeg, PDFKit, exceljs, qrcode, zod, winston (+daily rotate), express-rate-limit.

Frontend: React 19, livekit-client, simple-peer, socket.io-client, pdfjs-dist, chart.js, framer-motion, idb, PWA.

Getting started

# Option A — Docker Compose (recommended)
docker compose -f docker-compose.dev.yml up
# backend → http://localhost:5000   frontend → http://localhost:5173

# Option B — manual
docker compose -f docker-compose.dev.yml up -d mongo redis
cd backend  && cp .env.example .env && npm install
cd ../frontend && npm install && npm run dev

Prerequisites: Node 20+, MongoDB 7+, Redis 7+.

Why it stands out

Viyad is the closest thing here to a commercial product. It has the full stack of a serious SaaS — realtime media infrastructure (WebRTC + LiveKit + TURN), horizontal scaling (Redis pub/sub), billing, multi-tenancy, search, monitoring, a deploy kit for real servers, and an engineering process documented in 104 docs files with audits and phase reports. The جزوه realtime-follow + auto font-fix feature alone — solving broken Persian fonts in uploaded PDFs at scale — is the kind of detail that separates shipped products from demos.