Roadmapedia

<h1 align="center">Roadmapedia</h1> <div align="center">

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

<img src="docs/roadmapedia-demo-gif.gif"> </div>

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.