JavaScript Framework Training

A PROJECT REPORT

Submitted by

VEDANT DARJI
190840131014

In partial fulfillment for the award of the degree of

BACHELOR OF ENGINEERING
in
Computer Science and Engineering
R. N. G. Patel Institute of Technological, University

Gujarat Technological University, Ahmedabad

May, 2023
 R. N. G. Patel Institute of Technology
Bardoli – Navsari Road, Isroli, Afwa, Bardoli, Gujarat 394620

CERTIFICATE
This is to certify that the project report submitted along with the project entitled

JavaScript Framework Training has been carried out by Vedant Darji under my

guidance in partial fulfillment for the degree of Bachelor of Engineering in Computer

Science and Engineering, 8th Semester of Gujarat Technological University,

Ahmadabad during the academic year 2022-23.

Mr. Yash B. Naik Dr. Madhavi B. Desai

Internal Guide Head of the Department

 GUJARAT TECHNOLOGICAL UNIVERSITY
CERTIFICATE FOR COMPLETION OF ALL ACTIVITIES AT ONLINE PROJECT PORTAL
B.E. SEMESTER VIII, ACADEMIC YEAR 2022-2023
Date of certificate generation : 10 May 2023 (23:21:32)

This is to certify that, Vedant Darji ( Enrolment Number - 190840131014 )

working on project entitled with JavaScript Framework Training from
Computer Science & Engineering department of R.N.G. PATEL INSTITUTE
OF TECHNOLOGY(FETR),BARDOLI,SURAT had submitted following details
at online project portal.

Internship Project Report Completed

Name of Student : Vedant Darji Name of Guide : Mr. Yash B Naik

Signature of Student : _____________ *Signature of Guide : ________________

Disclaimer :
This is a computer generated copy and does not indicate that your data has been evaluated. This is the receipt that GTU
has received a copy of the data that you have uploaded and submitted as your project work.

*Guide has to sign the certificate, Only if all above activities has been Completed.
 R. N. G. Patel Institute of Technology
Bardoli – Navsari Road, Isroli, Afwa, Bardoli, Gujarat 394620

DECLARATION
We hereby declare that the Internship report submitted along with the Internship

entitled JavaScript Framework Training submitted in partial fulfillment for the

degree ofBachelor of Engineering in Computer Science and Engineering to Gujarat

Technological University, Ahmedabad, is a bonafide record of original project work

carried out by me at Narola Infotech Solutions LLP, Surat under the supervision of

Mr. Pratik Shah and that no part of this report has been directly copied from any

students’ reports or taken from any other source, without providing due reference.

Name of the Student Sign of Student

1 Vedant Darji
 ACKNOWLEDGEMENT

The satisfaction that accompanies the successful completion of this internship would be

incomplete without mentioning the people who made it possible, without whose constant

guidance and encouragement would have made efforts go in vain. I consider myself

privileged to express gratitude and respect toward all those who have guided me through

the completion of this internship.

I convey thanks to my project guide Mr. Yash B. Naik, Computer Science & Engineering

department, R.N.G. Patel Institute of Technology for providing encouragement, constant

support, and guidance which was of great help to complete this internship work

successfully.

I am grateful to my external guide Mr. Pratik Shah, Project Manager at Narola Infotech

Solutions LLP, Surat for giving me the support and encouragement that was necessary for

the completion of this internship.

I am grateful to Dr. Madhavi Desai, Head of the Department, Computer Science &

Engineering Department, R.N.G.P.I.T for giving us the support and encouragement that

was necessary for the completion of this internship.

I would also like to express my gratitude to Dr. Latesh Chaudhari, Principal of R. N. G.

Patel Institute of Technology for providing us with a congenial environment to work in.

I would also like to thank the Placement Cell of the department for giving me an opportunity

to be a part of this internship. I extend my gratitude to all the faculty members for their

understanding and guidance that gave me the strength to work long hours for developing a

project and preparing the report.

Vedant Darji (190840131014)

i
 ABSTRACT

During my Internship, I acquired a lot of technical and non-technical skills. I

learned about how technology is useful in real life. I got a chance to clear
foundational concepts and upgrade my knowledge in the field of RDBMS such
as database design, database mapping, and normalization. I also got tasks to
design databases for systems that are used daily. After this training, I got
training to learn about Core JavaScript, API-related basic knowledge. After
clearing the concepts on JS, I was assigned to learn and explore one of the
popular Frontend Library i.e., React JS. I was able to learn many things in
this such as form handling, managing states, dynamically rendering
components, and creating single-page web applications. In React JS, I was
given a hands-on task to make a responsive portfolio website and google keep
clone. Both tasks were to test my knowledge. In Google Keep Clone, I needed
to restrict the homepage to only logged-in Users. To add to the project, I
needed to implement search functionality in the project apart from basic read,
write, update, and delete operations for a note. I needed to implement a feature
of edit profile also. I was also asked to minimize the API Calls. The data in
this project are stored in JSON file.

ii
 List of Figures
Fig 1.1 Organisation Chart ............................................................................................ 2
Fig 2.1 Agile Methodology............................................................................................ 5
Fig. 3.1 Internship Timeline Chart .............................................................................. 11
Fig. 5.1 Use Case Diagram for the Google Keep Clone.............................................. 16
Fig. 5.2 User Data in JSON ......................................................................................... 17
Fig. 5.3 Note Data in JSON ......................................................................................... 17
Fig. 5.4 Flow Chart for Google Keep Clone ............................................................... 18
Fig. 6.1 Database Design for Fashion Point ................................................................ 20
Fig. 6.2 Database Mapping for Fashion Point ............................................................. 21
Fig. 6.3 Logic Flow for Rest Password ....................................................................... 21
Fig. 6.4 Query to Fetch Employee Records ................................................................. 22
Fig. 6.5 Stored Procedure Query ................................................................................. 23
Fig. 6.6 Stored Procedure Output ................................................................................ 23
Fig. 6.7 JS Task 1 Initial Rendering ............................................................................ 24
Fig. 6.8 JS Task 1 After Button Click ......................................................................... 24
Fig. 6.9 React Greeting Web Page .............................................................................. 25
Fig. 6.10 React Weather App ...................................................................................... 25
Fig. 6.11 React To-Do List Initial State ...................................................................... 26
Fig. 6.12 React To-Do List Adding Task .................................................................... 26
Fig. 6.13 React To-Do List Editing Task .................................................................... 26
Fig. 6.14 React To-Do List Deleting Task .................................................................. 27
Fig. 6.15 React To-Do List After Deletion .................................................................. 27
Fig. 6.16 Initial Student Registration Form ................................................................. 28
Fig. 6.17 Filled Student Registration Form ................................................................. 28
Fig. 6.18 Output of Student Registration Form ........................................................... 28
Fig. 6.19 User Registration Page ................................................................................. 29
Fig. 6.20 User Login Page ........................................................................................... 30
Fig. 6.21 Home Page ................................................................................................... 30
Fig. 6.22 Search Results .............................................................................................. 31
Fig. 6.23 Adding Note ................................................................................................. 31
Fig. 6.24 Note Section ................................................................................................. 32
Fig. 6.25 Before Edit Note........................................................................................... 32

