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
| Layer | Technology |
|---|---|
| Frontend | React + TypeScript, TailwindCSS, React Flow, shadcn/ui |
| Backend | Node.js, Express, JWT Auth |
| Database | MongoDB Atlas |
| Deploy | Vercel , Render |
📸 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!
Top comments (4)
pretty cool seeing someone put this together, makes me wanna organize my own ideas tbh - you think visual tools like this actually help with remembering stuff better or is it just for fun?
Thanks! I actually built this as a fun side project to explore React Flow and learn more about Node.js. But I do believe visual tools genuinely help with memory and understanding. There’s something about laying out ideas spatially — especially when you can connect them — that makes patterns easier to see and remember later.
It looks pretty nice. I'm trying to test it out, I created an account but I don't get how it works. Mind explaining? to a user, not the technical aspects.
Thanks for checking it out! 😊 Once you're logged in and on the dashboard, click “Create New Mindmap” to get started. You’ll see a blank canvas and a toolbar at the top — from there, you can add regular nodes or database nodes. Each node has dot - just drag from one of those to another node to create a connection. You can double-click any node to edit it, and you can also edit the map’s title directly at the top. When you're done, click “Save” to store your progress. Let me know if anything feels unclear!