Build a Visual Thinking Tool with React Flow, Node.js, and MongoDB — MindMap

A minimal MERN stack mind mapping application to visually connect and organize ideas.
🧪 Try it live: Live Link!
🔗 GitHub @Tahrim19

✨ What is MindMap?

MindMap is an interactive mind mapping tool built with React Flow, shadcn/ui, and Node.js. Users can add nodes, create relationships, and organize their ideas visually — all while having their data saved securely to MongoDB.

🔧 Features at a Glance

• 🔐 Authentication (Register/Login)
• 🧠 Normal + Database Schema Nodes
• 🔗 Connect nodes with drag-and-drop edges
• ✏️ Edit node labels and custom schemas
• 📝 Rename mind maps
• 💾 Save/load your maps from a dashboard
• 🌐 Fully deployed frontend & backend

🧰 Tech Stack Breakdown

📸 Screenshots

🚀 How I Built It

Here’s a quick look at how I put it all together:

1. React Flow + Custom Node Components

React Flow makes working with draggable and connected nodes simple. I also extended it with custom node types for database schemas.

const nodeTypes = {
  databaseSchema: CustomDatabaseSchemaNode,
};

2. Authentication with JWT

Users register/login and receive a JWT stored in localStorage. This token is sent with all secure requests.

3. REST API with Express

Maps are saved via a RESTful API to MongoDB, with endpoints like:

GET /api/mindmaps/:id
PUT /api/mindmaps/:id

4. UI with Tailwind + shadcn/ui

UI is built using shadcn/ui — giving me elegant and composable components like Dialogs, Buttons, Inputs, etc., with almost zero boilerplate.

🧑‍💻 Want to Try it Yourself?

🔗 GitHub Repo:

👉 github.com/Tahrim19/mind-map

🛠 Local Setup

git clone https://github.com/Tahrim19/mind-map.git
cd mind-map

# Start frontend
cd frontend
npm install
npm run dev

# Start backend
cd ../backend
npm install
node server.js

🔐 Add a .env file for the backend:

PORT=5000
MONGO_URI=your_mongodb_atlas_url
JWT_SECRET=supersecretkey

This is a great project if you want to learn:

• How to work with React Flow
• JWT-based auth systems
• Creating custom node UIs
• Combining frontend + backend in production-ready deployments

💡 Drop a star ⭐ on the GitHub repo if this helped you or inspired your own visual thinking app!