🚀 About the Project: DevMap

🌟 Inspiration

The world of tech learning can feel overwhelming—thousands of tutorials, courses, and scattered resources with no clear roadmap. I’ve often asked myself: Where do I even start with React, Node.js, or Python?

That frustration inspired DevMap — a tool to bring clarity and personalization into learning. Instead of being lost in endless tutorials, learners can visualize a guided, interactive roadmap that adapts to their goals and pace.

🛠️ How I Built It

Frontend: React.js with Vite for fast development and routing with React Router DOM.
Mindmap Visualization: Powered by React Flow to create interactive nodes and edges for each learning topic.
State Management: Used Zustand to handle roadmap states, learner inputs, and estimator logic.
Styling: Implemented TailwindCSS with a glassmorphism UI, adding animations via Framer Motion for smooth transitions.
Estimator Logic: Built a custom function in utils/estimator.js:

[ \text{Total Duration (weeks)} = \frac{\text{Total Learning Hours}}{\text{Hours per Day} \times \text{Days per Week}} ]

This lets learners see a personalized timeline based on their study habits.

📚 What I Learned

How to integrate React Flow for dynamic mindmap visualizations.
Balancing UI/UX with functionality using glassmorphism and smooth animations.
Designing modular components like TechnologySelector, InfoPanel, and EstimatorPanel for scalability.
Building an estimation algorithm that translates raw topic hours into realistic learning timelines.

⚡ Challenges Faced

Mindmap Complexity: Structuring JSON roadmaps into interactive nodes with descriptions, tags, and resources took time to model correctly.
Dynamic Content: Creating a system flexible enough to support multiple technologies (React, Node.js, Java, Python) with reusable structures.
UI Performance: Handling re-renders in React Flow while maintaining smooth animations.
Time Estimation Logic: Making the estimator useful yet simple enough for learners without overcomplicating inputs.