Beacon Certification App

Executive Summary

I designed and built a full-stack partner certification platform that delivers structured training across three progressive tiers. Partners read lessons, watch embedded videos, check understanding with inline quizzes, and prove mastery through a gated final assessment. The entire platform ships with no server infrastructure: progress state is managed through a pure-function library I wrote, keeping the system fast to build, easy to maintain, and free to run.

The platform gives Beacon's partner program a single destination that mirrors a real certification experience: read, learn, prove it.

Try It

The Problem

Partner programs typically sprawl across PDFs, slide decks, and scattered wikis. There's no structured learning path, no way to verify knowledge, and no sense of progression. This app gives partners a single destination with a real certification experience, one that enforces sequential mastery rather than letting partners skip to the end.

• No structured path existed for partner onboarding
• Knowledge couldn't be verified; completion was self-reported
• Content scattered across PDFs and slides with no progression logic
• Partners had no sense of achievement or certification to point to

The Strategy

1. Mirror a real certification experience: three tiered levels (Certified → Gold → Platinum) with progressive unlock gates enforced at the route level
2. Enforce sequential mastery: lessons unlock in order; assessments lock until every preceding lesson is complete
3. Ship fast, stay maintainable: all progress state in a pure-function localStorage library, no server infrastructure to build, deploy, or maintain
4. Rich content without JavaScript bloat: Markdown prose processed server-side via remark + remark-html; no JS shipped for reading

Key Design Decisions

Progressive tier gating

Each certification tier is locked until the previous one is fully completed and its final assessment passed. This is enforced at the route level via a client-side access guard that silently redirects if a partner tries to skip ahead; the lock isn't just visual, it's structural.

Linear lesson progression

The app computes a flat ordered list of all lessons across all modules and checks whether every preceding lesson is marked complete before granting access. If not, the user is redirected to the first incomplete lesson. Partners can't self-report completion or navigate out of order.

Progress tracking with no infrastructure cost

All progress lives in localStorage under a single JSON key. A pure-function library (lib/progress.ts) handles every read, write, and derived state: getLevelSummary, isLevelUnlocked, getNextLesson. A useProgress hook wraps this in useState + useEffect for persistence on every change. No API routes, no database, no ongoing hosting cost.

Server-side content pipeline

Lesson content is written in Markdown and processed at request time through a remark → rehype → remark-html pipeline. HTML is injected via dangerouslySetInnerHTML on a server component, with no JavaScript shipped for prose rendering. This replaced next-mdx-remote which bundled an incompatible React 18 copy against Next.js 16's React 19.

shadcn/ui design system

The full component set (Button, Card, Badge, Progress) is built on Radix UI primitives through shadcn/ui, styled with Tailwind CSS custom properties mapped to the Beacon design palette. The CSS variable layer (--primary, --border, --radius) keeps the design system coherent while ensuring every component is accessible out of the box.

Key Screens

Challenges Solved

Silent routing failures

A framework-level change caused dynamic lesson routes to fail with no visible error: pages would simply 404. Diagnosed and resolved a non-obvious API change in how route parameters are passed through the component tree, restoring all dynamic routes without touching lesson or module content.

Dependency conflict blocking the content pipeline

A third-party content rendering library shipped with its own incompatible version of React, breaking the entire lesson rendering pipeline at build time. Replaced it with a lightweight custom pipeline that processes Markdown server-side, resolved the conflict, and reduced the JavaScript bundle size in the process.

CI pipeline blocked at deployment

A naming collision between a course variable and a framework-reserved identifier failed silently in local dev but blocked deployment in Vercel's CI pipeline. Identified the conflict, renamed the affected variables across the codebase, and restored clean deploys.

Outcomes & Impact

• Eliminated the need for a third-party LMS or certification platform, avoiding recurring subscription costs with a purpose-built solution
• Partners can progress through structured learning paths with real mastery gates, not self-reported completion
• Content authors add new lessons by writing a Markdown file; no code changes required
• Deployed to Vercel; live at partner-certification.vercel.app

Leadership

• End-to-end ownership: architecture decisions, design system, engineering, and deployment
• Identified and resolved three non-obvious framework-level breaking changes (async params, React version conflict, ESLint peer deps)
• Designed for content-author handoff; adding lessons requires no engineering involvement
• Built a stateful learning experience with zero backend cost or operational overhead