All Projects โ†’ thephilomaths โ†’ sendight-frontend

thephilomaths / sendight-frontend

Licence: GPL-3.0 license
P2P File sharing

Programming Languages

typescript
32286 projects
HTML
75241 projects
javascript
184084 projects - #8 most used programming language
CSS
56736 projects

Projects that are alternatives of or similar to sendight-frontend

Language Babel
ES2017, flow, React JSX and GraphQL grammar and transpilation for ATOM
Stars: โœญ 476 (+798.11%)
Mutual labels:  styled-components, jsx
currency-converter
๐Ÿ’ฐ Easily convert between 32 currencies
Stars: โœญ 16 (-69.81%)
Mutual labels:  styled-components, jsx
Cattous
CSS in JSX for lazy developers, built using styled-components and styled-system
Stars: โœญ 38 (-28.3%)
Mutual labels:  styled-components, jsx
Vscode Stylelint
A Visual Studio Code extension to lint CSS/SCSS/Less with stylelint
Stars: โœญ 260 (+390.57%)
Mutual labels:  styled-components, jsx
15 Puzzle
The 15-puzzle is a sliding puzzle that consists of a frame of numbered square tiles in random order with one tile missing, built in react
Stars: โœญ 161 (+203.77%)
Mutual labels:  styled-components, jsx
claxed
Classes with the same style of Styled-Components
Stars: โœญ 17 (-67.92%)
Mutual labels:  styled-components
blog-desktop-v2
Yancey Blog website for desktop and mobile.
Stars: โœญ 19 (-64.15%)
Mutual labels:  styled-components
lsxc
Compile Livescript + Pug + React + SASS as a single component
Stars: โœญ 17 (-67.92%)
Mutual labels:  jsx
graphql-blog-client
๐Ÿš€ React Apollo client for a GraphQL blog.
Stars: โœญ 15 (-71.7%)
Mutual labels:  styled-components
mugiwara
fast minimal CSS-in-JS created to reduce size of CSS injected
Stars: โœญ 11 (-79.25%)
Mutual labels:  styled-components
react-with-observable
Use Observables with React declaratively!
Stars: โœญ 108 (+103.77%)
Mutual labels:  jsx
web-template-project
This repository contains a template for nodeJS and ReactJs projects using TypeScript.
Stars: โœญ 18 (-66.04%)
Mutual labels:  styled-components
gatsby-starter-shopifypwa
๐Ÿ’š๐Ÿ›’๐Ÿ’š Bodega is a Shopify PWA using Gatsby JS + Netlify CMS
Stars: โœญ 100 (+88.68%)
Mutual labels:  styled-components
youtube-clone-mercadolivre
Mercado Livre (Sale Page) UI Clone
Stars: โœญ 24 (-54.72%)
Mutual labels:  styled-components
eslint-plugin-layout-shift
ESLint plugin to force responsive media elements to set the width/height attributes
Stars: โœญ 15 (-71.7%)
Mutual labels:  jsx
tink hxx
JSX - JS + HX
Stars: โœญ 50 (-5.66%)
Mutual labels:  jsx
vite-vue-admin
๐ŸŽ‰๐ŸŽ‰ไฝฟ็”จVite + Vue3 + TypeScript + Element-plus + Mockๅผ€ๅ‘็š„ๅŽๅฐ็ฎก็†็ณป็ปŸ๐ŸŽ‰๐ŸŽ‰
Stars: โœญ 97 (+83.02%)
Mutual labels:  jsx
liyad
Liyad (Lisp yet another DSL interpreter) is very small Lisp interpreter written in JavaScript.
Stars: โœญ 27 (-49.06%)
Mutual labels:  jsx
render.rs
๐Ÿ” A safe and simple template engine with the ergonomics of JSX
Stars: โœญ 158 (+198.11%)
Mutual labels:  jsx
react-native-whirlwind
Whirlwind is a utility-first styling framework specifically designed for React Native. It is heavily inspired by Tachyons and Tailwind CSS and uses low-level building blocks for rapidly building custom designs.
Stars: โœญ 91 (+71.7%)
Mutual labels:  styled-components

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 :(

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].