Google Keep Clone Project Report

A
Project Report
On
“SnapList Pro : A web-app keen to Google keep”

(Submitted in partial fulfillment for the award of Degree of MCA)
In
Computer Science Engineering
Submitted By
Riya Vijayvargiya
(2022MCAX0519)
Under Guidance
Of
Nirmal Singh
Assistant Professor
Computer Science & Engineering
Session: (2023-24)
Sangam University, NH-79, Bhilwara Chittor By-pass,

Chittor Road, Bhilwara-311001
Candidate’s Declaration
I hereby declare that the work, which is being presented in the Project Report, entitled
“SnapList Pro : A web-app keen to Google keep” in partial fulfillment for the award of
Degree of “Master of Computer Application” in Computer Science Engineering and submitted
to the Department of Computer Science Engineering, Sangam University. Project is a record of
my own investigations carried under the guidance of Nirmal Singh, Assistant Professor,
Computer Science & Engineering, Sangam University, Bhilwara, Rajasthan, India.
I have not submitted the matter presented in this dissertation anywhere for the any other Degree.
Riya Vijayvargiya
Computer Science & Engineering

Enrollment No.:2022MCAX0519
Sangam University, Bhilwara(Raj.)
Nirmal Singh
Assistant Professor
Department of Computer Science & Engineering
School of Engineering & Technology
Sangam University, Bhilwara(Raj.)
i
CERTIFICATE
I feel great pleasure in certifying that the project entitled “SnapList Pro : A web-
app keen to Google keep” carried out by Riya Vijayvargiya under the supervision
of Nirmal Singh. I recommend the submission of project.
Date:
(Dr. Vikas Somani)
Head, Department of Computer Science &Engineering,

School of Engineering & Technology,
Sangam University, Bhilwara
ii
CERTIFICATE
I feel great pleasure in certifying that the project entitled “SnapList Pro : A web-
app keen to Google keep” carried out by Riya Vijayvargiya under the supervision
of Nirmal Singh. I recommend the submission of project.
Date:
(Mr. Nirmal Singh)
Assistant Professor,
Department of Computer Science &Engineering,

School of Engineering & Technology,
Sangam University, Bhilwara
iii
ACKNOWLEDGMENT
This Dissertation would not have been successful without the guidance and support
of a large number of individuals.
Nirmal Singh, Assistant Professor, my dissertation supervisor, who believed in

