meet scrapii!
you can start by adding a few thoughts
or many!
you even have an assistant (scrapii!) to help you continue your chain of thoughts
add a new canvas for each topic you want to think about
..and search across all your notes on different canvases
welcome page

scrapii

inspiration

we loved Kinopio and how it lets you organize thoughts spatially instead of in rigid lists. but we wanted to make something that felt more playful and organic that helped ideas connected naturally. we also wanted to add AI into the mix to help push your thinking further when you hit a mental block.

what it does

scrapii is your second brain on a canvas. double-click anywhere to create a card, write your thoughts, and shift-drag between cards to link ideas together. you can zoom, pan, resize, and organize across multiple boards - e.g. one for work brainstorming, another for journalling, or one for travel ideas.

the "think" button helps you expand your board: it reads all your cards and uses Google Gemini to generate reflection questions tailored to your specific thoughts. it's like having a brainstorming partner who asks the right questions at the right time.

everything syncs to the cloud with Auth0 authentication, so you can pick up where you left off on any device.

how we built it

frontend: React 19 + TypeScript for the interactive canvas, Vite for blazing fast dev experience, Tailwind CSS + shadcn/ui for clean components, Auth0 for secure login

backend: Node.js + Express API, MongoDB for storing cards/connections/spaces, Swagger for API docs

ai integration: Google Gemini 2.5-flash API to analyze canvas content and generate contextual reflection questions

deployment: Railway for backend hosting and environment management

the canvas interactions (pan, zoom, drag, resize) are all custom-built in React with careful state management to keep things smooth even with tons of cards.

challenges we ran into

deployment was rough - syncing environment variables across frontend and backend, getting Auth0 configured for production URLs, and ensuring MongoDB connections stayed stable.

the canvas interactions were tricky. managing state for simultaneous operations (dragging while zooming, creating cards while panning) required a lot of fine-tuning. we also hit issues with the AI card generation where all 3 questions would be created in the database but only 1 would render until refresh.

the Gemini API also kept cutting off responses or generating overly wordy questions until we set the right token limits.

accomplishments that we're proud of

we really love how the app feels. cards drag smoothly, edges connect naturally, and the whole canvas feels like a genuine thinking space.

getting the AI integration working seamlessly was huge - it generates useful questions based on your content, not generic prompts. the shift-drag to create connections also makes linking ideas feel effortless.

we also built a full authentication system with user profiles, multiple spaces per user, and proper MongoDB relationships.

what we learned

React state management in highly interactive UIs is very challenging, especially when needing to map similar mouse inputs to various interactions.

we also improved our skills at full-stack deployment, environment configuration, and debugging production issues that don't show up locally.

what's next for scrapii

short term:

richer card types: embed images, link previews, even songs/Spotify tracks
better AI prompts and more interaction modes (summarize this board, suggest connections, etc.)
real-time collaboration so multiple people can brainstorm on the same canvas

long term: