medium-style-comments

Checklist

  • Build a medium.com style commenting / notes system in React (here is a similar demo in JQuery: http://aroc.github.io/side-comments-demo/#demo)
  • Make it work for a single user and a static text (no signup / login needed)
  • People can mark text and attach a comment to it
  • try your best to make it look good (e.g. styling and transitions)
  • store comments in localStorage like a DB

Summarised

  • Single user (e.g. Hello my name is ____), single wall of static text
  • <mark> (highlight) text and attach comments
  • Load and save to localStorage
  • Deploy to static bundle hoster (or rails on heroku if time allows)

Screenshots

Highlight text on Medium:

highlighting text on medium

SideComments.js demo:

Hovering over comments button (before click):

hovering over button

Comments pane expanded (after click):

comments pane shown