Back to Portfolio
Production Live AppCreator & Full-Stack Engineer
Codevia
An interactive learning workspace that synchronizes structured YouTube video programming directly with an in-browser, VS Code-like Monaco code editor engine. Leverages reactive state management for real-time code execution and persistence.
AngularAngular SignalsSupabase Auth/DBMonaco EditorYouTube Player API
System Challenge
Creating a seamless, zero-latency learning environment where video timestamps trigger precise code-editor states, preventing students from falling out of sync with complex programming tutorials.
Architecture & Solution
Designed a highly reactive Angular architecture utilizing Angular Signals to bridge the YouTube iFrame API with Microsoft's Monaco Editor. State transitions are memoized and persisted securely in Supabase to allow students to pause and resume their sessions across devices.
Performance Outcomes
- Zero-lag synchronization between video playback ticks and code editor diffs.
- Highly extensible file-tree architecture supporting multiple simulated languages.
- Seamless auth and progress tracking via Supabase.