# How to Vibe Code Your Own Instapaper (and Stop Paying for It) > Save web pages for distraction-free reading anywhere - Site: https://instapaper.com - Category: Productivity & Content Curation - Platforms: Web app, iOS app, Android app, Browser extension - Verdict: **Solid side project** (65/100 vibecodeable) - Estimated effort: 2-3 weeks part-time ## Verdict Build a personal read-it-later web app for yourself in a couple of weeks, but keep paying for the mobile apps and Kindle integrations. Cloning Instapaper's core loop—saving URLs, parsing clean article text with readability algorithms, and presenting a clean reading view—is a rewarding side project that you can construct with an AI coding agent. However, the real product relies heavily on battle-tested content scraping parsers that handle paywalls, cookie banners, and weird DOM structures, plus native app push sync and Kindle email delivery. If you want a personal self-hosted reading backlog, building it is entirely viable; if you want the polish of their iOS app and e-reader integrations, paying $5.99/mo is vastly more efficient. ### What you can't replicate - Native device share sheet integrations and e-reader hardware partnerships - 18 years of parser edge-case refinements for broken web layouts - An existing archive of saved links ## What it does An online read-it-later bookmarking service that strips clutter from web pages, provides typography-focused reading modes, supports text-to-speech playlists, and syncs articles across web and mobile apps. ### Core features - URL saving and browser bookmarklet / extension capture - HTML extraction and clutter sanitization (removing ads, nav, sidebars) - Typographic distraction-free reading interface with custom fonts and themes - Folder categorization and archive/unread organization - Text-to-speech conversion for audio playlists - EPUB/MOBI generation for Kindle delivery - Highlighting and annotation system - Cross-device synchronization queue ## The business ### Pricing - Free: Free - Instapaper Premium: $5.99/mo — Unlocks full-text search, permanent archives, and audio playlists. - Student: $3.00/mo Founded 2008. Team size: Boutique indie team. ## The hard parts - Reliable web-scraping and boiler-plate stripping across thousands of distinct site structures without breaking - Permanent snapshot archival (storing rendered HTML/PDFs so dead links stay readable) - Kindle email delivery and EPUB formatting edge cases - Robust offline-first mobile sync queue with conflict resolution ## How to vibe code Instapaper ### Prerequisites - Node.js (free): Runtime environment for building and running the Next.js application. - GitHub (free): Version control and deployment pipeline source repository. ### Recommended AI tools - Claude Code: Best-in-class terminal agent for scaffolding multi-file full-stack web applications and iterating on parser logic. - Cursor: Ideal code editor for reviewing component diffs and fine-tuning typography UI stylesheets. ### Stack - Frontend: Next.js with Tailwind CSS - Backend: Next.js Server Actions / API Routes - Database: Turso (SQLite at the edge) - Auth: better-auth - Payments: None (personal use) - Other: Firecrawl for robust article extraction and markdown conversion, Resend for email-to-article inbound parsing and notifications, Vercel AI SDK for text summarization features ### Hosting - Cloudflare (Hosting the static frontend assets and edge database replicas via Turso and D1): $0/mo - Fly.io (Running background scraping workers and email parsing handlers): $3-5/mo ### Build guide 1. **Project Scaffolding & Database Schema** — Initialize the Next.js application with TypeScript, Tailwind CSS, Turso SQLite database, and better-auth configuration. ``` Create a new Next.js 16 project with TypeScript and Tailwind CSS. Set up a Turso libSQL database client connection. Implement better-auth for single-user authentication with a secure password hash. Create database schema migrations for tables: 'articles' (id, url, title, author, content_html, raw_text, excerpt, word_count, reading_time, archived, starred, folder, created_at) and 'folders' (id, name, user_id). Provide clean modular code structure under app/ and lib/ directories with zero placeholder comments. ``` 2. **URL Saving & Content Extraction Pipeline** — Implement the article saving endpoint that fetches raw target URLs, strips clutter using parsing libraries or Firecrawl, and extracts clean reader text. ``` Build a backend API route POST /api/articles that accepts a URL string. Use an HTML parsing library (or Firecrawl API integration if configured) to extract the article title, main text content, author, and estimated word count while stripping ads, scripts, navigation bars, and footers. Sanitize the extracted HTML to prevent XSS. Save the parsed article payload into the Turso database with a timestamp and default unread status. Handle fetch failures, timeouts, and malformed HTML gracefully with detailed error responses. ``` 3. **Distraction-Free Reader Interface** — Build the core reading view featuring customizable typography, dark/light/sepia themes, font size scaling, and content layout controls. ``` Create a distraction-free reader view component in Next.js at /read/[id]. Render the sanitized article HTML with clean typography (support sans-serif, serif, and monospace font families, adjustable font sizes, line height sliders, and max-width column constraints). Implement a settings overlay panel stored in local state/localStorage to instantly toggle themes (Light, Dark, Sepia, Solarized). Include sidebar navigation for returning to the article list. ``` 4. **Queue Management, Folders & Archiving** — Build the main dashboard listing unread articles, archive views, starred items, and custom folders with batch management actions. ``` Build the main dashboard UI at / (home) showing tabs for 'Unreads', 'Archive', 'Starred', and custom 'Folders'. Implement list item cards displaying article title, domain favicon, excerpt, and estimated reading time. Add inline actions for each article: mark as read/archive, toggle star/favorite, move to folder, and delete. Support multi-select batch actions for archiving or deleting multiple articles at once. Ensure snappy client-side filter updates and server action mutations. ``` 5. **Browser Extension / Bookmarklet Capture** — Create a browser extension or bookmarklet script allowing one-click article saving from any active browser tab. ``` Build a lightweight browser bookmarklet script and a simple Chrome extension popup component that captures the current active tab's URL and document title, then sends a POST request to the self-hosted Instapaper clone API endpoint with user authentication headers. Show an instant success or failure notification badge inside the popup. Include setup instructions and copy-paste bookmarklet code directly in a settings page of the web app. ``` 6. **Polish & Deployment** — Add keyboard shortcuts, error handling boundaries, and deploy the application to Vercel and Fly.io. ``` Add global keyboard shortcuts for power users (e.g., 'j'/'k' for article navigation, 'a' to archive, 's' to star, 'o' to open reader view). Implement error boundaries, loading skeletons for article lists, and mobile-responsive CSS breakpoints. Write a deployment configuration for Vercel (frontend/API) and document environment variables required for TURSO_DATABASE_URL, BETTER_AUTH_SECRET, and optional FIRECRAWL_API_KEY. Verify build passes without TypeScript errors. ``` ### Cost vs paying **Starting costs (one-time):** - Custom domain (optional): $12/year - AI coding tool subscription: $20 one-time - Total: ~$32 one-time **Ongoing costs (monthly):** - Fly.io backend worker hosting: $4/mo - Turso database & Cloudflare edge: $0/mo - Total: ~$4/mo - Paying for the SaaS instead: $5.99/mo - Build time: 25-35 hours - AI tool credits: $20 (Claude Pro / Cursor) - Break-even: N/A (built for personal use & learning) ## Sources - [Instapaper Premium Feature Matrix](https://www.instapaper.com/premium) - [Wikipedia - Instapaper History & Timeline](https://en.wikipedia.org/wiki/Instapaper) - [Medium - Instapaper Hikes Premium Prices](https://medium.com)