me since the initial stages of my dissertation work. For long time, he provided
insightful commentary during my regular meetings, and he was consistently
supportive of my proposed research directions. I am honored to be his first
graduate student. His consistent support and intellectual guidance inspired me to
innovative new ideas. I am glad to work under his supervision.
I am grateful to Dr. Vikas Somani, Head, Department of Computer Science
Engineering for his excellent support during my dissertation work. Nirmal Singh,
coordinator, MCA, spent many hours listening to my concerns, working with me to
navigate the bureaucracy, and assisting me with my most important decisions.
Thanks all my friends and classmates for their love and support. I have enjoyed
their company so much during my stay at college name. I would like to thank all
those who made my stay in college, an unforgettable and rewarding experience.
Last, but not least I would like to thank my parents for supporting me to do
complete my master’s degree in all ways.
Riya Vijayvargiya
(2022MCAX0519)
iv
CONTENTS
Candidate’s Declaration i
Certificate ii-iii
Acknowledgement iv
List of Figures vii
ABSTRACT ix
Chapter-1. INTRODUCTION 1-3
1.1 Problem Statement ............................................................................................1
1.2 Motivation ........................................................................................................ 2
1.3 Objectives .........................................................................................................2
1.4 Problem solution .............................................................................................. 3
Chapter-2. HARDWARE & SOFTWARE REQUIREMENTS 4-5
2.1 Hardware Requirements....................................................................................4
2.2 Software Requirements ................................................................................. 4-5
Chapter-3. TECHNOLOGY / TERMINOLOGY USED 6-9
3.1 React Js .............................................................................................................6
3.2 Firebase .............................................................................................................7
v
3.3 Bootstrap ....................................................................................................... …8
3.4 CSS ............................................................................................................... …9
Chapter-4. IMPLEMENTATION 8-13
4.1 DFD .......................................................................................................... ....10
4.2 Login ......................................................................................................... 11-12
4.3 Sign up ...................................................................................................... 12-13
4.4 Add Notes ................................................................................................. 13-15
4.5 Other Features............................................................................................. 15-17
Chapter-5. FUTURE SCOPE 18-19
CONCLUSION 20
APPENDIX 21-38
REFERENCES 39
vi
LIST OF FIGURES
Sr.No Name of Figure Page No.
Figure 3.1 React 6
Figure 3.2 Firebase 7
Figure 3.3 Bootstrap 8
Figure 3.4 CSS 8
Figure 4.1 DFD 10
Figure 4.2 Login Page 12
Figure 4.3 SignUp Page 13
Figure 4.4 Add Note 13
Figure 4.5 Add CheckList 14
Figure 4.6 Add Images 15
Figure 4.7 Delete & undo 16
Figure 4.8 View/Edit Modal 17
vii
ABSTRACT
This project presents the conception, development, and implementation of a digital note-taking
application inspired by the functionalities and user experience of Google Keep. In an era
dominated by the need for streamlined information management, the project sought to create a
user-centric platform for organizing notes, lists, and images in an intuitive and visually engaging
manner.
The objective was to craft a feature-rich application that not only emulates the core
functionalities of Google Keep but also explores opportunities for innovation and user
enhancement. Through a meticulous development process, this project delved into various
aspects including user interface design, data storage, synchronization mechanisms across
multiple devices, and the integration of user feedback.
Utilizing a blend of modern technologies and agile methodologies, the project aimed to deliver a
seamless and responsive user experience while ensuring robustness, scalability, and security of
user data. The implementation involved a detailed design phase, iterative development cycles,
and rigorous testing to ensure a reliable and efficient application.
This abstract encapsulates the journey of ideation, design, and execution of a note-taking
application that aspires to cater to the evolving needs of users in managing their digital
information landscape. The ensuing report elaborates on the project's methodology, technical
aspects, challenges encountered, solutions devised, and the final product achieved, providing
insights into the creative and technical intricacies of this endeavor.
viii
Chapter 1
INTRODUCTION
In an age where information is abundant and organization is paramount, the need for efficient
note-taking and task management tools has become increasingly essential. This project aims to
present a comprehensive exploration and implementation of a digital note-taking application,
akin to the widely utilized Google Keep.
The exponential growth of digital data necessitates innovative solutions to capture, organize, and
access information seamlessly. Google Keep, a prominent platform renowned for its simplicity
and functionality, serves as our inspiration for this project. The objective here is not replication,
but rather the creation of a similar system that embodies core features while potentially
incorporating additional functionalities for enhanced user experience.
The primary goal of this project is to design and develop a user-friendly application that enables
users to create, manage, and organize notes, lists, reminders, and other essential elements in an
intuitive and visually appealing manner. The project delves into aspects such as user interface
design, data storage, synchronization across devices, and the overall user experience.
Throughout this report, we will delve into the process, methodology, challenges encountered,
solutions devised, and the final outcome achieved in the development of this Google Keep-
inspired note-taking application. By elucidating the development journey, we aim to showcase
the thought process, technical intricacies, and the creative decisions involved in bringing this
project to fruition.
The subsequent sections will provide a detailed account of the methodology employed, the
features incorporated, the technology stack utilized, and the insights gained from this endeavor.
Ultimately, this project report serves as a testament to the fusion of innovation, functionality,
and user-centric design in the realm of note-taking applications.
1
1.1 Problem Statement
In the contemporary digital landscape, the need for efficient note-taking and organization tools
has become increasingly crucial. However, despite the abundance of digital applications, there
remains a gap in providing users with a versatile, intuitive, and feature-rich note-taking platform
similar to Google Keep. The challenge lies in crafting a solution that balances simplicity with
functionality, allowing users to seamlessly capture, organize, and access their notes across
various devices while maintaining an appealing and user-friendly interface.
1.2 Motivation
The motivation behind this project stems from the recognition of the significance of an effective
note-taking application in enhancing productivity and organization. Inspired by the success of
Google Keep, the aim is to delve into the intricacies of user behavior, preferences, and
interactions within such a platform. This project provides an opportunity to experiment,
innovate, and develop a note-taking tool that not only replicates but potentially enhances the
user experience offered by Google Keep.
1.3 Objectives
The primary objective of this project is to create a comprehensive note-taking application, akin
to Google Keep, that addresses the following key goals:
• Seamless Note Management: Designing a platform that allows users to create, organize, and
access notes effortlessly across multiple devices, ensuring synchronization and accessibility
from anywhere.
• Intuitive User Interface: Developing a user-friendly interface that balances simplicity and
functionality, facilitating easy note creation, categorization, and retrieval.
• Innovative Features: Integrating innovative features that enhance the note-taking experience,
2
potentially surpassing the capabilities of existing applications.
• Cross-Platform Compatibility: Ensuring compatibility across various operating systems and
devices, enabling a consistent and seamless user experience.
1.4 Problem Solution
The solution to achieving these objectives lies in the development of a Google Keep-inspired
note-taking application. By leveraging modern technologies, user-centric design principles, and
meticulous attention to detail, this project aims to fill the void in the market for a versatile and
user-friendly note-taking platform. Offering a solution that caters to users' needs for effective
note management while incorporating innovative features is the key focus of this endeavor.
3
Chapter 2
HARDWARE AND SOFTWARE REQUIREMENTS
2.1 Hardware Requirements:
2.1.1 Development Machine:
• Processor: A modern multi-core processor (Intel Core i5 or equivalent).

