How to vibe codeMatter
The modern read-later app for iPhone, iPad, and web
hq.getmatter.com ↗Productivity / Reading
The verdict: can you vibe code Matter?
Build a personal read-later web app with a simpler AI stack, but skip the native iOS polish and advanced audio pipelines unless you have months to burn.
Replicating Matter for personal use means dropping native iOS SwiftUI apps and complex Gmail OAuth integrations in favor of a web-first setup with automated RSS parsing and standard browser extensions. The real friction points will be writing a resilient URL readability scraper that doesn't break on modern SPAs, handling audio playlist caching, and wiring clean text-to-speech synthesis without ballooning your API bills.
Estimated effort: 2-3 months of part-time work
What you can't replicate
- Apple Design Award-winning native iOS physics and SwiftUI fluidity
- Seamless backend maintenance of zero-downtime newsletter ingestion pipelines
- Proprietary parsing rules tuned for thousands of edge-case paywalled websites
Founded
2021
Raised
—
Team
< 10
Cheapest paid tier
$7.99/mo
What Matter does
Matter is a high-end read-later and content curation application that allows users to save, organize, and read web articles, PDFs, newsletters, and transcribed YouTube or podcast audio.
Core features
- Universal content saving (Web URL parser, PDF parsing, YouTube/Podcast transcription)
- Newsletter inbox syncing via Gmail or dedicated inbound email address
- HD Text-to-Speech playlist generation
- Frictionless highlighting and offline full-text search
- Kindle device integration via email delivery
- Bidirectional sync with Readwise and Obsidian
The business
Pricing
- FreeFree
- Matter Premium$7.99/mo
Funding
Unknown / bootstrapped
Pay vs build, cumulative
No break-even inside 24 months at these numbers.
The hard parts of vibe coding Matter
- Robust URL readability engine that bypasses paywalls, dynamic JavaScript rendering, and complex cookie banners
- Synchronizing offline-first local SQLite databases across mobile and web clients
- Stitching and caching high-end neural Text-to-Speech audio files into an uninterrupted playlist
- Maintaining stable API pipelines with Gmail and third-party media platforms
How to vibecode Matter
Prerequisites
Node.jsfree
Required for running the TypeScript web framework and build tooling.
GitHubfree
Version control and deployment pipeline connector.
AI coding tools
Recommended stack
| Frontend | Next.js |
|---|---|
| Backend | Next.js API Routes |
| Database | Turso |
| Auth | better-auth |
| Payments | None |
| Other | Firecrawl, ElevenLabs, Vercel AI SDK |
Hosting & infrastructure
| Cloudflare | Hosting static assets, browser extension distribution, and edge functions | $0-5/mo |
| Fly.io | Running background worker scrapers and long-running RSS/podcast audio extraction pipelines | $3-5/mo |
Build guide
01Project Scaffolding and Database Schema
Initialize a full-stack Next.js application configured with Tailwind CSS, better-auth, and Turso as a serverless SQLite database.
Scrape together a new Next.js project configured with TypeScript, Tailwind CSS, and better-auth for single-user authentication. Set up a Turso database connection using Drizzle ORM with tables for 'articles' (id, url, title, content, parsed_html, author, reading_time, added_at, archived), 'highlights' (id, article_id, selected_text, note, created_at), and 'tags' (id, name). Ensure the app layout includes a clean, typography-focused sidebar navigation mirroring a modern desktop reading interface.02URL Scraping and Readability Pipeline
Implement a robust article extraction backend service utilizing Firecrawl or custom turndown/cheerio scripts to ingest clean Markdown from arbitrary web links.
Build an API route in Next.js that accepts a target URL, checks if it's reachable, and uses Firecrawl or a headless fetch parser to extract clean article text, metadata, and main images while stripping ads, cookie banners, and navigation clutter. Save the sanitized markdown output directly into the Turso articles table. Include error handling for paywalled sites and malformed HTML.03Browser Extension for Quick Capturing
Create a lightweight Manifest V3 browser extension allowing 1-click saving of the active tab's URL to the local reading queue.
Create a browser extension codebase (Manifest V3) containing a popup script and a background script. The extension should feature a button that captures the current active tab's URL and title, and submits it securely via POST request to the self-hosted Next.js application API endpoint with an authentication token. Provide clear visual confirmation states (success/error) inside the popup UI.04Reader Interface and Frictionless Highlighting
Develop a distraction-free reader view with custom typography, spacing controls, and mouse-drag text selection for creating highlights.
Build a responsive reader view component in Next.js that renders sanitized article markdown with customizable font families, line heights, and margins. Implement a custom text selection hook that triggers a floating contextual menu on mouse-up, letting the user instantly highlight selected text or add a personal note. Save these highlights asynchronously to the database and render them inline with yellow background highlights.05Text-to-Speech Audio Generation Pipeline
Integrate ElevenLabs API to convert saved articles into playable audio streams and manage playlist states.
Integrate the ElevenLabs API into a backend worker service that extracts plain text from an article, chunks it according to API limits, and requests natural speech audio generation. Store the resulting audio file reference in Cloudflare R2 object storage. Build a bottom persistent audio player in the Next.js web app capable of handling playlist queues, playback speed adjustments, and progress tracking.06Export and Second Brain Integrations
Build export routines and API sync scripts to push collected highlights to Obsidian via local file vaults or Markdown downloads.
Implement an export feature that compiles all highlights and notes associated with an article into a beautifully formatted Markdown template front-matter block. Provide a bulk export download route as a ZIP file and an endpoint structured to sync markdown notes directly to a designated local directory structure compatible with Obsidian vaults.
Cost vs paying for Matter
What will you build it with?
Starting total with Claude Code$0 one-time
Starting costs (one-time)
- Domain name (optional)$12 one-time
- ElevenLabs API starter credits$5 one-time
Total~$17 one-time
Ongoing costs (monthly)
- Fly.io backend compute$3/mo
- ElevenLabs TTS usage$5/mo
Total~$8/mo
Paying for Matter
$7.99/mo
Your time to build
40-60 hours
AI tool credits
$20 (Claude Pro / Cursor)
Break-even
Never (paying $7.99/mo is cheaper than building it if you value your time)
Vibe code Matter: FAQ
- Can you vibe code Matter yourself?
- Serious undertaking — 45/100 vibecodeable. Build a personal read-later web app with a simpler AI stack, but skip the native iOS polish and advanced audio pipelines unless you have months to burn.
- How long does it take to vibe code Matter?
- 2-3 months of part-time work — roughly 40-60 hours of hands-on time with an AI coding agent.
- How do you build your own Matter?
- Scoped to personal use: Next.js on the front, Next.js API Routes behind it, Turso for data. Follow the 6-step build guide on this page — each step has a paste-ready prompt for an AI coding agent.
- How do you code your own Matter 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 months of part-time work. The prompts on this page are written so the AI does the heavy lifting.
- How much does it cost to vibe code Matter instead of paying?
- About ~$17 one-time to start and ~$8/mo to run, versus $7.99/mo for Matter. Break-even: Never (paying $7.99/mo is cheaper than building it if you value your time).
- What stack should you use to vibe code Matter?
- Next.js; Next.js API Routes; Turso; plus Firecrawl, ElevenLabs, Vercel AI SDK.