Merge pull request #35 from michitomo/main

docs(showcase): add Flow & Focus project

Author: kesku

docs/showcase/flow-and-focus.mdx

@@ -0,0 +1,89 @@
+---
+title: Flow & Focus | Personalized News for Genuine Understanding
+description: A personalized news app combining vertical feed discovery with AI-powered deep dives using Perplexity Sonar Pro and Deep Research models
+sidebar_position: 17
+keywords: [flow and focus, perplexity sonar, news personalization, dual-mode, next.js, react, ai]
+---
+
+**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.
+
+<iframe
+  className="w-full aspect-video rounded-xl"
+  src="https://www.youtube.com/embed/09h7zluuhQI"
+  title="YouTube video player"
+  frameBorder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+  allowFullScreen
+></iframe>
+
+## 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
+
+```bash
+# 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:
+```ini
+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**:
+   ```bash
+   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
+
+## Links
+
+* [GitHub Repository](https://github.com/michitomo/NewsReel)
+* [Demo Video](https://www.youtube.com/watch?v=09h7zluuhQI)
+* [Perplexity Hackathon](https://perplexityhackathon.devpost.com/)
+* [Perplexity Hackathon Project](https://devpost.com/software/flow-focus)