InsightMap — Turning Curiosity & Chaos into Clarity

• 

Inspiration

As a student and developer, I often find myself opening multiple tabs just to understand one topic — blogs, videos, research papers, docs — all scattered and disconnected. That’s when I discovered Perplexity Comet, an AI browser that organizes information intelligently. It inspired me to imagine:

What if we could visually explore a topic — not just read about it?

InsightMap was born from that thought — a project that transforms curiosity into visual clarity using AI-inspired topic mapping.

What it does

InsightMap lets you enter any topic — like Neural Networks or Quantum Computing — and instantly generates a beautiful, interactive knowledge map powered by AI-inspired logic. Each concept appears as a connected node, with hover popups explaining subtopics, relationships, and real-world applications.

It also includes:

AI-style summaries and key takeaways

Learning resources curated for students

Exportable maps (as JSON)

A glassy, dynamic interface inspired by Perplexity Comet’s browsing experience

It’s like if Perplexity’s research brain met a visual concept map — designed for learners.

How we built it

Frontend: React + Vite

Visualization: React Flow (for dynamic node & edge rendering)

Animations & Interactivity: Framer Motion

Styling: TailwindCSS with glassmorphism design

Icons & UI: Lucide React

Data Simulation: Custom “AI-inspired” topic generation engine written in JavaScript

I built a function that analyzes a given topic (like machine learning or quantum computing) and generates:

Core concepts

Key relationships

Visual node structure

Short descriptions and takeaways

All nodes and edges are dynamically mapped into the ReactFlow graph, giving it that agentic AI map feel — like how Comet visually organizes knowledge.

Challenges we ran into

Making ReactFlow compatible with React 19 (it required migrating from react-flow-renderer to reactflow)

Ensuring smooth animations and responsive layout while keeping the design visually elegant

Balancing between simplicity and “AI sophistication” — I wanted it to feel intelligent without actually relying on a backend model

Managing node layouts dynamically so maps never overlap

Accomplishments that I’m proud of

Designed a complete interactive AI learning tool solo — from concept to polished UI

Created an intuitive visualization system that looks and feels like an AI assistant

Aligned the product experience with Perplexity Comet’s mission — rethinking how humans explore and learn

Built everything fully front-end in React, no backend required — fast, portable, and demo-ready

What I learned

This project taught me:

How AI-driven interfaces like Comet can reshape education and research

The power of visual learning — maps help retain and understand information better than linear text

Deep understanding of ReactFlow, Framer Motion, and modern React animation pipelines

How to transform an abstract idea (“turn curiosity into clarity”) into a real, tangible user experience

What’s next

Comet API Integration — Use the actual Perplexity API to dynamically fetch summaries and topic relationships in real-time.

AI-powered generation — Integrate OpenAI API for automatic concept extraction and custom map creation.

Save & Share Feature — Let users create topic collections and share them publicly.

Learning Assistant Mode — Add a chat overlay that explains connections between nodes interactively (“Explain how CNN relates to Neural Networks”).

Browser Extension — Bring InsightMap into the browser, allowing users to visualize any page’s topic graph with one click — just like Comet!

Built With

• framer-motion
• lucide-icon
• react
• react-flow
• tailwindcss