Nousverse LLP Logo
Back to Journal
// Engineering•June 13, 2026•5 min read

Engineering a Custom LMS: Bypassing SaaS Tolls with Next.js & Firebase

How we built a proprietary, high-performance Learning Management System (LMS) with serverless database syncing, custom paywalls, and content previews to eliminate SaaS overhead.

The SaaS Trap for Course Creators

For organizations looking to distribute training material, tutorials, or online courses, the default path is almost always a third-party Learning Management System (LMS) like Teachable, Kajabi, or Thinkific.

While these SaaS platforms offer speed, they come with substantial structural trade-offs:

  1. Recurring Subscriptions: High monthly overhead fees that scale with features, not actual usage.
  2. Transaction Tolls: Platforms taking 2% to 10% cuts of every checkout transaction.
  3. Template Constraints: Restricted, generic, and slow interfaces that fail to represent modern brand identities.

To bypass these tolls and prove our capabilities, we engineered our own custom, lightweight LMS engine—Nousverse Academy—using Next.js, Firebase, and Tailwind CSS. It costs virtually $0/month on serverless tiers and gives us complete structural control.

Why We Avoided WordPress & Moodle Legacy Hacks

When seeking an alternative to SaaS subscriptions, many development teams default to open-source legacy systems like Moodle or attempt to piece together page builders and plugins (like LearnDash or TutorLMS) inside WordPress.

While these options seem convenient initially, they introduce severe long-term engineering debt:

  1. Bloat & Performance Drag: WordPress sites are packed with heavy PHP dependencies, database calls, and script overrides. This bloat severely slows down page speeds, hurting the user experience.
  2. Constant Security & Maintenance Overhead: WordPress is a frequent target for exploits. Relying on dozens of plugins means constant maintenance updates, backup monitoring, and patches to prevent database leaks. Moodle introduces similar hosting configuration and sysadmin overhead.
  3. Bending the UI to Your Brand: Bending pre-built WordPress themes or legacy PHP templates to match a SaaS product’s visual identity is incredibly difficult. You end up with compromises that make the tutorials feel disconnected from your product.
  4. Database Syncing & SSO Obstacles: Integrating a PHP-based legacy portal with a modern JavaScript/React SaaS database for Single Sign-On (SSO) is a complex integration headache.

By building on Next.js + Firebase, we bypassed these legacy limitations entirely. We achieved a serverless, zero-maintenance platform that loads in milliseconds, has zero security patch requirements, and can sync seamlessly with modern authentication APIs.

The Technical Architecture

We selected a serverless, decoupled stack to ensure maximum speed, automatic scalability, and zero maintenance overhead:

  ┌──────────────────────────────────────────────────────────┐
  │                   Next.js App Router                     │
  │     (Static Prerendering + Dynamic Checkout Pages)       │
  └─────────────┬───────────────────────────────┬────────────┘
                │                               │
                ▼                               ▼
  ┌───────────────────────────┐   ┌──────────────────────────┐
  │   Firebase Auth / SDK     │   │   Firestore Database     │
  │  (Identity & Credentials) │   │ (Student Progress Maps)  │
  └───────────────────────────┘   └──────────────────────────┘
  • Frontend: Next.js App Router (using Turbopack for compilation and Static Site Generation where possible to maintain instantaneous LCP metrics).
  • Database & Auth: Cloud Firestore and Firebase Authentication. They scale from zero and handle security sessions out-of-the-box.
  • Fallback Sync: A local-first synchronization engine that falls back to localStorage when offline or when database parameters are unconfigured.

Core Feature Engineering

Building a production-ready LMS requires solving three technical challenges: secure gating, state synchronization, and billing validation. Here is how we implemented them:

1. State Synchronization & Resilient Offline Fallbacks

To track student progress, completed lessons, and assignment links, we sync progress maps to Firestore under students_progress/{userId}. To ensure a seamless user experience even on unstable connections, we built a hybrid local-cloud sync engine:

// Initial load priority: localStorage first, then Firestore
const localProgress = localStorage.getItem(`progress_${userId}`);
if (localProgress) {
  setCompletedLessons(JSON.parse(localProgress));
}

// Fetch and merge cloud state asynchronously
if (db) {
  const docSnap = await getDoc(doc(db, "students_progress", userId));
  if (docSnap.exists()) {
    const merged = { ...parsedLocal, ...docSnap.data().completedLessons };
    setCompletedLessons(merged);
    localStorage.setItem(`progress_${userId}`, JSON.stringify(merged));
  }
}

2. Custom Checkout & Coupon Engine

Instead of hosting third-party checkouts, we built a custom billing terminal page supporting percentage and absolute discounts:

  • Promo Codes: Input fields validate discount coupons dynamically (e.g., NOUS100 for 100% free bypass, ACADEMY50 for 50% off).
  • Validation Rules: State maps dynamically compute prices client-side while preventing invalid cards or code submissions.

3. Dynamic Free Preview Gates

Rather than paywalling the entire system, we implemented a progressive preview gate. The lesson player queries the enrollment state of the user:

  • Week 1 (Lessons 1-3): Open for free trial, displaying a prominent floating preview banner advising the student of trial mode.
  • Week 2+ / Locked Modules: Dynamically rendered as an ACCESS_RESTRICTED locks screen. The page stops iframe embeds and video mounting, offering clear CTAs to upgrade.

A Launchpad for Custom Portals

Because the core engine is fully modular, it functions as a highly adaptable whiteboard template. We can re-skin the grid HUD system, hook up client Single Sign-On (SSO), and deploy this exact portal structure to serve other business cases:

  • Product Tutorials: Help SaaS platforms onboard users by walking them through interactive walkthroughs.
  • Developer Onboarding: Train engineers with structured code exercises and GitHub/Figma submission check-ins.
  • Interactive Documentation: Turn dry manuals into self-paced learning paths.

By owning the code and eliminating the SaaS toll booth, we created a faster, more beautiful, and infinitely more cost-effective learning portal.

Check out the live code at academy.nousverse.com.

Chat with Us