Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/shade-solutions/devatlas

Developer Roadmaps
https://github.com/shade-solutions/devatlas

devatlas devops qwik reactflow roadmap roadmap-sh

Last synced: 3 days ago
JSON representation

Developer Roadmaps

Awesome Lists containing this project

README 

          
# DevAtlas 🚀



- https://devatlas.strivio.world/



[![Visitors](https://api.visitorbadge.io/api/combined?path=https%3A%2F%2Fgithub.com%2Fshade-solutions%2Fdevatlas&countColor=%23263759&style=flat-square&labelStyle=upper)](https://visitorbadge.io/status?path=https%3A%2F%2Fgithub.com%2Fshade-solutions%2Fdevatlas)



> **“Your map to mastering development.”**

> DevAtlas is an open-source, AI-enhanced, interactive roadmap platform that helps developers navigate the ever-evolving tech landscape. From beginner to advanced, DevAtlas gives you **visualized roadmaps**, **personalized learning paths**, and a **community-driven ecosystem** to accelerate learning.



---



## Table of Contents



* [Why DevAtlas?](#why-devatlas)

* [What is DevAtlas?](#what-is-devatlas)

* [Core Features](#core-features)

* [Roadmaps](#roadmaps)



  * [Role-based Roadmaps](#role-based-roadmaps)

  * [Skill-based Roadmaps](#skill-based-roadmaps)

  * [Project Ideas](#project-ideas)

* [Guides & Videos](#guides--videos)

* [Tech Stack](#tech-stack)

* [Libraries & Tools](#libraries--tools)

* [Getting Started](#getting-started)

* [Contributing](#contributing)

* [License](#license)



---



## Why DevAtlas?



Developers often struggle with **where to start** and **what to learn next**. Existing resources like roadmap.sh provide static guidance but lack personalization, interactivity, and AI-driven suggestions.



**DevAtlas solves this by:**



* Visualizing learning paths interactively.

* Offering AI-generated personalized roadmaps.

* Supporting community contributions.

* Gamifying learning with badges, streaks, and progress tracking.

* Providing curated guides, articles, and video tutorials.



---



## What is DevAtlas?



DevAtlas is a **Qwik + React Flow-based roadmap platform** designed to help learners **navigate tech careers and skills visually**. It supports:



* **Role-based and skill-based roadmaps**

* **Interactive nodes with resources**

* **AI-assisted personalized roadmaps**

* **Progress tracking and gamification**

* **Community-driven contributions**



It’s fast, interactive, and designed for developers, learners, and educators alike.



---



## Core Features



1. **Interactive Roadmaps**



   * Clickable nodes with videos, docs, and projects.

   * Color-coded skill levels (Beginner → Advanced).



2. **AI-Powered Personalization**



   * Generate roadmap based on career goal and skill level.

   * Suggest next learning steps dynamically.



3. **Community Contributions**



   * Fork and submit roadmaps.

   * Upvote/downvote resources.



4. **Progress Tracking & Gamification**



   * Badges, XP, streaks.

   * Sync progress with GitHub.



5. **Guides & Videos Section**



   * Curated articles and tutorials.

   * Embed videos for hands-on learning.



---



## Roadmaps



### Role-based Roadmaps



* **Frontend**

* **Backend**

* **Full Stack**

* **DevOps**

* **Data Analyst**

* **AI Engineer**

* **AI & Data Scientist**

* **Data Engineer**

* **Android**

* **Machine Learning**

* **PostgreSQL**

* **iOS**

* **Blockchain**

* **QA**

* **Software Architect**

* **Cyber Security**

* **UX Design**

* **Technical Writer**

* **Game Developer**

* **Server Side Game Developer**

* **MLOps**

* **Product Manager**

* **Engineering Manager**

* **Developer Relations**

* **BI Analyst**

* **Create Your Own Roadmap**



### Skill-based Roadmaps



* **SQL**

* **Computer Science**

* **React, Vue, Angular**

* **JavaScript, TypeScript, Node.js, Python**

* **System Design, Java, C++, Go, Rust, Kotlin**

* **Spring Boot, ASP.NET Core, API Design, Flutter**

* **GraphQL, React Native, Design System, Prompt Engineering**

* **MongoDB, Redis, Linux, Kubernetes, Docker, AWS, Terraform**

* **Data Structures & Algorithms**

* **Git & GitHub, PHP, Cloudflare**

* **AI Red Teaming, AI Agents, Next.js**

* **Code Review, HTML, CSS, Swift & Swift UI**

* **Create Your Own Roadmap**



### Project Ideas



* **Frontend Projects**

* **Backend Projects**

* **DevOps Projects**

* **Best Practices**

* **Backend Performance**

* **Frontend Performance**

* **API Security**

* **Code Reviews**

* **AWS Projects**



---



## Guides & Videos



### Guides



* Top 37 REST API Interview Questions (and Answers)

* Top 20 Python Interview Questions and Answers

* Is Python Hard to Learn? Our Experts Say…

* What Does a Data Analyst Do?

* Go vs Rust Compared: Which is Right for You?

* Python vs JavaScript: The Ultimate Guide for 2025

* Top 80 JavaScript Coding Interview Questions and Answers

* Top 100 Node.js Interview Questions and Answers

* Top 100 Java Interview Questions: Ace Your Interview

* Data Analyst vs Business Analyst Roles: How to Choose

* How Long Does It Take to Learn JS? A Career Seeker's Guide

* Is JavaScript Hard to Learn? Advice from a Pro

* Top 30 SQL Interview Questions and Answers

* 30 SQL Queries Interview Questions and Answers



### Videos



* The Ultimate Frontend Developer Roadmap (10 min)

* Session Based Authentication (2 min)

* Basic Authentication (5 min)

* Basics of Authentication (5 min)

* Graph Data Structure (13 min)

* Heap Data Structure (11 min)

* Tree Data Structure (8 min)



> More guides and videos will be added continuously by the DevAtlas community.



---



## Tech Stack



**Frontend:** Qwik, React Flow, TailwindCSS, Framer Motion, ShadCN UI

**Backend:** Node.js / FastAPI, PostgreSQL, Redis

**AI/Personalization:** OpenAI, Pinecone / Supabase Vector

**Hosting:** Vercel (frontend), Railway/Fly.io (backend)

**Authentication:** Clerk / Auth.js

**Optional:** Three.js / React Three Fiber for 3D roadmap visualizations



---



## Libraries & Tools



* **Animation:** Framer Motion, GSAP, Lottie

* **Visualization:** React Flow, D3.js, vis-network

* **State Management:** Zustand, Jotai

* **Collaboration:** Liveblocks, Supabase Realtime, Firebase

* **Markdown/Docs:** MDX, React Syntax Highlighter

* **Gamification:** Progressbar.js, React Confetti, React Spring

* **Media Embeds:** ReactPlayer, Vime.js



---



## Getting Started



```bash

# Clone the repo

git clone https://github.com/shade-solutions/devatlas.git

cd devatlas



# Install dependencies

npm install



# Start frontend (Qwik)

npm run dev



# Start backend

npm run start:backend

```



Visit `http://localhost:5173` to view your local DevAtlas instance.



---



## Contributing



1. Fork the repo.

2. Create a branch: `git checkout -b feature/your-feature`

3. Commit changes: `git commit -m "Add your feature"`

4. Push: `git push origin feature/your-feature`

5. Open a Pull Request.



We welcome contributions to **roadmaps, guides, videos, and features**!



---



## License



MIT License © 2025 DevAtlas