The verdict: can you vibe code Raindrop.io?
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.
Estimated effort: 2-3 weeks part-time
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
Founded
2013
Raised
—
Team
1-few
Cheapest paid tier
$0
What Raindrop.io 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
- Pro$2.99/mo
Funding
Unknown / bootstrapped
Pay vs build, cumulative
No break-even inside 24 months at these numbers.
The hard parts of vibe coding Raindrop.io
- 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 vibecode Raindrop.io
Prerequisites
Node.jsfree
Required runtime for Next.js development and package management.
GitHubfree
Repository hosting and deployment pipeline integration.
AI coding tools
Recommended 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 & infrastructure
| Cloudflare | Hosting the Next.js frontend, API endpoints, and storing archived assets in R2 object storage. | $0-5/mo |
Build guide
01Project 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.02Core 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.03Browser 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.04Web 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.05Highlights, 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 for Raindrop.io
What will you build it with?
Starting total with Claude Code$0 one-time
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 Raindrop.io
$2.99/mo
Your time to build
25-35 hours
AI tool credits
$20 one-time (Claude Pro or Cursor)
Break-even
Paying for Pro is cheaper immediately; build for learning.
Vibe code Raindrop.io: FAQ
- Can you vibe code Raindrop.io yourself?
- Solid side project — 68/100 vibecodeable. 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.
- How long does it take to vibe code Raindrop.io?
- 2-3 weeks part-time — roughly 25-35 hours of hands-on time with an AI coding agent.
- How do you build your own Raindrop.io?
- Scoped to personal use: Next.js with Tailwind CSS and shadcn/ui components on the front, Next.js API routes / Server Actions behind it, Turso (SQLite at the edge with vector search capabilities) for data. Follow the 5-step build guide on this page — each step has a paste-ready prompt for an AI coding agent.
- How do you code your own Raindrop.io without being an expert?
- Use an AI coding tool (Claude Code or Cursor) and work in small steps: scaffold, data model, core screens, then deploy. Realistic effort: 2-3 weeks part-time. The prompts on this page are written so the AI does the heavy lifting.
- How much does it cost to vibe code Raindrop.io instead of paying?
- About $20.00 one-time to start and ~$3.00/mo to run, versus $2.99/mo for Raindrop.io. Break-even: Paying for Pro is cheaper immediately; build for learning..
- What stack should you use to vibe code Raindrop.io?
- Next.js with Tailwind CSS and shadcn/ui components; Next.js API routes / Server Actions; Turso (SQLite at the edge with vector search capabilities); plus Vercel AI SDK, Firecrawl for robust web page scraping and markdown extraction.