CLOUD NOTEBOOK

Submitted by:

Shivam Gupta (1032211510)

Kamakshi Sarabhai (1032211505)
Sudhish Neelakandan (1032211524)
Aditya Parulekar (1032211496)

Under the Internal Guidance of

Dr. Madhuri Rao

School of Computer Engineering Technology

MIT World Peace University, Kothrud,
Pune 411038, Maharashtra - India
OVERVIEW OF TECHNOLOGIES USED:

In the development of a cloud notebook application using

JavaScript and React, the implementation of user authentication
through login and registration involves the integration of various
technologies. The frontend is built with React.js, allowing for the
creation of reusable UI components. Material-UI or Ant Design
has been employed for consistent and visually appealing interface
elements. State management is facilitated by either Redux or the
React Context API.

To handle the backend, Node.js and Express.js is used, along

with a choice between MongoDB or PostgreSQL for the database,
depending on specific requirements. Object-Data Modeling
(ODM) or Object-Relational Mapping (ORM) libraries like
Mongoose or Sequelize simplify database interactions.
For user authentication, technologies such as JSON Web Tokens
(JWT) or OAuth 2.0 are employed. Passwords are securely
hashed using js, and Passport.js serves as a middleware for
authentication. The frontend interacts with the backend APIs
using Axios, while React Router manages navigation.

This comprehensive tech stack ensures a secure and efficient

user authentication system for the cloud notebook application,
encompassing both frontend and backend functionalities.
1.1 Routing in JS and implementation

In the architecture of a cloud notebook application, the

implementation of routing and login functionality is pivotal for
creating a smooth and structured user experience. React Router,
a popular library for handling client-side navigation in React
applications, becomes instrumental in defining the various views
and pages accessible to users based on the URL. Route
components are designated for distinct sections of the application,
such as the login page, dashboard, and the area dedicated to
creating and saving notes.

To enhance security and ensure restricted access to certain

features, private routes are incorporated, requiring users to
authenticate before accessing specific pages. These private
routes may employ conditional rendering or redirection to guide
non-authenticated users to the login page. This comprehensive
approach to routing not only organizes the user interface
effectively but also establishes a secure and intuitive navigation
flow throughout the cloud notebook application.
1.2 Forgot Password

The React functional component called ForgotPassword employs

the useState hook to manage various state variables, including
user credentials, OTP generation status, password field visibility,
and an alert message.

Within this component, the useNavigate hook from React Router

facilitates programmatic navigation. The handleOTPGeneration
function, triggered on form submission, orchestrates the
generation and dispatch of a One-Time Password (OTP) to the
user's email. The state variables control the component's
behavior, preventing redundant OTP generation, toggling the
visibility of password input fields, and managing the type and
content of alert messages.

The component interacts with an API endpoint (/api/auth/sendotp)

to send the OTP, emphasizing the dynamic aspects of the
password reset functionality. The code demonstrates the logic for
managing the OTP generation process and subsequent password
updates in a user-friendly manner.
1.3 Middleware

Middleware refers to software that provides common, reusable

services or functions to help manage and streamline the flow of
data between the frontend and backend of an application.
Middleware functions are executed in the request-response cycle,
allowing developers to perform various tasks such as
authentication, logging, error handling, and more.

In the context of the saving notes feature in a cloud notebook

application, middleware is used for authentication purposes.
When a user attempts to create or save a note, middleware can
check if the user is authenticated before allowing the request to
proceed to the actual note creation or storage logic. This helps in
ensuring that only authenticated users have the necessary
permissions to perform sensitive operations.
1.4 Front End:

1.4.1 Note Creation

1.4.2 Note Summary
WORKFLOW DIAGRAM:
FUTURE SCOPE:
● Collaboration and Sharing: Allow users to share their
notes or notebooks with others. You could implement
collaborative editing, where multiple users can work on a
note simultaneously.

● Rich Text Editing: Enhance the note creation/editing

interface by adding rich text editing capabilities. This might
include support for formatting (bold, italics, lists), embedding
images or links, etc.

● Reminders and Notifications: Implement a reminder

system that sends notifications to users based on dates and
times associated with their notes. This could be integrated
with the calendar feature.

● User Profiles and Preferences: Allow users to customize

their profiles and preferences. This might include themes,
 language preferences, and other settings that enhance the
user experience.

● Data Export/Import: Provide functionality for users to export

their notes or entire notebooks for backup purposes or to
import data from other note-taking applications.

● Analytics and Insights: Implement tracking and analytics to

provide users with insights into their note-taking habits, such
as most active times, frequently used tags, etc.
CONCLUSION:

Exposure to React and its components provides practical insights

into state management, asynchronous operations, and
frontend-interaction with backend services—skills that are
increasingly essential in modern web development.

Understanding how to implement secure authentication and

password recovery features is particularly relevant for students
focusing on cybersecurity or software engineering. Moreover, the
component demonstrates best practices in terms of user
experience. Overall, engagement with such components equips
third-year students with valuable skills applicable in real-world
software development scenarios.

REFERENCES:
https://www.w3schools.com/whatis/whatis_fullstack.asp
https://legacy.reactjs.org/
https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing
/Client-side_JavaScript_frameworks/React_getting_started
https://www.youtube.com/playlist?list=PLu0W_9lII9agx66oZnT6Iy
hcMIbUMNMdt
https://www.w3schools.com/whatis/whatis_fullstack_js.asp