I recently launched SortStory, a platform designed to share computer science knowledge through interactive 3D/glassmorphism visualizers. Today, I want to pull back the curtain for the engineering community and share the system architecture, tech stack, and design decisions that power the platform.

The Core Technology Stack

SortStory is built on a modern, edge-ready foundation designed for speed and SEO optimization:

Framework: Next.js 16 (App Router + Turbopack) for SSR, SSG, and optimized API routes.

Language: Strict TypeScript.

Styling & Animation: Tailwind CSS with custom Vanilla CSS for glassmorphism tokens, paired with Framer Motion for highly performant UI transitions.

Database: PostgreSQL via Supabase, utilizing strict Row Level Security (RLS).

Managing High-Frequency State Without Bloat

A major challenge was managing the global state for the Multi-Stack Code Engine. SortStory supports 7 languages (Python, JS, TS, C++, Java, Rust, Go).

Instead of reaching for heavy global state libraries, I architected a lightweight LanguageContext tied to browser localStorage. When a user toggles a language in the header, the Context updates globally, instantly re-rendering all code blocks across the 9 learning modules without causing unnecessary repaints in the heavy Visualizer Canvas.

Similarly, an AuthContext dynamically governs site access modes (free_all, free_students, gated), allowing me to toggle paywalls and code-gates via the database without redeploying the application.

Telemetry and AI Predictive Intelligence

To ensure the platform actually serves the educational needs of its users, I built a two-tier analytics engine:

PostHog Product Analytics: Tracks user retention, feature flags, and session replays.

Custom Clickstream & AI Engine: A custom useSiteAnalyticsTracker hook listens to every route change and button click.

This telemetry data is piped into an AI Predictive Weakness Model. The AI calculates a 0–100 "weakness score" for each of the site's modules based on traffic and engagement drop-offs. It then surfaces actionable UI/UX recommendations to my Admin Console—for example, suggesting a new hero CTA for the Automata module if engagement dips.

Database Architecture & Isolation

The backend relies on a shared PostgreSQL database. To maintain strict domain isolation, all SortStory tables utilize a sortstory_ prefix.

The schema includes:

sortstory_users & sortstory_student_applications: For managing access and verifying academic credentials.

sortstory_access_codes: Enforces a strict 1-connection rule to prevent credential sharing on gated plans.

sortstory_site_analytics_events & sortstory_site_module_insights: Stores the telemetry data and AI-generated module weakness scores.

Technical SEO Integration

Because education tools rely heavily on organic discovery, technical SEO was baked in from Day 1:

JSON-LD Schema: Injected WebSite and SiteNavigationElement schemas directly into the Next.js layout.tsx to encourage Google Sitelinks.

Dynamic Sitemaps: Utilizing the Next.js App Router sitemap.ts to map all 11 core routes dynamically with weighted priority scores.

Explore the Platform

Building SortStory has been an incredible journey in system design, performance tuning, and giving back to the developer community.

Experience the architecture live: sortstory.adnan-mangaonkar.com

About the Architect I am Adnan Mangaonkar, a software engineer dedicated to building scalable systems and empowering the next generation of tech talent.

🌐 Portfolio: adnan-mangaonkar.com

💼 Business: business.adnan-mangaonkar.com

I'd love to hear your thoughts on the architecture or how you handle state management for high-frequency renders in Next.js! Let's discuss in the comments.