Building ClassNav's website and dashboard.

classnav case image

Building the syllabus submission form.

ClassNav is a syllabus and scheduling app for colleges, so one of their main functions is gathering syllabi from students. To do this, we modified a submission form from Codrops that takes you through the process step by step. We decided to use third party code here to save ourselves some headaches, while also saving ClassNav some money on our development costs.

To appease my love of Easter eggs, I took the time to ensure the placeholder text accurately reflected one of Wes Anderson's greatest works.

See the Submit Form
classnav case image

Now for the real challenge: Creating the dashboard for data scraping syllabi.

In order for ClassNav to function, they needed all of the syllabi submitted through their site to by data and put into their database. To do this, my partner and I came up with the dashboard you'll see in pictures below.

This project became the biggest logistical nightmare I had yet encountered.

For this to work well, it needed to be fast and easy to scrape the data, while also being intuitive enough for people who had never seen it before to use it. It needed to do this all while ensuring the data was being entered in the same format, even though the format used in the syllabi themselves seemed simple. This project deeply solidified for me the belief that these things are never as simple as they seem at first glance. There are almost always hidden complexities.

classnav case image

Developing for dynamic content.

Having to create designs that fit different amounts of data on different sized screens is a challenge that I cherish. It is the exact kind of puzzle that I adore solving. Creating this dashboard required me to think of all of the edge cases of great amounts of data, or no data, and how to handle both, while ensuring the user gets to what they want as fast as possible.

What is pictured below is the final result for how we displayed the submitted syllabi.

classnav case image

The true crucible of the build.

All of the previous work would have been for naught if the screen to actually scrape the data didn't work well. The page displayed below took hours upon hours of planning, not including the actual development time.

This page had to:

  • Render all image types, from .pdf to .gif and everything in between within the right window.
  • Allow people to work on different sections of the syllabus at the same time.
  • Accommodate multiple sections on the syllabus.
  • Be simple enough to understand intuitively.

Whiteboards were filled and erased with mockups of the interface several times, until we were happy with the final result.

classnav case image

What I learned, and what I would do differently.

If I had to distil the many lessons I took away from this project into just a few, they would be:

"Communication is king."

Whether this is communication between your fellow developers, your employers, or your employers developers, communication is the only way the project will be done accurately and on time. It amazes me how easily misunderstandings find their way into the heart of a project and take hours to work out, but it could all be avoided by a better communication flow.

"Test new frameworks before you use them."

In this project, we used a few new frameworks, ranging from a SASS library, all the way to using React for the first time. Using all of these were a good idea, but we should have tested them on a smaller scale to ensure less bugs in our final project.

"Choose who you work with carefully."

I have worked on several projects before, but most have fizzled out before finishing due to the lack of follow through or funding. This project showed me how powerful a well designed team can be. Everyone knew their role and finished it reasonably on time. It is only because of each person's individual dedication that this project was ever finished.