A self-directed learning network: WIP v0.2

learning to build a prototype with Vue.js and Firebase

  • First and foremost, I want to make something that I would use myself. I am frustrated with what is available at the moment to chart learning progress, or simply being able to share resources in a coherent, organised manner.
  • It would be a very nice bonus if I could find a tribe of people who would use this with me. I am not intending to solve problems with education, I intend to make it easier to learn in a self-directed manner. Plenty of people rightly pointed out motivation is a problem with online learning, but I think with self-directed learners the problem is less motivation, more infrastructure.
  • I am not building something to create new content, it is a platform to document and share links to existing content — there is already a ton of amazing content out there, it is just not organized.
  • I am still hoping to open-source everything out of this and at this point do not intend to make it into a product or organisation.
  • It could take me decades, but what matters more to me is to make this thoroughly in the way I want to. You could say it may be more of an artistic project than trying to solve a problem. I feel less bad about this ever since I discovered this reddit thread.
  • Damn, I want to have fun doing this.

Learning to code in order to build

Since March began I have been working full-time on this. The previous clickable prototype came to a point where the learning will not enable me to go much further on it, so I decided that building it out and eating my own dog food would teach me much more.

Showing the WIP


Cards are organised into stacks. Each card can appear in multiple stacks. Cards are swipe-able on mobile and they are laid out in a simple grid on desktop.

Stack & card creation

I used iframely to grab the meta data of the URL in order to automatically populate the fields:


Thanks to Vue and Firebase, editing cards live seem so seamless.

Feature list for v0.1 of the prototype

Right now it is in single-player mode, though it is set-up to ease into multi-player mode later. There are a lot of features missing — rearranging cards, recording progress, adding notes etc— but I thought this is a good v0.1 for a prototype. This was the list of features I planned (and completed) for this milestone:

  • create card and stack
  • display cards within a stack
  • delete card and stack
  • edit card
  • auto-populating of image using embedly when you paste a url (I changed this to iframely because of embedly’s new pricing, and instead of fetching the data after the user has finished typing ala facebook, now it fetches after a button is pressed, to prevent accidental calls because it can be costly)
  • add/remove card to stack
  • loading indicators
  • editing stack
  • add card while in stack page
  • navigation
  • card data structure and display
  • bind stack and card to creator but provision for future curator mode: i.e. you can add someone else’s card into your stack but add your own note
  • better auto-snippets and fallbacks


Apart from basic formatting to make sure it is not hideous, I didn’t spend much time on the visual design. Aesthetics will not be the priority for the time being as I am focused on the product design itself, though that will evolve as I use it while I build.


I am not proud of it right now. I intend to write a post on how I went from not knowing much javascript to building this. The hardest thing to learn for me was how data denormalization works and writing the code to make the proper calls. To be honest, I am still not sure if I am doing it right. I look forward to the day I am good enough to refactor it all.


For now, I am on the free tiers of Firebase and iframely, but there may come a point when I will need to pay for service costs, even if I fund my own time costs. I will cross that bridge when it comes.


These are some questions that are still up in the air:

  • Is the card format necessary? Could a list of unevenly-sized containers work? Is this really different from having a text list?
  • Related to the above, is a carousel-style card to card navigation superfluous or a simple scroll will do?
  • Is a full client-side processing experience sustainable? One day I may actually be technically good enough to wake up in horror that I have to rewrite everything.
  • Am I really building a prototype? Sometimes I find myself making decisions as though I am building something I want to be sustained. It is not necessarily a bad thing, except when it interferes with the purpose of the experiment.
  • How is this different from Medium’s Series? I don’t actually have this question but leaving it here in case someone asks. I could replicate a learning path with Medium’s Series but I do think there is a difference having standard formatting for metadata, learning progress indicators, multi-player mode, merge and sort capabilities.

Some closing thoughts

Several times in the process of working on this, especially spending multiple days of 8 hours straight and then falling sick — I wondered to myself if there is a point. I am fulfilled just by the process of making it. At this stage it I am happy to make it into my personal online library of resources, organised just the way I like to share it.




Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store