"Like snapchat meets dropbox" — Somebody
View live version at dropkick.page
--
Notice
- This was a hackathon project so it may have bugs
- I put a little bit of work into trying to get it to work in Chrome, Firefox, and Safari, but no guarantees. RTC (the p2p stuff) was new at the time and very fragile.
--
Overview
Dropkick lets you:
- Send a single file
- Only once
- Securely
It does this by opening peer-to-peer connection between your web browser and another, using WebRTC.
Once the connection is established, the receiving party confirms their identity by sharing a video of themselves with you. When you approve their identity, the file is sent on its way.
It is a mashup of new security (WebRTC is OpenSSL-encrypted by default) and old-fashioned security (looking at somebody's face). Its purpose is to quickly and easily deliver sensitive files to known recipients who may be in close proximity.
The file being delivered never resides on a server. It is served directly from your web browser, and ceases to be served when your browser tab closes. Same applies to the video feed.
Some initial negotiation does happen through a server, but only to establish the p2p connection.
--
Todo
- Sending between local tabs work, but not separate computers.
- Lower cache-control max-age so prod refreshes more quickly. See this thread.
- You currently need to enable the webcam as the sender, but ideally you wouldn't have to.
--
Technicals
Run locally with webpack dev server
yarn install
yarn start:dev
Build into flat files to be served
yarn build
--
Serving the static website
This site is deployed using Google Cloud. A Cloud Build trigger detects pushes
to master and runs the steps in cloudbuild.yaml. Those steps build the flat
files and copy them to a public bucket.
The public bucket can be served directly as a flat HTTP site using these steps. However, modern browsers will not allow access to requested source devices (webcams, etc) unless the connection is secure (HTTPS). This means that this flat-file site will not work unless served over HTTPS.
To create an HTTPS site, the bucket can be used as a backend for a Google Cloud external-HTTPS load balancer, as described in this guide.
To redirect HTTP traffic to HTTPS, create a separate load balancer that does only that, as described here.
As a production note to self for future projects served similarly, remember that a newly-created certificate won't finish provisioning until the relevant domains have had their A-records updated to point to the load balancer's IP, and that it may take an additional few minutes for HTTPS to begin working after HTTP.