Teacher Substitution Plan

A plan that displays every curriculum change for every grade. Is used in the entrance hall of my school.

Plan used in entrance hall
Plan used in entrance hall
Plan with test data
Plan with test data

Table of contents

Finding the idea

My c.s. teacher regularly organizes a school hackathon (“Hack Night”) which takes place from Friday 6 p.m. to Saturday 1 p.m. He asked me at the beginning of it if I would like to reimplement the plan to be displayed in the entrance hall. Nicco, Maurice and me began to work on the plan.

Building the site

The first thing we did was thinking about the criteria the plan had to meet and sketching down a draft of the structure. It had to fit as much content on the screen as possible so the student doesn’t have to wait until the plan scrolls down.

Then we began to fetch the data from our teacher’s API which is by the way password protected for data protection reasons. We implemented the basic mechanism of parsing the data, displaying it and logging in at the end of the night (it wasn’t the only project we were working on).

After the hackathon that took place in January 2017, I implemented pretty much everything alone over the course of 2017 that I wanted to implement or my teacher requested.

Main functionality

The user is able to view all curriculum changes for every grade when he/she is logged in. Every change is displayed in its own box with the class name in the upper left corner. To the right of it: the new room and which lesson it is. Below that row is space for extra information. Important features that I added throughout the year are:

You can also use the following features with the help of URL-parameters (german documentation):

What I learned

I tremendously expanded my JavaScript and overall front-end skills.

My favorite thing about this project

is that hundreds of students daily rely on it.


This probably is the project I spent most of my time on after my vocabulary book app. With both projects, I was not only able to improve my skills but I could also help others. In the future, I would definitely like to improve the design and work more with other students to improve the plan.