Deep Dive · 2025

BSL Academy — Admin Console

Scaling a learning platform's editorial backbone

ROLELead Frontend Engineer
DURATION8 months
TEAM1 designer · 2 frontend · 3 backend
TIMELINE2025
Next.jsTypeScriptTanStack QueryTailwindRadix

Challenge & Limitations

The operational hurdles, data boundaries, and strict service Level agreements of the system.

The Problem Statement

The platform's content team was managing thousands of courses, videos, and reading materials through a brittle internal tool. Editorial workflows were ad-hoc, role boundaries leaked, and analytics lived somewhere else entirely. The team needed a single console that could grow with the catalog and survive a change of editors.

Rigid Constraints

  • ·Strict role-based access across editor, reviewer, and publisher tiers
  • ·Tens of thousands of records across a dozen content types
  • ·A non-technical editorial team — the UI had to teach itself
  • ·Six-week deadline for the first production-ready milestone

Design & Engineering Decisions

The tactical solutions mapping backend systems, developer experience, and interface layout.

Architecture

  • →Adopted Next.js App Router with server components for the catalog views — the heaviest reads stay on the edge, the interactive surfaces stay snappy
  • →Centralized permissions in a single policy module consumed by both routing guards and component-level affordances, so role logic lives in exactly one place
  • →Built a typed table primitive on top of TanStack Table with virtualization, sticky headers, and column-level permissions — every list view in the app is one component

UX & Interface

  • →Designed a workflow ribbon that shows where a piece of content is in its lifecycle, so editors never have to guess what happens next
  • →Replaced modals with detail panels for inline edit flows — fewer context switches, better keyboard story
  • →Made empty and loading states first-class — every list, every detail view

Performance

  • →Server-rendered catalog pages with streaming so the table shell appears within ~200ms of navigation
  • →Aggressive query deduplication via TanStack Query, with selective prefetching on row hover
  • →Image upload pipeline with client-side resizing before upload to keep editorial uploads snappy on shared connections
Deliverables

The Outcome & Business Impact

The console replaced the legacy tool entirely within one quarter. Editorial throughput roughly doubled in the first month, time-to-publish dropped meaningfully, and the analytics surface — once an afterthought — became part of the daily editorial loop.

≈2×Editorial throughput
−45%Time-to-publish
97Lighthouse perf
Navigation

Interested in exploring other technical projects and DevOps systems?