Create and share learning Roadmaps to the world (under development)
Play with Roadmap creator demo on Netlify
Visit the full site (very premature) here
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?!
- Roadmap Creator: Designed with substantial D3.js and a
Mediumlike 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.
(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 )
Below are demos of their editors
Although far from professional levels, you can get a good feel for the features I was going for.
Discord: https://discord.gg/WD82qNM
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.