Back to Portfolio

Technical Case Study

Proetutor

High-Performance LMS Rebuild — 97 Lighthouse Score, Secure HLS Video Streaming & Subscription Monetization

Proetutor, an LMS I rebuilt from a legacy Laravel and Bootstrap 3 system to Next.js 15 with a Lumen v11 API backend. The rebuild achieved a 97 Lighthouse performance score. Video is delivered via Bunny Stream with HLS and signed URLs to prevent direct file access. Monetization supports subscriptions and lifetime course purchases.

Legacy Laravel and Bootstrap 3 systems age poorly. Slow Time to First Byte, failing Core Web Vitals, no protection on video URLs — Proetutor v1 had all of them. The rebuild wasn't just a UI refresh. It was a full architecture change: Next.js 15 with server-side rendering for SEO-indexed course pages, a clean Lumen v11 API layer, Bunny Stream replacing unprotected video hosting, and a monetization system that handles subscriptions and lifetime access from the same checkout. The result was a 97 performance score and a platform that ranks on the pages a legacy system never could.

Proetutor production interface — High-Performance LMS Rebuild — 97 Lighthouse Score, Secure HLS Video Streaming & Subscription Monetization

The Problem

Proetutor v1 ran on Laravel and Bootstrap 3. Page load times were slow, Core Web Vitals were failing, and the SEO visibility that an LMS depends on for organic course discovery wasn't there. The bigger problem: video content was hosted on unprotected URLs. Any paying student could share a direct link to a course video and anyone with it could watch it for free.

The Solution

Full rebuild to a modern SSR-first stack. Next.js 15 with server-side rendering for course pages so search engines index actual content, not JavaScript shells. Lumen v11 (PHP 8.4) as a clean API layer. Bunny Stream for HLS video delivery with signed URLs — no direct file access, no shared links that work beyond their token expiry. Subscription and lifetime access billing rebuilt in the same checkout flow. Performance targets set before architecture decisions were made.

Results & Impact

97 Lighthouse performance score. 92 SEO score. 96 Best Practices. Legacy Core Web Vitals issues resolved — LCP and CLS both within acceptable ranges. Premium video content protected behind HLS signed URL delivery. The platform now has the SEO foundation to actually rank for the course topics it teaches.

My Role

Responsibility

Lead Full Stack Engineer. Owned the full rebuild: Next.js 15 frontend architecture, Lumen v11 backend, MySQL schema optimization, Bunny Stream integration with signed URL delivery, monetization system, and Lighthouse performance tuning to the final scores.

Key Highlights

97 Lighthouse Performance — Full Architecture Rebuild

Rebuilt from legacy Laravel + Bootstrap 3 to Next.js 15 with SSR. Performance targets were defined as architectural constraints before the first component was written — not measured after launch and hoped to be good enough. The result: 97 performance, 92 SEO, 96 Best Practices.

Secure HLS Video Delivery with Signed URLs

Bunny Stream delivers course video via HLS with token-based signed URLs. Each stream URL is short-lived and tied to the authenticated session — direct file access returns nothing, shared links expire. This is the correct architecture for any LMS that charges for video content.

Subscriptions and Lifetime Access from One Checkout

Monthly subscriptions, yearly subscriptions, and lifetime course purchases all handled through a single checkout flow. The billing architecture is designed so each model is independently configurable from the admin panel.

Full LMS Ecosystem — Student, Admin, and Marketing

Three distinct surfaces built as one platform: a public marketing site with SSR-indexed course pages, a student dashboard with progress tracking and course player, and an admin panel for course management, user management, and content publishing.

Key Features

  • Course publishing system for free and premium courses

  • Bunny Stream HLS video delivery with token-based signed URL protection

  • Student dashboard with course progress tracking and lesson completion

  • Admin dashboard for course, user, and content management

  • Subscription and lifetime access monetization with shared checkout flow

  • Shopping cart and streamlined checkout

  • Social authentication for frictionless student onboarding

  • SSR course detail pages for SEO indexability

  • React Query data fetching with caching and revalidation

  • Material UI v6 component system with responsive layout

Key Metrics

