Project Synopsis
Project Synopsis
PROJECT SYNOPSIS on
Document Vault
SUBMITTED BY
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
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
This app is very useful for us and we can easily handle this app.
LITERATURE REVIEW
PROS CONS
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
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” .
Languages
HTML
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.
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
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.
Prof.Dr.D.B.Kadam. Prof.A.G.Patil.
E&Tc Enginnering