Transforming Teaching with Teachingo - #TwilioHackathon Submission
Tags: twiliohackathon, javascript, node, react
Published: 2020-04-06 21:48:34

[Comment]: # (All of this is placeholder text. Use this format or any other format of your choosing to best describe your project.)

[Reminder]: # (Make sure you've submitted the Twilio CodeExchange agreement: https://ahoy.twilio.com/code-exchange-community)

[Important]: # (By making a submission, you agree to the competition's terms: https://www.twilio.com/legal/twilio-dev-hackathon-terms)

## The Team

[Peter](https://twitter.com/PMc_A) and I are two software engineers from Belfast, Northern Ireland who graduated from university last summer! Whenever we discovered the Twilio/DEV hackathon, we thought it was a great opportunity to jump into something that we can really get stuck in to.

![](https://pbs.twimg.com/media/ETjqQhiWsAALO6y?format=jpg)

With the hackathon being the majority of the month of April, this allowed us to really take our time with the idea and build something that could have a real impact in the world right now.

Given the current state of affairs in the world, everyone is flocking to the internet and various software/resources for communicating. _Everyone._

## The Problem

Most governments around the world have temporarily closed educational institutions in an attempt to contain the spread of the COVID-19 pandemic.
These global closures are impacting over 89% of the world's student population (source - https://en.unesco.org/covid19/educationresponse).

With these closures, schools across the globe are attempting to transition to online, remote learning. With some of our personal connections working in the education space, they had voiced their frustration with the lack of general tools in the wild that they could use to fit their needs - specifically, when it comes to video conferencing software.

Sure, there are a bunch of services that provide that facility to video call one another but they are mostly aimed at corporate businesses rather than education.

## Our Proposed Solution

We are creating an E-Learning platform that is specific to teachers in order to fulfil their different needs when teaching a remote lesson. Some of these features include:

* Video conferencing including: screen share, the ability to mute users and facilitate live chat.
* Automated attendance checker.
* Automated message sent to students that did not attend lesson.
* Reported lesson statistics - who/how many asked questions in live chat, what percentage of the class attended (list of who did and who didn't).
* Request a transcript or recording of the lesson (could be emailed to the students who attended or to the students that missed the class).
* Feedback request - students can show they understand the topic being taught via red, amber, green feedback mid-lesson.
* General student feedback about topics post-lesson.

## What we built
#### Category Submission: COVID-19 Communications/Interesting Integrations

### Choosing the right technology 📚

We wanted to make our solution platform agnostic, thus we opted to create a web application that both the teachers and students could use.

We decided to play to our strengths, with both of us having some experience with React and a lot of experience with JavaScript, we decided to build all the things with JS. For more details on our tech choice, check out our first progress update blog 👇

{% link https://dev.to/pmca/transforming-teaching-with-teachingo-update-1-5df2 %}

### Let's talk data 🔢

With our tech stack chosen, it was time to really think about the data that would be passing through our systems. How would it be structured? Where would it be stored? And most importantly, how would it be secured? Check out more about our data decisions in our second progress update blog:

{% link https://dev.to/chloemcateer3/transforming-teaching-with-teachingo-update-2-12bm %}

### Prepare to Lanuch 🚀

With just a simple spike created of our front end application, server and database - we wanted to hit the ground running and set up a CI/CD pipeline to automate deployment. Check out how we set it up below 👇

{% link https://dev.to/pmca/transforming-teaching-with-teachingo-update-3-5daf %}

### Security, Security, Security 🕵️‍♀️

As the application is going to be used as an educational tool, it is essential that it is secure - to see some of the security measures we have taken, have a read of our blog number 4:

{% link https://dev.to/chloemcateer3/transforming-teaching-with-teachingo-update-4-1cgj %}

### Twilio Time ⏰

Next step was to check out the Twilio services, SDKs and more to see what they could offer us. At a first glance we couldn't believe what Twilio could do out of the box and jumped straight into working with it. Take a look at how we got started and some of our code snippets in progress update number 5!

{% link https://dev.to/pmca/transforming-teaching-with-teachingo-update-5-58g2 %} 

## Demo Link
We recorded a [short demo](https://drive.google.com/open?id=1h9GgnBrbDLK4oHnUhiDgYJ1T0ddvsEOa) of the main features in Teachingo.

You can check out the deployed application [here](https://confident-pike-86a4c7.netlify.app)

## Link to Code

{% github pmc-a/teachingo-client no-readme %}

{% github pmc-a/teachingo-api no-readme %}

**GitHub Profiles:**

- [Chloe - chloeMcAteer](https://github.com/chloeMcAteer)
- [Peter - pmc-a](https://github.com/pmc-a)

## Completed Features

Once we started this hackathon, we had an endless list of possible features we wanted to add to this application, but unfortunately due to time constraints it wasn't possible to add everything we wanted, but below is a full feature list of what we **achieved**:

 * Ability to securely log in as a teacher or student
 * Ability to view upcoming lessons
 * Ability to start/join a video call
 * Ability to mute/unmute mic, turn on/off camera and share screen
 * Ability to live chat with everyone in the lesson to ask questions
 * Abiltity for the teacher to view summary lesson statistcs at the end of the lesson.
 * Ability for the teacher to send an SMS to students who missed the lesson.

Some additional features that we wanted to add and didn't have time to complete:

* Ability for students to show red, amber or green to highlight their understanding of the topic
* Ability to request a transcript/recording of the lesson
* Ability to obtain general student feedback at the end of the lesson

## Additional Resources/Info

We hope you like our submission! We have been tweeting our progress throughout the hackathon so if you want to see our journey check us out at [@chloeMcAteer3](https://twitter.com/chloeMcAteer3) & [@PMc_A](https://twitter.com/PMc_A)!