a second brain, and a visual thinking canvas for your ideas and dreams

inspired by Kinopio, scrapii lets you throw ideas onto a canvas as cards, connect them together, and watch your thoughts take shape. double-click to create, shift-drag to link, and just start thinking.

• pan and zoom around an infinite canvas
• double-click anywhere to create cards
• shift+drag between cards to link ideas together
• organize different projects into separate boards
• search through your spaces
• hit the "think" button to get AI-generated reflection questions based on your cards
• sign in to save everything to the cloud
• pick different colors for your cards
• works on desktop and mobile

frontend: React 19, TypeScript, Vite, Tailwind CSS, shadcn/ui, Auth0
backend: Node.js, Express, MongoDB, Mongoose, Swagger
ai: Google Gemini for the reflection questions

• Node.js 18+ and npm
• MongoDB (local or Atlas)
• Auth0 account
• Google Gemini API key (for AI features)

1. running it locally

you'll need Node.js 18+, MongoDB, an Auth0 account, and a Gemini API key.

1. clone it

   Install frontend dependencies

   install dependencies

   cd backend && npm install
   cd ../frontend && npm install

2. set up your env files

   backend/.env

   Frontend (frontend/.env):

   VITE_API_URL=http://localhost:5000
   VITE_AUTH0_DOMAIN=your-auth0-domain.auth0.com
   VITE_AUTH0_CLIENT_ID=your-auth0-client-id
   `frontend/.env`-api-audience

3. run both servers

   # terminal 1
   cd backend && npm run dev
   
   # terminal 2
   cd frontend && npm run dev

4. open http://localhost:5173

the API docs are at http://localhost:5000/api-docs if you're curious.

scrapii/
├── backend/
│   ├── config/           # Database and configuration files
│   ├── middleware/       # Auth middleware
│  project s         # MongoDB schemas (Space, Card, Connection, User)
│   ├── routes/          # API routes
│   │   ├── spaces.js    # Board/space management
│   │   ├── cards.js     # Card CRUD operations
│   │   ├── connections.js # Edge management
│   │   ├── users.js     # User profile
│   │   └── ai.js        # Gemini AI integration
│   └── server.js        # Express app entry point
│
└── frontend/
    ├── src/
    │   ├── components/
    │   │   ├── Auth/    # Authentication components
    │   │   ├── Canvas/  # Main canvas and card components
    │   │   ├── Spaces/  # Space/board management
    │   │   └── ui/      # shadcn/ui components
    │   ├── hooks/       # Custom React hooks
    │   ├── config/      # Auth0 configuration
    │   └── App.tsx      # Main app component
    └── public/          # Static assets

• Double-click on empty space to create a new card
• Type your idea and press Enter to save

creating cards: double-click empty space, type your thought, hit enter
linking cards: shift+drag from one card to another
deleting connections: click the line between cards
spaces: use the spaces manager to create different boards for different projects
ai questions: click the "think" button to get reflection questions based on your cards
navigation: click and drag to pan, scroll to zoom

sign in with Auth0 to save your work and access it from anywhere.

feel free to open issues or submit PRs!

MIT

inspired by Kinopio