File Sharing Web App

lOMoARcPSD|31248844
File Sharing Web App
Internet and web technology (Biju Patnaik University of Technology)
Studocu is not sponsored or endorsed by any college or university

Downloaded by Hidayath Hid (hidb4u@gmail.com)
lOMoARcPSD|31248844
FILE SHARING WEB-APP

SHARE-EASY
KISHAN KUMAR MAHARANA

Regd. no.:1901289364
Department of Information Technology

TRIDENT ACADEMY OF TECHNOLOGY
Bhubaneswar-751024, Odisha, India
January 2023

lOMoARcPSD|31248844
PROJECT REPORT ON
FILE SHARING WEB-APP SHARE-EASY
Submitted in Partial Fulfillment of the

Requirement for the Award of the Degree of
Bachelor of Technology In
Information Technology
Submitted by
KISHAN KUMAR MAHARANA
Regd. No.: 1901289364
Under the Guidance of

Dr. Pragyan Paramita Das
Asst. Professor, Dept. of CSE
Department of Information Technology

Bhubaneswar-751024, Odisha, India.

lOMoARcPSD|31248844
January 2023

lOMoARcPSD|31248844

Department of Computer Science & Engineering
Bhubaneswar-751024, Odisha, India
CERTIFICATE OF APPROVAL
This B.Tech. Viva-Voce Examination of the Minor Project work submitted by

the candidate Kishan Kumar Maharana bearing BPUT Regd.No.: 1901289364
is held during 19th January, 2023 and is accepted in partial fulfilment of the
requirement for the award of the degree of Bachelor of Technology in
Information Technology of Biju Pattnaik University of Technology, Odisha.
1. __________________________
2. ___________________________
3. ___________________________
(Signature of Examiners)
Place : Bhubaneswar
i

lOMoARcPSD|31248844
Date : January 19 , 2023
DECLARATION
I, Kishan Kumar Maharana declare that the Minor Project Work presented
through this report was carried out by me in accordance with the requirements
and in compliance of the Academic Regulations of the Biju Pattnaik University
of Technology (BPUT) for the Bachelor of Technology (B.Tech.) Degree
Programed in Information Technology and that it has not been submitted for any
other academic award. Except where indicated by specific reference in the text,
the work is solely my own work. Work done in collaboration with, or with the
assistance of, others, has been acknowledged and is indicated as such. Any
views expressed in the report are those of the author.
Place : Bhubaneswar Kishan Kumar Maharana
Date : January 19, 2023 Regd. No. : 1901289364
ii

lOMoARcPSD|31248844
CERTIFICATE
This is to certify that the report of the Minor Project Work on the topic entitled
“FILE SHARING WEB-APP” which is submitted by Kishan Kumar
Maharana in partial fulfilment of the requirement for the award of the of
Bachelor of Technology in Information Technology of Biju Patnaik
University of Technology, Odisha, is a bonafide record of the candidate's own
work carried out by him under my supervision.
Supervisor Head of the Department, CSE

(Dr. Pragyan Paramita Das)
Asst. Professor, Dept. of CSE
Trident Academy of Technology Trident Academy of Technology
Bhubaneswar, Odisha, India Bhubaneswar, Odisha, India
ABSTRACT
iii

lOMoARcPSD|31248844
This project is concerned with file sharing systems. Very often students need
certain files or programs during their university period. To find such files or
programs is a very difficult job and it is time-consuming.
Over the last few years, there has been a drastic change in information
technology. With the presence of technology, computers, networks, and the
internet, the process of communication became very easy. The required
information, files and programs can be found, downloaded easily and
effortlessly. This includes the various ways in which files can be shared and
stored. Some websites are there which have been steadily taking over more and
more market share. Easy to use, easy to develop for, and open-source, it has
picked up a following of developers who want to create content for the masses.
Based on these facts, this project aims at creating a file exchange system for the
Faculty of Computing so that the students and the academic staff members and
also the management of the faculty can share files and useful applications on the
internet. This project will be including the different faculties of the university in
the future.
The idea of this project entails that every student, or lecturer should have an
electronic account by which they can login the internet using their usernames
and passwords. The members can download and upload files; they can search
for specific files uploaded by the other members too.
Signature
ACKNOWLEDGEMENTS
iv

