🧠 MindBloom

AI-powered collaborative brainstorming platform for teams

Transform your ideas into visual mindmaps with real-time collaboration and AI assistance. Built for teams who want to brainstorm smarter, not harder.

✨ Features

• 🗺️ Interactive Mindmaps - Dynamic visualization with D3.js/react-flow
• 👥 Real-Time Collaboration - Multiple users editing simultaneously
• 🤖 AI-Assisted Ideation - OpenAI integration for smart suggestions
• 🎨 Live Cursors - See where teammates are working in real-time
• 🔄 Conflict Resolution - Automatic handling of concurrent edits
• 💾 Auto-Save - Never lose your work with real-time sync
• 🔐 Authentication - Secure user management with Supabase Auth

🎬 Demo

Live Application: mindbloom-demo.vercel.app (Add your actual URL)

How It Works

1. Create a mindmap - Start with a central idea
2. Invite collaborators - Share your workspace with teammates
3. Brainstorm together - Add nodes, connect ideas in real-time
4. Get AI suggestions - Let AI help expand your thinking
5. Export & share - Save your mindmap as image or JSON

🚀 Quick Start

Prerequisites

• Node.js 18+
• Supabase account (Sign up free)
• OpenAI API key (Get one here)

Installation

# Clone the repository
git clone https://github.com/ChrisRobinT/mindbloom.git
cd mindbloom

# Install frontend dependencies
cd frontend
npm install

# Install backend dependencies
cd ../backend
pip install -r requirements.txt

# Setup environment variables (see below)
cp .env.example .env
# Add your API keys to .env

# Run backend
uvicorn main:app --reload

# Run frontend (in another terminal)
cd frontend
npm run dev

Visit http://localhost:3000

🔑 Environment Variables

Frontend .env.local

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
NEXT_PUBLIC_API_URL=http://localhost:8000

Backend .env

OPENAI_API_KEY=sk-your-openai-key
SUPABASE_URL=your_supabase_url
SUPABASE_SERVICE_KEY=your_supabase_service_key

🏗️ Architecture

┌─────────────────────────────────────────────────────────┐
│                      Frontend (Next.js)                  │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐     │
│  │  React Flow │  │   D3.js     │  │  Supabase   │     │
│  │   Mindmap   │  │Visualization│  │  Realtime   │     │
│  └─────────────┘  └─────────────┘  └─────────────┘     │
└────────────────────────┬────────────────────────────────┘
                         │
                         │ REST API / WebSockets
                         │
┌────────────────────────▼────────────────────────────────┐
│                   Backend (FastAPI)                      │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐     │
│  │   OpenAI    │  │  Business   │  │  Supabase   │     │
│  │   API       │  │   Logic     │  │  Client     │     │
│  └─────────────┘  └─────────────┘  └─────────────┘     │
└────────────────────────┬────────────────────────────────┘
                         │
                         │
┌────────────────────────▼────────────────────────────────┐
│                Supabase (Backend as a Service)           │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐     │
│  │ PostgreSQL  │  │  Realtime   │  │    Auth     │     │
│  │  Database   │  │  Sync       │  │             │     │
│  └─────────────┘  └─────────────┘  └─────────────┘     │
└─────────────────────────────────────────────────────────┘

🛠️ Tech Stack

Frontend

• Framework: Next.js 14 with TypeScript
• Mindmap Visualization: D3.js / react-flow
• Styling: Tailwind CSS
• Real-time: Supabase Realtime (WebSockets)
• State Management: React Context / Zustand
• Authentication: Supabase Auth

Backend

• Framework: FastAPI (Python)
• Database: PostgreSQL (via Supabase)
• AI: OpenAI GPT-4 API
• Real-time: Supabase Realtime subscriptions
• Authentication: Supabase Auth integration

📂 Project Structure

mindbloom/
├── frontend/                # Next.js frontend
│   ├── app/
│   │   ├── page.tsx        # Home page
│   │   ├── mindmap/        # Mindmap editor
│   │   └── layout.tsx
│   ├── components/
│   │   ├── MindmapCanvas.tsx
│   │   ├── Toolbar.tsx
│   │   └── CollaboratorCursors.tsx
│   ├── lib/
│   │   ├── supabase.ts     # Supabase client
│   │   └── api.ts          # API client
│   └── package.json
│
├── backend/                 # FastAPI backend
│   ├── main.py             # FastAPI app
│   ├── routers/
│   │   ├── mindmaps.py
│   │   └── ai.py           # OpenAI integration
│   ├── models/
│   │   └── mindmap.py
│   ├── services/
│   │   ├── openai_service.py
│   │   └── supabase_service.py
│   └── requirements.txt
│
└── README.md

🎯 Key Features Explained

Real-Time Collaboration

• WebSocket-based sync - Changes propagate instantly to all users
• Operational Transformation - Handles concurrent edits gracefully
• Live presence - See who's online and where they're working
• Cursor tracking - Visual indicators of collaborator positions

AI-Assisted Ideation

• Smart suggestions - AI proposes related ideas and connections
• Auto-expand - Generate child nodes from any idea
• Summarization - AI creates concise summaries of complex mindmaps
• Question generation - Get thought-provoking questions to deepen exploration

🚧 Roadmap

• Export to PDF/PNG
• Template library (project planning, SWOT analysis, etc.)
• Version history & time travel
• Comments & annotations
• Mobile app (React Native)
• Integrations (Notion, Slack, Teams)
• Advanced AI features (sentiment analysis, auto-organize)
• Voice-to-mindmap

🤝 Contributing

Contributions are welcome! This project was built as part of a team development cycle.

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 Development Process

This project was developed in an 8-week sprint as a 2-person team:

• Week 1-2: Requirements gathering, architecture design
• Week 3-4: Core mindmap functionality, database schema
• Week 5-6: Real-time collaboration, OpenAI integration
• Week 7-8: Polish, testing, deployment

My role: Backend architecture, OpenAI API integration, real-time sync logic

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• OpenAI - AI-powered suggestions
• Supabase - Backend infrastructure
• D3.js - Data visualization
• react-flow - Flow-based UI components

👨‍💻 Authors

Johannes Tampere

Chris-Robin Talts

• GitHub: @ChrisRobinT
• LinkedIn: chrisrobintalts
• Email: chrisrobin.talts@gmail.com

💡 Inspiration

Built to solve the problem of scattered ideas during team brainstorming sessions. Combines the fluidity of analog mind mapping with the power of AI and real-time collaboration.

---

Built with 🧠 to help teams think better together

⬆ Back to Top