Built with Tempo Labs

Curate - A Moodboarding tool for designers.

Abdul Ahmad

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.
What It Does
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
Smart Grouping System
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
Additional Features
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
Canvas Interactions
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
Built on Tempo AI
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
Current State & Future Plans
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.

Video Walkthrough

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

Posted Nov 17, 2025

Developed Curate, a web-based moodboard app for designers using Tempo AI.

Editly Photo Editor Development using Tempo Labs
Editly Photo Editor Development using Tempo Labs
Shin Signature - Brand Identity & Salon Experience Design Cr...
Shin Signature - Brand Identity & Salon Experience Design Cr...
Minimal Influencer Portfolio for Beatrice Iwujoha
Shin Signature - Brand Identity Design

Join 50k+ companies and 1M+ independents

Contra Logo

© 2025 Contra.Work Inc