Roadmapedia

Create and share learning Roadmaps to the world (under development)

Demo

Play with Roadmap creator demo on Netlify

Visit the full site (very premature) here

What is Roadmapedia?

Motive

Self learning is necessary but painful. When I started learning web development a couple years ago, googling "how to learn web dev" led to vastly different and fragmented quora answers (now it's a lot better). I wished I could've just opened up this fully-fledged and beautiful roadmap that shows what I need to learn, the recommended resources for each topic, and a writeup that clarifies some advanced jargons.

There are good learning outlines on, for example, on learning web-dev: https://roadmap.sh/frontend

There are good link and resource dumps: https://codepen.io/dexoplanet/full/oKXorG

Why not combine them both? With a more beatiful and consistent UI, and let users track their progress, etc etc?!

Features

• Roadmap Creator: Designed with substantial D3.js and a Medium like rich text editor.
• Learners can track and update progress (progress made with checking off resource nodes).
• Users can create Sets, listing smaller roadmaps.
• Learners can make private roadmaps for themselves from scratch, or they can import existing roadmaps into the creator.

Older Versions

(The RESTful APIs won't work in these websites since I need to migrate database and resolve a persistent proxy error, but some UI is still accessible )

Roadmapedia V1 (MERN Stack)

Roadmapedia V2 (MERN Stack)

Below are demos of their editors

Roadmapedia V1 Editor

Roadmapedia V2 Editor

Although far from professional levels, you can get a good feel for the features I was going for.

Connect

Discord: https://discord.gg/WD82qNM

Notes

As of February, the code in this remote repo only contains that of the Roadmap Creator's. I omit from uploading all of my work thus far because 1) I need to migrate from mongodb stitch to mongodb realm 2) I am considering switching serverless platforms soon.

Technologies used in this project

Frontend: CRA ReactJS, Sass, D3.js, Snowpack

Backend + Database: MongoDB Stitch (current), Firebase (perhaps in future)

Feel free to play around with this source code

As of March, I have migrated the main parts of the app from Stitch => Realm.