My name is Tyler Nickerson, and I am a rising junior at Worcester Polytechnic Institute in Worcester, MA. For the past three months, I have had the pleasure of being an edX intern working with the E-Commerce team. The E-Commerce team develops tools that are used to better manage and maintain monetized courses, such as those with verified certificates.

During my internship, I have become familiar with a slew of frameworks and libraries that were previously unknown to me (notably Django and BackboneJS). While I’ve helped build many great new features here, I’d like to take this time to discuss a rather innovative product that has recently emerged from the E-Commerce team: the Course Admin Tool. I’ll also touch upon the theming and styling work that went into the tool, as it involves groundbreaking work involving edX’s use of UX patterns and components across platforms.

The Course Admin Tool

In the last few weeks of my internship, I was recruited to build the early pages of what would become the Course Admin Tool, a portal for project managers (PMs) to create and edit paid course products, such as verified certificates, professional education, and credit seats. Prior to the tool’s existence, these changes were made using Django’s admin panel, a non-intuitive, developer-oriented tool that is anything but user-facing. The Course Admin Tool provides an intuitive, streamlined interface to help automate the process of adding course products.

I had the honor of being the first developer to work on the tool, developing the initial list view that lists courses available for viewing and editing. In its early stages, the list view consisted of only a DataTable, a filter box, and a nonfunctional “Add New Course” button. The tool didn’t even have the ability to display additional details for the courses listed.

Initial list view as described in the text.

The list view uses the DataTables jQuery plugin to provide a dynamic, robust method of sorting and filtering the table’s data. However, a much less noticeable component of this page is the extensive work that went into building its stylesheets. The Course Admin Tool is the first edX service to fully feature the UX Pattern Library, a set of patterns and UI components designed by edX’s UX team. The Pattern Library is still a work in progress, and as a result, it is missing many crucial components such as navigation bars and menus. In early versions of the Course Admin Tool, Twitter’s Bootstrap framework was used to “fill in” these gaps. Another missing feature of the Pattern Library is modularity, or the ability to “plug and play” the library into other platforms without heavy modification. As a result, including the Pattern Library in the Course Admin Tool proved to be rather challenging.

Modularizing the Pattern Library

When work first began on the Course Admin Tool, the following steps needed to be followed in order to use the Pattern Library on a website:

  1. Clone the ‘ux-pattern-library’ Git repository to your local machine
  2. Install the library’s Bower dependencies
  3. Copy the repository to your website directory
  4. Include either main-ltr.scss or compile and include main-ltr.css in your main HTML file

Ideally, if this were to follow the traditional approach of frontend dependencies, these steps should be condensed to the following:

  1. Install the pattern library as a Bower dependency using the terminal
  2. Include main-ltr.scss or main-ltr.css in your HTML file

Condensing these steps is a rather long and ambitious process. Due to the short time frame in which we had to develop this tool, I took it upon myself to add minimal plug-and-play support for the Pattern Library, to the point where only the following three steps were required:

  1. Install the pattern library as a Bower dependency using the terminal
  2. Copy main-ltr.scss elsewhere and modify its dependency paths
  3. Include main-ltr.scss in the HTML file and compile it at runtime

Though not ideal, this approach worked for the purposes of the Course Admin Tool, and the Pattern Library was able to sit nicely alongside Bootstrap. Towards the end of my internship, I was able to discuss the modularization of the Pattern Library with the UX Team, making several suggestions on how the pattern library can be better integrated with Bower.

Final Product!

Today, the Course Admin Tool has evolved to be a much more mature product, complete with functioning create, edit, and detail views for courses. The DataTable now supports pagination, and even allows you to specify how many courses to list per page.

Screenshot of the Course Admin Tool final product, as described in the text

In retrospect, I feel honored to be the first developer to work on this tool. I am proud of the work I’ve done at edX. The whole experience of being an edX intern has taught me quite a lot, not just in terms of skillset, but also in terms of team collaboration and planning. Last summer I interned at another startup based in a garage. My two (and only) co-workers were the CEO and the programming lead. At edX, I was able to work with a full-fledged, dedicated team who were open to my suggestions and feedback. Doing so taught me how to contribute to the group’s dynamic and how to understand the development processes of larger teams. I’d like to thank Clinton Blackburn, Zach Rockwell, Amanda Nanni, and all of my fellow interns for making this a great summer, and I hope to contribute to the Open edX platform again in the near future.

Loading