DEV Community

Cover image for I Built DevNavigates: An Interactive, Visual Learning Roadmap for Developers
Dipanshu Rawat
Dipanshu Rawat

Posted on

I Built DevNavigates: An Interactive, Visual Learning Roadmap for Developers

#nextjs #react #webdev #showdev

Most developer roadmaps are either static text lists or massive, rigid images that are overwhelming to look at and clunky to navigate.

I wanted something different: an interactive canvas where you can explore career paths visually, click through nodes, and directly access curated resources (articles, docs, videos) attached to each milestone.

That led me to build DevNavigates.

🚀 Live Demo & Repo

GitHub logo dipanshurdev / devpath

Your ultimate roadmap to becoming a successful developer!🚀🌟✨

DevNavigates 🗺️

DevNavigates is a modern SaaS learning platform where developers can explore curated roadmaps, track their progress, and master new skills. Built with Next.js 14 App Router, MongoDB, Prisma, and NextAuth.

Tech Stack

Layer Technology
Framework Next.js 14 (App Router)
Database MongoDB Atlas
ORM Prisma
Auth NextAuth.js v4 (JWT + OAuth)
UI Tailwind CSS + shadcn/ui
Roadmap Visualization ReactFlow
Animations Framer Motion
Validation Zod
Caching In-memory (Redis optional)

Getting Started

1. Clone and install

git clone https://github.com/dipanshurdev/DevNavigates.git
npm install
Enter fullscreen mode Exit fullscreen mode

2. Configure environment variables

Copy .env.example to .env and fill in the required values:

cp .env.example .env
Enter fullscreen mode Exit fullscreen mode

Required variables:

DATABASE_URL=mongodb+srv://...
NEXTAUTH_SECRET=your-secret-here
NEXTAUTH_URL=http://localhost:3000
Enter fullscreen mode Exit fullscreen mode

Optional (for OAuth):

GITHUB_ID=...
GITHUB_SECRET=...
GOOGLE_CLIENT_ID=...
GOOGLE_CLIENT_SECRET=...
Enter fullscreen mode Exit fullscreen mode

3. Set up the database

# Push schema to MongoDB and generate Prisma client
npm run setup:prisma
# Seed with sample roadmaps and an admin user
npm
…
Enter fullscreen mode Exit fullscreen mode
View on GitHub

🛠️ The Tech Stack

  • Framework: Next.js (React) + TypeScript
  • Visual Canvas: React Flow (for interactive nodes, edges, and canvas controls)
  • Styling: Tailwind CSS + shadcn/ui
  • Backend / Database: MongoDB PrismaDB(for roadmap dynamic fetching and resource collections)

💡 Key Engineering Takeaways

1. Interactive Node Graph with React Flow

Instead of hardcoded SVGs or nested lists, React Flow allowed me to treat every technology milestone as an interactive graph node. Users can pan, zoom, and inspect dependencies between technologies before moving to the next phase of their journey.

2. Attaching Curated Context to Every Node

A roadmap without resources is just a list of buzzwords. Each node dynamically surfaces:

  • Key concepts to master
  • Direct documentation links
  • Curated articles and hands-on tutorials

🔮 What’s Next?

I’m currently planning to add:

  • Custom user progress tracking (marking nodes as "completed" or "in-progress")
  • Community-contributed paths and customized stacks

I would love to get your thoughts! Feel free to play around with the app, check out the repo, and leave your feedback or feature requests in the comments below.

Top comments (1)

Collapse
 
dipanshurdev profile image
Dipanshu Rawat •

Please check it out and give me the valuable feedbacks.