Inspiration
Clipped was born from a simple need: capture every valuable snippet—spoken or copied—without breaking flow. While building accessibility tools, we realized the clipboard is still a black hole for most users and voice notes scatter into dozens of apps. By merging the two, we created a single, searchable memory hub that respects privacy and feels delightful to use.
What it does
Clipped continuously watches your system clipboard and listens for voice input.
Every copied item or spoken phrase is:
- Transcribed (if voice) via the Web Speech API
- Auto-classified and tagged
- Added to a searchable timeline with instant filters
- Synced to Supabase so it’s available on any device
Optional text-to-speech lets Clipped read content back for hands-free workflows.
How we built it
- Next.js 13 PWA with TypeScript and Tailwind
- Live transcription via Web Speech API piped into a custom
useClipboardhook - Data persisted to Supabase with row-level security (RLS)
- Optional TTS replies via
speechSynthesis - Deployed on Vercel with preview branches for rapid QA
- Responsive glass UI built on our in-house Design-System package
Challenges we ran into
- Speech-recognition drift – wrote adaptive confidence thresholds to curb fragment spam.
- Clipboard API edge cases – polyfilled legacy browsers and built optimistic UI updates.
- Real-time sync – avoided race conditions between voice and manual copy events.
- Hackathon crunch – shipping a polished demo plus story in < 48 h meant ruthless scope cuts.
Accomplishments we’re proud of
- Seamlessly blended clipboard capture and voice transcription in a single interface.
- Achieved 95 %+ transcription accuracy with graceful fallback logic.
- Delivered a fully deployable PWA with glassmorphic UI in under two days.
- Built a human-centered tool that genuinely improves accessibility.
What we learned
- Voice UX is tricky: balancing Web Speech API quirks with responsive feedback loops.
- Clipboard ≠ trivial: browser security and cross-tab sync need custom hooks.
- Design matters: glass UI and theme toggles boosted usability and joy.
- Supabase is a lifesaver for rapid auth + storage, but RLS tuning takes iteration.
What’s next for Clipped
- Browser extension & desktop tray app
- AI enrichment: summarize, translate, or transform clips on-the-fly
- Custom hotkeys and global shortcuts
- Team/shared workspaces with per-clip permissions
- Offline mode with conflict-free sync
Built With
- api
- css
- next.js
- react
- supabase
- synthesis
- tailwind
- typescript
Log in or sign up for Devpost to join the conversation.