Curate - A Moodboarding tool for designers.

Curate is a web-based moodboard application designed to help designers collect, organize, and document visual inspiration. Built entirely on Tempo AI as a portfolio project.

Curate provides two distinct ways to organize images:

Grid Mode - A responsive masonry layout that automatically arranges images into columns. Images can be grouped into collapsible sections with headers, making it easy to categorize different types of inspiration (navigation examples, hero sections, color palettes, etc.).

Freeform Mode - An infinite canvas where you can position images anywhere. This mode includes:

Zoom and pan controls optimized for trackpad navigation

Snap-to-grid system for precise alignment (invisible 20px grid)

Smart alignment guides that appear when dragging (red/blue indicators showing when edges align)

Multi-select capabilities (Cmd+Click, Shift+Click, or drag a selection rectangle)

Alignment toolbar with options to align left/center/right and top/middle/bottom

The grouping feature was inspired by Figma's Auto Layout. When you group images together, they automatically arrange with consistent spacing. You can:

Toggle between horizontal and vertical layouts

Adjust gap spacing between images with +/- controls

Move the entire group as a single unit

Watch images reflow automatically when adding or removing items from groups

Sticky notes for documenting ideas directly on the canvas (6 color options)

Board management with inline editing and deletion

Export boards as JSON or download all images

Theme switching (light/dark mode with custom appearance modal)

Keyboard shortcuts for power users (arrow keys for nudging, Cmd+A for select all, Delete, Escape)

All data stored locally with full localStorage persistence

The canvas interactions were carefully designed to feel responsive and intuitive:

Dragging has subtle momentum and smooth animations via Motion.dev

Images snap to the grid when the feature is enabled, providing guidance without restriction

Multi-select shows a blue outline on all selected items with a semi-transparent selection rectangle during drag

Context menus appear on right-click for quick access to grouping and deletion

Hover states and visual feedback make it clear what's interactive

This entire project was built using Tempo AI - from initial planning through feature implementation to deployment preparation. The AI assisted with:

Architecture decisions and state management patterns

Implementing complex features like auto-layout grouping and snap-to-grid

Debugging interaction issues (zoom transform math, multi-select logic)

Writing clean, type-safe TypeScript code

Optimizing performance and fixing edge cases

The application is functional and deployed, but there are known bugs I plan to address in future versions:

Some edge cases in group reflow calculations

Occasional z-index conflicts between modals and canvas elements

Performance optimization needed for boards with 50+ images

Mobile responsiveness requires additional work

The goal was to create a portfolio piece that demonstrates interaction design thinking and clean code organization, rather than a fully production-ready tool. It showcases what's possible when focusing on the details - smooth animations, precise alignment controls, and thoughtful UX patterns borrowed from professional design tools.

Tech Stack React • TypeScript • Vite • Motion.dev • Tailwind CSS • Context API

Live Demo: https://tempo-deployment-2bae7de8-f2a6-4ba1-steel.vercel.app/