iii
Fig. 6.26 Title Prompt.................................................................................................. 33
Fig. 6.27 Content Prompt ............................................................................................ 33
Fig. 6.28 Edited Note ................................................................................................... 33
Fig. 6.29 Before Delete Note ....................................................................................... 33
Fig. 6.30 Delete Confirmation ..................................................................................... 34
Fig. 6.31 After Delete Note ......................................................................................... 34
Fig. 6.32 Edit Profile Page........................................................................................... 34
Fig. 6.33 Edit Password Field ...................................................................................... 35
Fig. 6.34 Update Confirmation Alert........................................................................... 35
Fig. 6.35 Log-out Confirmation Alert ......................................................................... 35

iv
 List of Tables

Table 3.1 Cost Estimation of Internship ...................................................................... 10

Table 4.1 Software and Libraries Used ....................................................................... 14
Table 5.1 User Data Format ........................................................................................ 16
Table 5.2 Note Data Format ........................................................................................ 17
Table 7.1 Sign Up Test Cases ...................................................................................... 36
Table 7.2 Login Test Cases ......................................................................................... 36
Table 7.3 Note Test Cases ........................................................................................... 37

v
 Abbreviations

RDBMS Relational Database Management System

SQL Structured Query Language
XAMPP Cross-Platform Apache MySQL PHP and Perl
API Application Programming Interface
JS JavaScript

JSON JavaScript Object Notation

i.e., that is
HTML Hypertext Markup Language
CSS Cascading Style Sheets
UI User-Interface
SASS Syntactically Awesome Stylesheet

vi
 Table of Contents
Acknowledgment ............................................................................................................ i
Abstract .......................................................................................................................... ii
List of Figures ............................................................................................................... iii
List of Tables ................................................................................................................. v
List of Abbreviations .................................................................................................... vi
Table of Contents ......................................................................................................... vii
Chapter 1 Overview of the Company ........................................................................ 1
1.1 History.................................................................................................................. 1
1.2 Services Offered ................................................................................................... 2
1.3 Organisation Chart ............................................................................................... 2
1.4 Capacity of Organisation ..................................................................................... 2
Chapter 2 Overview of Different Departments of Organisation ............................. 3
2.1 Departments Overview ........................................................................................ 3
2.1.1 Technical Department ................................................................................... 3
2.1.2 Marketing Department .................................................................................. 3
2.1.3 HR Department ............................................................................................. 4
2.1.4 Management .................................................................................................. 4
2.2 Technical Specification of Systems Used ............................................................ 4
2.3 Development Process ........................................................................................... 4
2.4 Details about each stage of Development ............................................................ 5
Chapter 3 Introduction to Internship ........................................................................ 7
3.1 Internship Summary ............................................................................................. 7
3.2 Purpose ................................................................................................................. 7
3.3 Objective .............................................................................................................. 7
3.4 Scope .................................................................................................................... 8
3.5 Technology .......................................................................................................... 8
3.6 Internship Planning .............................................................................................. 9
3.6.1 Internship Approach.................................................................................... 9
3.6.2 Internship Effort and Time, Cost Estimation ............................................ 10
3.6.3 Roles and Responsibilities ........................................................................ 10
3.6.4 Group Dependencies ................................................................................. 11
3.7 Internship Scheduling ........................................................................................ 11
Chapter 4 System Analysis ............................................................................................ 12

vii
 4.1 Study of Current System .................................................................................... 12
4.2 Problem and Weakness of the Current System .................................................. 12
4.3 Requirements of New System ............................................................................ 12
4.4 System Feasibility .............................................................................................. 12
4.5 Activities of New System .................................................................................. 12
4.6 Features of New System .................................................................................... 13
4.7 List of Reach Components ................................................................................. 13
4.8 Hardware and Software Requirements .............................................................. 14
Chapter 5 System Design .......................................................................................... 15
5.1 System Design and Methodology ...................................................................... 15
5.2 Database Design ................................................................................................. 16
5.2.1 User ........................................................................................................... 16
5.2.2 Notes ......................................................................................................... 17
5.3 System Flow Diagram ........................................................................................ 18
Chapter 6 Implementation ........................................................................................ 19
6.1 Implementation Platform ................................................................................... 19
6.1.1 React.......................................................................................................... 19
6.1.2 JSON Server .............................................................................................. 19
6.2 Process Specification ......................................................................................... 19
6.3 Result ................................................................................................................. 20
6.3.1 RDBMS Tasks .......................................................................................... 20
6.3.2 Core JavaScript Tasks ............................................................................... 24
6.3.3 React JS Tasks .......................................................................................... 25
6.3.4 Google Keep Clone Project....................................................................... 29
6.4 Result Analysis .................................................................................................. 35
Chapter 7 Testing ...................................................................................................... 36
7.1 Test Plan............................................................................................................. 36
7.2 Test Results and Analysis .................................................................................. 36
7.2.1 Test Case for Sign Up ............................................................................... 36
7.2.2 Test Case for Login ................................................................................... 36
7.2.3 Test Case for Note..................................................................................... 37
Chapter 8 Conclusion and Discussions .................................................................... 38
8.1 Overall Analysis of Internship ........................................................................... 38
8.2 Date of Surprise Visit by Institute Mentor ......................................................... 38