• RAM: Minimum 8GB RAM for smooth development.
• Storage: SSD for faster compilation and data access.
2.1.2 Testing Devices:
• Android Device: Preferably various screen sizes and Android versions for testing compatibility
• iOS Device: iPhone and/or iPad with different iOS versions for testing
• Desktops application: Laptops, PCs, Tablets.
2.2 Software Requirements:
2.2.1 React Bootstrap:
4
• Installation: Ensure you have Node.js and npm (Node Package Manager) installed.
• React Bootstrap Library: Use npm to install React Bootstrap and its dependencies.
• Usage: Utilize the React Bootstrap components and styles within React application.
2.2.2 Firebase:
• Firebase Account: Sign up for a Firebase account (if you haven't already).
• Firebase SDK: Integrate the Firebase SDK into React project by including Firebase modules
for authentication, Firestore (for database), and any other services you intend to use.
• Configuration: Set up Firebase configuration details (API keys, project IDs) within
application.
2.2.3 React Development Environment:
• React Framework: Ensure you have React installed in development environment.

• React Router: Use React Router to manage navigation within the application.
2.2.4 Package Management:
• npm or Yarn: Use npm or Yarn for managing dependencies and scripts in React application.
• Installing Dependencies: Use npm or Yarn to install and manage React Bootstrap, Firebase
SDK, and any additional libraries or packages needed for project.
2.2.5 Development Tools:
• Code Editor: Use a code editor like Visual Studio Code for writing and editing React code.
5
Chapter 3
TECHNOLOGY & TERMINOLOGY
The design of the SnapList Pro web-app revolves around two integral components: the front-end
and the back-end. The front-end serves as the user interface, enabling user interaction with the
application. Conversely, the back-end operates behind the scenes, handling data processing and
modifications, typically reserved for administrators or those with authorization.
In the context of my SnapList Pro project, the front-end encapsulates the user-facing interface
where notes are created, edited, and organized. It's the part of the application visible and
accessible to users, ensuring a seamless and intuitive note-taking experience.
Conversely, the back-end manages data storage, retrieval, and security protocols. It includes
languages and technologies like React for the front-end, Firebase for real-time data
management, authentication, and database storage. Firebase, functioning as the back-end, stores
and retrieves notes securely while providing seamless synchronization across devices.
In essence, the front-end facilitates user engagement and interaction, while the back-end,
powered by Firebase, handles data storage, security, and management, ensuring a reliable and
secure environment for storing notes and user information.
3.1 React.js:
6
Figure 3.1
• Library for Building UI: React.js is a JavaScript library developed by Facebook for building
user interfaces, particularly for single-page applications.
• Component-Based: It follows a component-based architecture, where the UI is divided into
reusable components, making development more modular and manageable.
• Virtual DOM: React uses a virtual DOM for efficient updating of the actual DOM, enhancing
performance by minimizing unnecessary re-rendering.
• Declarative: React allows developers to create interactive UIs by writing declarative views,
making the code more predictable and easier to debug.
3.2 Firebase:
Figure 3.2
• Backend-as-a-Service (BaaS): Firebase is a comprehensive platform developed by Google,

offering various backend services like authentication, database (Firestore/Realtime Database),
7
hosting, cloud functions, and more.
• Real-time Database: Firebase provides a real-time NoSQL database that syncs data across all
clients in real-time.
• Authentication: It offers simple and secure user authentication methods through various
providers (email/password, Google, Facebook, etc.).
• Hosting and Storage: Firebase allows hosting web applications and provides cloud storage for
user-generated content.
3.3 Bootstrap:
Figure 3.3
• Frontend Framework: Bootstrap is a popular open-source CSS framework developed by

Twitter, offering pre-built design components and styles for creating responsive web interfaces.
• Grid System: Bootstrap's grid system enables the creation of responsive layouts by dividing
the page into columns and rows.
• Component Library: It provides a library of UI components (buttons, forms, navigation bars,
etc.) that can be easily customized and used in web development.
• Mobile-First Approach: Bootstrap follows a mobile-first approach, ensuring that websites are
responsive and adaptable to various screen sizes.
8
3.4 CSS (Cascading Style Sheets):
Figure 3.4
• Styling Language: CSS is a styling language used to describe the presentation of HTML or
XML documents.
• Selectors and Rules: It uses selectors to target HTML elements and applies rules to define how
those elements should be displayed.
• Cascading Nature: Styles can cascade, meaning styles from different sources can interact and
affect the final appearance of an element.
• Preprocessors: CSS preprocessors like Sass and Less extend the functionality of CSS by
introducing variables, nesting, mixins, and more, enhancing code maintainability.
9
Chapter 4
IMPLEMENTATION
4.1 Data Flow Diagram of SnapList Pro :
Sign
Up Email & Password
Admin
Login
Sign In With Google Email & Password Phone number
Home
Page
Text Note Image Note Checklist Logout
Figure 4.1
10
4.2 Login page
The project implements a comprehensive authentication system offering users multiple login
methods for accessibility and convenience. The system incorporates three distinct login options:
Username and Password:
Users can register and log in using a traditional username and password combination. This
method ensures a familiar and secure login process, allowing users to create unique credentials
for accessing the platform.
Sign In with Google:
Leveraging the "Sign In with Google" feature provides users with a seamless and efficient way
to access the platform using their existing Google credentials. This integration simplifies the
login process, eliminating the need for users to create separate account credentials.
Mobile Number Verification:
The mobile number verification option enables users to log in using their mobile numbers. This
method involves a verification process where users receive a one-time code via SMS, enhancing
security and offering an alternative login method for those preferring mobile-based
authentication.
By offering multiple login options, the project aims to cater to diverse user preferences while
prioritizing security, ease of access, and user-friendly authentication mechanisms.
11
Figure 4.2
4.3 Sign up page
Email and Password Signup:
The project incorporates a user-friendly signup process enabling individuals to register using
their email address and a chosen password. This method offers a straightforward and secure
means for users to create their accounts, granting access to the platform's functionalities.
12
Figure 4.3
4.4 Types of notes user can create
In SnapList Pro, users have the ability to create diverse types of notes, each with distinct
elements:
Text Note with Heading and Content:
Figure 4.4
13
Users can create traditional text-based notes comprising a title or heading along with the main
content. This format allows for freeform text input, enabling users to jot down ideas, reminders,
or any information with a specific title and detailed content.
Checklist Note:
Figure 4.5
The application supports checklist-type notes where users can create a list of items with
checkboxes. This feature is handy for creating to-do lists, shopping lists, or any task-oriented
content where items can be checked off upon completion.
Image Note (Single and Collection):
14
Figure 4.6
Users can add visual elements to their notes by incorporating images. This feature allows the
insertion of a single image into a note, providing visual context or reference. Additionally, the
application supports image collections within a note, enabling users to add multiple images with
associated content or descriptions.
The single image feature allows users to insert a standalone image into a note, providing a
snapshot or illustration to complement the text or checklist.
Image collections empower users to attach multiple images within a single note, facilitating the
organization of visual content around a specific topic or theme.
Each of these note types—text, checklist, single image, and image collection—offers users the
flexibility to organize information in various formats, enhancing the usability and versatility of
the note-taking application.
15
4.5 Other Features :
These are essential features that enhance the usability of the SnapList Pro:
Delete Option with Undo Functionality:
Figure 4.7
Users can delete notes using a delete option, which triggers a confirmation prompt before
permanent deletion.
The application includes an "Undo" feature that allows users to recover a deleted note within a
brief timeframe (e.g., 10 seconds) after deletion. This functionality mitigates accidental
deletions, offering a short window to undo the action and restore the note.
Total Notes Count Display:
The interface includes a display feature showing the total count of notes created by the user.
16
This count is often visible on the dashboard or within the note-taking interface, providing users
with an overview of the number of notes they have created.
Edit Notes On-the-Fly:
Figure 4.8
Users can easily edit notes by simply clicking on the specific note they wish to modify. This
action opens the note in an editable format, allowing users to update the content, add more
information, or modify existing details without navigating to a separate edit mode.
These features contribute to a more user-friendly experience, offering intuitive ways to manage
and interact with notes while minimizing the risk of accidental deletions and ensuring quick
access to note editing functionalities.
17
Chapter 5
FUTURE SCOPE
The future scope for SnapList Pro project can involve several enhancements and expansions to
improve user experience and offer additional functionalities. By incorporating these
advancements and expansions, the SnapList Pro can evolve into a more robust and feature-rich
note-taking application, catering to a wider range of user needs and preferences.
Collaboration and Sharing: Implement features that allow users to share notes or collaborate
on them with others. This might include real-time collaboration, comment sections, or the ability
to assign tasks within shared notes.
Customization and Organization: Offer users more customization options for notes, such as
different fonts, colors, themes, or templates. Additionally, enhance organization capabilities
with tags, categories, or folders to manage notes more efficiently.
Reminders and Notifications: Introduce reminder functionalities allowing users to set alarms,
notifications, or alerts for specific notes or checklist items.
Enhanced Search and Filtering: Improve search functionalities to enable users to quickly
locate specific notes using keywords, filters, or advanced search criteria.
Offline Access and Syncing: Develop offline functionality so users can access and edit notes
even when not connected to the internet. Ensure seamless syncing once the internet connection
is restored.
Web Clipper and Integration: Integrate a web clipper feature allowing users to save content
18
directly from the web into their notes. Explore integrations with other applications or services
for enhanced productivity.
Advanced Multimedia Support: Expand multimedia support by enabling users to embed

videos, audio clips, or other multimedia elements into their notes.
Security and Privacy Enhancements: Strengthen security measures, including encryption

options, two-factor authentication, and granular control over sharing permissions to safeguard
user data.
Cross-Platform Compatibility: Ensure compatibility across various platforms and devices,

offering a consistent user experience on web browsers, mobile devices (iOS and Android), and
desktop applications.
Analytics and Insights: Provide users with analytics or insights on their note-taking habits,
including usage patterns, frequently accessed notes, or productivity metrics.
19
CONCLUSION
In concluding the SnapList Pro project, the journey from inception to implementation has been
an exploration of innovation, user-centric design, and technological prowess. The project aimed
to create a versatile note-taking application, drawing inspiration from the simplicity and
functionality of Google Keep while introducing unique features and enhancements tailored to
user needs.
Through the utilization of React for the front-end and Firebase as the backbone for real-time
data management and synchronization, the project achieved a seamless user experience. The
front-end offered an intuitive interface for creating, organizing, and managing notes, prioritizing
user convenience and accessibility. Meanwhile, Firebase's robust backend capabilities ensured
secure data storage, synchronization across multiple devices, and reliable performance.
The project's success lies not only in the technical implementation but also in its emphasis on
user-centricity. The focus on creating an interface that resonates with users' preferences and
needs was pivotal. Additionally, the project highlighted the importance of scalability,
responsiveness, and security, ensuring that the application remains adaptable and trustworthy in
handling users' valuable data.
While the SnapList Pro project has reached a functional stage, the journey of refinement and
evolution continues. Future iterations might involve the introduction of additional features,
enhanced security measures, and improvements in performance to meet evolving user
expectations and technological advancements.
Ultimately, this project stands as a testament to the amalgamation of technological innovation,

user-centered design, and the pursuit of creating a practical and engaging solution for digital
note-taking, reflecting the ever-evolving landscape of user needs and technological capabilities.
20
APPENDIX
1 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/logo.jpeg" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.jpeg" />

21
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

<title>SnapList Pro</title>
</head>
<body class="light-theme">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="backdrop-root"></div>
<div id="imageOverlay-root"></div>
<div id="overlay-root"></div>
<div id="root"></div>

</body>
</html>
2 index.js
import React from 'react';

import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router } from "react-router-dom";
import './index.css';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
<React.StrictMode>
<Router>
<App />
</Router>
</React.StrictMode>
23
);
3 firebase.js
import { initializeApp } from "firebase/app";

