Interactive coding tutorials, delivered in a Vue.js single-page application (SPA)

Project Background

When I joined Protocol Labs in October 2018, I took over development of the nascent ProtoSchool, a collection of interactive tutorials on decentralized networking protocols including IPFS. I've since shepherded the open-source project through its public launch and expanded the Vue.js single-page application into a fully-featured website highlighting both our online coding tutorials and a growing community of local chapters across the globe hosting live educational events based on our curriculum.

Current Project Status (November 2019)

Challenges & Requirements

In October of 2018, the pre-launch ProtoSchool website was home to two interactive coding tutorials on IPLD/IPFS. Each tutorial in the single-page Vue.js app used the embedded Monaco Editor for code submission, with IPFS instance creation and validation taking place behind the scenes and limited feedback provided to users via success and error messages.

Initial Project Status (October 2018)

I was tasked with growing ProtoSchool's educational content, improving user experience, establishing a system for the creation of local chapters around the globe, and redesigning the website to reflect the full breadth of the open-source project and growing community.

I established guiding principles highlighting the need for beginner-friendly content with adequate scaffolding, cohesive and consistently-formatted tutorials, and self-governing chapters providing a welcoming and inclusive environment for all community members. These principles informed the top-level goals and quarterly objectives shared in the project roadmap.

Actions & Outcomes

I've developed or supervised implementation of a wide range of content updates and user interface upgrades to better support the learner experience and the needs of the growing ProtoSchool community:

  • An updated website structure to highlight local events and contribution opportunities
  • Local caching to enable learners to view their progress and return to previously submitted code
  • An in-lesson feedback mechanism to support continual content improvements
  • A file upload component to support new IPFS tutorials
  • A new multiple-choice lesson format
  • Solutions visible to users on demand
  • End-to-end testing to ensure suggested solutions pass validation tests
  • Improved formatting of success and failure messages to provide more meaningful user feedback
  • Custom event tracking to provide metrics including tutorial success rates, guiding curriculum development and user interface improvements
  • Filtering of tutorials by content, with an option to hide coding tutorials
  • A user-friendly CLI to enable non-coders to create tutorials
  • SEO-friendly course landing pages targeted to specific user groups

Since its launch in January of 2019, the ProtoSchool community has grown to 23 chapters on 4 continents, with 1800 monthly visitors frequenting the website's tutorials. The growing open-source project currently boasts 47 contributors.

View all projects

How can I help?

Looking for a front-end developer to build your next web app? Need a developer advocate with a knack for making complex technical topics accessible to beginners? Let's talk.