How to vibe codeInstapaper

Prerequisites

• Node.jsfree

  Runtime environment for building and running the Next.js application.

• GitHubfree

  Version control and deployment pipeline source repository.

AI coding 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.

Build guide

1. 01Project 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02URL 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Distraction-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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Queue 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Browser 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Polish & 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Instapaper