Lighthouse Performance

97

Lighthouse SEO

92

Lighthouse Best Practices

96

Architecture Upgrade

Legacy Laravel → Next.js 15 SSR

Video Security

HLS-encrypted signed URL delivery via Bunny Stream

Web & Mobile Development

Assad was an outstanding developer. I had trouble in the past with developers but working with Assad was completely different experience. Great communication, great work and best developer I ever worked with. I 100% recommend him.

Iftikhar A.

Product Owner

Verified Client

System Architecture

Next.js 15 with SSR for all course pages — server-rendered HTML for search engine indexability

Decoupled API backend via Lumen v11 (PHP 8.4) for course data, enrollment, and progress

MySQL 8 schema optimized for high-volume course, enrollment, and progress data

Bunny Stream + HLS player with signed URL tokens for protected video delivery

React Query for client-side data fetching, caching, and background revalidation

Performance-constrained architecture: LCP and CLS targets defined before component design

Frequently Asked Questions

A scalable LMS with secure video streaming, subscription billing, student dashboards, and admin tooling typically ranges from $25,000 to $70,000. A legacy rebuild adds scope — data migration, feature parity verification, and performance tuning — but the performance and SEO gains usually justify the investment. A slow LMS that ranks poorly is losing organic course enrollments every day.

Bunny Stream delivers video via HLS (HTTP Live Streaming) with token-based signed URLs. The video isn't a file at a static URL — it's a stream assembled from segments, each served with a short-lived signed token. Direct file access returns nothing. This is the standard approach for any LMS that charges for video content — unprotected video URLs are effectively public.

The Proetutor rebuild went from a legacy Laravel system with poor Core Web Vitals to a 97 Lighthouse performance score. The specific gains: SSR means course pages are fully rendered HTML on first load (critical for SEO), Bunny CDN delivers video and assets from edge nodes near the user, and the frontend was built with LCP and CLS targets defined before a component was written. Performance was a constraint on the architecture, not an afterthought.

Subscription-based access (recurring monthly or yearly billing), lifetime course purchase (one-time payment for permanent access), and free course publishing. All three are manageable from the admin panel. The billing architecture is designed so adding a new monetization model doesn't require schema changes.

Eight to sixteen weeks for a full migration from Laravel/Bootstrap to Next.js with feature parity, performance optimization, and data migration. The range depends on how much of the legacy data needs transformation, how many edge cases exist in the existing course content model, and whether new features are in scope alongside the rebuild.

Technical Authority

Architecture

  • SSR-first LMS architecture using Next.js 15 for SEO and Core Web Vitals performance
  • Decoupled Lumen v11 API backend for scalable course and enrollment data delivery
  • Bunny Stream + HLS signed URL pipeline for protected premium video streaming
  • MySQL schema designed for course, enrollment, and progress tracking at scale
  • React Query data synchronization and caching layer for the student dashboard

Use Cases

  • Online learning platforms and Udemy-style course marketplaces
  • Subscription-based video education platforms
  • Corporate training and video-based LMS systems
  • Legacy LMS performance and SEO modernization projects

Challenges Solved

  • Slow legacy LMS with failing Core Web Vitals hurting SEO and user retention
  • Unprotected video URLs exposing premium course content to unauthorized access
  • Client-side rendering limiting search engine indexability of course pages
  • Non-scalable monolithic architecture blocking course catalog growth

Technical Specs

Platform Type
Online Learning SaaS (LMS)
Frontend
Next.js 15 with SSR
Backend
Lumen v11 (PHP 8.4)
Database
MySQL 8
Video Infrastructure
Bunny Stream + HLS Player with signed URLs
UI Framework
Material UI v6
State Management
React Query
Authentication
Social Auth + Email
Monetization
Subscriptions + Lifetime Course Access

Built Under

SaaS Engineering Systems

Scalable SaaS platforms, subscription systems, and production-grade architectures.

View System →

You have read what I built. Now let's talk about what you need.

If your LMS is slow, failing Core Web Vitals, or losing course content to piracy through unprotected video URLs — those are specific problems this rebuild solved. The same approach applies to your platform.