Back to Projects
Sandpack Code Editor
An in-browser code editor and interview platform built with Sandpack, supporting 10 framework templates from React to Angular with live preview and session tracking.
The Problem
Quick coding experiments and interview sessions require setting up framework-specific environments that take minutes to configure. Candidates in coding interviews lose valuable time on environment setup instead of demonstrating their skills. A browser-based solution that provides instant, pre-configured environments eliminates this friction entirely.
The Approach
I leveraged Sandpack's in-browser bundler to create a zero-setup code editor with 10 pre-configured framework templates. The interview mode adds session management, challenge selection, and submission tracking on top of the editor. CodeMirror provides the editing experience with auto-save ensuring no work is lost.
Technical Details
Next.js hosts the application with Sandpack handling in-browser bundling via Web Workers for React, Vue, Angular, and Node.js templates. CodeMirror powers the editor with syntax highlighting, autocomplete, and bracket matching. Session state persists to local storage for auto-recovery. The interview mode uses a challenge schema that defines problem statements, starter code, and expected behavior per framework.
The Outcome
Shipped a browser-based code editor supporting 10 framework templates with instant live preview, a structured interview mode with difficulty-tiered challenges, and a code playground with file management and auto-save. The Sandpack bundler runs entirely client-side, making the editor responsive regardless of server load or network conditions.
Tech Stack
Next.jsSandpackCodeMirrorTypeScriptTailwind CSS
Related Projects
NexiMeet
An all-in-one virtual events platform with live streaming, exhibitor booths, real-time chat, and attendee engagement tools built with Next.js and Stream.
InterView.ai
An AI-powered voice interview simulator using OpenAI's Realtime API and WebRTC for realistic practice with live feedback across technical, behavioral, and HR rounds.
Multilingual Chat
A real-time chat application that breaks language barriers using Sutra AI-powered translation, letting users communicate in 10+ languages within private rooms.