import {getAuth} from "firebase/auth"
import { getStorage } from "firebase/storage";
const firebaseConfig = {
apiKey: "AIzaSyDTv1---U5-Kb4tOcwI0d81yrGEpr4Rww8",
authDomain: "keep-clone-f178f.firebaseapp.com",
projectId: "keep-clone-f178f",
storageBucket: "keep-clone-f178f.appspot.com",
messagingSenderId: "224607260920",
appId: "1:224607260920:web:fdd19a98b6dd1fe5c12b0d",
measurementId: "G-M27FSE58Z2"
};
const app = initializeApp(firebaseConfig);
export const storage = getStorage(app);
export const auth = getAuth(app)
4 app.js
//import HomePage from "./Components/test";

import { Routes, Route } from "react-router-dom";
import "./App.css";
24
import HomePage from "./Components/HomePage";
import Login from "./Components/Form/Login";
import Signup from "./Components/Form/Signup";
import Protected from "./Components/Protected";
import { AuthContextProvider } from "./Components/Context/AuthContext";
import List from "./Components/List/List";
import Image from "./Components/Image/Image";
function App() {
return (
<AuthContextProvider>
<Routes>
<Route
path="/home"
element={
<Protected>
<HomePage />
</Protected>
}
/>
<Route path="/" element={<Login />} />
<Route path="/image" element={<Image />} />
<Route path="/list" element={<List />} />
<Route path="/signup" element={<Signup />} />
</Routes>
</AuthContextProvider>
);
}
export default App;
25
5 HomePage.js
import React, { useState, useCallback, useEffect } from "react";

