Building an Interactive Code Playground with React

One of the key features of this portfolio is the Interactive Code Playground. I wanted to create a space where visitors could not only read about my skills but actually see code in action.

The Architecture

The playground is built using:

React for the UI components
Framer Motion for smooth transitions and animations
Custom Execution Engine to simulate code running safely in the browser

Key Challenges

1. Safety First

Running user code or even simulated code requires careful handling. I implemented a sandboxed environment that mimics execution without exposing the main thread to potential infinite loops or malicious code.

2. State Management

Managing the state between the editor, the output console, and the visualization required a robust state management strategy. I used React's useState and useEffect hooks to create a responsive experience.

3. Syntax Highlighting

To make the code readable, I integrated a lightweight syntax highlighter that supports Python, JavaScript, and TypeScript.

The Result

The result is a fast, responsive, and safe environment for demonstrating code concepts. You can try it out right on the home page!

javascript

// Example of the execution logic
const handleRunCode = async () => {
  setIsRunning(true);
  // Simulate execution delay
  await new Promise(resolve => setTimeout(resolve, 1500));
  setOutput(mockOutput);
  setIsRunning(false);
};

I plan to expand this in the future to support more languages and real-time compilation via WebAssembly.