Technology & Components Used
Every technology listed here is verified against the actual project source code. No fake technologies.
Core
3| Technology | Purpose | Where Used |
|---|---|---|
| TypeScript | Application type safety | All source files |
| Next.js 16 | App Router framework, SSR, routing | Application shell, routing, API |
| React 19 | UI component architecture | All components |
Styling
4| Technology | Purpose | Where Used |
|---|---|---|
| Tailwind CSS 4 | Utility-first styling | All pages and components |
| shadcn/ui (New York) | Accessible component library | Buttons, cards, dialogs, forms |
| Design Tokens | Centralized color/spacing/motion tokens | globals.css, design-tokens.ts |
| CSS Variables | Runtime theme switching | ThemeProvider, all themes |
3D / Visualization
3| Technology | Purpose | Where Used |
|---|---|---|
| Three.js | WebGL 3D rendering | 3D scenes, hero, topic worlds |
| React Three Fiber | React renderer for Three.js | All 3D components |
| Drei | R3F helpers (Float, Line, Environment) | Scene components |
Animation
2| Technology | Purpose | Where Used |
|---|---|---|
| Framer Motion | Page transitions, scroll reveals, micro-interactions | RouteTransition, Reveal, Magnetic |
| GSAP | Available for advanced timelines | Installed, available for Phase 2+ cinematics |
Data / Storage
3| Technology | Purpose | Where Used |
|---|---|---|
| IndexedDB | Local-first persistent storage for learning data | LocalDataService, exam recovery |
| Zustand | Client state management with persistence | All stores (progress, exam, learning, performance, theme) |
| localStorage | Small preferences (theme, quality) | Theme store, performance store |
Performance
6| Technology | Purpose | Where Used |
|---|---|---|
| Adaptive Quality Engine | 5-level quality detection (ULTRA→MINIMAL) | PerformanceController, QualityManager |
| Performance Governor | Runtime FPS monitoring with auto-downgrade | performance-store.ts, useFpsMonitor |
| LOD System | Level-of-detail for 3D geometry | All 3D scene components |
| Lazy Loading | Code splitting, dynamic imports | 3D scenes, VisualizationRenderer |
| Visibility Detection | Pause rendering when offscreen | TopicSceneHost, HeroSceneHost |
| IntersectionObserver | Viewport-aware rendering | 3D hosts, Reveal component |
Security
4| Technology | Purpose | Where Used |
|---|---|---|
| Input Validation | Import data validation, record sanitization | LocalDataService, importAllData |
| Secure External Links | rel='noopener noreferrer' on all external links | Footer, creator page, social links |
| XSS Protection | No dangerouslySetInnerHTML on user data | All components |
| No Secrets in Frontend | No API keys, tokens, or credentials in source | Entire codebase |
NEXUS V3 ENGINE
The following subsystems are actually implemented in the current project.
Adaptive Quality Engine
5-level device detection + runtime FPS governor
3D Scene Manager
8 cinematic learning worlds with 2D fallback
Performance Governor
Hysteresis-based auto-downgrade/recovery
Theme Engine
35 dynamic visual identities with live switching
Local Data Engine
IndexedDB persistence with corruption recovery
Exam Engine
University-style exam with OR alternatives + timer
Revision Engine
Mastery scoring, flashcards, recommendations
Analytics Engine
Local-first performance analytics
Visualization Engine
47 interactive educational diagrams
Fallback Visualization System
2D fallback for every 3D environment
LOCAL-FIRST STORAGE
No backend database required for user learning progress. All data stays on the user's device.