High-performance website builder with drag-n-drop, undo/redo, keyboard-first navigation

reactjs

design engineering

Problem & My Approach

Most website builders optimize for beginners - visual, guided, but slow. Every action requires clicking through menus and waiting for animations. I built a website builder for power users who already know what they want: keyboard-first, instant interactions, zero friction.

Fig: Website Builder

ROLES

a user, A designer and a developer

As a user, I observed myself where I -

  1. Paused

  2. Thought something was broken

  3. Expected performance to feel jank-free

  4. Expected the product to feel native


As a designer, I made sure -

  1. Keyboard navigation feels intuitive,

  2. The performance stayed up to the bar

  3. And the product is scalable


As a developer, I made sure -

  1. The code is clean and not redundant

  2. The stack + methodologies were scalable

  3. The logic was easy to architect

building

The Technical Execution

Built with React and Zustand state management. Custom drag-and-drop system using dnd-kit overlays. Debouncing logic maintains 60fps during intensive updates. The result: a builder that feels as responsive as a code editor, not a toy.