LMS Lesson System Development (Video, Text, Audio)

Imagine a student with a weak internet connection trying to watch a video lesson, but the player stutters and rewinding resets the progress—forcing them to start over. This is a common issue in many LMS platforms built without a solid architecture. Developing a lesson system is a complex task: you need stable tracking for video, text, and audio content, adaptive delivery, and fault tolerance.

Our LMS development includes a robust lesson system with video lessons in LMS, audio lessons, text lessons, and HLS transcoding for progress tracking. Using Tiptap editor for text, React video player for video, and a solid LMS backend, we ensure lessons with subtitles and accurate progress tracking. We build lesson systems where each content type has reliable tracking and adaptive delivery. Based on experience with 50+ educational portals, we've identified key technical challenges: fragile tracking during video rewinding, slow loading of large files, lack of audio-to-transcript synchronization. Here's how we solve them.

Which technical problems does the lesson system solve?

• Video progress tracking — users may scrub backward, so progress should only record the maximum position. We save it every 10% and mark the lesson complete at 90%+ watch time, not just at the end.
• Transcoding large files — raw MP4 stutters on slow connections. We transcode video to HLS with multiple bitrates (360p–1080p) and use background workers (Bull) for asynchronous processing.
• Text lessons without reading confirmation — simply scrolling to the bottom isn't enough. We use Intersection Observer to detect 90% scroll and automatically complete the lesson.
• Audio without synchronization — listeners lose track without text. We display a transcript next to the player and optionally highlight the current word.

How we ensure reliable progress tracking for video lessons

The core challenge: users can seek backward, but progress must only increase. In the ReactPlayer component, we track the maximum played value (0–1) and save it every 10%.

import ReactPlayer from 'react-player';
import { useState, useRef, useCallback } from 'react';

function VideoLesson({ lesson, enrollmentId, onComplete }) {
  const playerRef = useRef<ReactPlayer>(null);
  const [played, setPlayed] = useState(0);
  const [completed, setCompleted] = useState(lesson.progress?.completed ?? false);
  const maxPlayedRef = useRef(lesson.progress?.progress ?? 0);

  const handleProgress = useCallback(async ({ played: p }) => {
    setPlayed(p);
    if (p > maxPlayedRef.current) {
      maxPlayedRef.current = p;
      if (Math.floor(p * 10) > Math.floor((p - 0.01) * 10)) {
        await saveProgress(enrollmentId, lesson.id, p);
      }
    }
  }, []);

  const handleEnded = useCallback(async () => {
    if (!completed) {
      setCompleted(true);
      await fetch(`/api/enrollments/${enrollmentId}/lessons/${lesson.id}/complete`, {
        method: 'POST',
      });
      onComplete?.(lesson.id);
    }
  }, [completed]);

  const handleProgress2 = useCallback(({ played: p }) => {
    handleProgress({ played: p });
    if (p >= 0.9 && !completed) {
      handleEnded();
    }
  }, [handleProgress, handleEnded, completed]);

  return (
    <div className="space-y-4">
      <div className="relative aspect-video bg-black rounded-xl overflow-hidden">
        <ReactPlayer
          ref={playerRef}
          url={lesson.content.videoUrl}
          width="100%"
          height="100%"
          controls
          onProgress={handleProgress2}
          onEnded={handleEnded}
          config={{
            file: {
              tracks: lesson.content.subtitles.map(s => ({
                kind: 'subtitles',
                src: s.url,
                srcLang: s.lang,
                label: s.label,
              })),
            },
          }}
        />
      </div>
      {lesson.content.chapters?.length > 0 && (
        <div>
          <h3 className="font-semibold text-gray-800 mb-2">Contents</h3>
          <ul className="space-y-1">
            {lesson.content.chapters.map((ch, i) => (
              <li key={i}>
                <button
                  onClick={() => playerRef.current?.seekTo(ch.time)}
                  className="text-sm text-blue-600 hover:underline"
                >
                  {formatTime(ch.time)} — {ch.title}
                </button>
              </li>
            ))}
          </ul>
        </div>
      )}
      {completed && (
        <div className="flex items-center gap-2 text-green-600 text-sm">
          <span>✓</span> Lesson completed
        </div>
      )}
    </div>
  );
}

Why we use HLS instead of direct MP4?