lOMoARcPSD|31248844
I take this opportunity to express my gratitude to the people who have been
instrumental in the successful completion of this project. I am, in the first place,
obliged and grateful to my parents without whose support and care I could not
have completed this project. I express my deep gratitude towards my guide, Dr.
Pragyan Paramita Das, Assistant Professor, Dept. of CSE, Trident Academy of
Technology, Bhubaneswar, for his tremendous support, encouragement and
help.
I convey my sincere thanks to our HOD, Department of Information

Technology and the Principal of Trident Academy of Technology, Bhubaneswar,
for their permission and cooperation in the completion of the project without
experiencing any hurdles. I would like to extend my gratitude to the Department
of Information Technology, Trident Academy of Technology, Bhubaneswar, for
their support and cooperation.
Finally, I extend my appreciation to all my friends, teaching and non-teaching

staffs, who directly or indirectly helped me in this endeavour.
Place: Bhubaneswar Kishan Kumar Maharana
Date: 19th January, 2023 Regd.No: 1901289364
Chapter No Title Page No.

Certificate Of Approval i
Declaration ii

lOMoARcPSD|31248844
Certificate iii
Abstract iv
Acknowledgements v
Contents vi
List Of Figures vii
1. Introduction 01-04
1.1. Problem Statement 01-01
1.2. Aim & Objective 02-02
1.3. Introduction To Web Development 02-04
05-13
2. Project Dependencies
05-05
2.1 HTML 06-06
2.2 CSS 06-07
2.3 JavaScript 08-09
2.4 TypeScript 09-10
2.5 Tailwind CSS 10-11
2.6 Node JS & NPM 11-12
2.7 React JS 13-13
2.8 Next JS
3. Design Of The Project 14-16
4.1 Use Case Diagram 14-15
4.2 Navigation Flow Diagram 16-16
4. Implementation & Coding Results 17-27
4.1. Sample Code 17-23
4.2. Coding Results 23-26
4.3. Libraries Used (JSON) 27-27
5. Conclusion & Future Works 28-28

6. References 29-29
CONTENTS
Sl No. Figures Page No.

1.1. Types Of Developers 04
vi

lOMoARcPSD|31248844
2.1. Full Stack Web Development Technologies 13

3.1. Use Case Diagram 15
3.2. Navigation Flow Diagram 16
4.1. Output For Home Page 23
4.2. Output For Signup Page 24
4.3. Output For Login Page 24
4.4. Output For Upload Page 25
4.5. Output For Download Page 25
4.6. Output For Error Page 26
List Of Figures
vii

lOMoARcPSD|31248844
CHAPTER 1
INTRODUCTION
1.1. PROBLEM STATEMENT:
Online File Sharing is practice of sharing files among different users across the
Internet. Common forms of file sharing are FTP (File Transfer Protocol) model
and P2P (Peer-to-Peer) file sharing network. Another common form of sharing
files over the Internet is for a user to upload files to a website and allow other
users to download them from the website. There are a lot of issues to consider
when developing such a website.
Users of an online file sharing website who use features like upload, download,
share, search etc would want a website that is very interactive and fast and not
annoying with a lot of post backs and flashing screens. Another issue is the
visualization of their file system where usually users have a limit to upload files.
The normal web based file folder view would be good, but if there are other
types of visualizations it would be great.
Another important issue to consider is the location where the website stores the
uploaded files. Two places where one can store the uploaded files are Database
and Server.

lOMoARcPSD|31248844
1.2. AIM AND OBJECTIVE:

This project aims to design an application that is necessary for organization
members when they need to operate online and access files.
Project scope from user perspective, limits the range of users to only those who
have internet connection and have an account in hand.
The system can be adapted to a range of files from small to large. Project scope
includes facilities for users to upload files online and can download files, who
don’t have account can view the notifications.
The aim of this project is to promote a user-friendly, efficient, safe way for users
to upload and download files without being physically present at organization.
1.3 INTRODUCTION TO WEB DEVELOPMENT

Web development refers to the building, creating, and maintaining of websites.
It includes aspects such as web design, web publishing, web programming, and
database management. It is the creation of an application that works over the
internet i.e. websites.
Web development is closely related to the job of designing the features and
functionality of websites and apps (often called “web design”), but the “web
development” term is usually reserved for the actual construction and
programming of websites and apps.
The word Web Development is made up of two words, that is:
Web: It refers to websites, web pages or anything that works over the
internet.
Development: Building the application from scratch.
 Basically Web Development divided into three types :

