Inspiration

Gridmaster is inspired by services like Code School that teach people new skills through bite-sized lessons and realistic exercises. Almost everyone can benefit from leveling up their spreadsheet skills, and Gridmaster offers an interactive way to learn those skills directly inside Excel.

What it does

After installing the add-in, users can launch video lessons to learn Excel in the sidebar. At the end of the video lesson, the add-in will fill the spreadsheet with exercises to practice their new skills. Then, the add-in validates the student’s input, giving them real-time feedback.

Although there are many great Excel tutorials, Gridmaster teaches by guiding users through the process of building real-world spreadsheets directly inside of Excel. This results in a more active and high-fidelity learning experience than you can get any other way.

How we built it

Gridmaster is a two-person team of Bryan Braun and Andrew Childress. Gridmaster started off as a web-application with an embedded javascript spreadsheet for exercises (see http://gridmaster.io), built by Bryan, a web developer by day.

After seeing the project on Hacker News, Andrew reached out to Bryan. Andrew’s background is in corporate finance and also teaches courses and tutorials online. When we stumbled upon the hackathon in mid-January, we realized that the Office Add-ins API would provide a more realistic environment for our exercises, and that focusing on Excel would provide the most value for our users.

We began rewriting Gridmaster as an Excel add-in, spending nights and weekends to prepare for the Devpost contest. We migrated our existing course material to work with the Excel add-in and updated the screencasts to fit the format.

We built the add-in by using the Yeoman Generator as a starting place for the codebase. We were able to reuse some code from our web-only demo, but much of it was rewritten for use within Excel.

Design-wise we wanted to reimagine the user experience in the Office environment, and relied on Office UI Fabric to guide our design decisions.

Challenges we ran into

Time was our biggest constraint, as we balanced our day jobs with preparing for the contest. We focused on applying MVP principles and made heavy use of the documentation to create the Gridmaster add-in quickly.

On the technical side, debugging with Vorlon.js was tough to adapt to, since we were used to Chrome’s DevTools. It was especially difficult to do async programming without being able to pause execution and inspect local variables.

In general, it was tough finding answers to technical questions, see 1 and 2 . We relied heavily on the official docs, add needed to dig around for example source code on github.

Accomplishments that we're proud of

  • Using a wide range of the Javascript API features to provide the best experience (dialogs, bindings, eventHandlers, the Excel Object Model, etc).
  • Leveraging Office UI Fabric patterns to provide a cohesive user interface (Pivot, Message Bar, Buttons, fonts, colors, icons, etc).
  • Moving quickly and focusing, so we could build a working demo in a short period of time.

What we learned

We learned about the Office Add-in API (which we didn't previously know about), and everything it could do. Ultimately, we learned that an Excel add-in was an ideal solution to the types of problems we were trying to solve.

What's next for Gridmaster

After completing the contest, we'll migrate existing lessons from our first course to the Excel add-in format. We will also write new lessons and courses for users to teach them what they most want to learn. We’ll also start rolling out the product that we built for this contest.

In the long-term, our goal is to become the leading choice for learning Excel. We believe that the product is ideal for everyone from Fortune 500 companies with training budgets, to any individual that needs to learn spreadsheet skills to organize their lives or advance in their careers.

Built With

Share this project:

Updates