Durhack 2020 - AWS Highly Commended

EduFlix - Party Streaming for Lecture Content

Below is a short summary of my work as part of the EduFlix team at the recent Durhack 2020 event. If you would like to have a look at the project code then check out the repository here. If you are more interested in the story of how it was made and other projects at Durhack 2020 then head over to the head over to the Devpost page. The Devpost article also links to a short video presenting the project with a live Demo. This was all created in 24 hours!

Project Conception

As a team we were comprised of 5 members with a mixed background in age, programming knowledge and experience at hackathons. One of the challenges asked for an education based hackathon that would improve the lives of educators and students during this Covid-19 affected period. It was therefore useful to have the balance of the team of four 1st and 2nd year students and me as an early post-grad so that we had some opinions about both sides. It quickly became apparent that a key feeling during the first term this year has been a lack of interaction with fellow students on the same course, especially for freshers. Some students do not know and have not spoken to any of their peers as they don’t have anyone in their designated household studying the same subject and online lectures and workshops have been pre-recorded or “camera off + microphone off” experiences.

The conversation then moved to how engagement between classmates could occur even when material is pre-recorded. They also noted that not having a room of people together to view a lecture had lead to some people not watching lectures for weeks on end and then binging them in a panic without really having time to digest the content. Some sort of group pressure to study is useful for many students and walking to lectures in the morning from your college is a good way to start the day with an approach to learning.

We discussed the current software being used to show lecture contents to students in Durham, Panopto. We felt it was a good service but lacked any interactions between fellow students. We quite quickly thought of the online service Netflix Party which is now called Teleparty. This is implemented as a chrome extension that allows friends to login and watch Netflix content simultaneously with a chat functionality. We decided we would like to implement a similar service for online lecture content but also with video included to encourage the student we believe was missing.

Implementation Choices

Amongst the group we realised that our collective knowledge base was mostly in python and a little javascript. We therefore set out to design the backend of the website using Flask and manage the video chat features using javascript.

The main sponsor of the event was Amazon Web Services (AWS) so we decided that once the structure was built we would use S3 for video storage and some sort of server to host the website. We also considered using elastic beanstalk but we will talk about thay later….

Web Design using Flask

If you are unfamiliar with Flask it is a web design tool written using Python that is quite easy to get going. The database management system is easy to integrate and you can choice which type of database you want to use.

The basic idea is to create an application. This is done within an __init__.py file which allows the hole website system to be treated as a python module. Thus when you need to run the website you can just “import it” and get it running. Flask understands how to build the website through blueprints which you create. This allows the creation of the entire website to be defined in a very simple way.

def create_app(test_config=None):
    # create and configure the app
    app = Flask(__name__, instance_relative_config=True)
    Bootstrap(app)
    app.config.from_mapping(
        SECRET_KEY='dev',
        DATABASE=os.path.join(app.instance_path, 'eduflix.sqlite'),
    )


    # ensure the instance folder exists
    try:
        os.makedirs(app.instance_path)
    except OSError:
        pass

    # a simple page that says hello
    @app.route('/')
    def index():
        return render_template("index.html")


    from . import db
    db.init_app(app)


    from . import auth
    app.register_blueprint(auth.bp)

    from . import myvideos
    app.register_blueprint(myvideos.bp)

    from . import upload
    app.register_blueprint(upload.bp)

    return app

This code is relatively easy to follow. We create the app and tell it about the database we want to use (in development mode for now) and then import styles for several different pages and functions. The @app.route decorator is very important in flask and is used to define the urls. The fact that is a Python decorator is very useful because you can add it at the start of any function to make the function run at a different URL. In this first case the route is to the homepage where we render index.html. If we look in index.html we find a simple homepage:

{% extends "base.html" %}
{% block title %}Welcome Home!{% endblock %}


{% block content %}

<h1>Welcome to EduFlix, the web app that lets you enjoy learning with friends</h1>




<p> Here at EduFlix we understand that covid has shifted
  learning environents across the world. We want to make it easy to collaborate
with your peers when you're learning. This tool will allow
educators to enable their students by providing them with a fun and
effective platform to watch their video content</p>


<p> We want students to have the interactive capability of a zoom
  call and "Netflix Party" combined. These are tools that students are
  familiar with and fond of. We trust these kind of tools will be more
  engaging and thus encourage learning and participation in a time of
  closed cameras and muted microphones. </p>

<img src="static/netflix_party.png" alt="Netflix Party!">
{% endblock %}

Here we have used liquid and CSS to stylise the page and allow us to define certain blocks such as titles and content that can be reused on each page. We also see that we start by “extending” a base.html file. This allows us to define all the styles and basic layout in a different file and then just extend it with new text and features when we need to.

If we look back to the app creation you can see that there are now only 4 more features to the website. These are the database, authorisation, uploading and My Videos (viewing and watching videos). We create blueprints in other python scripts and then simply register them to the app.

The Database

For the database we use sqlite. This is free, lightweight and comes already integrated within Python. For a hackathon we quickly got started using this as time was of the essence! The first thing to think about was the schema for the database. This does take some consideration as you have to be careful about what you want to store and what needs to be linked.

DROP TABLE IF EXISTS user;


CREATE TABLE user (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  username TEXT UNIQUE NOT NULL,
  password TEXT NOT NULL
);


CREATE TABLE video (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  owner_id INTEGER NOT NULL,
  title TEXT NOT NULL,
  created TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
  s3link TEXT UNIQUE NOT NULL,
  FOREIGN KEY (owner_id) REFERENCES user (id)
);