viii
 8.3 Dates of Continuous Evaluation ........................................................................ 38
8.4 Problems Encountered and Possible Solutions .................................................. 38
8.4.1 Restrict the Access .................................................................................... 38
8.4.2 Reducing API Call and Handling Failures and Rendering ....................... 38
8.5 Summary of Internship....................................................................................... 39
8.6 Limitations and Future Enhancements ............................................................... 39
8.6.1 Limitations ................................................................................................ 39
8.6.2 Future Enhancements ................................................................................ 39
References ....................................................................................................................... 41

ix
287446 Overview of the Company

CHAPTER 1: OVERVIEW OF THE COMPANY

Company Name: Narola Infotech Solutions LLP, Surat

1.1 HISTORY

Narola Infotech Solutions LLP is a global IT solution provider company in India with
17+ years of competitive business experience in niche industries. It offers custom web
and mobile app design and development, backend development, enterprise services,
and CMS website development. Narola Infotech also has experienced professionals for
native iOS, and Android mobile applications & cross-platform technologies such as
Flutter and React Native. Narola Infotech Solutions LLP provides end-to-end support
for all our projects.

Vision
To empower our customers to achieve their goals by providing reliable and quality
solutions with technology and innovation.

Mission
To help entrepreneurs and creative thinkers convert their ideas into reality through the
power of emotional intelligence by providing world-class facilities to our team.
To deliver world-class products and services at competitive rates.

Technologies & Platforms Narola Infotech Solutions LLP Works With:

• Front End: Angular, React, Vue, Next, Nuxt JS
• Back End: Node JS, Java, Dot Net, PHP, Laravel, CodeIgniter, Rails, Nest
• Mobile: Android, iOS, React Native, Flutter
• CMS: WordPress, CodeIgniter
• Database: MySQL, MS-SQL, MongoDB, SQLite, PostgreSQL, Firebase,
Realm
• DevOps and Cloud: Terraform, CI-CD, AWS, Jenkins, Kubernetes, Docker
• Project Management: Microsoft Teams, Jira, Asana, Slack, Click-Up, Trello,
Monday Dotcom, Pivotal

Gujarat Technological University 1 RNGPIT, Bardoli

287446 Overview of the Company

1.2 SERVICES OFFERED

• Custom Software Development

• Web Application Development
• Mobile App Development
• Support and Maintenance
• QA & Testing
• AI ML
• Cloud
• DevOps
• Staff Augmentation

1.3 ORGANISATION CHART

Fig. 1.1 Organisation Chart

1.4 CAPACITY OF ORGANISATION:

Narola Infotech Solutions LLP has a team of more than 350 talented IT Professionals.

Gujarat Technological University 2 RNGPIT, Bardoli

 287446 Overview of Different department of the Organization

CHAPTER 2 OVERVIEW OF DIFFERENT DEPARTMENT

OF THE ORGANIZATION

Narola Infotech is one of the leading outsourcing companies for web development. The
company helps potential clients to add significant value to their online presence. The
company plays a critical role in Promoting brand, business, and bottom-line expectations
from online assets.

The company serves these key market needs on Websites, E-commerce Stores, Web
Applications, and Mobile Applications.

2.1 DEPARTMENTS OVERVIEW

There are several departments of an organization which are as follows:

• Technical Department
• Marketing Department
• HR Department
• Management

2.1.1 Technical Department:

Each and every organization have a technical team that can design, develop,
and test a product. Technical Department also has a special team for support
which is responsible to solve technical problems in any organization.

Technical Teams Do:

o Product Design
o Website & App Development
o Maintenance and Testing of Product
o Technical Support
2.1.2 Marketing Department:
The marketing department is responsible for identifying, anticipating and
satisfying customer needs. The end goal is to make more profit. The marketing
the department is at the forefront as it interacts directly with the customers and
determines the success or failure of the company in generating revenue.

Gujarat Technological University 3 RNGPIT, Bardoli

287446 Overview of Different department of the Organization

Narola Infotech has four departments under this section that are Business
Analyst, Digital Marketing, Direct Marketing & Sales Department.

2.1.3 HR Department:
An HR department is tasked with maximizing employee productivity and
protecting the company from any issues that may arise within the workforce. HR
responsibilities include compensation and benefits, recruitment, firing, and
keeping up to date with any laws that may affect the company and its employees.

2.1.4 Management:

This team is considered as apex team of the organization. The team consists of
all founders, co-founders, and CEO, CTO of the company. This team is
responsible for taking all the decisions regarding the company.

2.2 TECHNICAL SPECIFICATIONS OF SYSTEMS USED IN EACH

DEPARTMENT

Narola Infotech uses two Operating Systems that are Windows OS & Mac OS. Trainees
are allocated Mac OS.

Specification of Assigned System:

Operating System: macOS Monterey (Version 12.6.1)

Processor: 3.1 GHz Dual-Core Intel Core i3

Memory: 8 GB 1333 MHz DDR3

2.3 DEVELOPMENT PROCESS:

The company’s methodology aims to deliver the right product, with incremental and
frequent delivery of small chunks of functionality, through small cross-functional self-
organizing teams, enabling frequent customer feedback and course correction as
needed. Requirements, plans, and results are evaluated continuously so our agile teams
have a natural mechanism for responding to change quickly.

Gujarat Technological University 4 RNGPIT, Bardoli

287446 Overview of Different department of the Organization

Fig. 2.1 Agile Methodology

2.4 DETAILS ABOUT EACH STAGE OF DEVELOPMENT

The details of each phase are:

• Brainstorm: During the brainstorming phase, the product owner determines the
scope of the project, prioritizes important projects if necessary, discusses key
requirements with the client, and prepares documentation outlining supported
features and proposed end results.
• Design: The design team puts their best effort into creating an impeccably designed
visual diaphragm for the software product based on client discussions and
expectations, as the visual appeal plays a major role in its success alongside
seamless functionalities.
• Development: During the development phase, the software solution/app idea is
executed by the developers who create a feature-rich product using their skills and
expertise, leveraging all necessary resources to ensure perfection, based on the
finalised design and agreed tech stack.
• Quality Assurance: Quality analyst team conducts both manual and automated
tests to ensure flawless software.

