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.

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
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
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.
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 →