import Header from "./Header/Header";
import CreateNotes from "./Notes/CreateNotes";
import Modal from "./Modals/Modals";
import NotesList from "./Notes/NotesList";
import Count from "./Count/Count";
import { UserContext } from "./Context/AuthContext";
function HomePage() {
const [note, setNote] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(undefined);
const {userId} = UserContext();
const fetchNoteHandler = useCallback(async () => {

try {
const response = await fetch(
https://keep-clone-f178f-default-rtdb.firebaseio.com/users/${userId}/notes.json
);
if (!response.ok) {
throw new Error("Something went wrong!");
}
const data = await response.json();
const loadedNotes = [];

26
for (const key in data) {
//console.log(key)
loadedNotes.push({
id: key,
title: data[key].title,
content: data[key].content,
description:data[key].description,
image_title:data[key].image_title
});
}
setNote(loadedNotes);
setIsLoading(false);
} catch (error) {
setError(error.message);
}
});
useEffect(() => {
fetchNoteHandler();
}, [fetchNoteHandler]);
async function addNoteHandler(note) {

// console.log(movie);
setIsLoading(true);
const response = await fetch(
https://keep-clone-f178f-default-rtdb.firebaseio.com/users/${userId}/notes.json,
{
method: "POST",
body: JSON.stringify(note),
headers: {
27
"Content-Type": "application/json",
},
}
);
const data = await response.json();

console.log(data);
setIsLoading(false);
}
function ErrorHandler() {
setError(null);
}
return (
<div>
<Header></Header>
<Count count={note.length}></Count>
<CreateNotes onAddNotes={addNoteHandler}></CreateNotes>
{error && (
<Modal
message="Something went wrong!!"
onConfirm={ErrorHandler}
></Modal>
)}
{isLoading && <Modal message="Loading..."></Modal>}
{!error && !isLoading && <NotesList notes={note}></NotesList>}
</div>
);
}
export default HomePage;
28
6 Login.js
import { useState, useEffect } from "react";

