Dr.V.P.S.S.M.

Padmabhooshan Vasantraodada Patil Institute of Technology,

Budhgaon.- 416 304

PROJECT SYNOPSIS on

Document Vault

BACHELOR OF TECHNOLOGY ELECTRONICS AND

TELECOMMUNICATION

SUBMITTED BY

1. Zaid Bhati [52]

2. Parshv Patil [53]
3. Rushikesh Aidale [54]

UNDER THE GUIDANCE OF

[Link]

DEPARTMENT OF ELECTRONICS AND COMMUNICATION

ENGINEERING
YEAR 2020-2021
 ABSTRACT

We will go step by step to build a note-taking application integrating react for state
management. In the note-taking application, users can create, read, and delete the notes.

This app used JSX. JSX stands for JavaScript XML, it allows us to write HTML in React.

This app has various JSX components. Which are App , Create-Area, Header, Footer and

Note.

Design is powered by Material UI, and CSS. We use HTML as a mark-up language, and

For functionality JavaScript language is needed.

In a nutshell, Material-UI is an open-source project that features React components that

implement Google's Material Design. ... With over 35,000 stars on GitHub, Material-UI is
one of the top user interface libraries for React out there.
 MOTIVATION

I was doing the Self training project to creating a Document Vault for my daily use with React

JS.

When you want starting a project (in any language and library or framework) it’s very

important to know that what is your exact Architecture and Design pattern. So we have to

choose between famous of them.

This app is very useful for us and we can easily handle this app.

LITERATURE REVIEW
 PROS CONS

 Using local Storage to store files.

 Once you create an album you

can’t delete it.

 Create different albums.

 There is no search functionality.

 You can put many files in one

album.

OBJECTIVES
React makes it painless to create interactive UIs. Design simple views for each state in your
application, and React will efficiently update and render just the right components when your
data changes.

BY using react you can fit your component in an appropriate manner. As you visit the
website there is a Google Authentication. Where you can login with your Email. After that it
will redirect you to the album page. Where you can see one input and a Button called album.
You can give any name you want to your album and create album by clicking album button.
Then there is a input called choose file which will help you to select file from your computer
storage and after that there is a upload button which upload your document.

This will help you to pull together all your important files in one album and you can create
many albums as you can.
 PLANNING OF WORK

First we have to install React template by typing command =>

“npx create-react-app app-name” in terminal/command prompt.

PREREQUISITE
 Basic understanding of JavaScript ES6
 Basic understanding of HTML and CSS
 Prior understanding of react
 Have Nodejs installed on your machine

As a project is created in your local computer it has Files where there is a SRC folder in
which it has an APP component where you will put you all components such as Sign In
page, Home Page, Footer.

We will first start with creating Sign In page with Google Authentication.

Next step will be Home component which has a Form Input with an Input and Create
album Button. Button which will help you to submit your album.

In next step there is a Choose file input which will choose file from your computer
storage and there is a Upload button which will upload your file.

Finally we end with footer which will show you the Copy-right and its current Year.

All the above components which will styled using CSS which is in Public folder =>
“[Link]” .

All the required dependencies are in filed called [Link].

 FACILITIES REQUIRED FOR PROPOSED WORK

Frame work used

REACT
React has been designed from the start for gradual adoption, and you can use as little or as
much React as you need. Whether you want to get a taste of React, add some interactivity to
a simple HTML page, or start a complex React-powered app, the links in this section will
help you get started.

Languages
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.

CSS

 CSS stands for Cascading Style Sheets
 CSS describes how HTML elements are to be displayed on screen, paper, or in
other media
 CSS saves a lot of work. It can control the layout of multiple web pages all at once
 External stylesheets are stored in CSS files
 JavaScript
JavaScript is a very powerful client-side scripting language. JavaScript is used mainly for
enhancing the interaction of a user with the webpage. In other words, you can make your
webpage more lively and interactive, with the help of JavaScript. JavaScript is also being
used widely in game development and Mobile application development.

MATERIAL_UI
Material-UI components work in isolation. They are self-supporting, and will only inject
the styles they need to display. They don't rely on any global style-sheets such
as [Link] .

You can use any of the components as demonstrated in the documentation. Please refer to
each component's demo page to see how they should be imported.

CHROME DEVELOPER TOOLS

Chrome DevTools is a set of web developer tools built directly into the Google
Chrome browser. DevTools can help you edit pages on-the-fly and diagnose problems
quickly, which ultimately helps you build better websites, faster.

HOW TO OPEN => PRESS F12

IF Hosting is needed

FIREBASE

Firebase is a platform developed by Google for creating mobile and web applications. It was
originally an independent company founded in 2011. In 2014, Google acquired the platform
and it is now their flagship offering for app development.
 REFERENCES

1. React => [Link]

2. HTML, CSS, JavaScript => [Link]
3. Material-UI => [Link]
4. Firebase => [Link]
5. You tube
6. Stack overflow

BOOKS
1. Learning React, By Eve Porcello & Alex Banks.
2. React in action, By Mark Tielens Thomas.
3. React cookbook, By Carlos Santana Roldan.
4. The road to learn react, By Robin Wieruch.

Sr. No. Name Of Student Roll No. Sign

1 Zaid Bhati. 52
2 Parshv Patil. 53
3 Rushikesh Aidale. 54

[Link]. [Link].

E&Tc Enginnering Head

E&Tc Enginnering