Mind 🧠

A beautiful knowledge graph application for collecting, organizing, and visualizing your links and ideas.

Features

📌 Link Collection

• Save links from Twitter/X, LinkedIn, Threads, Are.na, YouTube, GitHub, Figma, Notion, and more
• Automatic source detection from URL
• Beautiful widget cards with source-specific icons
• Tag your links for organization

🎨 Dual View Modes

Grid View

• Masonry layout for browsing all your collected links
• Responsive design that adapts to any screen size
• Hover effects and smooth animations

Mind View

• Interactive 3D knowledge graph using force-directed layout
• Nodes represent tags/concepts
• Node SIZE grows with the number of links attached (using sqrt scaling)
• Click nodes to see all related links
• Orbit, zoom, and pan through your knowledge space
• Edges show connections between related concepts

✨ Key Features

• Auto-categorization: Links are automatically detected by their source
• Tag-based organization: Create meaningful connections between ideas
• Persistent storage: Links saved to localStorage
• Responsive design: Works on desktop and mobile
• Dark mode: Easy on the eyes

Getting Started

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

Open http://localhost:3000 to view the app.

Usage

Adding Links

1. Click the + button in the bottom right
2. Paste your URL (source is auto-detected)
3. Add a title, description, and tags
4. Click "Add Link"

Viewing Modes

• Toggle between Grid and Mind views using the button at the bottom center
• In Mind view:
  • Drag to rotate
  • Scroll to zoom
  • Click nodes to see linked content

Tags & Concepts

Tags create the structure of your knowledge graph:

• Links with shared tags create connections
• More links with a tag = larger node
• Related concepts cluster together automatically

Tech Stack

• Next.js 16 - React framework
• TypeScript - Type safety
• Tailwind CSS v4 - Styling
• Zustand - State management with persistence
• react-force-graph-3d - 3D graph visualization (Three.js + d3-force-3d)
• Lucide React - Icons

Architecture

src/
├── app/
│   ├── globals.css     # Global styles & animations
│   ├── layout.tsx      # Root layout with fonts
│   └── page.tsx        # Main page component
├── components/
│   ├── AddLinkModal.tsx    # Form for adding links
│   ├── LinkWidget.tsx      # Individual link card
│   ├── MasonryGrid.tsx     # Grid view layout
│   ├── MindGraph.tsx       # 3D force graph view
│   └── ViewToggle.tsx      # Grid/Mind mode switcher
├── store/
│   └── useLinkStore.ts     # Zustand store with sample data
└── types/
    └── index.ts            # TypeScript definitions

Extending the App

Adding New Link Sources

1. Add the source type to LinkSource in src/types/index.ts
2. Update detectSource() in src/store/useLinkStore.ts
3. Add icon/styling in sourceConfig in src/components/LinkWidget.tsx

Backend Integration

The app uses localStorage by default. To add a backend:

1. Replace Zustand's persist middleware with API calls
2. Add authentication
3. Store links and tags in your database

License

MIT