CrumbNote

Inspiration

CrumbNote was born from the idea that big breakthroughs start as tiny "crumbs" of thought. We wanted to build an infinite, cozy space where ideas can be tossed, sketched, and connected without the constraints of traditional linear notes.

What it does

Infinite Space: A boundless "bread-themed" canvas for text, sketches, and media. AI Brainstorming: Directly uses Google Gemini within cards to expand ideas and summarize content. Deep Nesting: Cards can contain their own infinite canvases for unlimited organization. Multimedia: Integrated Spotify, YouTube, and webcam support to keep everything in one place. Sync Everywhere: Cloud-sync with Supabase and offline-first local storage.

How we built it

AI-Powered Development: To be honest, a significant portion of this project—from the complex canvas logic to the custom CSS animations—was built using Google AI Studio. By leveraging Gemini's ability to reason over large codebases, we were able to implement advanced features like viewport culling and recursive state management in record time. Stack: Built with React + Vite, Supabase (Real-time DB), and Capacitor/Tauri for mobile/desktop support.

Challenges we ran into

Handling the performance of a recursive, infinite canvas was the biggest hurdle. We had to implement custom rendering logic to ensure that zooming into a "nested universe" of notes stayed buttery-smooth.

Accomplishments that we're proud of

We’re most proud of the cozy, "baked-in" aesthetic. We successfully turned a productivity tool into a warm, inviting space with a bespoke "bread" theme that reduces eye strain and encourages focus.

What we learned

Building this project showed us how far AI collaboration has come. Using Google Studio allowed us to act as architects, focusing on the high-level design and UX while the AI helped bridge the gap between complex ideas and working code.

What's next for CrumbNote

We plan to introduce Spatial AI—features that allow the board to "understand" your sketches and automatically organize your messy thoughts into structured, beautiful diagrams.

Built With

• dexie
• framer-motion
• react
• supabase
• tauri
• typescript
• vercel