QuickShare - A simple & fast file sharing web app

Quickshare is a file sharing progressive web app(PWA) that allows users to send files between multiple devices. It works similar to the SHAREit or Google Files app but uses web technology to complete the installation process traditional apps for different devices and applications. It also supports current file sharing on multiple devices at the same time as many file sharing applications are lacking.

QuickShare uses WebSockets and WebRTC to transfer files between multiple devices. It currently uses socket.io to make real-time connections on express backend. The frontend is built on React. The current method of sharing files involves sharing file as chunks of ArrayBuffer. This may change to increase the efficiency of the file transfer.

Table of Contents

• Project structure
  • Backend
  • Frontend
    • static folder
    • public folder
  • Build process
• Contributing
• Running QuickShare in production
  • Building the frontend
  • Building the backend
  • Starting the server
• License

Project structure

The project is divided into the backend and the frontend.

Backend

Backend code is present on this repo Backend the server.js file contains all the socket connection code. It is built on express and socket.io which allows usage of WebSockets and WebRTC.There are different routes for admin panel and database connections.

Frontend

The frontend code is present on this repo Frontend. Once the frontend is built for production (using npm run build), all the built files are stored in build folder which can be deployed along with the server code.

static folder

This folder is used to store the static files such as images, fonts, and JavaScript files that shouldn't be bundled with the rest of the code.

• React is used for the UI of the app.
• No UI library is being used as of now.
• Sass is used for CSS pre-processing.

Build process

Build process is setup using NPM run build. It builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

Contributing

Thanks for contributing to QuickShare! Make sure to Fork this repository into your account before making any commits. Then use the following commands to set up the project

Frontend

git clone https://github.com/QuickShare-Frontend.git
npm install

Backend

git clone https://github.com/QuickShare-Frontend/Backend.git
npm install

All development happens on the staging branch. The master branch contains the known stable version of Vegh. To make your contributions, create a new branch from staging.

git checkout -b my-branch staging

Start the live development server. The server would run at port 3000 for frontend and the app can be accessed on localhost:3000

npm run start

Start the live development server. The server would run at port 8000 for backend .

npm run start

Now you make sure you make changes needed in the .env files

Now you can make your changes, and commit them. Make sure you have a clear and summarized message for your commits

git add .
git commit -m "My fixes"

Push the changes to your fork.

git push origin my-branch

This is a good time, to open a pull request in this repository with the changes you have made. Make sure you open a pull request to merge to staging branch and not the master branch directly.

Running QuickShare in production

Building the frontend

npm run build

The frontend built code would be located in the build folder.

Starting the frontend server

npm start

Vegh should be running on port 3000.

Building and Starting the backend

node server.js

License

QuickShare is MIT Licensed