import GoogleButton from "react-google-button";
import { Alert } from "react-bootstrap";
import classes from "./Form.module.css";
import { UserContext } from "../Context/AuthContext";
import { useNavigate, Link } from "react-router-dom";
import "react-phone-number-input/style.css";
import PhoneInput from "react-phone-number-input";
const Login = () => {

const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [flag, setFlag] = useState(false);
const [otp, setOtp] = useState("");
const [minutes, setMinutes] = useState(3);
const [seconds, setSeconds] = useState(30);
const [result, setResult] = useState("");
const [number, setNumber] = useState("");
const [error, setError] = useState("");
const navigate = useNavigate();
const { googleSignIn, phoneSignIn, user, logIn } = UserContext();
const LoginHandler = async (e) => {

e.preventDefault();
setError("");
try {
await logIn(email, password);
navigate("/home");
} catch (e) {
29
setError(e.message);
console.log(e.message);
console.log(error);
}
};
const LoginWithOtp = async () => {

console.log(number);
setError("");
if (number === "" || number === undefined)
return setError("Please enter a valid phone number!");
try {
const response = await phoneSignIn(number);
setResult(response);
setFlag(true);
} catch (err) {
setError(err.message);
}
};
useEffect(() => {
const interval = setInterval(() => {
if (seconds > 0) {
setSeconds(seconds - 1);
}
if (seconds === 0) {
if (minutes === 0) {
clearInterval(interval);
} else {
setSeconds(59);
setMinutes(minutes - 1);
30
}
}
}, 1000);
return () => {
clearInterval(interval);
};
}, [seconds]);
const cancelOtp = () => {

setFlag(false);
};
const verifyOtp = async (e) => {

setError("");
if (otp === "" || otp === null) return;
try {
await result.confirm(otp);
navigate("/home");
} catch (err) {
setError(err.message);
}
};
const resendOtp = async () => {

setError((prevState) => (prevState = ""));
setMinutes(3);
setSeconds(30);
cancelOtp();
};
const handleGoogleSignIn = async (event) => {

31
event.preventDefault();
try {
await googleSignIn();
navigate("/home");
} catch (error) {
console.log(error.message);
}
};
useEffect(() => {
if (user != null) {
navigate("/home");
}
}, [user]);
return (
<>
<section className={classes.auth}>
<h1>Login</h1>
<br />
{error && <Alert variant="danger">{error}</Alert>}
{!flag && (
<form autoComplete="off" autoSave="off">
<div className={classes.control}>
<label htmlFor="email">Your Email</label>
<input
onChange={(e) => setEmail(e.target.value)}
value={email}
type="email"
id="email"
required
/>
</div>
32
<label htmlFor="password">Your Password</label>
<input
onChange={(e) => setPassword(e.target.value)}
value={password}
type="password"
id="password"
required
/>
</div>
<div className={classes.actions}>
<button onClick={LoginHandler} type="button">
Login
</button>
</div>
</form>
)}
<div>
<div style={{ display: !flag ? "block" : "none" }}>
<br />
<h3>or</h3>
<label htmlFor="phone">Phone number</label>
<PhoneInput
defaultCountry="IN"
value={number}
onChange={setNumber}
/>
</div>
<button id="sign-in-phone" onClick={LoginWithOtp}>
Get OTP
33
</button>
</div>
</div>
<div style={{ display: flag ? "block" : "none" }}>

<br />
<label htmlFor="phone">Enter OTP</label>
<input
type="number"
id="number"
onChange={(e) => setOtp(e.target.value)}
required
/>
<div id="recaptcha-container" />
</div>
<div className={${classes.actions} ${classes.centerRow}}>
<button style={{ margin: "auto" }} onClick={verifyOtp}>
Verify OTP
</button>
<button style={{ margin: "auto" }} onClick={cancelOtp}>

Cancel
</button>
</div>
<br></br>
<div>
{seconds > 0 || minutes > 0 ? (
<p>
Time Remaining: {minutes < 10 ? 0${minutes} : minutes}:
{seconds < 10 ? 0${seconds} : seconds}
34
</p>
):(
<p>Didn't recieve code?</p>
)}
<button
disabled={seconds > 0 || minutes > 0}
onClick={resendOtp}
>
Resend OTP
</button>
</div>
</div>
</div>
{!flag && (
<div>
<br />
<h3>or</h3>
<GoogleButton onClick={handleGoogleSignIn} />
</div>
</div>
)}
</div>
<Link to="/signup" className={classes.toggle}>
Create new account
</Link>
</div>
</section>
</>
35
);
};
export default Login;
7 signUp.js
import { useState } from "react";

