blastwind/roadmapedia

An edutech webapp (V3) to create, track, and share learning roadmaps

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.

roadmapedia's Issues

only raise() on currently dragged element

So for text nodes, this will place it over all other text nodes (and already, over all other circle nodes)
For circle nodes, temporarily raise just currently dragged node above all other text nodes and circle nodes (set current node to invisible, append temporary svg at the root level, insert node there, on drag end, remove temporary svg, set current node to visible)

Design Debate: How to add node to view?

Above is demo of the current rewrite. The node and link text at the top will be replaced by icons.

I see 2 ways.

1. Dragging the icon immediately reveals a dragging circle, and user can place this circle in the view to add.

2. Click icon, some "node add" state is activated, during this mode, mousing over the view shows a circle with a dashed border, and maybe a light blue fill color to indicate that on click would add a new node.

Currently, I will go with 2).

Pros and Cons of each

1. Pros: handles logic in Toolbar. Cons: ...
2. Pros: intuitive UI since other modes will be activated with a click too. Cons: ...

Rendering nodes in order means contentEditable TextNodes could be unfocusable

with something along the lines of

    if (nodeData.type === "circle") {
      viewContainer
        .append("svg")
        .style("position", "absolute")
        .attr("width", "100%")
        .attr("height", "100%")
        .attr("class", "circleNodeContainer")
        .append("circle")
        .attr("r", 30)
        .attr("cx", nodeData.x)
        .attr("cy", nodeData.y);
    } else if (nodeData.type === "text") {
      viewContainer
        .append("div")
        .style("position", "absolute")
        .attr("contenteditable", true)
        .text("akdlfj");
    }
  });

I can append circle node and text node in order. However, circle nodes are currently rendered with a full sized SVG, which means: if a text node is rendered before a circle node, it can never be focused.

Two potential solutions (or really 1?):

1. Don't render in order. Render circles first, text nodes second. Only display in order when text nodes need not to be edited/focused (e.g., when users are viewing a published roadmap?).
2. Render circles at cx=cy=0 with an adjusted SVG (issue, still, SVG are squared, which means if a text node lies beneath the squared portion, it is unfocusable although it might appear it is.

Using solution 1 for now.

Submodularize D3.js

This issue should be solved with a production bundler like Rollup or Webpack

Currently with Snowpack, the d3 "event" module is giving troubles.
I am attempting to import "event" from "d3-selection" which should work for d3-selection <[email protected]
This works on playground sandbox: https://codesandbox.io/s/tender-benz-p5dtn?file=/src/index.js, not on here yet

Accessible UX in Roadmap Creator

The 4 attached blobs is too fancy and inefficient to be deployed in production. Code a sidebar to enable node metadata editing.