NewsNow is an open-source news reader designed for elegant, distraction-free consumption of real-time and trending news. It targets tech-savvy users and developers who want a clean, customizable interface with intelligent data fetching to avoid rate limits and ensure fast load times. Built with TypeScript and deployed via Cloudflare Pages, Vercel, or Docker, it integrates GitHub authentication for user-specific data sync and uses Cloudflare D1 as the recommended database.
The app uses adaptive scraping with a minimum 2-minute interval to respect source rates, caches content for 30 minutes by default (with force-refresh for logged-in users), and supports custom data sources through a modular architecture. It also includes an MCP server integration for extending functionality via external commands and environment-configurable base URLs.
What You Get
- Clean and elegant UI design - A minimalist, distraction-free interface optimized for reading news with proper typography and layout.
- Real-time trending news updates - Aggregates and displays breaking and popular news with low-latency updates from configured sources.
- GitHub OAuth login with data synchronization - Users authenticate via GitHub to save preferences and sync reading state across devices.
- 30-minute default cache duration - Reduces server load and improves load times; logged-in users can bypass cache with force-refresh.
- Adaptive scraping interval (min 2 minutes) - Dynamically adjusts fetch frequency based on source update patterns to prevent IP bans and optimize resources.
- MCP server support - Extensible via JSON-configured MCP server (e.g., npx -y newsnow-mcp-server) with customizable BASE_URL for self-hosted extensions.
Common Use Cases
- Reading Chinese news without ads - A Mandarin speaker uses NewsNow to consume trending Chinese news in a clean, ad-free interface with real-time updates.
- Building a personalized news dashboard - A developer deploys NewsNow on Cloudflare Pages and adds custom data sources to aggregate niche industry news.
- Self-hosting a news aggregator - A tech enthusiast runs NewsNow via Docker with GitHub auth to create a private, cache-efficient news feed for their team.
- Extending news sources via MCP - A contributor adds a new news API by following the source module structure and configures it via MCP server to pull from a proprietary feed.
Under The Hood
Architecture
- React-based frontend with hierarchical routing powered by TanStack Router, leveraging route context for dependency injection of QueryClient
- State management centered on Jotai with atomic atoms and persistent storage for UI preferences like color schemes
- Server-side rendering via H3 on Node.js, using SQLite via better-sqlite3 and db0 for lightweight data persistence
- Clear separation of concerns with dedicated directories for frontend components, shared utilities, and server-side bundles
- Custom hooks encapsulate UI logic such as dark mode and scroll behavior, promoting reusability and testability
- Modular build pipeline using Vite with SWC, UnoCSS, and PWA support, enhanced by server-side optimizations via custom Vite plugins
Tech Stack
- Full-stack TypeScript architecture with React 19, Vite, and H3 forming the core stack
- Server logic built on h3 and db0 for minimal HTTP routing and SQLite persistence, with JWT authentication and caching
- Deployment on Cloudflare Pages with D1 database binding and PWA functionality via Workbox and Vite plugins
- Development tooling includes Vitest, ESLint with React hooks rules, and git hooks for pre-commit validation
- Monorepo-style structure with shared utilities and path aliases enabling clean, scalable imports across client and server
Code Quality
- Strong type safety through comprehensive interfaces and shared type definitions
- Modular component architecture with forwardRef and TypeScript for DnD integration and component composition
- Consistent naming and atomic state patterns, though error handling remains superficial with generic console.error and no centralized boundaries
- Linting and formatting are inconsistently applied, particularly with generated route files excluded from checks
- Extensive testing for edge cases like international date formats using MockDate, but foundational files lack sufficient test coverage
What Makes It Unique
- Dynamic client-side news aggregation engine that detects and visually highlights content movement through intelligent diffing and caching
- GitHub OAuth integration with JWT session persistence that circumvents cookie limitations in edge environments via URL parameter handoff
- Column-based news layout with draggable, source-specific cards that retain state and animate transitions for immersive reading
- Real-time preference synchronization with conflict resolution and automatic re-authentication for seamless user experience
- Configuration-driven theming system that ties source branding to UI elements via dynamic CSS variables, creating source-specific visual identities
- Zero-config, type-safe file-based routing that auto-generates route definitions from filesystem structure, eliminating boilerplate