PROBLEM STATEMENT :
Shield Share is a file-sharing web application to share files or documents which contain highly sensitive data or information. The key requirement for Shield Share is to develop an application that provides the user the facility to upload files that they want to share securely. After uploading the file the user will get an automatically generated one-time accessible link corresponding to the file uploaded. This link can be shared with anyone to whom the user wants to share the uploaded file or document.
The key feature of the link provided to the user for every upload is that the link could only be used once to access the uploaded document. If the link is accessed more than once then it will show a blocked message.
Shield Share is a web application that provides its users the facility to share their sensitive documents with the desired person in a very secure way. Although the key features of Shield Share require a very serious implementation on the server-side, this application provides services to its end users, so it also requires a good implementation in UI & UX.
SOLUTION APPROACH :
We decided to use the MERN stack to develop this application. As it will be a Single-Page-Application, which needs good logical implementation for the server-side.
In the MERN stack, M stands for MongoDB which is our database. E stands for Express.Js which is a Node.js framework for building or writing code for server-side applications in Node.js. R stands for React.js which is a JavaScript library for writing client-side code or developing UI. The MERN stack is completely supported by JavaScript.
For the client-side or frontend, there will be a file type input where the user can choose files from his/her local device and can upload that file via clicking the UPLOAD button. After successfully uploading the file the user will get the corresponding link in a pop-up. The user will be able to easily copy the link. The user shares the link via any platform to the desired person. The link is opened first time it will simply load the documents that can be downloaded from there and if it is accessed more than once then it will show a blocked message
For the server-side application or backend, the solution is divided into two parts according to the problem statement.
The first part is responsible for handling the file upload request and creating the corresponding link and flag that indicates if the link is fetched or not. The flag is very important as the requirement says that the link should only be accessible once. The uploaded file is stored at the server and the corresponding link and flag are stored in the database. The link is created in such a way that it contains the objectID of the MongoDB document in which it is saved. The created link is sent back to the response object for every upload request.
The second part of the solution is responsible for retrieving the file when the link is accessed. The working mechanism for this solution is very simple. When someone hits the link then the backend mechanism first checks if the corresponding flag is false or not. If the flag is false then it serves the file and then sets the flag back to true so that if someone hits the link again then the file is not served. So basically this mechanism serves the file only if a flag is false it is true then it returns a block message.
LIBRARIES AND DEPENDENCIES USED:
FRONTEND:
CRA(CREATE-REACT-APP) is used for creating the template code for the frontend and setting the development environment in React.js. One can visit https://reactjs.org/docs/create-a-new-react-app.html for reference.
“react-copy-to-clipboard” is used for the implementation of the copy component which is a part of the link pop-up window. The link pop-up window opens after successfully uploading the document. One can visit https://www.npmjs.com/package/react-copy-to-clipboard for reference.
AXIOS is used for performing API calls from client-side to server-side. One can visit https://www.npmjs.com/package/axios for reference.
BACKEND:
Mongoose is a MongoDB object modeling tool designed to work in an asynchronous environment. It is used for designing database Schema, establish connectivity, and performing queries to the database. One can visit https://www.npmjs.com/package/mongoose for reference
Express.Js is a fast, opinionated, minimalistic framework for Node.js. It is used to write the server-side application in Node.js. One Can visit https://www.npmjs.com/package/express for reference.
Express-file upload is a simple express middleware for uploading files. One can visit https://www.npmjs.com/package/express-fileupload for reference.
Project Gallery
If you are looking for MERN Stack Project Help or Homework Help? Codersarts MERN Stack expert will provide the best quality plagiarism-free solution at an affordable price. We are available 24 * 7 online to assist you. You may chat with us through website chat or email or can fill the contact form.
Comments