lOMoARcPSD|31248844
Front-end development
Back-end development
Full-stack development
1.3.1 Front-end development

Front-end web development is responsible for the look and feel of a website.
This means how colors, type, icons, and images appear. Increasingly, front-end
development has to account for how a website looks on all devices, from
desktop to tablet to phone. Typical programming languages include HTML,
JavaScript, and CSS. Front-end developers keep up with cutting-edge trends in
web design and development to make sure websites are optimized for users and
search engines — and with security best practices in mind.
Front-End Developers will usually need to possess a solid understanding of

programming languages, including HTML, CSS, and JavaScript, as well as
frameworks like React, Bootstrap, Backbone, Angular JS, and EmberJS.
1.3.2 Back-end development

If Front-End Developers are responsible for how a digital product looks, Back-
End Developers are focused on how it works. This means they’re responsible
for overseeing what’s under the hood, including database interactions, user
authentication, server, network and hosting configuration, and business logic.
The primary responsibility of Back-End Developers is to ensure the

functionality of the site, including its responsiveness and speed. To do that,
Back-End Developers have to know how to build servers with modern
frameworks (while developing custom APIs and serving static websites and
files), and how to manage databases and data on a web server. Typically, they

lOMoARcPSD|31248844
use server-side languages, including PHP, Ruby, and Python, as well as tools
including MySQL, Oracle, and Git.
1.3.3 Full-stack development:

Full-stack web development covers both front-end and back-end
responsibilities. Depending on the complexity of a website, a full-stack
developer may be responsible for all facets of its development, from the server
side to the user interface. Many full-stack developers may still specialize in one
aspect of web development, but their broad experience is useful in
troubleshooting or speeding up a build or redesign. Full-stack developers are
often responsible for identifying cutting-edge technologies, such as enhanced
programming languages (or even no- or low-code trends) and blockchain, that
can be used to strengthen websites’ business capabilities.
Fig 1.1.: TYPES OF DEVELOPERS

lOMoARcPSD|31248844
CHAPTER 2
PROJECT DEPENDENCIES
The Dependencies are the package references that are used by our library
without which it cannot work and to be installed along with your library
installation automatically. While looking at peer Dependencies, npm will just
throw a warning message in case the specified packages are not found in node
modules.
2.1 HTML
• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a heading", "this is a

paragraph", "this is a link", etc.
• The first publicly available description of HTML was a document called

"HTML Tags", first mentioned on the Internet by Tim Berners-Lee in late 1991
• Latest version of HTML is HTML5 and it is maintained by W3C.
Example : <tag>content goes here… </tag>

lOMoARcPSD|31248844
2.2 CSS:
• Cascading Style Sheets (CSS) is a stylesheet language used to describe the

presentation of a document written in HTML.
• CSS describes how elements should be rendered on screen, on paper, in

