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
Dr.D.B.Kadam
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 =>
“styles.css” .
All the required dependencies are in filed called Package.json.
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 normalize.css .
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 => https://reactjs.org
2. HTML, CSS, JavaScript => https://www.w3schools.com
3. Material-UI => https://material-ui.com
4. Firebase => https://firebase.google.com
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
Prof.Dr.D.B.Kadam. Prof.A.G.Patil.
E&Tc Enginnering Head
E&Tc Enginnering