Gujarat Technological University 5 RNGPIT, Bardoli

287446 Overview of Different department of the Organization

• Deployment: A proper deployment plan is created to launch and maintain software

after passing quality checks.
• Deliver to Client: The software product is handed over to concerned parties as per
deployment plan.
• Next Iteration: Post-development, the software undergoes updates and
maintenance to accomplish business goals.

Gujarat Technological University 6 RNGPIT, Bardoli

 287446 Introduction to Internship

CHAPTER 3 INTRODUCTION TO INTERNSHIP

The internship program is designed to provide the students to engage in a field experience
with an opportunity to share their insights, explore the links between students' academic
preparation and their field work, and assist participants in developing and carrying out the
major research project which will serve to culminate their internship experience.

3.1 INTERNSHIP SUMMARY:

I joined Narola Infotech Solutions LLP on 01-02-2023. During the Internship, I was
able to explore various fields and aspects of web development, especially frontend
development. I got foundational training on RDBMS, where I got the opportunity to
learn database design for various systems, Queries, Join, and Stored Procedure. I got
to explore the JavaScript Core Concepts and the most popular library i.e., React JS. I
was also assigned tasks to create single-page applications like portfolio websites and
Google Keep Clone. I also got to explore various other libraries like material UI,
Bootstrap, AXIOS, SASS, Toastify, Formik, and Yup.

3.2 PURPOSE:

The primary goal of the internship is to provide an opportunity to work in an esteemed

organization and gain practical experience in terms of understanding how an
organization operates the different roles and responsibilities of employees, and the
work culture. Internship helps to acquire non-technical skills like communication, and
networking. During the Internship, I was supposed to develop technical skills in
website development which can be achieved through exposure to new technologies,
tools, and software used in the industry. Finally, the ultimate goal of an internship is to
apply the knowledge and expertise gained during the internship to real-world projects
and develop the confidence needed to work in teams for various projects.

3.3 OBJECTIVE:

o Develop soft skills such as communication, teamwork, time management, and

problem-solving
o Gain hands-on experience through practical work.
o Receive guidance and mentoring from experienced professionals.

Gujarat Technological University 7 RNGPIT, Bardoli

287446 Introduction to Internship

o Make meaningful contributions to the company's IT operations.

3.4 SCOPE:

o An internship provides a platform to gain practical experience and develop

technical skills.
o Get connected and develop your professional network.
o Prepare for a successful career in the interested domain.

3.5 TECHNOLOGY:

During the internship, I have learned all the following mentioned technologies. This
has been done in some or another way during the tasks assigned to me. To get familiar
with them, I have gone through various documentation and videos of the same and
implemented those.

Technologies:

➢ RBDMS: A relational database is a type of database that stores and provides access
to data points that are related to one another. Relational databases are based on the
relational model, an intuitive, straightforward way of representing data in tables. [1]
➢ XAMPP Server: It is an open-source package of web solutions that includes Apache
distribution for many servers and command-line executables along with modules such
as Apache server, MariaDB, PHP, and Perl. XAMPP helps a local host or server to test
its website and clients via computers and laptops before releasing it to the main server.
[2]
➢ HTML: HTML is the most basic building block of the Web. It defines the meaning
and structure of web content. Other technologies besides HTML are generally used to
describe a web page's appearance/presentation (CSS) or functionality/behavior
(JavaScript). [3]
➢ CSS: CSS is a stylesheet language used to describe the presentation of a document
written in HTML or XML. It describes how elements should be rendered on screen, on
paper, in speech, or on other media. [4]
➢ SASS: Sass is a stylesheet language that’s compiled into CSS. It allows you to use
variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible
syntax. Sass helps keep large stylesheets well-organized and makes it easy to share
designs within and across projects. [5]

Gujarat Technological University 8 RNGPIT, Bardoli

287446 Introduction to Internship

➢ JavaScript: JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled

programming language with first-class functions. It adds interactive behavior to the
website. [6]
➢ JSON: JSON is a lightweight data-interchange format. It is easy for humans to read
and write. It is easy for machines to parse and generate. It has two structures, name/
value pair and an ordered list of values. [7]
➢ React JS: React is a JavaScript library for building user interfaces. React is used to
build single-page applications. React allows us to create reusable UI components. [8]
➢ Axios: Axios is a promise-based HTTP Client for node.js and the browser. It is
isomorphic (it can run in the browser and NodeJS with the same codebase). [9]
➢ Bootstrap: Bootstrap 5 is the newest version of Bootstrap, which is the most
popular HTML, CSS, and JavaScript framework for creating responsive, mobile-first
websites. Bootstrap 5 is completely free to download and use! [10]
➢ Material UI: Material UI is an open-source React component library that
implements Google's Material Design. It includes a comprehensive collection of
prebuilt components that are ready for use in production right out of the box. [11]

3.6 INTERNSHIP PLANNING:

The entire internship was planned by the company. On the first day, they gave a basic
introduction to the company and guidelines about procedures followed in the company.
After that, we were allocated our desks. With each phase of training, they
communicated goals and learning objectives. An expert trainer was assigned in each
phase for our task review.

3.6.1 Internship Approach:

The entire internship carried out was a learning approach. It was divided into
three phases where phase 1 training was taken by the Director of Operations &
other phases of training were taken by Project Manager.

• Phase 1: Introduction & Foundational Training

• Phase 2: Training on Core JavaScript
• Phase 3: React JS Training & Project Work

Gujarat Technological University 9 RNGPIT, Bardoli

287446 Introduction to Internship

3.6.2 Internship Effort and Time, Cost Estimation:

Internship Efforts:

• I have set clear goals for this.

• I was able to make new connections in the company.
• I tried to explore more topics covered during training.
• Sought out growth opportunities.

Internship Time:

• Duration of the internship was three months.

