Next.js · TypeScript · React 19 · Tailwind CSS v4 · shadcn/ui · TanStack Query (React Query) · Zustand · NextAuth.js (Auth.js v5) · React Hook Form · Zod · Embla Carousel · Lucide React · Sonner · Vercel

Facade

📺 Watch Live 📦 View Source

Facade is a modern, full-featured online learning platform built with Next.js 16 and the App Router. It enables students to browse and enroll in premium courses across programming, web development, data science, and design, with features like course filtering, progress tracking, tiered pricing plans, user authentication, and a glassmorphism-styled marketing landing page.

Challenges

Integrating Auth.js v5 (beta) with Next.js 16 App Router edge compatibility
Resolving TypeScript strict-mode errors across complex course data interfaces
Managing Tailwind CSS v4 configuration with shadcn/ui component overrides
Achieving smooth glassmorphism effects without performance degradation on video backgrounds
Deploying to Vercel and fixing API route type mismatches in the build pipeline

Solution

Pinned Auth.js beta version and used custom session/type augmentation
Defined shared Course interface in courses/page.tsx and re-exported across pages
Used tw-animate-css and CSS variables for Tailwind v4 theming compatibility
Used a fixed background video component with absolute positioning and z-index layering
Iteratively fixed API route handler types and Prisma model properties per Vercel build logs

Outcomes

Successfully deployed to production at facade-web-red.vercel.app
39 git commits achieving a clean, lint-passing build
Full landing page with 9 sections (Navbar, Hero, Stats, Features, Instructors, HowItWorks, CTA, Testimonials, Footer)
Functional course explorer with category, level, and price filters + search
Complete auth flow with login, signup, and protected routes
Pricing page with 3 tiers (Free, Pro RS5,000/mo, Lifetime RS45,000)

Technical Deep Dive

Facade — Online Learning Platform

Overview

Facade is a Next.js 16 SaaS learning platform targeting the Sri Lankan market with LKR-denominated pricing. It provides a complete course marketplace experience with a premium glassmorphism UI, built entirely on the React 19 + App Router stack.

Architecture

The frontend is structured around the Next.js App Router with a clear separation of concerns:

/src/app — pages (courses, about, pricing, contact, checkout, auth, legal)
/src/components/landing — 9 reusable landing section components
/src/components/common — shared utilities (BackgroundVideo)
/src/providers — TanStack Query client provider
/src/store — Zustand global state

Design System

Dark background (#000017 base) with purple/blue gradient accents
Glassmorphism cards with backdrop-blur-xl, bg-white/5, and border-white/10
Tailwind CSS v4 with custom CSS variables for theming
Geist Sans + Geist Mono fonts (via next/font)
tw-animate-css for entrance animations (animate-in, fade-in, slide-in-from-*)

Key Features

Landing Page — Full marketing page with hero stats, feature cards, instructor carousel, how-it-works steps, testimonials, and CTA
Course Explorer — Filterable/searchable grid with sidebar (category, level, price), list/grid toggle, trending & bestseller badges, progress indicators
Authentication — Login/signup with Auth.js v5 (Next.js middleware-protected routes)
Pricing — 3-tier plans (Starter Free, Pro, Lifetime) with feature comparison
SEO — Sitemap, robots.txt, per-page metadata, semantic HTML, single <h1> per page

Deployment

Hosted on Vercel (Project: facade-web, ID: prj_XDEUG3cJqW4AIvhnwoV8OBCni4d8)
CI/CD via GitHub → Vercel auto-deploy on push to main
Repo: Facade-center/public-client

Need outcomes like this on your roadmap?

Share your product or platform goals and I’ll map the architecture, milestones, and rollout plan.

Book a call Download résumé