React Live News

Featuredai

Modern futuristic live news platform with AI chatbot, smart summaries, trending topics, glassmorphism UI, and dark/light themes. Built with React 18 + Vite, featuring category-based filtering and real-time news from 50+ global sources.

React.jsJavaScriptCSS

AI-powered news, built without a single CSS framework.

The problem

News aggregators are fast but visually boring. Modern UIs are pretty but slow. I wanted to prove a single React app could deliver both — snappy real-time news AND a UI that actually feels designed.

The approach

Started with a strict 'zero CSS framework' rule. 100% custom CSS variables drive both light and dark themes, which kept the bundle lean and the aesthetic distinctive. Built the data layer around NewsAPI with a graceful 'demo mode' fallback so the app never breaks for visitors without API keys. Layered AI features (chatbot, summaries, sentiment) on top once the core news experience felt right.

Tech decisions

React 18 + Vite

Fast dev server, instant HMR, leaner production bundle than CRA — and concurrent rendering ready for streaming AI responses

100% custom CSS variables

Full control over the glassmorphic look without Tailwind utility-class noise; theme toggle is a one-line variable swap

Intersection Observer

Native infinite scroll without pulling in a third-party library

NewsAPI + demo mode

Real data when keys exist, deterministic fixtures otherwise

Outcomes

AI chatbot answers contextual questions about any visible headline
One-click article summaries with sentiment indicator
7 categories with real-time search across 50+ global sources
Theme + filter state persist across sessions via localStorage
Zero-setup demo mode for first-time visitors

What I learned

Custom CSS beat Tailwind here — the variables-driven theme system was simpler than Tailwind's dark: variants for this aesthetic. AI features need aggressive caching at the call site or costs balloon fast.