• Staring Date: 01/02/2023
• Ending Date: 29/04/2023

Cost Estimation:

To Complete this internship, 12 weeks of Time and Weekly approximately 40-

48 hours of time was devoted. The cost estimation of the training is as follows:

Table 3.1 Cost Estimation of Internship

Trainer Cost Rs 7,000 /-

Infrastructure Charges Rs 4000/-
Facility Cost Rs 1000/-
Overall Cost: Rs 12,000/-

3.6.3 Roles and Responsibilities:

Role Offered:

Trainee Software Engineer in Frontend JS

Responsibilities:

• Learn the technology and report to Project Manager.

• Test understanding by performing various tasks/ mini projects.

Gujarat Technological University 10 RNGPIT, Bardoli

287446 Introduction to Internship

3.6.4 Group Dependencies:

The entire internship tasks were assigned based on learning speed and tasks were
allocated by the trainer on an individual basis. Hence, there were no Group
dependencies and work was carried out by myself only.

3.7 INTERNSHIP SCHEDULING:

Fig. 3.1 Internship Timeline Chart

Gujarat Technological University 11 RNGPIT, Bardoli

287446 System Analysis

CHAPTER 4 SYSTEM ANALYSIS

4.1 STUDY OF CURRENT SYSTEM:

Google Keep is a popular note-taking application developed by Google that allows

users to create and store notes, lists, images, and reminders. Users can organize their
notes by color, tag, or label, set reminders for notes based on time or location, share
notes with others, create voice notes that are transcribed into text, search for notes
using keywords, integrate with other Google products, and access it from any device
with an internet connection.

4.2 PROBLEM AND WEAKNESSES OF THE CURRENT SYSTEM

Currently, Google Keep is available to only users having a Google account. To use this
service user either needs to create an account or needs to log in to use this service.

4.3 REQUIREMENTS OF NEW SYSTEM

The new system is built for note taking which is similar to Google Keep. It allows only
logged-in users to create, read, update, delete, and search for a note. The main
requirement was to develop a user-friendly and responsive interface, also providing
security, authentication, profile management, note management, and search
functionality.

4.4 SYSTEM FEASIBILITY:

• The system contributes to the overall objectives of the organization.

• The system can be implemented using the current technology and within the given
constraints.
• The system is designed flexible, and can easily adopt new functionalities and
features after deployment.

4.5 ACTIVITIES OF NEW SYSTEM:

The new system provides users with the ability to manage their profiles which includes
registration, login, and editing their profiles. Users can also create, read, update, and

Gujarat Technological University 12 RNGPIT, Bardoli

287446 System Analysis

delete their notes within the note management system. Additionally, users can search
for notes using keywords from the header section, which includes matching titles or
content from their notes.

4.6 FEATURES OF NEW SYSTEM:

• In this system, there is a registration page, which has all fields required validation,
also it searches for email id in the database, if email exists then it will show error,
else user will be registered.
• The system allows to enter notes without content, the constraint in note is that title
can never be empty. If user doesn’t enter title, then title will be suggested as first
line of content.
• The system also restricts the homepage and other pages to logged in users, that is
system will be accessible only after successful log in.

4.7 LIST OF REACT COMPONENTS:

Each task can be broken into smaller pieces or components. A Page can have many
Components. Following are a list of Components:

• Header: It displays the Header with Logo & Title. After Login, it includes a search
bar & user avatar also.
• Sign Up: It facilitates users to sign up for the system with basic details like name,
phone, email, and password.
• Login: It allows users to login into the system & perform CRUD Operations on
their Notes.
• HomePage: On this Page, all the notes of the user are shown, after login.
Note that HomePage & all functionalities are restricted to only logged-in users.
• New Note: It is used, to create a new note. A title is required while creating a new
note.
• Note: It is a component that contains the code to render a note. It is called repeatedly
to display all notes for the user.
• Search: Through this user can search for a note & perform various operations after
searching. Search is based on the title & the content in a note.
• Edit Profile: Users would be able to update their profile through this module.

Gujarat Technological University 13 RNGPIT, Bardoli

287446 System Analysis

• Footer: It contains Copyright information with the hostname.

4.8 HARDWARE AND SOFTWARE REQUIREMENTS:

• Hardware: The system is developed in company provided system i.e. in Mac OS.
• Software and Libraries Used:
Table 4.1 Software and Libraries Used
Name Used for
Visual Studio Code Development
JSON Server create a Fake RESTful API with a
JSON file to store data
npm JavaScript Package manager for
various dependencies
React Router Dom For Navigation between pages
Bootstrap and Material UI For attractive UI

Gujarat Technological University 14 RNGPIT, Bardoli

287446 System Design

CHAPTER 5 SYSTEM DESIGN

5.1 SYSTEM DESIGN AND METHODOLOGY:

Structure of google keep clone task:

• Before Login:
o User can register
o User can Login
• After Login:
o Header Section:
▪ Search for a note
▪ Update user profile
▪ Logout
o Main Note Section:
▪ Create a Note i.e., Add a Note
▪ View all Notes
▪ Edit a Note i.e., Update a Note
▪ Delete a Note

Gujarat Technological University 15 RNGPIT, Bardoli

287446 System Design

Use Case Diagram for The System:

Fig. 5.1 Use Case Diagram for the Google Keep Clone

5.2 DATABASE DESIGN:

Since there is no database, the data is stored in JSON File called “NoteData.json”.
Through JSON Server fake Restful API Data is sent and receive in this File.

The database has 2 arrays of Objects:

5.2.1 User:
Each object in this array of objects consists of 5 attributes that are as follows.
Table 5.1 User Data Format
Attribute Remarks
name Use to store user’s name
email Use to store user’s email
phone It stores user’s Phone Number

Gujarat Technological University 16 RNGPIT, Bardoli

287446 System Design

Pwd It stores user’s Password.

Id It is unique identity for every user. It’s format is
“<<First two letters of Name>><<Last 5 digits of
current TimeStamp>>”.

Fig. 5.2 User Data in JSON

