Vibe Research

Stop boring reports! Vibe Research creates fun, interactive HTML deep-dives tailored to your style, powered by AI. Explore complex topics, your way!

Comment

Inspiration

The inspiration for Vibe Research came from a simple observation: deep research is powerful, but often incredibly boring to consume. Traditional research reports can be lengthy, overly technical, and lack engagement, making it difficult for curious minds – especially those short on time – to truly connect with complex topics.

I envisioned a future where learning and exploration weren't a chore, but an exciting adventure. Could AI not only generate in-depth research but also transform it into something that truly vibes with the user – tailored to their preferred style and presented in an engaging, even fun, way? That's how Vibe Research was born – from the desire to make profound knowledge accessible and enjoyable, all within the timeframe of this hackathon.

What it does

Vibe Research is a user-centric content platform that revolutionizes how users generate, discover, and engage with deep research.

At its core, users can:

  1. Input any research topic.
  2. Choose a "Vibe": Select from distinct profiles like "Standard," "Comprehensive," "Academic," "Visual," or "Narrative." This "Vibe" dictates the tone, style, depth, and even the visual presentation of the final report.
  3. Witness Transparent AI Generation: Our unique "Transparent UX" allows users to see the AI (powered by Perplexity Sonar APIs) at work in real-time, from initial planning and sub-question exploration (including a peek into the AI's "thinking process") through to content assembly.
  4. Receive a Beautifully Crafted HTML Report: The final output isn't just text; it's a fully styled, potentially interactive HTML page designed for optimal readability and engagement, tailored to the chosen "Vibe."
  5. Manage & Publish: Users have a dashboard to manage their reports, edit metadata, and publish them.
  6. Discover: A homepage allows users to browse published reports.

Essentially, Vibe Research transforms complex information into enjoyable, personalized learning experiences.

How we built it

Vibe Research was built entirely during this hackathon, embracing an iterative and agile approach. The project underwent a significant architectural pivot mid-way, which ultimately led to a more robust and scalable solution.

Initial Phase & Engine Development: My initial focus was on rapidly developing the core Python engine modules responsible for content generation:

  • SonarResearchOrchestrator: Using Perplexity Sonar APIs (R1-1776 for planning/evaluation, Sonar Pro/Deep Research for content) to manage the research lifecycle.
  • HTML Processing Suite: Modules (EnhancedHTMLFragmentGenerator, EnhancedFragmentCleaner, EnhancedHTMLFragmentJoiner) to convert markdown to styled HTML (using OpenRouter/Claude) and assemble it.
  • ImageProcessor: To integrate visuals from Pixabay/Pexels. These engine components were developed and tested as functional units first.

The Pivot & Re-architecture: Halfway through, I realized my initial platform architecture (perhaps simpler, like Flask-based or with different frontend/backend communication) wasn't going to deliver the desired user experience, scalability, or robustness for features like the Transparent UX and asynchronous processing.

This led to a courageous decision to re-architect the platform around the now-functional Python engines. The engines themselves were sound, so they were "brought over" and integrated into a new, more sophisticated stack:

  • Python Core Engine Service (FastAPI): The proven Python modules were wrapped into a FastAPI service, exposing their capabilities via HTTP endpoints. This provided a clean, performant, and async-ready backend for content generation.
  • Backend API Layer (Next.js API Routes): A new Next.js backend was built to orchestrate the multi-stage calls to the FastAPI engine, manage user sessions, and handle database interactions with Supabase. This layer also implements the complex state machine for the Transparent UX pipeline.
  • Frontend (Next.js & React): The entire user interface was built using Next.js, TypeScript, and Tailwind CSS, focusing on the "Vibe Research" dark theme and the dynamic "Transparent UX" on the dashboard.
  • Database & BaaS (Supabase): Leveraged for PostgreSQL, Auth, Storage, and Cron Jobs, forming the persistence and backend service layer.
  • Deployment: Next.js on Vercel and FastAPI on Railway.

This pivot, while challenging, allowed for a much cleaner separation of concerns and enabled the complex asynchronous features we have today.

Challenges we ran into

  1. The Mid-Hackathon Re-architecture: Deciding to pivot the main platform architecture (from an initial approach to the Next.js/FastAPI/Supabase stack) while keeping the core Python engines was a major challenge under time pressure. It required rapidly learning and integrating new pieces while ensuring the salvaged engines fit cleanly.
  2. Asynchronous Orchestration Complexity: Designing and debugging the multi-stage, asynchronous pipeline (FastAPI background tasks polled by the Next.js backend API, which is then polled by the client) was intricate.
  3. Real-time UI for Transparent UX: Achieving the flicker-free, dynamically updating Transparent UX, especially the SectionViewerService, was a significant UI engineering challenge requiring deep thought into React rendering and DOM manipulation.
  4. Deployment Across Multiple Platforms: Coordinating environment variables, CORS, port configurations, and root directories for FastAPI on Railway and Next.js on Vercel, and getting them to communicate reliably, was a steep learning curve.
  5. Integrating Python Engines into FastAPI: Adapting the standalone Python scripts into a cohesive FastAPI service, ensuring they were stateless where needed and handled API requests correctly, was a key refactoring step.

Accomplishments that we're proud of

  1. Successfully Navigating a Major Mid-Hackathon Pivot: The ability to recognize architectural limitations and execute a significant re-architecture under pressure, salvaging and enhancing the core engine, is a huge accomplishment.
  2. Building the Entire Full-Stack Solution from Scratch During the Hackathon: From the Python engines to the full Next.js/FastAPI/Supabase platform and deployment – it was all done within the hackathon period.
  3. The "Vibe" System: Creating this unique customization feature that genuinely impacts the report output.
  4. The Transparent UX & Flicker-Free Section Viewer: This sophisticated UI feature provides real value and was a tough problem to solve.
  5. A Fully Deployed, Functional Application: Taking an idea to a live, multi-service application on custom domains in such a short time.

What we learned

  1. Don't Be Afraid to Pivot (Intelligently): Recognizing that an initial approach isn't optimal and having the courage to refactor/re-architect, even mid-hackathon, can lead to a much better outcome if you can salvage core components.
  2. The Power of Modular Design: Having well-defined Python engine modules made it possible to "lift and shift" them into the new FastAPI architecture during the pivot.
  3. Rapid Iteration & Learning: The hackathon constraint forced extremely fast learning and application of new technologies (FastAPI, Next.js advanced features, multi-platform deployment).
  4. Persistence in Debugging: Overcoming deployment issues (env vars, ports, CORS) and complex UI state problems required methodical debugging and perseverance.
  5. Value of a Clear Vision: Even through the re-architecture, the core vision of "Vibe Research" and the desired user experience guided the technical decisions.

What's next for Vibe Research

Vibe Research has a vibrant future! Here are some exciting next steps: (This section can largely remain the same as your previous version, as it's forward-looking)

  1. Enhanced "Vibes" & Interactivity:
    • Further differentiate content and HTML for each Vibe.
    • Enable more sophisticated interactive elements within reports.
    • Allow users to customize or create their own "Vibes."
  2. Advanced Perplexity API Integration:
    • Implement LLM-suggested search filters.
    • Explore deeper use of sonar-deep-research.
  3. User Features & Community:
    • Full implementation of Likes, Saves, and Comments.
    • User profiles with avatars.
    • Improved content discovery.
  4. Monetization & Creator Tools.
  5. Engine & Platform Robustness.

Vibe Research aims to be the go-to platform for anyone who wants to explore complex topics in a way that's not just informative, but truly inspiring and enjoyable.

  • Built with:
    • Languages: TypeScript, Python, JavaScript, CSS, HTML, SQL
    • Frameworks/Libraries (Frontend): Next.js, React, Tailwind CSS
    • Frameworks/Libraries (Backend): FastAPI (Python), Uvicorn
    • Platforms/Cloud Services:
      • Vercel (Next.js Frontend Hosting)
      • Railway (FastAPI Backend Hosting)
      • Supabase (BaaS: PostgreSQL Database, Authentication, Storage, Cron Jobs)
    • APIs:
      • Perplexity Sonar API (R1-1776, Sonar Pro, Sonar Deep Research)
      • OpenRouter API (Claude Sonnet for HTML styling)
      • Pixabay API & Pexels API (image sourcing)
    • Databases: PostgreSQL (via Supabase)
    • Development Tools: VS Code, Git, GitHub, Docker, npm

Built With

Share this project:

Updates