Orqestra

Design. Arrange. Ship.

Next.js (App Router)TypeScriptMaterial UIZustandFramer Motiondnd-kit

Reading modePrioritize hiring signals or engineering detail.

Project brief

The product bet, in plain language.

Turned theme tokens, structured sections, page ordering, and responsive preview into a site-builder loop that hangs together.

Hiring signal

Senior ownership across product framing, scope, and shipped interface quality.

Engineering read

Focus on constraints, architecture choices, external systems, and data flow.

Role: Frontend architecture, builder UX, design-token system, and preview workflow implementation
Scope: Theme editor, section schemas, page builder, responsive preview, versioning, and login experience
Core constraint: The builder needed flexibility without letting arbitrary configuration break preview fidelity.
Technical bet: A schema-first section model would make global theme propagation and reliable preview possible.

Drag to scrub

Orqestra Section Builder Hero accordion open in dark mode — Sections / Hero — dark mode

Preview responsive mode walkthrough

Orqestra Section Builder About accordion open in dark mode — Sections / About — dark mode

Orqestra Section Builder Social Proof accordion open in dark mode — Sections / Social Proof — dark mode

Orqestra Section Builder CTA accordion open in dark mode — Sections / CTA — dark mode

Orqestra Section Builder Nuestro Impacto accordion open in dark mode — Sections / Impact — dark mode

Orqestra Page Builder in dark mode showing saved section order and live page preview — Page builder — dark mode

Orqestra Theme Editor in dark mode showing color palettes and exponential typography scale — Theme editor — dark mode

Page builder reorder interaction

Orqestra Section Builder FAQ accordion open in dark mode with first preview FAQ expanded — Sections / FAQ — dark mode

Orqestra Section Builder Testimonials accordion open in dark mode — Sections / Testimonials — dark mode

Orqestra Section Builder Footer accordion open in dark mode — Sections / Footer — dark mode

Orqestra Section Builder Header accordion open in dark mode — Sections / Header — dark mode

Orqestra Section Builder Donations accordion open in dark mode — Sections / Donations — dark mode

Overview

A schema-driven website builder. Set a theme once, drop in structured sections — hero, FAQ, testimonials, CTA — drag them into order, and preview what ships on desktop, tablet, and mobile.

Problem

Most no-code builders either expose raw config you have to decode or lock you into a rigid template with no real device preview, so what you build and what ships drift apart.

Approach

Every section type — hero, FAQ, about, testimonials, social proof, CTA, header, footer — has its own fixed, editable schema rather than a freeform block. That constraint is what makes the live theme editor possible: when every field is known ahead of time, one primary color, font, or type scale change can flow across the site without breaking anything.

Project method

Detailed process

Requirements

The builder needed to let a user assemble a real multi-section site without hand-editing JSON or guessing what would happen at publish time. Requirements centered on editable theme tokens, reusable section schemas, ordered pages, version history, and a preview that matched desktop, tablet, and mobile output.

Stack choices

Next.js App Router was selected for route-based editing and preview pages. Material UI accelerated the admin-style controls, Zustand kept builder state simple and inspectable, dnd-kit handled reorder interactions, and Framer Motion gave section animation choices a controlled implementation path.

Design system

The design system was schema-first: theme fields such as primary color, background, font family, type scale, radius, spacing, shadow, border thickness, animation duration, easing, nav height, and glassmorphism were centralized in ThemeConfig. Section variants then consumed those tokens instead of each block inventing its own styling rules.

MVP definition

The MVP was a local-storage-backed builder with three durable stages: theme, sections, and page_builder. Supabase was planned behind an isolated storage API, but local persistence was enough to validate the editing model, versioning, and preview flow first.

Progression

Work progressed from token editing to section schemas, then to page assembly and preview. Once each section type had known fields and display options, drag-and-drop ordering and version history became straightforward because the app was always moving structured configuration rather than arbitrary markup.

Takeaway

Solution

Sections are dragged into order with dnd-kit across as many pages as needed, animation comes from a controlled menu and Framer Motion, and a dedicated preview route renders desktop, tablet, and mobile without guessing at breakpoints. Theme, sections, and layout are each independently versioned, so any earlier state is one click away.

Evidence

Highlights

04 signals

01Schema-driven sections — no raw JSON hand-editing required
02Instant, global theme propagation across every section on change
03Independent version history for theme, sections, and page layout
04Real desktop / tablet / mobile preview route, not simulated breakpoints