5.2.2 Notes:
Each element of notes consists of four attributes.
Table 5.2 Note Data Format
Attribute Remarks
u_id User Id of the User whose note it belongs to
id It is unique id for each note, with value of timestamp
converted to string.
title It stores title of that note.
Content It stores content of the note.

Fig. 5.3 Note Data in JSON

Gujarat Technological University 17 RNGPIT, Bardoli

287446 System Design

5.3 SYSTEM FLOW DIAGRAM:

Fig. 5.4 Flow Chart for Google Keep Clone

Gujarat Technological University 18 RNGPIT, Bardoli

287446 Implementation

CHAPTER 6 IMPLEMENTATION

6.1 IMPLEMENTATION PLATFORM:

6.1.1 React:

React is a free and open-source front-end JavaScript library for building user
interfaces based on components. It is used to develop single-page, mobile, or
server-rendered applications with frameworks like Next.js. Because React is
only concerned with the user interface and rendering components to the DOM,
React applications often rely on libraries for routing and other client-side
functionality.

React code is made of entities called components. These components are

modular and reusable. React applications typically consist of many layers of
components. The components are rendered to a root element in the DOM using
the React DOM library. When rendering a component, values are passed between
components through props (short for "properties"). Values internal to a
component are called its state. The two primary ways of declaring components
in React are function components and class components. [14]

6.1.2 JSON Server:

JSON Server is a lightweight server that allows you to quickly create a REST
API with JSON data. It can be useful for prototyping, testing, and mocking API
endpoints without having to set up a full backend server.

JSON Server is easy to use and requires minimal configuration. You simply
define your data as a JSON file, and JSON Server will create a fully functional
REST API based on that data. You can then use HTTP requests to interact with
the API and retrieve, create, update, and delete data. [15]

6.2 PROCESS SPECIFICATION:

• User Initially Registers, in the system. If user email exists in database, it alerts Error
Message, else a unique id is generated and then this details are stored in database.

Gujarat Technological University 19 RNGPIT, Bardoli

 287446 Implementation

• After Registration, the user redirects to Login Page where the user logins with his
credentials. If the credentials are correct, a session storage is created with a user
name and user Id.
• If session storage exists, the user is allowed to access the home page.
• Through the Home Page, the user can search, read, create, edit, and delete a note.
User can also update their profile and can log out. During log-out, session storage
is cleared.
• Every operation is first performed on Client Side, its results are stored in local
storage and later API Call is made.

6.3 RESULT:

6.3.1 RDBMS Tasks:

Task 1: To design a database for an application similar to Flipkart named “Fashion Point”

Output:

Fig. 6.1 Database Design for Fashion Point

Gujarat Technological University 20 RNGPIT, Bardoli

 287446 Implementation

Task 2: To perform database mapping for an application similar to Flipkart named “Fashion
Point”

Output:

Fig. 6.2 Database Mapping for Fashion Point

Task 3: To write flow and pseudo-code for a password reset for restaurant management
system.

Solution:

Fig. 6.3 Logic Flow for Reset Password

Task 4: Write a query to display the employees with their code, first name, last name and
hire date who hired either on seventh day of any month or seventh month in any year.

Gujarat Technological University 21 RNGPIT, Bardoli

 287446 Implementation

Query:

SELECT EMPLOYEE_ID,
FIRST_NAME,
LAST_NAME,
HIRE_DATE
FROM hrdemo.employees
WHERE MONTH(HIRE_DATE)=7 OR DAYOFMONTH(HIRE_DATE)=7
Output:

Fig. 6.4 Query to Fetch Employee Records

Task 5: For “myactivity” functionality we have “user_activity” table. In this table we have
records for different types of activities performed by the user. To maintain the activities in
this table, we have to call a stored procedure named as : “LOG_USER_ACTIVITY” from
all the places where activity should be logged.

Query:

Gujarat Technological University 22 RNGPIT, Bardoli

287446 Implementation

Fig. 6.5 Stored Procedure Query

Output:

Fig. 6.6 Stored Procedure Output

Gujarat Technological University 23 RNGPIT, Bardoli

 287446 Implementation

6.3.2 Core JavaScript Tasks:

JS Task 1: Change the HTML Button Style & Toggle its Style On Click Using JS

Output:

i) Before

Fig. 6.7 JS Task 1 Initial Rendering

ii) After Button Click:

Fig. 6.8 JS Task 1 After Button Click

Gujarat Technological University 24 RNGPIT, Bardoli

 287446 Implementation

6.3.3 React JS Tasks:

Task 1: Greet the user based on current Local Time

Used Concepts: Date Time Function and Conditional Rendering.

Output:

Fig. 6.9 React Greeting Web Page

Task 2: Weather App, Where Data is fetched from weather API.

Used Concepts: API, Input handling (use State and use Effect Hook)

Output:

Fig. 6.10 React Weather App

Gujarat Technological University 25 RNGPIT, Bardoli

 287446 Implementation

Task 3: To Do List

Used Concept: useState and useEffect Hook

Functionality: User can add, edit, delete task from to do list.

Output:

Initial State:

Fig. 6.11 React To-Do List Initial State

i) Adding Task

Fig. 6.12 React To-Do List Adding Task

ii) Editing Task:

Fig. 6.13 React To-Do List Editing Task

Gujarat Technological University 26 RNGPIT, Bardoli

 287446 Implementation

iii) Deleting Task

Fig. 6.14 React To-Do List Deleting Task

After Deletion:

Fig. 6.15 React To-Do List After Deletion

Task 4: Student Registration Form

Concepts Used: Formik and Yup, useState and useEffect Hook, Routing Concepts

Functionalities: Seek the input of previous academic records for students i.e., take
standard, remarks, and percentage of classes less thanthe current standard.

Output:

Initial Render:

Gujarat Technological University 27 RNGPIT, Bardoli

 287446 Implementation

Fig. 6.16 Initial Student Registration Form

Suppose user selects current standard as 5th, then user will be asked to enter all academic
records till class 4th, after that only submit button will be enabled.

Fig. 6.17 Filled Student Registration Form

On Clicking Submit Button, user will be redirected to another page using routing concepts,
where entire details will be displayed.

Fig. 6.18 Student Registration Form Output