Direct MP4 loads the entire file — on a poor connection, users wait minutes. HLS splits video into 6-second segments: playback starts immediately, switching quality based on speed. HLS starts 3–10× faster than MP4, and on weak connections the difference can reach 15×. We transcode uploaded video using ffmpeg in the background.

The standard HTTP Live Streaming describes adaptive video delivery and ensures smooth playback.

import { createReadStream } from 'fs';
import ffmpeg from 'fluent-ffmpeg';

async function transcodeToHLS(inputPath: string, outputDir: string): Promise<string> {
  await fs.promises.mkdir(outputDir, { recursive: true });

  return new Promise((resolve, reject) => {
    ffmpeg(inputPath)
      .outputOptions([
        '-profile:v baseline',
        '-level 3.0',
        '-start_number 0',
        '-hls_time 6',
        '-hls_list_size 0',
        '-f hls',
      ])
      .output(path.join(outputDir, 'index.m3u8'))
      .outputOptions([
        '-vf scale=-2:720',
        '-b:v 2500k',
      ])
      .on('end', () => resolve(`${outputDir}/index.m3u8`))
      .on('error', reject)
      .run();
  });
}

videoProcessingQueue.process(async (job) => {
  const { uploadedPath, lessonId } = job.data;
  const outputDir = `storage/lessons/${lessonId}/hls`;

  await job.progress(10);
  const hlsPath = await transcodeToHLS(uploadedPath, outputDir);

  await job.progress(80);
  const url = await uploadHLSToS3(outputDir, `lessons/${lessonId}`);

  await db.lessons.update(lessonId, {
    content: { videoUrl: url, status: 'ready' }
  });

  await job.progress(100);
});

Text and audio lessons

How we use Intersection Observer to detect reading completion

For text lessons, we use the Tiptap editor (based on ProseMirror). Content is stored as HTML or Markdown. To mark a lesson as read, we track scroll to the end via Intersection Observer.

import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import Image from '@tiptap/extension-image';
import { Youtube } from '@tiptap/extension-youtube';

function TextLessonViewer({ content, onComplete }) {
  const editor = useEditor({
    content: content.body,
    editable: false,
    extensions: [StarterKit, Image, Youtube],
  });

  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) onComplete?.();
      },
      { threshold: 0.9 }
    );

    const marker = containerRef.current?.querySelector('.lesson-end-marker');
    if (marker) observer.observe(marker);
    return () => observer.disconnect();
  }, []);

  return (
    <div ref={containerRef} className="prose prose-lg max-w-none">
      <EditorContent editor={editor} />
      {content.attachments?.length > 0 && (
        <div className="mt-8 border-t pt-6">
          <h3 className="font-semibold">Lesson materials</h3>
          <ul className="space-y-2 mt-3">
            {content.attachments.map(att => (
              <li key={att.url}>
                <a href={att.url} download className="flex items-center gap-2 text-blue-600 hover:underline">
                  <span>📎</span>
                  <span>{att.name}</span>
                  <span className="text-gray-400 text-sm">({formatFileSize(att.size)})</span>
                </a>
              </li>
            ))}
          </ul>
        </div>
      )}
      <div className="lesson-end-marker h-1" />
    </div>
  );
}

Audio lessons with transcript

Audio lessons are simpler: we use the native audio element with custom styling. The transcript is displayed below the player, helping hearing-impaired users and those who can't play audio.

function AudioLesson({ lesson, onComplete }) {
  const audioRef = useRef<HTMLAudioElement>(null);
  const [currentTime, setCurrentTime] = useState(0);

  return (
    <div className="space-y-6">
      <div className="bg-gradient-to-br from-purple-50 to-blue-50 rounded-2xl p-8">
        {lesson.content.thumbnailUrl && (
          <img src={lesson.content.thumbnailUrl}
            className="w-32 h-32 rounded-full mx-auto mb-6 object-cover" alt="" />
        )}
        <audio
          ref={audioRef}
          src={lesson.content.audioUrl}
          controls
          className="w-full"
          onTimeUpdate={() => setCurrentTime(audioRef.current?.currentTime ?? 0)}
          onEnded={onComplete}
        />
      </div>
      {lesson.content.transcript && (
        <div className="prose">
          <h3>Transcript</h3>
          <p className="text-gray-700 whitespace-pre-line">
            {lesson.content.transcript}
          </p>
        </div>
      )}
    </div>
  );
}

