A modern, interactive web application for creating, editing, and managing mind maps. Built with React, ReactFlow, and Django, featuring real-time collaboration, intelligent auto-save, and advanced drawing tools.
This project consists of two separate repositories:
- Frontend (This repo): mind-map-generator - React application with UI and drawing tools
- Backend: mind-map-generator-backend - Django REST API for data management
- Interactive Mind Maps: Create nodes and connections with an intuitive drag-and-drop interface
- Advanced Drawing Tools: Pen tool, eraser, and various shape tools (rectangles, circles, triangles, stars, arrows, speech bubbles)
- Shape Transformation: Select and resize shapes with interactive transformation handles
- Intelligent Auto-Save: Activity-based auto-save that saves 3 seconds after you stop editing
- Real-time Notifications: Toast notifications for save status and system feedback
- Modern Dashboard: View, search, and manage all your saved mind maps
- Responsive Design: Fully responsive interface that works on desktop, tablet, and mobile
- Dark/Light Theme Support: (Coming soon)
- Keyboard Shortcuts: Efficient workflow with keyboard shortcuts
- User Authentication: Secure login and registration system
- Cloud Storage: Mind maps are saved to a Django backend with SQLite database
- Export Options: Export mind maps as images or JSON (Coming soon)
- Collaboration: Real-time collaborative editing (Coming soon)
- React 19 - Modern UI library with latest features
- ReactFlow 11 - Interactive node-based editor
- React Router - Client-side routing
- TailwindCSS 4 - Utility-first CSS framework
- React Icons - Beautiful icon library
- Vite - Next-generation frontend build tool
- Django 5.2 - Python web framework
- Django REST Framework - API development
- SQLite - Development database
- Django CORS Headers - Cross-origin resource sharing
- Gunicorn - Production WSGI server
Make sure you have the following installed:
- Node.js (v18 or later)
- Python (v3.9 or later)
- npm or yarn
- pip (Python package manager)
git clone https://github.com/ratinto/mind-map-generator.git
cd mind-map-generatorNote: This repository contains the frontend (React) code. You'll also need the backend server from: mind-map-generator-backend
# Clone the backend repository
git clone https://github.com/ratinto/mind-map-generator-backend.git
cd mind-map-generator-backend
# Create and activate virtual environment
python -m venv venv
source venv/bin/activate # On Windows: venv\Scripts\activate
# Install dependencies
pip install -r requirements.txt
# Run migrations
python manage.py migrate
# Create superuser (optional)
python manage.py createsuperuser
# Start backend server
python manage.py runserver# Open new terminal and navigate to frontend directory
cd mind-map-generator
# Install dependencies
npm install
# Start development server
npm run dev- Frontend: http://localhost:5173
- Backend API: http://localhost:8000
- Django Admin: http://localhost:8000/admin
mind-map-generator/
├── src/
│ ├── components/
│ │ ├── Dashboard.jsx # Mind map listing and management
│ │ ├── MindMapEditor.jsx # Interactive mind map editor with drawing tools
│ │ ├── Home.jsx # Landing page
│ │ ├── Login.jsx # User authentication
│ │ ├── Signup.jsx # User registration
│ │ ├── Navbar.jsx # Navigation component
│ │ └── ProtectedRoute.jsx # Route protection
│ ├── contexts/
│ │ └── AuthContext.jsx # Authentication context
│ ├── services/
│ │ └── apiService.js # API communication
│ ├── assets/ # Static assets
│ ├── App.jsx # Main application component
│ ├── index.css # Global styles
│ └── main.jsx # Application entry point
├── public/ # Public assets
├── package.json # Dependencies and scripts
├── tailwind.config.js # Tailwind configuration
├── vite.config.js # Vite configuration
└── README.md
mind-map-generator-backend/
├── api/ # Django app for API
│ ├── models.py # Database models
│ ├── views.py # API views
│ ├── serializers.py # Data serializers
│ └── urls.py # API routes
├── backend/ # Django project settings
│ ├── settings.py # Django configuration
│ ├── urls.py # Main URL configuration
│ └── wsgi.py # WSGI configuration
├── manage.py # Django management script
├── requirements.txt # Python dependencies
└── README.md
- Sign Up/Login: Create an account or log in to access the dashboard
- Create New Mind Map: Click "Create New Mind Map" from the dashboard
- Add Content:
- Use the text tool to add nodes
- Use the pen tool to draw freehand
- Add shapes using the shape tools
- Connect Ideas: Drag from one node to another to create connections
- Transform Elements: Select shapes to resize and modify them
- Save: Your work is automatically saved every 3 seconds after you stop editing
- Select Tool: Default tool for selecting and moving elements
- Pen Tool: Draw freehand paths and annotations
- Text Tool: Add text nodes to your mind map
- Shape Tools: Add rectangles, circles, triangles, stars, arrows, and speech bubbles
- Eraser Tool: Remove drawn paths and elements
- Color Picker: Change colors for drawing tools
- Thickness Control: Adjust line thickness for drawing tools
We welcome contributions from developers of all skill levels! This project is participating in Hacktoberfest 2025.
- Read our Contributing Guidelines
- Check out our open issues
- Fork the repository
- Create a feature branch
- Make your changes
- Submit a pull request
Look for issues labeled with:
good first issue- Perfect for beginnershelp wanted- We need community helphacktoberfest- Hacktoberfest specific issuesdocumentation- Help improve our docsbug- Fix bugs and improve stability
- Export Functionality: PDF, PNG, and SVG export options
- Real-time Collaboration: Multiple users editing simultaneously
- Dark Mode: Complete dark theme implementation
- Mobile App: React Native mobile application
- Advanced Shapes: More shape types and custom shapes
- Keyboard Shortcuts: Comprehensive keyboard navigation
- Version History: Track and restore previous versions
- Templates: Pre-built mind map templates
- Sharing: Public sharing and embedding options
- Integrations: Import from other mind mapping tools
- Database Optimization: PostgreSQL migration for production
- Caching: Redis integration for better performance
- CDN: Static asset delivery optimization
- Progressive Web App: PWA features for offline usage
# Frontend testing
npm run test
# Backend testing
cd mind-map-generator-backend
python manage.py test
# Linting
npm run lintnpm run build
npm run preview# Collect static files
python manage.py collectstatic
# Run with Gunicorn
gunicorn backend.wsgi:applicationFound a bug? Please create an issue with:
- Clear description of the problem
- Steps to reproduce
- Expected vs actual behavior
- Screenshots (if applicable)
- Your environment details
This project is licensed under the MIT License - see the LICENSE file for details.
- ReactFlow - For the powerful node-based editor
- TailwindCSS - For the utility-first CSS framework
- Django - For the robust backend framework
- Vite - For the lightning-fast development experience
- All our amazing contributors
- GitHub Issues: Report bugs and request features
- Discussions: Join community discussions
- Hacktoberfest: Participate in Hacktoberfest 2025
Made with ❤️ by the open source community
⭐ Star this repo if you find it helpful!