As I mentioned earlier, for the Live Web final I was working on the interactive ITP yearbook. I wanted it to be a separately running website, which would be meant for ITP community only.

Since the school year is going to the end, people get more emotional about leaving, new people coming, you know the thing. So the interactive yearbook could be one of the tools to remember people. And in a bit more interesting way than usual school yearbooks:


The page is running here:

It’s a mini website that I built using websockets and Express. When people enter the page, they can choose to either view existing yearbooks or submit their own image.

The way it’s different from other yearbooks is that instead of uploading photographs, people can record their own video, which is later placed together with other people’s videos.

Screen Shot 2016-05-03 at 19.46.23

Before clicking “record”, users are asked to enter their full name and their superpower (to make things a bit more interesting). When they hit “record”, the timer shows up and people have 4 seconds to move for their video.

Screen Shot 2016-05-03 at 19.46.58

The video is being saved in the database on a server with the title of entered full name and then displayed on a new page.

Screen Shot 2016-05-03 at 19.47.18

The plan for the job was the following:

  • make the code work on a separate page
  • merge everything with Express
  • do some styling

Some of the things I coded / used:

Media recorder to enable the recording, as well as Timer function

Screen Shot 2016-05-03 at 20.56.27

Filesystem and nedb for saving videos

Screen Shot 2016-05-03 at 20.57.12 Screen Shot 2016-05-03 at 20.57.37

Sockets to enable everything

Screen Shot 2016-05-03 at 20.59.41

Express to build actual website

Screen Shot 2016-05-03 at 21.00.31 Screen Shot 2016-05-03 at 21.00.44 Screen Shot 2016-05-03 at 21.00.53

Regular expressions to remove spaces in full name

Screen Shot 2016-05-03 at 21.03.45

At the moment the page is functional for Live Web class only, but soon users will be able to select between ITP graduating years of 2016 and 2017 and leave their videos.

Leave a Reply

Your email address will not be published. Required fields are marked *