Case Study · Personal Project
ImageLayoutBuilder
A browser-based canvas editor for creating structured visual layouts with real-time interactions, layer management, and persistent state.
Demonstrates handling of complex frontend state, real-time UI interactions, and performance-sensitive rendering in the browser.
Tech Stack
Next.jsKonva.jsRedux ToolkitTailwind CSS
Role
Frontend Engineer · Sole Developer
Core Contribution
- 01Built a canvas-based editor using Konva.js for real-time rendering and element manipulation.
- 02Implemented centralized state management using Redux Toolkit to manage elements, selection, and history.
- 03Designed interaction systems for drag, resize, rotate, and selection across canvas elements.
- 04Developed layer management with ordering and z-index control.
Engineering Decisions
- 01Used Redux for predictable state synchronization across canvas, sidebar, and inspector panels.
- 02Implemented undo/redo using full state history tracking — each action snapshots the canvas state.
- 03Used JSON serialization for saving and restoring layouts, keeping persistence simple and portable.
- 04Leveraged Konva.js for hardware-accelerated canvas rendering to keep interactions smooth.
Challenges
- 01Maintaining consistent state across multiple UI panels (canvas, inspector, sidebar) required strict unidirectional data flow.
- 02Designing undo/redo without breaking UI synchronization — solved by snapshotting normalized Redux state slices.
- 03Managing high-frequency drag/resize events while keeping the UI responsive required debounced state commits.
Key Highlights
- 01Non-trivial interactive system built entirely in the browser — not just static UI.
- 02Demonstrates strong frontend architecture: centralized state, layered rendering, and interaction design.
- 03Persistent layout state via JSON serialization, enabling save/restore workflows without a backend.