Gujarat Technological University 28 RNGPIT, Bardoli

287446 Implementation

6.3.4 Google Keep Clone Project:

➢ Registration:

Fig. 6.19 User Registration Page

• User can perform Sign Up by Providing Basic Details.

• On Submit, a unique User ID will be generated for Format
“<<First two letters of Name>><<Last 5 digits of current TimeStamp>>”.
• Then, System will check for the email, if the email exists then display an error.
Else update in the JSON File. On Success, navigate to the login Screen.
• On Registration, Session Storage is created with all User Details. While
Redirecting to Login Page with the help of Session Storage, the Email ID is pre-
filled for a Better User Experience.

Gujarat Technological University 29 RNGPIT, Bardoli

287446 Implementation

➢ Login:

Fig. 6.20 User Login Page

• User enters Email & Password. On Submit, the Filter method is used to fetch
the data from User Object in JSON File.
• If the email is found, the password is validated. If the password Matches, User
is navigated to the home page & Session Storage is Created.
• Else, Accordingly Error is Alerted.

➢ Home Page:

Fig. 6.21 Home Page

Gujarat Technological University 30 RNGPIT, Bardoli

287446 Implementation

• It is Page where all notes of the user are displayed & user can perform various
task like adding note, searching for note, deleting a note, editing a note from
this page.
➢ Search Bar:

Fig. 6.22 Search Results

• It is found in the header section of the HomePage.

• User Will be able to search for a note, by writing the keyword in the search field.
• The keyword is searched in the note title as well as note content, wherever it is
matched, it will return the result.
• For Example, If User Searches for ‘i’ following results will be displayed.

➢ Add Note:

Fig. 6.23 Adding Note

• User Will be able to add Note by entering title & Content in Note.
• To save Note user need to click on “+” Button.
• On Button Click, Note will be added in JSON File & Then the Note Section on
the Page Would be re rendered.

Gujarat Technological University 31 RNGPIT, Bardoli

287446 Implementation

➢ Note Section:

Fig. 6.24 Note Section

• Note Section will be rendered for the number of objects / Notes present in Local
Storage.
• The Note Component is called using Map Function. So for every element (i.e.
Object) of Item in Local Storage, this Component will be called.
• So this Results in the Dynamically rendering of elements.

➢ Edit Note:
• With this Functionality, the User Can Edit a Note.
• On Clicking the Icon, two Prompts are displayed, One for Title & One for
Content.
• The value given in prompt is stored in new object. This Object is passed to API
Call using “PUT” Method.
• So this replaces existing object with New Object in JSON File for that id.

Before Edit:

Fig. 6.25 Before Edit Note

• When User Clicks on Edit Icon in Note.
• First, A Prefilled prompt appears with value as current title, if user wants to
update Title. Lets change title to “New Title”.

Gujarat Technological University 32 RNGPIT, Bardoli

287446 Implementation

Fig. 6.26 Title Prompt

• On Changing It User, will get another prompt to enter the new content of the
note if user wants to change content. Lets change content to “New Content”.

Fig. 6.27 Content Prompt

• On Submitting, it the Data. The existing data in JSON File will be replaced with
New Data Object & again page will re -render.
• In image below, it can be seen that content & title is updated whose values were
given through Prompt.

Fig. 6.28 Edited Note

➢ Delete Note:
• With this Functionality, User Can Delete a Note.
• On Clicking Delete Icon, Id of that Note is Passed & in JSON file with the help
of delete Method API Call, The Object in JSON File Gets Deleted.

Fig. 6.29 Before Delete Note

Gujarat Technological University 33 RNGPIT, Bardoli

287446 Implementation

• On Clicking the delete Icon, a confirmation Box will be displayed as shown

below.

Fig. 6.30 Delete Confirmation

• After confirming, the page re-renders with updated notes, and output would be
as shown below.

Fig. 6.31 After Delete Note

➢ Edit Profile:
• From Header Section, user can navigate to Edit Profile Option.
• On Clicking this option, User will be redirected to Edit Profile page.
• The page would look similar to as displayed below.

Fig. 6.32 Edit Profile Page

• If user updates their password, they would be asked for confirm password for
the validation as seen in figure below.

Gujarat Technological University 34 RNGPIT, Bardoli

287446 Implementation

Fig. 6.33 Edit Password Field

• Once user has made changes and click on save Profile, on successful, an alert
would be displayed stating “Details Updated Successfully”.

Fig. 6.34 Update Confirmation Alert

➢ Logout:
• It can be found in the header section’s avatar menu.
• On Clicking on Logout, an Alert will be displayed with the message “Logged
out successful” and on Click of Alert, the page will be redirected to the Login
Page and Session Storage will be cleared.

Fig. 6.35 Log-out Confirmation alert

6.4 RESULT ANALYSIS:

The project can provide an easy and convenient way for users to manage their notes
and tasks, which can help increase their productivity. Additionally, the ability to
customize user profiles as and when they want can help users feel more invested in
the application and create a sense of ownership. The security features implemented
in the project can ensure that user data is protected, and restricted to the user itself
which in turn creates a safe and trustworthy environment for users. Overall, the
Google Keep clone project can result in improved user experience, increased
productivity, and a sense of security and ownership for users. While there is scope of
improvement by implementing concepts of encrypting data in every phase, but the
application at its current version provides a strong foundational base for future
development and enhancements.

Gujarat Technological University 35 RNGPIT, Bardoli

287446 Testing

CHAPTER 7 TESTING

7.1 TEST PLAN:

As a Developer, it is very crucial to check the system from the end user’s point of view
and validate inputs. Through this activity, we can generate a set of test data to test the
new system before accepting it. During this test generation phase, all parts and end
cases are considered to ensure the system does not produce any errors. If there are
errors, we remove them and then test them again until a bug-free system is found.

7.2 TEST RESULTS AND ANALYSIS:

Various parts of the system are tested which are as mentioned below.

7.2.1 Test Case for Sign Up:

In this case Sign Up form is validated and tested.

Table 7.1 Sign Up Test Cases

7.2.2 Test Case for Login:

Here various scenarios for login page are considered and tested.

