loading...
Cover image for Workdrop — #Twiliohackathon Entry

Workdrop — #Twiliohackathon Entry

sergix profile image Peyton McGinnis Updated on ・5 min read

workdrop (6 Part Series)

1) Workdrop — A file request app for teachers 2) Workdrop — Initialization and Configuration 3 ... 4 3) Workdrop — UI Design and Prototyping 4) Workdrop — Setting Up Serverless 5) Workdrop — The Frontend 6) Workdrop — #Twiliohackathon Entry

Here's my entry for #twiliohackathon. I hope you enjoy it!

GitHub Repository (MIT Licensed)
Stackshare
Live Demo


I'm a senior in high school.

When South Carolina, my state of residency, announced the closing of schools statewide, teachers scrambled to quickly find working solutions for eLearning.

Some issues, such as videos (YouTube) and classroom sessions (Zoom), were solved quickly. Other problems took some more research, and one seemed particularly difficult: assignment collection.

Our school had a student system set up prior to COVID-19 that had an integrated homework collection system, but it was archaic and scarcely used, and ended up creating more problems than it solved.

My english teacher in particular became particularly frustrated as the school resorted to collecting files by email, which quickly becomes unmanageable, especially considering all the other email teachers receive. It would be much simpler to even just receive one email with all the assignments.

I took notice of this. When the #Twiliohackathon was announced, I remembered that Twilio owns SendGrid, and it seemed impossible to not take this opportunity to create a solution to this evident problem.

Alt Text

What is workdrop?

Workdrop is a simplicity-conscious web app for teachers and educators needing to request files from their students.

Who made it?

This project was completed in around 15 days by me, Peyton McGinnis (sergix).

What makes it different?

Most people refer to Dropbox as already having solved this problem.

However, when trying to figure out how I could explain how to use Dropbox's request feature, and coupled with Dropbox's pricing, I knew it would be difficult to recommend to one teacher and end up needing to have the school finance it.

But, in particular, Workdrop focuses on one thing, assignment collection, and is good at that one feature. Some may think this is a disadvantage, but that was my intention with building the app.

Teachers are not often tech savvy, and piling feature upon feature increases mental overhead and frustration for someone trying to accomplish a task as simple as requesting an assignment. In most schools, the teacher simply writes their assignment on the whiteboard/blackboard and every student then knows it's due. It should be just as simple online.

How does it work? 🤔

My series here on DEV.to has detailed the set up process and design, but the concept is simple.

A teacher visits the website. They click on "Request an Assignment". They enter the name of the assignment, their students' emails, an attached message, and their email. Then, they submit this information.

An email is sent to the teacher with a link to access their student's submissions. An email is also sent to each student with a link to submit their assignment.

When a file is submitted by a student, the teacher can access the submissions page and download the assignment.

The Stack

Frontend

  • Vue.js
  • Nuxt.js
  • TailwindCSS
  • Sentry
  • Netlify

Backend

  • MongoDB Atlas
  • MongoDB Stitch
  • AWS S3
  • Twilio SendGrid

Alt Text

Is it scalable?

I built workdrop to scale up and down very easily. The frontend is hosted as a static site on Netlify, and the backend runs a MongoDB Atlas cluster and an AWS S3 bucket. Each of these services tend to scale very well, and since workdrop's core logic is very simple it wouldn't be hard to integrate more services, such as a Redis edge cache.

At the moment, every one of these services is being hosted for free. The only thing I've paid for so far is the domain name, workdrop.app.

Live demo!

The app can be accessed online at workdrop.app and is a fully-functioning web application.

The code ⌨️

All code is hosted in this GitHub repository.

Twilio API integration ✉️

This project uses Twilio SendGrid as the core communication API to send out assignment emails.

Category entry 👍

For my project, I would like to enter the Covid-19 Communications category. While I suppose it could fit into a couple different categories, remote education was specifically listed for this category so I thought it would be best to enter.

Alt Text

The about page on the workdrop website goes into more detail, and is nicely illustrated.

Application security 🔒

As I detailed in my previous post, I have properly set up (to my knowledge) a secure S3 instance that is only accessible via my MongoDB Stitch instance.

All these services are secured with multi-factor authentication, and my domain is SSL-enforced.

Every API key has only been created when absolutely needed and is not stored anywhere in plaintext (except the Sentry DSN, but that's intended to be plaintext.)

Future features 🆕

Just because this hackathon has ended does not mean I'm done with workdrop. There's still a pile of improvements and small features needed before I really put it into full-production mode, but the application is definitely at a usable state.

In addition, I'd like to move away from an email-less solution entirely, but this would only (in my understanding) be viable through a mobile app. I've looked into and heavily considered using NativeScript-Vue.

Lastly, I would like to add SMS support, but I would need to use a link minimizer and I haven't found a great solution quite yet.

A note on the Terms of Use and Privacy Policy 📝

Since Workdrop is currently being hosted and readily available to users, I thought it would be wise to craft a Terms of Use and Privacy Policy agreement.

The Terms of Use states that the project is MIT licensed, and mostly is intended to protect against unlawful types of file submissions.

The Privacy Policy states some simple notes about data collection and usage. Workdrop does not store any analytics or usage data, and only stores data that the user provides that is critical for the application's function.

As of right now, as another user pointed out, I cannot under United States law allow children under 13 to access the app without becoming COPPA compliant. I'm taking steps to ensure that this becomes available, but since the target audience for Workdrop is currently middle and high school students it doesn't affect much.

A final note

Thank you Twilio and DEV for hosting this hackathon! It was a great experience to learn some new serverless stuff, and it's always a joy to learn a new API. Thank you so much for reading! God bless!

Alt Text

workdrop (6 Part Series)

1) Workdrop — A file request app for teachers 2) Workdrop — Initialization and Configuration 3 ... 4 3) Workdrop — UI Design and Prototyping 4) Workdrop — Setting Up Serverless 5) Workdrop — The Frontend 6) Workdrop — #Twiliohackathon Entry

Posted on by:

sergix profile

Peyton McGinnis

@sergix

A pseudonormal programmer.

Discussion

markdown guide