Code Monkey home page Code Monkey logo

sendight-frontend's Introduction

Sendight

Sendight is a Peer-to-Peer file sharing platform built on top of webRTC. You can share files with your friend without uploading them anywhere on the server. Just share your Sendight room URL with your friend and start sharing files without the hassle of installing any app.

How to setup sendight-frontend

  • Clone the respository using git clone https://github.com/thephilomaths/sendight-frontend.git
  • Open a terminal in the project root and install all dependencies using yarn install
  • Serve the frontend using yarn start
  • Open a browser and go to http://localhost:3000. You can now use the app

How to use the app

  • Prerequisites:
    • Serve the backend and frontend. The backend can be found here
    • Change socketURL in src/routes.ts to http://localhost:8000
  • Open the frontend in a browser window by going to http://localhost:3000
  • Click on create room
  • After creating the room, you will notice that the route in the address bar changes. The new route is the URL of the room
  • Copy the room URL and share it with anyone with whom you want to share a file with
  • The other party can join the room by using the above URL
    • Note: Only 2 people can join the room at a time
  • After both the parties have joined the room, you should be able to see the status of webRTC and peer connections change from red to green. If this doesn't happen, some error has occured while creating the webRTC connection. Try refreshing the page and if that doesn't work, then you may be behind a symmetric NAT gateway.
  • Now click on Select files to send and select any file(s) that you want to send
  • After selecting the files click Send
  • Now, you should be able to see the statuses of files being sent and the receiver should be able to see the file being received
  • You can cancel the sending process any time
  • After the files are sent, the receiver will see a download button alongside each file

Known Issues

  • WebRTC connection failure
  • Not able to send same file multiple times
  • Slow speed while sending large files

TODO

  • Improve speed
  • Use a database for storing received files instead of storing in memory
  • Issue with UI on mobile devices

Tech stack

  • React.js
  • Styled components
  • Socket.io
  • WebRTC

Contribute

  • To file any issue -> here
  • Feel free to contribute :D

Screenshots

  • Landing page

    Sendight

  • Room

    Sendight

  • Select files and connection establishment

    Sendight

  • Send files

    Sendight

  • Receive and download files

    Sendight

UI design inspiration from Firefox Send. Firefox Send was an awesome project, sad that Mozilla stopped it :(

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.