Project:Code Notebook

Description:

A browser-based interactive notebook for JavaScript and React — Markdown notes and runnable code cells in a single workspace. Users edit code in Monaco Editor, see a live preview in a sandboxed iframe, format code with Prettier, and import npm packages (e.g. axios) fetched from unpkg and bundled in the browser via esbuild-wasm. Cumulative execution lets variables and functions from earlier code cells flow into later ones. The architecture is layered: UI and state (Redux Toolkit), a bundling pipeline (custom esbuild plugins), iframe preview runtime, and a backend layer (Express API + CLI) in an npm workspaces monorepo. For the public Render demo, a read-only mode serves a canonical notebook on the server while edits persist in the browser's localStorage; Reset demo restores the default cell set.

Tech stack:

• TypeScript
• React 19
• Redux Toolkit
• Vite
• esbuild-wasm
• Monaco Editor
• Express
• npm workspaces