Grace Codella← Back home

Selected work

Mood Board Builder

A drag-and-drop tool for assembling visual style boards for event planning — colors, fonts, and reference images in one exportable canvas.

Next.jsTypeScriptTailwindSupabasereact-rnd
Screenshot / demo GIF goes here

The problem

Event planners often start with scattered inspiration — Pinterest boards, screenshots, swatches from a paint app — with no single place to bring color, imagery, and typography together into a shareable style direction before committing to a full design.

Key decisions

Flexible canvas data model

Every board element — color, image, or text — is stored as a row with a shared shape (position, size) and a flexible content field. This kept the canvas rendering logic simple: one component branches on type instead of maintaining several parallel systems.

Static layout before interactivity

Built the visual design with hardcoded elements first, before adding any drag/resize behavior. This kept styling decisions separate from interaction bugs — easier to debug one thing at a time.

Client-side palette extraction

Dominant colors are pulled from an uploaded image in the browser rather than on a server — no upload round-trip needed just to preview a palette, which keeps the board feeling immediate.

What I'd do differently

Notes on trade-offs, things that didn't work on the first pass, and what a v2 would tackle — this is the section worth being specific and honest in.