Flow & Focus

Flow & Focus is a short-form news app. Browse fast, tap curious. Perplexity Deep Research then crafts personalized, deep understanding articles based on your interests.

Comment 1

We built Flow & Focus to reclaim news consumption for the user. By capturing your genuine curiosity in a short-form feed, we leverage Perplexity's APIs to create custom, deep-dive learning experiences, making information overload a thing of the past.

Inspiration

Inspired by the frustration of endless, shallow vertical media scrolling and the desire for information platforms to serve user curiosity for personal growth, not just profit.

What it does

Flow & Focus offers a revolutionary dual-mode news experience that bridges efficient discovery with deep understanding. Flow Feed provides a TikTok-style vertical news browsing experience with full-screen snippets featuring AI-generated background images, emoji reactions, and highlighted key phrases. Users can tap any key phrase to instantly access focused deep dives powered by Perplexity's Sonar Pro, creating horizontally scrollable panes with contextual information.

The app intelligently tracks user interaction patterns – which topics you spend time on, which key phrases you explore – building a personalized interest profile. Focus Mode then leverages this data with Perplexity's Sonar Deep Research to generate tailored conversation segments presented as dialogues between "The Oracle" (providing comprehensive answers) and "The Explorer" (asking curious questions). Users can ask follow-up questions in real-time, receiving streaming responses that build on the full conversation context.

Key technical features include gesture-based navigation (preventing browser pull-to-refresh conflicts), real-time image generation using Perplexity-generated keywords, tag-based personalization with localStorage persistence, and robust JSON schema validation to handle diverse news sources consistently.

How we built it

The process involved first deeply thinking about the app's purpose and how it should function, mapping out the architecture. The coding phase was then accelerated by collaborating with AI, translating the concept into a working application.

Challenges we ran into

A key hurdle was getting the Perplexity API to consistently return data in our desired JSON format, which involved significant prompt engineering iteration. We also encountered the unusual tags in the Sonar Deep Research output and built a custom solution to filter them out. Translating our concept into an intuitive and polished UI/UX proved challenging, though rewarding.

Accomplishments that we're proud of

We built a high-quality, fully functional web application that feels nearly ready for deployment. A major achievement is successfully generating structured content from both Sonar Pro and Sonar Deep Research APIs, validated into well-defined JSON schemas.

What we learned

Working with Perplexity APIs taught us deeply about the distinct capabilities of Sonar Pro (speed/breadth) and Sonar Deep Research (depth/synthesis). We learned the critical importance of UI/UX design in effectively leveraging these powerful APIs to improve user learning and life. As a backend dev, tackling mobile app design challenges was a new and valuable learning experience.

What's next for

Our immediate next steps focus on enhancing the user experience and making the application more robust and sustainable:

  • Find a Member: As a solo developer, recruit team members with complementary skills to accelerate development and bring diverse perspectives to the project. This could include frontend developers, UI/UX designers, or business development specialists. Additionally, seek funding opportunities and investors who share the vision of revolutionizing news consumption to support sustainable growth and development.
  • Citation Integration: Properly integrate and display the citation URLs provided by the Perplexity APIs within both the Flow Feed (for snippet sources) and Focus mode (for sources used in generating conversations). This adds credibility and allows users to verify information or explore original sources.
  • Server-Side Data Storage & Focus Generation: Transition user preference data (tagPreferences, explorationPaths) from client-side localStorage to a secure server-side database. This is crucial for data persistence, privacy, and robustness. Leveraging this server-side data, we plan to implement periodical, server-side generation of the Focus digest. This means "Today's Focus" could be generated in the background (e.g., daily) based on recent Flow Feed activity, so the user won't have to wait for the full generation process when they open Focus mode.
  • Cost Optimization: Reducing API costs is crucial for the project's long-term sustainability. We will explore strategies such as:
    • More aggressive caching of API responses (especially for image keywords and potentially common Deep Dive panes).
    • Fine-tuning prompt lengths and request parameters.
    • Potentially exploring alternative, lower-cost models for specific tasks if appropriate.
  • Feature Expansion: Explore adding features like sharing Insight Briefs, saving favorite conversations, or providing controls for users to manually tune their preference profile.

Limitation

The Vercel depolyed app uses Perplexity Sonar Pro instead of Sonar Deep Research for the Focus generation. This is a workaround to avoid Vercel Functions timeout.

Built With

  • next.js
  • perplexity
  • runware.ai
  • tailwind
  • typescript
  • zustand
Share this project:

Updates