Rabbit Hole

An interactive concept explorer powered by Claude AI. Type any topic, and Rabbit Hole generates an explanation with key terms you can click to keep exploring — building a visual knowledge graph as you go.

Features

• Concept exploration — search any topic, get AI-generated explanations with clickable key terms
• Knowledge graph — concepts are laid out as connected cards with edges showing relationships
• Ask questions — ask follow-up questions in the context of your explored concepts
• Picture mode — toggle Wikipedia thumbnail images on concept cards
• Dark/light theme — theme toggle with localStorage persistence
• Pan & zoom — drag cards, pan the canvas, pinch-zoom on mobile

How It Works

Each user provides their own Anthropic API key when they open the app. The key is stored only in the browser tab's sessionStorage (cleared on tab close) and sent to the backend per-request — it is never saved server-side.

Prerequisites

• Node.js (v18+)
• (Optional) Firebase CLI for cloud deployment

Quick Start

1. Clone the repo

   git clone <repo-url>
   cd learner

2. Install dependencies

   npm install

3. Run in development mode

   npm run dev

   This starts the Express backend on port 3001 and the Vite dev server on port 5173. Open http://localhost:5173. You'll be prompted for your Anthropic API key on first use.

Production Build (Self-Hosted)

npm run build
npm start

This builds the frontend to dist/ and starts the Express server (serves both the API and static files) on port 3001.

Deploy to Firebase

1. Install the Firebase CLI and log in

   npm install -g firebase-tools
   firebase login

2. Create a Firebase project

   firebase projects:create your-project-id

   Then update .firebaserc to use your project ID:

   {
     "projects": {
       "default": "your-project-id"
     }
   }

3. Install function dependencies

   cd functions
   npm install
   cd ..

4. Build and deploy

   npm run build
   firebase deploy

   Firebase Hosting serves the frontend, and Cloud Functions handle the /api/* routes.

Project Structure

├── src/                  # React frontend (TypeScript)
│   ├── App.tsx           # Main application component
│   ├── api.ts            # API client
│   ├── components/       # UI components
│   └── utils/            # Layout algorithms
├── server.js             # Express backend (local dev / self-hosted)
├── functions/            # Firebase Cloud Functions backend
│   └── index.js          # Express app deployed as a Cloud Function
├── firebase.json         # Firebase hosting & functions config
└── vite.config.ts        # Vite build config

Tech Stack

• Frontend: React, TypeScript, Vite
• Backend: Express, Anthropic SDK (Claude Haiku)
• Deployment: Firebase Hosting + Cloud Functions