speech, or on other media.
• The name cascading comes from the specified priority scheme to determine
which style rule applies if more than one rule matches a particular element. This
cascading priority scheme is predictable.
• Latest version of CSS is CSS3 and it is maintained by W3C.
Example: selector {
Property: value;
2.3 JavaScript
• JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled

programming language with first-class functions.
• JavaScript is a programming language that allows web pages to be dynamic.
• It is an interpreted language, which means that it doesn't need to be compiled:

instead the interpreter (such as a web browser) will parse the code and turn it
into code that their machine can run - suitable for creating dynamic websites
that can run on any browser on any computer!
• JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic

language, supporting object-oriented, imperative, and declarative (e.g.
functional programming) styles.

lOMoARcPSD|31248844
• JavaScript is not only used in the browser. JavaScript runtimes, such as

Node.js and Deno allow you to write, launch and serve requests on webservers.
• Other frameworks, such as Electron use JavaScript to write cross-platform

applications for Windows, Linux and macOS.
• Mobile app development is also a possibility, utilizing React Native, Ionic and
various others, with Expo now allowing to target Android, iOS and the web, all
at once.
• Starting with the 6th edition (commonly known as ES2015 or ES6) in 2015, a
new edition of the standard will be released each year. The 6th edition was a
major update that brought many enhancements over ES5, including notably
template strings, expressive arrow function syntax, and cleaner syntax for
defining classes.
• But because new syntax and features are coming to JavaScript each year,
support for these changes is often incomplete in current browsers and the latest
Node.js. This doesn't mean we can't use it. Tools such as Babel offer
transpilation for most features, allowing us to write as if it's the future.
Example :
function addTwoNumbers(x, y) {
return x + y;

lOMoARcPSD|31248844
2.4 TypeScript
• TypeScript (TS) is a superset of JavaScript (JS), created at Microsoft in

response to frustration developing large-scale applications in JS.
• In a large JS project, knowing what properties your own objects have, what
arguments your functions take (and what type they need to be) can become
difficult. Similarly, since there is no ability to intelligently inspect JS code,
when you include a package (like from npm), you have to keep the
documentation up so you know what methods are available and what arguments
they take. TS solves these issues.
• It is currently an open-source project hosted on Github. It supports tools for

any browser as well as Node, for any host, on any OS. TS compiles to readable,
standards-based JavaScript.
• TS adds a flexible type system to JS, in addition to interfaces (custom types)

and modifying the syntax of some ECMAScript features such as classes.
• Types are optional and flexible (for example, you can specify an argument is a
string OR a number).
• Types allow tooling available in most code editors that improve the
development experience such as code completion and method detection, both in
your own code and in packages you use.
• It supports many upcoming ECMAScript features (such as async/await).
• TS can be written in Object Oriented or Functional styles.
• It is compatible with all existing JS packages.
• TS transpiles to clean, readable JS.

lOMoARcPSD|31248844
Example:
interface User {
name: string;
id: number;
2.5 Tailwind CSS
• Tailwind CSS can be used to make websites in the fastest and the easiest way.
• Tailwind CSS is basically a utility-first CSS framework for rapidly building

custom user interfaces.
• It is a highly customizable, low-level CSS framework that gives you all of the
building blocks you need to build bespoke designs without any annoying
opinionated styles you have to fight to override.
• The beauty of this thing called tailwind is it doesn’t impose design

specification or how your site should look like, you simply bring tiny
components together to construct a user interface that is unique. What Tailwind
simply does is take a ‘raw’ CSS file, processes this CSS file over a
configuration file, and produces an output.
• CSS is global in nature and if make changes in the file the property is changed
in all the HTML files linked to it. But with the help of Tailwind CSS we can use
utility classes and make local changes.
Advantages of Tailwind CSS:
o No more silly names for CSS classes and Id’s.
o Minimum lines of Code in CSS file.

lOMoARcPSD|31248844
o We can customize the designs to make the components.
o Makes the website responsive.
o Makes the changes in the desired manner.
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
2.6 NodeJS & NPM
2.6.1 NodeJS
• Node.js is an open-source and cross-platform JavaScript runtime environment.

It is a popular tool for almost any kind of project!
• Node.js runs the V8 JavaScript engine, the core of Google Chrome, outside of
the browser. This allows Node.js to be very performant.
• A Node.js app runs in a single process, without creating a new thread for every
request. Node.js provides a set of asynchronous I/O primitives in its standard
library that prevent JavaScript code from blocking and generally, libraries in
Node.js are written using non-blocking paradigms, making blocking behavior
the exception rather than the norm.
• When Node.js performs an I/O operation, like reading from the network,
accessing a database or the file system, instead of blocking the thread and
wasting CPU cycles waiting, Node.js will resume the operations when the
response comes back.
10

lOMoARcPSD|31248844
• This allows Node.js to handle thousands of concurrent connections with a

single server without introducing the burden of managing thread concurrency,
which could be a significant source of bugs.
• Node.js has a unique advantage because millions of frontend developers that

write JavaScript for the browser are now able to write the server-side code in
addition to the client-side code without the need to learn a completely different
language.
• In Node.js the new ECMAScript standards can be used without problems, as

you don't have to wait for all your users to update their browsers - you are in
charge of deciding which ECMAScript version to use by changing the Node.js
version, and you can also enable specific experimental features by running
Node.js with flags.
2.6.2 NPM
• npm is the standard package manager for Node.js.
• It started as a way to download and manage dependencies of Node.js

packages, but it has since become a tool used also in frontend JavaScript.
• There are many things that npm does.
2.7 ReactJS
• React is a declarative, efficient, and flexible JavaScript library for building

user interfaces. ReactJS is an open-source, component-based front-end library
responsible only for the view layer of the application.
• It is maintained by Facebook.
• React uses a declarative paradigm that makes it easier to reason about your
application and aims to be both efficient and flexible.
11

lOMoARcPSD|31248844
• It designs simple views for each state in your application, and React will
efficiently update and render just the right component when your data changes.
• The declarative view makes your code more predictable and easier to debug.
• Features of React.js: There are unique features are available on React because
that it is widely popular.
o Use JSX: It is faster than normal JavaScript as it performs optimizations while

translating to regular JavaScript. It makes it easier for us to create templates.
o Virtual DOM: Virtual DOM exists which is like a lightweight copy of the
actual DOM. So for every object that exists in the original DOM, there is an
object for that in React Virtual DOM. It is exactly the same, but it does not have
the power to directly change the layout of the document. Manipulating DOM is
slow, but manipulating Virtual DOM is fast as nothing gets drawn on the screen.
o One-way Data Binding: This feature gives you better control over your
application.
o Component: A Component is one of the core building blocks of React. In

other words, we can say that every application you will develop in React will be
made up of pieces called components. Components make the task of building
UIs much easier. You can see a UI broken down into multiple individual pieces
called components and work on them independently and merge them all in a
parent component which will be your final UI.
o Performance: React.js use JSX, which is faster compared to normal JavaScript

and HTML. Virtual DOM is a less time taking procedure to update webpages
content.
2.8 NextJS
12

lOMoARcPSD|31248844
• Next.js is a react based framework. It has powers to develop beautiful Web

application for different platform like Windows, Linux and mac.
• Main Features:
o Hot Code Reloading: It automatically reloads the application when changes in

the code get saved.
o Automatic Code Splitting: By this feature, every import in the code get
bundled and served with each page. It means that unnecessary code never get
loaded on the page.
o Ecosystem Compatibility: Compatible with JavaScript, Node and react.
o Server Rendering: Easily render react component on server before sending

HTML to client.
Fig 2.1.: FULL STACK WEB DEVELOPMENT TECHNOLOGIES
CHAPTER 3
13

lOMoARcPSD|31248844
DESIGN OF THE PROJECT
3.1. USE CASE DIAGRAM:

A use case is a list of actions or event steps typically defining the interactions
between a and a system to achieve a goal.
In systems engineering, use cases are used at a higher level than within software
engineering, often representing missions.
Use case diagrams describe what a system does from the standpoint of an
external observer
The use case diagram depicts the relationships among the actors and use cases
where actors represent the external entities of the system and use cases represent
the functional parts of the system.
In this web application, there are two external actors – Registered and
Unregistered users. The ‘include’ association tells that the use case included
includes the task described by the other use case. The different use cases present
in the system can be seen in the figure below.
.In software and systems engineering, the phrase use case is a polyseme with
two senses:
• A usage scenario for a piece of software; often used in the plural to suggest
situations where a piece of software may be useful.
• A potential scenario in which a system receives an external request (such as

user input) and responds to it.
14

lOMoARcPSD|31248844
Fig 3.1.: USE CASE DIAGRAM
3.2. NAVIGATON FLOW DIAGRAM:
15

lOMoARcPSD|31248844
Following Figure shows the control flow of the entire application. When a user
is not logged in he/she will only be able to access the Search and RSS features.
Only logged in users will be able to access all the other features like
upload/edit/deletion of files, file system visualizations, file search, group
management, and profile management etc. All the users will be able to
download the files available or visible to them i.e. for unregistered users, the
search results will only return files that are public.
Fig 3.2.: NAVIGATION FLOW DIAGRAM
CHAPTER 4
16

lOMoARcPSD|31248844
IMPLEMENTATION & CODING RESULTS
4.1. SAMPLE CODE:

HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/5.15.2/css/all.min.css"/>
<link rel="stylesheet" href="/stylesheets/home.css">
</head>
<body>
<nav>
<div class="menu">
<div class="logo">
<a href="#">Share Easy</a>
</div>
<ul>
<li><a href="#">Home</a></li>
17

lOMoARcPSD|31248844
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</div>
</nav>
<div class="img"></div>
<div class="center">
<div class="title">Share whatever you want and do whatever you want</div>
<div class="sub_title">To get started Register Now �</div>
<div class="btns">
<button><a href="/login">Login</a></button>
<button><a href="/sign">Sign</a></button>
</div>
</div>
</body>
</html>
CSS
.con{
padding: 50px;
18

lOMoARcPSD|31248844
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
background-color: rgba(0, 68, 255, 0.808);
display: flex;
justify-content: space-evenly;
align-items: center;
height: 95vh;
#b{
color: black;
text-decoration: none;
#b:hover{
color: white;
a{
color: #00B7FF;
.box{
margin-top: 3.5rem;
border: 2px dashed white;
display: flex;
justify-content: center;
align-items: center;
19

lOMoARcPSD|31248844
flex-direction: column;
height: 44vh;
width: 38%;
background-color: white;
border-radius: 20px;
box-shadow: 8px 8px 12px -7px rgb(0, 68, 255);
.box2 img{
width: 100%;
height: 50vh;
.icon{
font-size: 100px;
color: rgba(0, 68, 255, 0.808);
margin-left: 5rem;
#btn{
padding: 5px 50px;
margin: 20px 50px;
border: 2px solid orange;
background: none;
border-radius: 5px;
box-shadow: 8px 8px 12px -7px rgba(158,95,76,0.75);
20

lOMoARcPSD|31248844
#btn:hover{
background-color:rgba(0, 68, 255, 0.808) ;
@media (max-width:768px) {
body{
flex-direction: column-reverse;
.box2{
display: none;
.box{
width:50% ;
@media (max-width:468px) {
body{
flex-direction: column-reverse;
.box2{
display: none;
.box{
21

lOMoARcPSD|31248844
width:100%;
height: 60vh;
margin-top: 3rem;
.input{
display: flex;
justify-content: center;
border: 2px solid orange;
#copy{
height: 25px;
width: 100%;
outline: none;
border: none;
background: none;
border-radius: 2px;
box-shadow: 8px 8px 12px -7px rgba(158,95,76,0.75);
#c{
outline: none;
border: none;
22

lOMoARcPSD|31248844
background: none;
#c:hover{
color: blue;
4.2. CODING RESULTS:
Fig 4.1.: OUTPUT FOR HOME PAGE
23

lOMoARcPSD|31248844
Fig 4.2.: OUTPUT FOR SIGNUP PAGE
Fig 4.3.: OUTPUT FOR LOGIN PAGE
24

lOMoARcPSD|31248844
Fig 4.4.: OUTPUT FOR UPLOAD PAGE
Fig 4.5.: OUTPUT FOR DOWNLOAD PAGE
25

lOMoARcPSD|31248844
Fig 4.6.: OUTPUT FOR ERROR PAGE
6.2. LIBRARIES USED (JSON FILE):

{
26

lOMoARcPSD|31248844
"name": "shareapp",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"cookie-parser": "~1.4.4",
"debug": "~2.6.9",
"ejs": "~2.6.1",
"express": "~4.16.1",
"http-errors": "~1.6.3",
"jsonwebtoken": "^8.5.1",
"mongoose": "^6.8.4",
"morgan": "~1.9.1",
"multer": "^1.4.4",
"node-localstorage": "^2.2.1",
"nodemon": "^2.0.20",
"wbm": "^1.1.16"
}}
CHAPTER 5
27

lOMoARcPSD|31248844
CONCLUSION & FUTURE WORK

Conclusion:
In the website developed for this project, it is clear that the upload time
increases for files stored in database as the file size increases, but download
time of files, whether stored in database or file system is almost the same. Also
database has got more advantages when considering maintenance, security,
integrity etc. Considering these facts, the administrator can store the files in the
database, if the users do not care much about upload time, since the
administrator would find it easy to administer and maintain the files when
stored in the database.
Future Scope:
Next in future, many more important features can be added to the web-app to
make it more interactive and more useful. We can add an email box where the
sender will enter the mail id of the respective recipient and the receiver may
download it directly through the link provided in mail. Further, we can also add
an rename feature to the file with which we can give name to the file according
to the user’s purpose. Also in addition to it, we are looking forward to deploy it
using cloud and adding more creative features to make the user Interface more
interactive and user friendly to use.
REFERENCES
28

lOMoARcPSD|31248844
1. http://www.cs.umd.edu/hcil/treemap-history/index.shtml
2. https://www.proofhub.com/articles/work/file-sharing-apps
3. https://www.codewithrandom.com/2022/08/21/file-sharing-web-
app-javascript/
4. https://www.behance.net/search/projects/?
search=file+sharing&sort=recommended&time=month
5. https://www.wrike.com/project-management-guide/faq/why-
should-i-use-file-sharing-in-project-management-software/
6. https://www.kau.edu.sa/Files/611/Files/51195_BS29en_project_
File%20Sharing%20System%20for%20the%20Students%20of
%20the%20Faculty%20of%20Computing.pdf
7. https://people.cs.ksu.edu/~rpalani/MSReport/ThirdDraft/MS
%20Report.pdf
8. https://opus.govst.edu/cgi/viewcontent.cgi?
article=1059&context=capstones
9. https://www.youtube.com/watch?v=6erEwz7aKIw
10. https://www.youtube.com/watch?v=CwnViYV4gM0
11. https://www.youtube.com/watch?v=_xKCi5OI_Mg&t=0s
29

File Sharing Web App

Uploaded by

Copyright:

Available Formats

File Sharing Web App

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

File Sharing Web App

Uploaded by

Copyright:

Available Formats

lOMoARcPSD|31248844

File Sharing Web App

Internet and web technology (Biju Patnaik University of Technology)

Studocu is not sponsored or endorsed by any college or university

FILE SHARING WEB-APP

KISHAN KUMAR MAHARANA

Department of Information Technology

Downloaded by Hidayath Hid (hidb4u@gmail.com)

FILE SHARING WEB-APP SHARE-EASY

Submitted in Partial Fulfillment of the

KISHAN KUMAR MAHARANA

Regd. No.: 1901289364

Under the Guidance of

Department of Information Technology

Downloaded by Hidayath Hid (hidb4u@gmail.com)

Downloaded by Hidayath Hid (hidb4u@gmail.com)

TRIDENT ACADEMY OF TECHNOLOGY

This B.Tech. Viva-Voce Examination of the Minor Project work submitted by

Downloaded by Hidayath Hid (hidb4u@gmail.com)

Date : January 19 , 2023

Place : Bhubaneswar Kishan Kumar Maharana

Date : January 19, 2023 Regd. No. : 1901289364

Downloaded by Hidayath Hid (hidb4u@gmail.com)

Supervisor Head of the Department, CSE

Downloaded by Hidayath Hid (hidb4u@gmail.com)

Downloaded by Hidayath Hid (hidb4u@gmail.com)

I convey my sincere thanks to our HOD, Department of Information

Finally, I extend my appreciation to all my friends, teaching and non-teaching

Place: Bhubaneswar Kishan Kumar Maharana

Date: 19th January, 2023 Regd.No: 1901289364

Chapter No Title Page No.

Downloaded by Hidayath Hid (hidb4u@gmail.com)

5. Conclusion & Future Works 28-28

Sl No. Figures Page No.

Downloaded by Hidayath Hid (hidb4u@gmail.com)

2.1. Full Stack Web Development Technologies 13

Downloaded by Hidayath Hid (hidb4u@gmail.com)

1.1. PROBLEM STATEMENT:

Downloaded by Hidayath Hid (hidb4u@gmail.com)

1.2. AIM AND OBJECTIVE:

1.3 INTRODUCTION TO WEB DEVELOPMENT

The word Web Development is made up of two words, that is:

Development: Building the application from scratch.

 Basically Web Development divided into three types :

Downloaded by Hidayath Hid (hidb4u@gmail.com)

1.3.1 Front-end development

Front-End Developers will usually need to possess a solid understanding of

1.3.2 Back-end development

The primary responsibility of Back-End Developers is to ensure the

Downloaded by Hidayath Hid (hidb4u@gmail.com)

1.3.3 Full-stack development:

Fig 1.1.: TYPES OF DEVELOPERS

Downloaded by Hidayath Hid (hidb4u@gmail.com)

• HTML stands for Hyper Text Markup Language

• HTML is the standard markup language for creating Web pages

• HTML describes the structure of a Web page

• HTML consists of a series of elements

• HTML elements tell the browser how to display the content

• HTML elements label pieces of content such as "this is a heading", "this is a