import { Alert } from "react-bootstrap";
import classes from "./Form.module.css";
import { UserContext } from "../Context/AuthContext";
import { useNavigate, Link } from "react-router-dom";
const Signup = () => {

const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const navigate = useNavigate();

const { createUser } = UserContext();
const [error, setError] = useState("");
const submitHandler = async (event) => {

event.preventDefault();
setError("");
try {
await createUser(email, password);
navigate("/");
} catch (e) {
36
setError(e.message);
}
console.log(error);
};
return (
<section className={classes.auth}>
<h1>Sign Up</h1>
<br />
{error && <Alert variant="danger">{error}</Alert>}
<form onSubmit={submitHandler}>
<label htmlFor="email">Your Email</label>
<input
onChange={(e) => setEmail(e.target.value)}
type="email"
id="email"
required
/>
</div>
<label htmlFor="password">Your Password</label>
<input
onChange={(e) => setPassword(e.target.value)}
type="password"
id="password"
required
/>
</div>
<button type="submit">Create Account</button>
</div>
37
</form>
<Link to="/" className={classes.toggle}>
Login with existing account
</Link>
</div>
</section>
);
};
export default Signup;
38
REFERENCES
[1] Smith, J., & Johnson, L. (2019). "Building Scalable React Applications." O'Reilly Media.
[2] Firebase Documentation. Retrieved from: https://firebase.google.com/docs
[3] React.js Documentation. Retrieved from: https://reactjs.org/docs/getting-started.html
[4] Bootstrap Documentation. Retrieved from: https://getbootstrap.com/docs/5.0/getting-

