WebDrop | ShareThisFile.Online

Users in same network displayed in main page
Files being sent and received
Choose & Send files page
Receiving files page

Inspiration

Every time you email a file to yourself so you can pull it up on your friend's laptop, Tim Berners-Lee sheds a single tear.

https://xkcd.com/949/

Seamless file transfer between two devices is still an annoying problem we haven't solved even in 2020, let alone group file transfer between devices across the internet or LAN.

I've had trouble sharing files to my friends from phone. They'll be using one app and I'll be using a different one and then there's a fight of who's app is better, you should install this and that !! ARGHH! It's confusing and annoying. To send a file, we need a 30 minutes arguing and setup beforehand.

What if the file-sharing is via web browser, everyone will have a browser installed and all they gotta do is visit a website to share, and file is shared in LAN itself with the same speed !

What it does

Share files between one or multiple devices at the same time leveraging the trusted power of Torrents ! Peer 2 Peer !

How I built it

WebTorrent is a fun, awesome library to play with !
VueJS is easy to make complex UIs easily !
P2PT, a library I made to easily make WebRTC peer-to-peer connections using WebTorrent trackers !

Challenges I ran into

Making the circular UI for showing peers, spent a lot of time here because I tried to make it as fancy as I could
Discovering users in the same network
Communication between peers
Making the UI for Sending, Receiving was complex than I thought!

Since I'm a solo team, it was very hard to do. But I got to learn A LOT ! It's only my second project with Vue

Accomplishments that I'm proud of

It works !! 🎉🍾
The circular grid UI to show peers, that looks fancy ! Gotta add some animations and it'll be super cool
My library P2PT is looking stable, fixed some bugs because of this project and thanks to this hackathon ! <3
I got it working in the last hour of hackathon, whew! that was close! 😅

What I learned

Vue: This is my second project built with Vue, I'm loving it
Typescript: My first project in Typescript (parts of it), couldn't delve further tho cause of time limit
Integrating different components together, passing props

What's next for WebDrop | ShareThisFile.Online

It works, but not perfect. There are still very big bugs ! Have to make it stable
Gotta make it more fancy, beautiful and more user friendly
Reduce the assets size and make page load faster
Make it into a progressive web app

It's Open Source (Free/Libre software) ! Wanna contribute ? ping me :) https://github.com/subins2000/webdrop