# How to Vibe Code Your Own Matter (and Stop Paying for It)

> The modern read-later app for iPhone, iPad, and web

- Site: https://hq.getmatter.com
- Category: Productivity / Reading
- Verdict: **Serious undertaking** (45/100 vibecodeable)
- Estimated effort: 2-3 months of part-time work

## Verdict

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.

### 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

## What it 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

- Free: Free — Uncapped read-later library, mobile & web extensions, parsing engine, tags, full-text search.
- Matter Premium: $7.99/mo — Unlocks HD text-to-speech, AI co-reader, newsletter inbox sync, RSS feeds, highlights sync, and Kindle syncing.

Founded 2021.
Team size: < 10.

## The hard parts

- 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 vibe code Matter

### Prerequisites

- Node.js (free): Required for running the TypeScript web framework and build tooling.
- GitHub (free): Version control and deployment pipeline connector.

### Recommended AI tools

- Claude Code: Best-in-class multi-file agentic coding tool for scaffolding full-stack web applications and complex parsing scripts.
- Cursor: Ideal for iterative frontend component design and reviewing code diffs.

### Stack

- Frontend: Next.js
- Backend: Next.js API Routes
- Database: Turso
- Auth: better-auth
- Payments: None
- Other: Firecrawl, ElevenLabs, Vercel AI SDK

### Hosting

- 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

1. **Project 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.
```

2. **URL 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.
```

3. **Browser 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.
```

4. **Reader 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.
```

5. **Text-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.
```

6. **Export 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

**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 the SaaS instead: $7.99/mo
- Build time: 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)

## Sources

- [Matter Official Website](https://hq.getmatter.com)
- [Matter on the iOS App Store](https://apps.apple.com/app/matter-reading-app/id1549997184)
- [Announcing our Business Model - Matter Blog](https://hq.getmatter.com/blog/announcing-our-business-model)