Format comparison

Switching to HLS saves up to 50% bandwidth compared to MP4, and adaptive bitrate reduces bandwidth costs by 30–50%.

Process and timeline

1. Analysis — we study your requirements: content types, number of lessons, integrations (SCORM, SSO).
2. Design — we outline the architecture: data models, API endpoints, frontend components.
3. Implementation — we write code from scratch or on top of your CMS. We use TypeScript, React, Next.js, Laravel (or your stack).
4. Testing — we verify tracking on all content types, emulate slow internet, test large file uploads.
5. Deployment — we deploy on your hosting or our infrastructure. We provide access to the source code and documentation.

Estimated timeline: from 1 to 2 weeks for a basic system with video (HLS), text, and audio. If additional types (SCORM, live lessons) or complex analytics are needed, the timeline is discussed separately. The cost is calculated individually. Basic system development starts at $5,000. Order lesson system development – we'll prepare a custom commercial proposal within 24 hours.

What's included and guarantees

• Source code of the lesson system (frontend + backend)
• API for integration with your existing LMS
• Deployment and customization documentation
• Lesson administration console (upload, edit, ordering)
• Post-launch support: 2 weeks free

We have been developing LMS for schools, universities, and corporate portals for many years. All projects are delivered on time and supported until full stability. We guarantee that tracking will work regardless of user actions (seeking, pause, replay). Get a free consultation for your project – contact us. It's free.

Backend Development Services: Laravel, Node.js, Go, Django, PostgreSQL

On a production server at 3:14 AM, the Laravel Jobs queue stopped processing. 40,000 unprocessed jobs in Redis. Cause: worker crashed due to a memory leak in one of the Jobs (leak via a static variable in an Eloquent observer), supervisor didn't restart it because of misconfigured stopwaitsecs. This is not a hypothetical scenario — it's Tuesday. We analyzed such an incident on a project with 500 RPS load: diagnosis took 4 hours, fix — 20 minutes. So you don't lose money on downtime, we offer backend development services with a focus on production-grade reliability. We'll assess your project in 2 days.

Backend is what works when no one is watching. Or doesn't work. We guarantee you'll have the first option.

How do we ensure production-grade reliability from day one?

What we do correctly from day one

Service Layer over Fat Controllers. Controller receives HTTP request, validates it via Form Request, passes data to Service, returns response. Business logic in Service, not Controller. This sounds trivial, but most legacy projects have controllers with 500 lines and SQL queries inside.

Repository Pattern we use cautiously. If you just wrap Model::where(...) in a repository method — that's boilerplate without benefit. Repository is justified when: you need to abstract from the data source (DB + cache + external API) or when query logic is complex enough to isolate.

Jobs, Events, Listeners. Everything that can be async — make async. Sending email, PDF generation, external API sync, aggregate recalculation — into Queue. Laravel Horizon for queue monitoring in Redis: see throughput, failed jobs, processing time per queue.

How Octane handles high load

Laravel Octane with RoadRunner or Swoole keeps the app in memory between requests — removes bootstrap overhead (config loading, class autoloading) on each HTTP request. Gain: 3–8x on synthetic benchmarks, 2–4x on real applications. Important: no state between requests in static variables — that leads to exactly the incidents from the beginning. We use this in projects with >1000 RPS.

What to do about N+1 queries

N+1 is the most common cause of slow pages in Laravel apps. Standard story: page worked fine on dev with 10 records, on production with 10,000 — 8-second load.

Laravel Debugbar in dev environment shows the number of queries per page. More than 20 queries per page — signal for audit.

Model::preventLazyLoading(! app()->isProduction());

Telescope for profiling in staging: logs all queries, jobs, mail, notifications with time detail. Numbers: after implementing eager loading, page load time drops from 8s to 0.3s — 27 times faster.

PostgreSQL: indexes that are actually needed

PostgreSQL 14+ is the primary DB on all projects. We use PgBouncer + PostgreSQL combination. 10+ years experience, more than 50 backend projects, 5 years on the market.

How PostgreSQL helps avoid slow queries

Composite indexes for frequent WHERE + ORDER BY. If you have WHERE user_id = ? AND status = ? ORDER BY created_at DESC — you need (user_id, status, created_at DESC). A separate index on (user_id) doesn't help much with sorting.