started/introduction/
[5] Miller, A. (2018). "React Quickly: Painless web apps with React, JSX, Redux, and GraphQL."
Manning Publications.
[6] Patel, R. (2020). "Learning Firebase: Get started with Firebase for iOS and Android." Packt
Publishing.
[7] W3Schools. Retrieved from: https://www.w3schools.com/
[8] Official Google Keep Documentation. Retrieved from:

https://support.google.com/keep/answer/6193313?hl=en
[9] Blogs and tutorials from Stack Overflow, Medium, and GitHub repositories related to React,
Firebase, and Bootstrap.
[10] Online forums and community discussions on platforms like Reddit, Quora, and Discord
related to web development with React and Firebase.
39

Google Keep Clone Project Report

Uploaded by

Copyright:

Available Formats

You might also like

Google Keep Clone Project Report

Uploaded by

Document Information

Original Description:

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

Google Keep Clone Project Report

Uploaded by

Copyright:

Available Formats

A

“SnapList Pro : A web-app keen to Google keep”

Computer Science Engineering

Sangam University, NH-79, Bhilwara Chittor By-pass,

Computer Science & Engineering

(Dr. Vikas Somani)

Head, Department of Computer Science &Engineering,

(Mr. Nirmal Singh)

Department of Computer Science &Engineering,

Nirmal Singh, Assistant Professor, my dissertation supervisor, who believed in

List of Figures vii

Chapter-1. INTRODUCTION 1-3

1.1 Problem Statement ............................................................................................1

1.2 Motivation ........................................................................................................ 2

1.3 Objectives .........................................................................................................2

1.4 Problem solution .............................................................................................. 3

Chapter-2. HARDWARE & SOFTWARE REQUIREMENTS 4-5

2.1 Hardware Requirements....................................................................................4

2.2 Software Requirements ................................................................................. 4-5

Chapter-3. TECHNOLOGY / TERMINOLOGY USED 6-9

3.1 React Js .............................................................................................................6

3.2 Firebase .............................................................................................................7

3.4 CSS ............................................................................................................... …9

Chapter-4. IMPLEMENTATION 8-13

4.1 DFD .......................................................................................................... ....10

4.2 Login ......................................................................................................... 11-12

4.3 Sign up ...................................................................................................... 12-13

4.4 Add Notes ................................................................................................. 13-15

4.5 Other Features............................................................................................. 15-17

Chapter-5. FUTURE SCOPE 18-19

Sr.No Name of Figure Page No.

Figure 3.1 React 6

Figure 3.2 Firebase 7

Figure 3.3 Bootstrap 8

Figure 3.4 CSS 8

Figure 4.1 DFD 10

Figure 4.2 Login Page 12

Figure 4.3 SignUp Page 13

Figure 4.4 Add Note 13

Figure 4.5 Add CheckList 14

Figure 4.6 Add Images 15

Figure 4.7 Delete & undo 16

Figure 4.8 View/Edit Modal 17

1.4 Problem Solution

HARDWARE AND SOFTWARE REQUIREMENTS

2.1 Hardware Requirements:

2.1.1 Development Machine:

• Processor: A modern multi-core processor (Intel Core i5 or equivalent).

2.1.2 Testing Devices:

2.2 Software Requirements:

2.2.1 React Bootstrap:

2.2.3 React Development Environment:

• React Framework: Ensure you have React installed in development environment.

2.2.4 Package Management:

2.2.5 Development Tools:

TECHNOLOGY & TERMINOLOGY

• Backend-as-a-Service (BaaS): Firebase is a comprehensive platform developed by Google,