Table 7.2 Login Test Cases

Gujarat Technological University 36 RNGPIT, Bardoli

287446 Testing

7.2.3 Test Case for Note:

In this various test have been performed on note operations based on User’s
Perspective.

Table 7.3 Note Test Cases

Gujarat Technological University 37 RNGPIT, Bardoli

287446 Conclusion and Discussions

CHAPTER 8 CONCLUSION AND DISCUSSIONS

8.1 OVERALL ANALYSIS OF INTERNSHIP

As my company is a professional services network in India, I felt that an internship at

my company was a great platform for me to gain deeper insights into the Software
Development Industry, particularly in the field of Website Development. The company
has two offices in India, so this helped me to gain and know about diverse cultures and
interact with new professionals. The company provides career development
programmes which I believe helped me with numerous learning opportunities.

8.2 DATE OF SURPRISE VISIT BY INSTITUTE MENTOR:

Visit 1: 27-03-2023

Visit 2: 05-05-2023

8.3 DATES OF CONTINUOUS EVALUATION (CE-I AND CE-II):

Continuous Evaluation 1: 07-03-2023

Continuous Evaluation 2: 03-05-2023

8.4 PROBLEM ENCOUNTERED AND POSSIBLE SOLUTIONS:

There were two Main Issues Faced:

8.4.1 Restrict the Access:

Since, the data stored in the Notes can be precious, So It was important to Restrict
the access to HomePage and user should be displayed only their Notes. This
problem was solved by using local & Session Storage. User will be able to visit
homepage only when the user is logged in.

8.4.2 Reducing API Call and Handling Transmission Failure & Rendering:

The main goal was to reduce the load on server and re render components when
there was any change. So This was solved by First updating local & Session
Storage then send the updated object through API. So in case of failure again we
can retry by retransmitting data through API. Also, Validations are performed on

Gujarat Technological University 38 RNGPIT, Bardoli

287446 Conclusion and Discussions

the Client End so Server won’t have enough Load for Validation. Its role would
be To perform CRUD Operations.

Since we have renderings through local or Session Storage. So whenever there

are changes made locally, use Effect Hook will help to render an updated version.

8.5 SUMMARY OF INTERNSHIP:

During the 12 Weeks Internship, I got to learn many libraries used in frontend web
Development. I also got a chance to brush up my foundational Concepts on RDBMS. I
got to learn about Core JavaScript Concepts and focus on Few mostly used methods
of it which are useful in Frontend JS. I got to know about React Library and understand
each concept by performing a few learning tasks.

After learning all these concepts, I got a chance to implement this concept of JS &
React to create a Web Application like Google Keep Clone. In this Project, I divided
each functionality into components and learned about passing data from one
component to another. I have used Fake API (i.e., JSON Server) to send/Receive data
into a JSON file. In this File, I am storing data of User and Notes. The Project, allows
user to Perform CRUD Operation of any Note.

During the training, I also Learnt about various libraries like material UI, Bootstrap,
Axios, SASS, Toastify, Formik and Yup.

8.6 LIMITATION AND FUTURE ENHANCEMENT:

8.6.1 Limitations:

o The Data sent via API are not encrypted i.e. No Encryption or Decryption
Algorithms are used for transmitting data. So, This can cause Issues in Privacy.
o There is no Facility to Pin a Note.

8.6.2 Future Enhancements:

o I would like to include the functionality to pin a maximum of 5 notes. So those

5 Notes remain on the TOP of all Notes Displayed.
o I want to enhance the scalability of the website by storing records in Databases
& integrate it with Real Backend, as currently the JSON file is locally and a fake
API is used like JSON Server. Based on the requirement if I would like to keep

Gujarat Technological University 39 RNGPIT, Bardoli

287446 Conclusion and Discussions

the file as JSON, then I will be using MongoDB Cloud which stores data in JSON
Format.
o In the Future, the Format of Notes can be changed to Add image/ List view which
is not currently developed.
o Sharing of Notes to other users also.

Gujarat Technological University 40 RNGPIT, Bardoli

 287446 References

REFERENCES

[1] “What Is a Relational Database | Oracle India.”

https://www.oracle.com/in/database/what-is-a-relational-database/ (accessed May
08, 2023).

[2] “XAMPP Tutorial - javatpoint.” https://www.javatpoint.com/xampp (accessed May

08, 2023).

[3] “HTML: HyperText Markup Language | MDN.” https://developer.mozilla.org/en-

US/docs/Web/HTML (accessed May 08, 2023).

[4] “CSS: Cascading Style Sheets | MDN.” https://developer.mozilla.org/en-

US/docs/Web/CSS (accessed May 08, 2023).

[5] “Sass: Documentation.” https://sass-lang.com/documentation/ (accessed May 08,

2023).

[6] “JavaScript | MDN.” https://developer.mozilla.org/en-US/docs/Web/JavaScript

(accessed May 08, 2023).

[7] “JSON.” https://www.json.org/json-en.html (accessed May 08, 2023).

[8] “React Tutorial.” https://www.w3schools.com/REACT/DEFAULT.ASP (accessed

May 09, 2023).

[9] “Getting Started | Axios Docs.” https://axios-http.com/docs/intro (accessed May 08,

2023).

[10] “Bootstrap 5 Tutorial.” https://www.w3schools.com/bootstrap5/ (accessed May 08,

2023).

[11] “Overview - Material UI.” https://mui.com/material-ui/getting-started/overview/

(accessed May 08, 2023).

[12] “What is RDBMS - javatpoint.” https://www.javatpoint.com/what-is-rdbms

(accessed May 09, 2023).

[13] “JavaScript Tutorial.” https://www.w3schools.com/js/ (accessed May 09, 2023).

[14] “React (software) - Wikipedia.” https://en.wikipedia.org/wiki/React_(software)

(accessed May 09, 2023).

Gujarat Technological University 41 RNGPIT, Bardoli

 287446 References

[15] “typicode/json-server: Get a full fake REST API with zero coding in less than 30
seconds (seriously).” https://github.com/typicode/json-server (accessed May 09,
2023).

Gujarat Technological University 42 RNGPIT, Bardoli