How to vibe codeNewsBlur

Prerequisites

• Node.jsFree

  Runtime environment for Next.js full-stack application

• GitHubFree

  Source control and deployment pipeline integration

AI coding tools

• Claude Code

  Agentic terminal coding tool capable of scaffolding the Django/Next.js backend and multi-file RSS ingestion pipelines.

• Cursor

  AI-native code editor for fine-tuning complex React feed reading layouts, keyboard shortcuts, and UI views.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js application with Tailwind CSS and configure Neon Postgres with Drizzle ORM to model users, subscriptions, folders, feeds, stories, and user intelligence training weights.

   Scrape together a new Next.js project configured with TypeScript, Tailwind CSS, and Drizzle ORM connected to Neon Postgres. Define relational database schemas for users, folders, feeds (url, title, feed_address, last_fetched), stories (guid, title, author, content, feed_id, pub_date), reading_states (user_id, story_id, read_status, starred), and intelligence_weights (user_id, type [author/tag/title], value, score). Ensure proper foreign keys, indices on story publication dates and feed ids, and a migration script to set up tables. Verify the database connection with a test script.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02OPML Import & RSS Feed Ingestion Pipeline

   Build an OPML file parser and a robust background fetching utility using rss-parser to fetch, parse, and upsert RSS and Atom feed items into the database.

   Build an OPML upload and parsing utility in Next.js that reads uploaded XML files, extracts feed titles and XML links, and populates folders and feed records in Neon Postgres. Next, implement a background feed ingestion worker function using 'rss-parser' and node-fetch that iterates through active feeds, fetches XML payloads, normalizes publication dates, checks for duplicate GUIDs, and inserts new stories into the database. Handle network timeouts, malformed XML headers, and HTTP error statuses gracefully without crashing the batch queue.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Intelligence Training & Story Scoring Engine

   Implement the core intelligence scoring algorithm that evaluates incoming stories against user-defined author, tag, and title weights to assign focus and hide scores.

   Implement an intelligence scoring engine function that calculates a score for any given story against a user's saved intelligence weights (author, tag, title match). When a user clicks 'like' or 'dislike' on an author, title keyword, or tag in the UI, save a preference weight (+1 for like, -1 for dislike). When rendering stories or fetching feeds, compute a net score per story. Categorize stories into 'focus' (score > 0), 'neutral' (score == 0), and 'hidden' (score < 0). Provide API endpoints to list user training weights and create/delete preference rules.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Dashboard UI & River of News Layout

   Build the multi-pane reading interface featuring folder trees, unread counters, River of News scrollable streams, and keyboard navigation shortcuts.

   Create a responsive three-pane news reader dashboard in Next.js with Tailwind CSS. The left sidebar displays folders and feeds with real-time unread badges. The middle pane shows a scrollable story list (supporting list, split, and River of News folder views) with intelligence score pills. The right pane displays the active story content with font customization and layout controls. Implement keyboard navigation shortcuts (e.g., 'j' for next story, 'k' for previous story, 'm' to toggle read status, 'v' to open original site) matching classic RSS reader ergonomics.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Full-Text Search & Article Extraction

   Implement full-text search across user subscriptions using Postgres FTS and a clean text view extraction fallback for truncated RSS feeds.

   Add full-text search capabilities across all subscribed stories using Postgres full-text search capabilities (tsvector / tsquery). Build a search input bar in the dashboard header that queries story titles and content filtered by the current user's feed subscriptions. Additionally, implement a reader 'Text View' fallback endpoint that fetches an article's original URL using Cheerio, extracts main article body text by stripping away navbars and footers, and presents clean readable markup.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06AI Assistant Integration & Polish

   Integrate the Vercel AI SDK to power an 'Ask AI' story assistant and daily briefing summary generator.

   Integrate the Vercel AI SDK with Anthropic Claude to power an 'Ask AI' drawer inside the story reader pane. Users can select a story and ask questions about its content, receiving streamed answers. Build a 'Daily Briefing' background generator that compiles unread stories from top subscribed feeds over the past 24 hours, sends them to an LLM prompt to generate a structured morning briefing digest, and saves it to a dedicated briefing view for the user.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for NewsBlur