React LLD Playground

A coding playground for practicing React components with live preview.

Problem selection page

Coding workspace with live preview

Features

• Dark mode (default) with light mode toggle
• Monaco editor with syntax highlighting
• Live preview with in-browser bundling
• File protection (editable vs read-only)
• Save progress to SQLite
• Reset to default button
• File tree navigation
• Browser back/forward support
• 5 practice problems included

Quick Start

npm install
npm run dev

Visit http://localhost:5173

Tech Stack

Frontend: React, TypeScript, Vite, Monaco Editor, esbuild-wasm, React Router
Backend: Node.js, Express, TypeScript, SQLite

Project Structure

react-lld-playground/
├── problems/              # Problem definitions
│   ├── counter/
│   ├── todo-list/
│   ├── accordion/
│   ├── tabs/
│   └── fetch-users/
│       ├── problem.json
│       ├── editable.json
│       ├── preview-wrapper.jsx
│       └── setup/
│
├── server/                # Express backend
│   └── src/
│       ├── routes/
│       ├── services/
│       └── db/
│
└── client/                # React frontend
    └── src/
        ├── pages/
        ├── components/
        └── services/

How It Works

1. Select a problem from the list
2. Edit code in Monaco editor (some files are read-only)
3. Live preview updates as you type (500ms debounce)
4. Save with Cmd/Ctrl+S or the Save button
5. Reset to original code anytime

Technical Details

• In-browser bundling: esbuild-wasm bundles code in the browser, no server round-trips
• Virtual file system: Bundler reads from in-memory object instead of disk
• CSS handling: CSS imports converted to style tag injections
• Preview isolation: User code runs in sandboxed iframe
• Security: Backend validates all saves against editable.json, returns 403 if violated
• Path protection: All file reads restricted to setup/ directory

Adding Problems

Create a directory in problems/ with this structure:

problems/
  your-slug/
    problem.json
    editable.json
    preview-wrapper.jsx
    setup/
      src/
        App.jsx
        components/
        styles/

problem.json:

{
  "slug": "your-slug",
  "title": "Problem Title",
  "version": 1,
  "difficulty": "medium",
  "description": "What to build.",
  "tags": ["state", "events"]
}

editable.json:

{
  "files": [
    "setup/src/App.jsx"
  ]
}

Only files listed here can be edited by users.

preview-wrapper.jsx:

import App from "./setup/src/App.jsx";

export default function PreviewWrapper() {
  return <div style={{ padding: 24 }}><App /></div>;
}

API Endpoints

• GET /api/problems - List all problems
• GET /api/problems/:slug/tree - File tree + editable list
• GET /api/problems/:slug/file?path=... - File content
• GET /api/problems/:slug/preview-wrapper - Preview wrapper
• POST /api/users/:userId/problems/:slug/snapshots - Save progress
• GET /api/users/:userId/problems/:slug/snapshots/latest - Get latest save

Security

• User code runs in sandboxed iframe
• Backend validates all saves against editable.json
• Path traversal protection (prevents ../ attacks)
• solution/ directory never served
• 1MB request size limit

Development

# Start both client and server
npm run dev

TODO

• Login/Auth
• Compression middleware (zip the files when bulk-sending to client)
• ETag/Cache-Control headers
• Auto-save (every 30s)
• Snapshot history UI
• Problem search/filter
• Test runner (testcases to check whether the solution is correct or not)
• Multi-user auth

License

MIT