Partial indexes. If 95% of queries go with WHERE status = 'active':

CREATE INDEX idx_orders_active ON orders (created_at DESC)
WHERE status = 'active';

The index is small, fast, covers the main load.

GIN indexes for JSONB and arrays. @> operator without GIN index — seq scan. With index — fast even on millions of rows.

GIN for full-text search. to_tsvector + GIN instead of LIKE '%query%'. LIKE without index is always seq scan. With pg_trgm extension and gin_trgm_ops — supports LIKE with index, useful for CRM search by partial match.

Connection pooling: why it's more important than it seems

Rails, Laravel, Django open a new connection to PostgreSQL for each PHP/Python process. With 100 workers — 100 connections. PostgreSQL starts degrading from 200–300 active connections — overhead on connection management becomes significant.

PgBouncer — connection pooler in front of PostgreSQL. Transaction pooling mode: connection to PostgreSQL is occupied only during a transaction, returned to pool between requests. 1000 application workers → 20–50 actual connections to PostgreSQL. This reduces latency by 40% and hosting costs by 30%.

Node.js with Fastify: when it's better than Laravel

Node.js is justified for:

• Realtime: WebSocket servers, Server-Sent Events, chat, live updates
• Streaming: large files, video, streaming data
• High I/O concurrency: many parallel requests to external APIs without heavy business logic
• Serverless: Lambda/Cloud Functions — Node.js starts faster than PHP

Fastify over Express: 2–3 times faster on benchmarks, built-in JSON Schema validation, better TypeScript support, plugin architecture.

Typical realtime architecture: Laravel — core business logic and REST API. Node.js + Socket.io or ws — WebSocket server. Laravel publishes events to Redis Pub/Sub, Node.js subscribes and broadcasts to clients. This separation allows scaling the WebSocket server independently of the main app.

Go: microservices and high load

Go we use for:

• High-load microservices (>10,000 RPS)
• Background workers with strict latency requirements
• DevOps tools and CLI
• gRPC services in microservice architecture

Goroutines — thousands of times cheaper than OS threads. 10,000 concurrent connections on Go is normal on one server.

But Go is not a silver bullet. Development is slower than Laravel: more boilerplate, no ORM at Eloquent level, error handling with if err != nil everywhere. Justified only when performance is a real requirement, not an assumption.

Django and Python backend

Django with DRF (Django REST Framework) — for tasks where Python is needed: ML pipelines, data processing, integrations with AI tools.

Celery for background tasks — similar to Laravel Queue but more complex to configure. Celery Beat for cron tasks.

Django ORM vs raw SQL: ORM is convenient for CRUD. For analytical queries with multiple JOINs, window functions, and CTEs — connection.execute() with raw SQL is more readable and predictable.

Redis: not just cache

Redis in our projects plays multiple roles:

Redis Cluster for horizontal scaling. Sentinel for automatic failover on standalone setups.

Deployment and infrastructure

Docker + docker-compose — standard for local development and production. Each service in a container: PHP-FPM/Octane, Nginx, PostgreSQL, Redis, Queue Worker, Scheduler.

CI/CD via GitHub Actions:

1. Run tests (PHPUnit / Pest, Vitest, Playwright)
2. Build Docker image
3. Push to Container Registry
4. Deploy: docker pull → docker-compose up -d on server, or Kubernetes rolling update

Zero-downtime deploy for Laravel: php artisan down --secret=TOKEN is not needed with proper configuration. Strategy: new container starts next to the old one, Nginx switches traffic after health check, old container stops.

Monitoring: Sentry for exception tracking with alerting in Slack/Telegram. Grafana + Prometheus (or Grafana Cloud) for metrics: CPU, memory, request rate, queue depth, database connection count. Alerts on: error rate > 1%, p99 latency > 2s, queue depth > 1000 jobs.

What's included in turnkey work

• Architecture design (API documentation, DB schema, service diagram)
• Implementation according to agreed specification with code review
• CI/CD, monitoring, alerting setup
• Load testing (k6, wrk) with report
• Handover of source code, access, deployment instructions
• Training of customer's team (2-3 sessions)
• Warranty support for 1 month after delivery

Timeline benchmarks

Pricing is calculated individually after analyzing load, integrations, and business logic. Contact us for a free audit of your current backend — get an optimization plan in 2 days. Request a consultation.