Design Tool
Sattend
A visual design tool that lets anyone create professional branded graphics in seconds. Canvas-based editor with gradient backgrounds, text layers, image uploads, shapes, and an admin preset system that controls what users can change.
Type
Web App
Auth
Google OAuth
Backend
Supabase
Roles
User / Admin
Why I built this
Teams without designers still need to create on-brand visuals — social media posts, event banners, internal graphics. I wanted a tool where an admin sets up templates with locked brand elements (fonts, colors, backgrounds), and team members can personalize the rest without breaking the brand. Think Canva, but with admin-controlled guardrails.
Branding
How it works
Choose a background
Start with a solid color, linear gradient, or radial gradient. Upload a custom background image with blur and overlay controls.
Add images
Upload photos and logos to the canvas. Crop, scale, add borders, and adjust blur. Images are stored in Supabase Storage.
Add text and shapes
Place text layers with customizable fonts (loaded from Google Fonts), sizes, weights, and colors. Draw rectangles, circles, lines, and stars.
Arrange with layers
Reorder elements in the layers panel. Multi-select with Ctrl+Click, group with Ctrl+G. Full undo/redo history (30 steps).
Export
Download your design as a PDF. Save to your gallery or save as a reusable template for future use.
Key features
Canvas editor
HTML5 Canvas with real-time preview, drag, resize, snap-to-center, and element selection
Multi-select & grouping
Ctrl+Click to select multiple elements, Ctrl+G to group them for synchronized movement
Undo / redo
30-step history with full state snapshots, Ctrl+Z keyboard shortcut
Admin presets
Admins create templates with locked backgrounds, whitelisted fonts, and disabled features
Role-based access
User, Admin, and Super Admin roles with server-side verification via Supabase
Keyboard shortcuts
Ctrl+Z undo, Ctrl+G group, Delete remove, Shift+drag proportional resize
Tech stack
Frontend
Backend
PostgreSQL database, Google OAuth, file storage, Row Level Security
Canvas and Rendering
HTML5 Canvas API with dual rendering — fast preview + full-fidelity export. Image caching to prevent redundant redraws.
Architecture
5-step wizard UI (Background → Image → Text → Shapes → Export) with a live canvas preview. Each step is a collapsible panel that controls different element types.
Supabase handles everything backend: PostgreSQL for presets/templates/users, Google OAuth for authentication, Storage buckets for uploaded images, and Row Level Security for access control.
Admin preset restrictions system: admins can lock backgrounds, whitelist fonts, and disable features (upload, crop, shapes, layers). Users working from a preset only see what's allowed.
Service layer pattern — all Supabase calls abstracted into dedicated services (presetService, authService, templateService, storageService, roleService). No raw database calls in components.
What I learned
- -Building a canvas editor is deceptively complex — hit detection, resize handles, multi-select, and undo/redo each add layers of state management.
- -Supabase Row Level Security is powerful but requires careful policy design — one wrong policy can lock out admins or leak data.
- -Preset restrictions taught me to think about feature flags from the user's perspective: hiding a feature entirely is better than showing it disabled.
- -Lazy-loading Google Fonts on demand keeps the initial bundle small while supporting hundreds of font options.