Flow & Focus is a personalized news application that transforms news consumption into a learning experience. It uniquely combines rapid discovery through a vertical news feed (Flow) with in-depth, interactive learning dialogues (Focus), powered by Perplexity’s Sonar Pro and Sonar Deep Research models.

​
Features

  • Dual Mode Interface: Flow Feed for quick news discovery and Focus for personalized deep dives
  • Vertical News Feed: Swipeable news snippets with AI-generated summaries, tags, and background images
  • Interactive Deep Dives: Tap key phrases for focused content, with horizontally scrollable detail panes
  • Personalized Learning: AI-powered conversation segments with personas like “Oracle” and “Explorer”
  • Smart Personalization: Tracks reading patterns to tailor content selection automatically
  • Real-time Content: Leverages Sonar Pro for up-to-date news and Sonar Deep Research for detailed analysis
  • Visual Enhancement: Dynamic background images generated via Runware.ai based on content keywords

​
Prerequisites

  • Node.js 18+ and npm
  • Perplexity API key
  • Runware API key for image generation
  • Next.js 15 and React 19 environment

​
Installation

# Clone the repository
git clone https://github.com/michitomo/NewsReel.git
cd NewsReel

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env.local

​
Configuration

Create .env.local file: 
PERPLEXITY_API_KEY=your_perplexity_api_key_here
RUNWARE_API_KEY=your_runware_api_key_here
PERPLEXITY_FOCUS_MODEL=sonar-deep-research

​
Usage

  1. Start Development Server: 
    npm run dev
  2. Access Application: Open http://localhost:3000 in your browser
  3. Flow Feed: Scroll vertically through news snippets and tap key phrases for deep dives
  4. Focus Mode: Generate personalized digests with interactive conversation segments
  5. Personalization: Your viewing patterns automatically influence content selection

​
Code Explanation

  • Frontend: Next.js 15 with React 19, TypeScript, Tailwind CSS, and Framer Motion for animations
  • State Management: Zustand with localStorage persistence for user preferences
  • AI Integration: Perplexity Sonar Pro for real-time news and Sonar Deep Research for in-depth analysis
  • Image Generation: Runware SDK integration for dynamic background images based on content keywords
  • API Routes: Server-side integration handling Perplexity and Runware API calls
  • Mobile-First Design: Swipe gestures and responsive layout for intuitive mobile experience