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!