# How to Vibe Code Your Own Raindrop.io (and Stop Paying for It) > All-in-one bookmark manager - Site: https://raindrop.io - Category: Productivity & Research - Verdict: **Solid side project** (68/100 vibecodeable) - Estimated effort: 2-3 weeks part-time ## Verdict Build a personal web-app and extension subset for your own bookmark vault, but keep paying for the polished multi-platform apps and permanent archive infrastructure. Building a personal-use clone of Raindrop.io's core loop—saving bookmarks, organizing them into nested collections, tagging, and running full-text search—is a realistic project for an AI coding agent. The single biggest catch is the web archiving pipeline: capturing clean HTML snapshots and local copies of arbitrary web pages behind paywalls or complex SPAs requires significant scraping robustness that will break often. ### What you can't replicate - Instant native apps and browser extensions across every operating system and browser store - Seamless background synchronization with zero configuration - Mature multi-device push notifications and deep OS integrations ## What it does Cross-platform bookmark manager that lets users save, organize, annotate, and search through web pages, articles, books, PDFs, images, and videos with permanent web archiving and full-text search. ### Core features - Hierarchical collections and nested tags - Browser extension capture for Chrome, Firefox, Safari, Edge - Web clipping and permanent local asset archiving - Full-text search indexing across web pages and PDFs - Highlights and annotations management - Duplicate and broken link detection - Public collection sharing pages - Cloud backup syncing (Dropbox, Google Drive) ## The business ### Pricing - Free: $0 — Unlimited bookmarks, collections, devices, and import/export. - Pro: $2.99/mo — Advanced features including full-text search and web archiving. Founded 2013. Team size: 1-few. ## The hard parts - Multi-platform browser extension authentication and syncing across Safari's strict permission boundaries - Resilient web scraping and clean DOM extraction that survives modern dynamic JavaScript SPAs and paywalls - Full-text search indexing across heavy PDF attachments and web pages - Permanent web archiving pipeline capturing assets and local copies reliably ## How to vibe code Raindrop.io ### Prerequisites - Node.js (free): Required runtime for Next.js development and package management. - GitHub (free): Repository hosting and deployment pipeline integration. ### Recommended AI tools - Claude Code: Best-in-class terminal coding agent for scaffolding full-stack web applications and iterating through complex scraping logic. - Cursor: Ideal for fine-tuning the React dashboard UI, grid/list views, and bookmark preview components. ### Stack - Frontend: Next.js with Tailwind CSS and shadcn/ui components - Backend: Next.js API routes / Server Actions - Database: Turso (SQLite at the edge with vector search capabilities) - Auth: better-auth - Payments: none - Other: Vercel AI SDK, Firecrawl for robust web page scraping and markdown extraction ### Hosting - Cloudflare (Hosting the Next.js frontend, API endpoints, and storing archived assets in R2 object storage.): $0-5/mo ### Build guide 1. **Project Scaffolding & Database Schema** — Initialize the Next.js project with Tailwind CSS, configure better-auth, and set up the Turso database schema for collections, bookmarks, tags, and highlights. ``` Scaffold a new Next.js project using App Router and TypeScript. Install Tailwind CSS and configure standard layout components. Set up better-auth with email/password authentication connected to a Turso SQLite database. Create migration files for the following tables: 'collections' (id, user_id, title, parent_id, icon, sort_order, created_at), 'bookmarks' (id, user_id, collection_id, url, title, excerpt, cover_image, type [link|article|video|pdf|image], archived_at, created_at), 'tags' (id, user_id, name), 'bookmark_tags' (bookmark_id, tag_id), and 'highlights' (id, bookmark_id, text, note, color, created_at). Implement database connection utilities and test authentication flow locally. Ensure all TypeScript types are fully articulated and strict mode is enabled. ``` 2. **Core Bookmark Dashboard & Views** — Build the main dashboard layout with a sidebar for nested collections, and multiple view modes (Grid, List, Masonry) for browsing saved items. ``` Build a responsive bookmark manager dashboard in Next.js. Implement a collapsible sidebar showing nested collections with custom icons and badge counts. Create the main content area with a top search bar, filter pills by type and tags, and a view switcher supporting Grid view, List view, and Masonry view. Each bookmark card must display its favicon, title, domain, excerpt, cover image thumbnail, and tag pills. Add modal dialogs for creating/editing collections and adding new bookmarks manually via URL input. Ensure state management handles collection selection and filtering cleanly using search params. ``` 3. **Browser Extension Scraper & Ingestion API** — Develop a browser extension manifest v3 background script and popup to capture the current tab's URL, title, and selected text, posting it to the backend ingestion API. ``` Create a lightweight browser extension (Manifest V3) containing a popup UI and background service worker. The popup should allow the user to select a collection, view tags, and click a 'Save Page' button that extracts the current tab's URL, title, selected text, and favicon. Implement an API endpoint in the Next.js backend (/api/bookmarks) that receives this payload, fetches the target URL HTML using fetch, extracts meta tags (OpenGraph title, description, image), and saves the bookmark record to the Turso database. Return success feedback to the extension popup. ``` 4. **Web Archiving & Full-Text Search** — Integrate Firecrawl or server-side scraping to generate permanent local snapshots of saved web pages and index content into SQLite FTS5 for full-text search. ``` Implement a background archiving service in the Next.js backend. When a bookmark is created, trigger an asynchronous job that fetches the page content, converts it to clean Markdown, uploads a raw HTML snapshot to Cloudflare R2 object storage, and updates the bookmark's archived status. Configure SQLite FTS5 full-text search virtual tables indexing the bookmark titles, excerpts, and scraped content text. Create a search API route (/api/search) that executes fast FTS queries returning highlighted result snippets. Update the frontend search bar to query this endpoint with keyboard shortcuts and instant results dropdown. ``` 5. **Highlights, Notes, and AI Assistant** — Add annotation capabilities for highlighting text, saving notes, and integrating an AI assistant via Vercel AI SDK to summarize and answer questions about saved bookmarks. ``` Build an instant preview reader view in Next.js that loads the archived content or a clean reader mode of saved bookmarks. Allow users to select text within the reader and click a floating 'Highlight' or 'Add Note' button, saving passages to the highlights table. Integrate the Vercel AI SDK into a sidebar chat panel ('AI Assistant') that injects the current bookmark's scraped text and highlights into the LLM context, enabling users to ask questions, summarize articles, or generate tags automatically. Style all UI elements with clean Tailwind typography. ``` ### Cost vs paying **Starting costs (one-time):** - AI Coding Assistant (Claude Pro / Cursor): $20.00 - Total: $20.00 one-time **Ongoing costs (monthly):** - Cloudflare Workers & R2 Storage: $0.00 - $5.00/mo - Turso Database: $0.00/mo - Total: ~$3.00/mo - Paying for the SaaS instead: $2.99/mo - Build time: 25-35 hours - AI tool credits: $20 one-time (Claude Pro or Cursor) - Break-even: Paying for Pro is cheaper immediately; build for learning. ## Sources - [Raindrop.io Official Website](https://raindrop.io) - [Raindrop.io Help Center](https://help.raindrop.io)