VISVESVARAYA TECHNOLOGICAL UNIVERSITY

JNANA SANGAMA, BELAGAVI-590 018, KARNATAKA

Internship Report On

“FULL STACK WEB DEVELOPMENT”

Submitted By
VANDANA GM
USN: 1VK21CS086

Submitted in the partial fulfilment of the requirements of the Sixth Semester

BACHELOR OF ENGINEERGING
IN
COMPUTER SCIENCE AND ENGINEERING

UNDER THE GUIDANCE OF

Sijin P
Asst Professor, Department of CSE, VKIT
Bengaluru-560074

Janatha Educational Society

VIVEKANANDA INSTITUTE OF TECHOLOGY

Gudimavu, Kumbalgodu(P), Kengeri (H), Bengaluru-560074
2023-2024
 Janatha Education Society®
VIVEKANANDA INSTITUTE OF TECHNOLOGY
Gudimavu, Kumbalagodu Post, Kengeri Hobli, Bengaluru – 560 074

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

CERTIFICATE

This is to certify that the Internship entitled “FULL STACK WEB DEVELOPMENT” carried out by VANDANA GM bearing
the USN: 1VK21CS086 is a bonafide student of Vivekananda Institute of Technology, Bengaluru in partial fulfilment of
the requirements during the intervening period of Sixth SEMESTER INTRENSHIP (21CSL68) with a Bachelor’s in
Engineering prescribed by the VISVESVARAYA TECHNOLOGICAL UNIVERSITY, Belagavi for the academic year
2023-24. It is certified that all corrections/suggestions indicated for internal assessment have been incorporated in the report
deposited in the departmental library. Internship report has been approved as it satisfies the academic requirements in respect
of Internship prescribed for the said degree.

Signature of the Guide Signature of the HOD Signature of the Principal

Sijin P Dr. Vidya A Dr. K M Ravikumar
Asst Professor Department of CSE Prof.& Head of Department Principal VKIT,
VKIT, Bengaluru CSE, VKIT, Bengaluru Bengaluru

External Viva-Voce

Name of the Examiners Signature with date

1.__________________ _________________

2.__________________ _________________
 ACKNOWLEDGEMENT

It gives us immense pleasure to write an acknowledgement to this Internship, a contribution of all people who
helped me realize it. We are very thankful to our Principal, Dr. K M Ravikumar, VKIT, Bengaluru, for being
kind enough to provide us an opportunity to work on a Internship in this institution. We would like to convey
our heartfelt thanks to our beloved HOD, Dr. Vidya A, Department of Computer Science and Engineering,
VKIT, Bengaluru for giving us the opportunity to embark up to this topic. We would like to sincerely thank
our project guide Sijin P, Asst. Professor, Dept. of Computer Science and Engineering for their valuable
guidance, constant assistance, support and constructive suggestions for the betterment of the Internship,
without which this Internship would have not been possible. Finally, it is a pleasure and happiness to the
friendly co-operation showed by all the staffs of Computer Science and Engineering Department, VKIT

Vandana GM (1VK21CS086)
 ABSTRACT

During my internship at Devminds Company in Bangalore from October 30, 2023, to November 30, 2023, I
had the opportunity to immerse myself in full stack web development. The primary objective of this internship
was to design and develop a Netflix clone application using the MERN stack, which comprises MongoDB,
Express.js, React.js, and Node.js.

The Netflix clone app project aimed to replicate the core functionalities of the popular streaming service
Netflix, including user authentication, content browsing, video streaming, and personalized recommendations.
Throughout the internship, I was involved in various stages of the development process, from planning and
designing the architecture to coding and testing the application.

This internship provided me with practical experience in full stack web development and allowed me to apply
theoretical knowledge to a real-world project. The Netflix clone app project not only honed my technical skills
but also enhanced my problem-solving abilities and teamwork. The successful completion of this project
demonstrated my capability to develop and deliver complex web applications using the MERN stack
CERTIFICATE
 CONTENTS

Chapter Title Page no

1 Company Profile
1.1 Introduction 1
1.2 Overview of the Project 1
1.3 About the Company 2
1.4 Services 2
1.5 Company’s Journey 3
1.6 Company Contact 3
2 Tasks Performed
2.1 Hyper Text Markup Language 4
2.2 Cascading Style Sheets 6
2.3 JavaScript 8
2.4 React JS 10
2.5 Node JS 11
3 Technical and Non-Technical Activities
3.1 Non-Technical Activities 13

3.2Technical Activities 15
4 Outcomes of Internship
4.1Learning from Internship Problem 30
4.2Technical Outcomes 30
4.2.1 Knowledge of web technologies 31
4.2.2 Web Development 32
4.2.3 Using profession specific terminology 32
appropriately
4.2.4 Effectively using software 33
4.2.5 Applying Knowledge to the task 33
4.3Non-Technical Outcomes 33
4.3.1 Verbal and Written Communication 34
Skills
4.3.2 Personality Development 34
4.3.3. Time Management 34
4.3.4 Resource Utilization Skill 34
4.3.5 Time Managing Skill 35
 4.3.6 Teamwork 35
5 Screenshots 36
6 Conclusions 40
7 References 41

LIST OF FIGURES

Figure no Title of Figures Page no.

5.1 Login page1 36

5.2 Login page2 37

5.3 Home Page 37
5.4 Movies 38

5.5 Movie Categories 38

5.6 Movie Screen 39

FULL STACK WEB DEVELOPMENT

Chapter 1
COMPANY PROFILE

1.1 Introduction

The following report describes the activities carried out during the four weeks full time internship at DevMinds
Incorporation. The document contains information regarding the organization and the responsibilities performed
throughout Oct 2023- Nov 2023.

The first part of the report tells about the organization, followed by the working plan initially agreed upon by
the federation and approved by the University of VTU as a suitable internship. Following, it proceeds to
describe insome detail about the department and the most relevant task performed. Finally, the reports wraps-
up with the outcome.

Mission
Making learning Rewarding & Fun

1.2. Overview of the Organization

DevMinds is a pioneering educational service company committed to delivering accessible and affordable
learning & Software Solutions to people of all ages. Our experienced educators, mentors, trainers & developers
employ innovative techniques to ensure engaging and effective results.
As a registered company under the Government of India's MSME Laws, DevMinds adheres to high standards
of professionalism and quality. It is situated in the vibrant city of Bangalore, India, where we benefit from a
thriving technical ecosystem and contribute to the intellectual growth of our community.

DevMinds stands as a beacon of innovation in technology & education, fostering a culture of continuous
learning and skill development. Our commitment to excellence, coupled with a focus on accessibility,
positions us as a leading force in shaping the STEM landscape.

Dept. of CSE, VKIT 2023-2024 1

FULL STACK WEB DEVELOPMENT

1.2 About the Company

• DevMinds was founded in year 2023.
• Registered as a “Institutional Software Entity” under directorate of industries and commerce, based in
Bangalore, India.
• Founded by Shankarling Kalashetty, Entrepreneur, Founder of DevMinds Incorporation.
• Post Graduates, Engineers constitute majority of our team in all the strategic business units.

1.3 Services by DevMinds, India.

• DevMinds Technologies- Software Solutions & Infrastructure, Sales and Marketing, IT Training &
Placements
• DevMinds Junio – Career Counselling, Upskilling Programs, Mental Health Camps etc.
• DevMinds Events – Hosting Hackathons, Coding Fests, Conferences, etc.

DevMinds Technologies: Providing software solutions for organizations including ERP, billing software,
hospital information management, development, and hosting through DevMinds Technologies.
DevMinds also offers corporate training, professional curriculum training, hands-on workshops, placement
courses.
DevMinds Events: Hosting cutting-edge hackathons, coding fests, job fairs, conferences & carnivals
through DevMinds Events.
DevMinds Junio: Offering upskill programs, soft skills courses, career counseling, and mental health
workshops for minors through DevMinds Junio.

Dept. of CSE, VKIT 2023-2024 2

FULL STACK WEB DEVELOPMENT

1.4 DevMinds’ s Journey

• Started in March 2023, DevMinds has been able to impact the industry in a very impactful manner with its
presence in both physical and digital world.
• Events: DevMinds has successfully hosted 4+ events, including Workshops, National level Hackathons in
various institutions, impacted hundreds of students.
• Programs: Their Internships, Workshops, Events and Other Programs have catered to thousands of
student’s needs in the less than one financial year.
• Learning and Growth: Witnessing the growth of their learner’s community, DevMinds community has
the firsthand understanding of true value of education.
• Pivotal Role: Learner feedback, suggestions, and engagement shaping DevMinds into a transformative
community.
• Creating Impact: Committed to making a difference in learners' lives and society at large, aiming to create
a better, more woke society.

1.5. Company Contact

Website: https://devminds.in

Email: [email protected]

LinkedIn: https://www.linkedin.com/company/dev-minds

Instagram: https://www.instagram.com/devminds.in

Phone: +91 8217786932 / 8624088730

Contactus:https://devminds.in/contact

Dept. of CSE, VKIT 2023-2024 3

FULL STACK WEB DEVELOPMENT

Chapter2
TASK PERFORMED

2.1 .HTML
Hypertext Markup Language (HTML) is the standard markup language for creating web pages and
web applications. With Cascading Style Sheets (CSS) and JavaScript, it forms a triad of cornerstone
technologies forthe World Wide Web.

Web browsers receive HTML documents from a web server or from local storage and render the documents
intomultimedia web pages. HTML describes the structure of a web page semantically and originally included
cues for the appearance of the document.

HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects
suchas interactive forms may be embedded into the rendered page.

HTML provides a MERNs to create structured documents by denoting structural semantics for text such as
headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using
angle brackets. Tags such as <img/> and <input /> directly introduce content into the page. Other tags such
as
<p> surround and provide information about document text and may include other tags as sub-elements.
Browsersdo not display the HTML tags, but use them to interpret the content of the page.

HTML can embed programs written in a scripting language such as JavaScript, which affects the behavior and
content of web pages. Inclusion of CSS defines the look and layout of content. The World Wide Web
Consortium(W3C), maintainer of both the HTML and the CSS standards, has encouraged the use of CSS over
explicit presentational HTML since 1997.

First developed by Tim Berners-Lee in 1990, HTML is short for Hyper Text Markup Language. HTML is used
to create electronic documents that are displayed on the World Wide Web. Each page contains a series of
connections to other pages called hyperlinks. Every web page you see on the Internet is written using one
versionof HTML code or another.
Dept. of CSE, VKIT 2023-2024 4
FULL STACK WEB DEVELOPMENT
HTML code ensures the proper formatting of text and images so that your Internet browser may display them
asthey are intended to look. Without HTML, a browser would not know how to display text as elements or
load images or other elements. HTML also provides a basic structure of the page, upon which Cascading Style
Sheetsare overlaid to change its appearance. One could think of HTML as the bones (structure) of a web page,
and CSSas its skin (appearance).

HTML is most commonly used as the format of online certificate we call web pages. When you create a set of
finish HTML documents that look and relate to each other, this is known as a website.

In addition to creating complete web pages, you can also use snippets of HTML code to create specific aspect
within an existing page. For example, some blogs and discussion panels allow you to include HTML formatting
in your posts or comments, allowing you to add emphasis to keywords, insert links, create bulleted lists or use
any other HTML element allowed by site administrators Web. If you collaborate on the content of your
organization's website, the website designer may have set up a content management system that allows you to
add articles or page sections within a larger HTML page structure that controls the page layout and site
navigation.

HTML is also used as the document format of the help and the offline documentation (stored on your computer)
along with the applications installed on your computer.

When you activate the help of an application, usually through its "Help" menu or a question mark icon, the
contentof the help can appear in your web browser or in a specialized help viewer. The email also uses HTML
as the format of rich text messages that include links, stylized text, tables and other elements that cannot be
representedin plain text.

However, most email applications do not allow you to edit HTML directly, but instead provide tools to create
elements and generate the corresponding HTML internally.

HTML is the standard markup language for creating Web pages.

• HTML stands for Hyper Text Markup Language
• HTML describes the structure of Web pages using markup
• HTML elements are the building blocks of HTML pages

Dept. of CSE, VKIT 2023-2024 5

FULL STACK WEB DEVELOPMENT
• HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
• Browsers do not display the HTML tags, but use them to render the content of the page

2.1 CSS

What is CSS?
• CSS stands for Cascading Style Sheets.
• CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
• CSS saves a lot of work. It can control the layout of multiple web pages all at once.
• External stylesheets are stored in CSS files.

Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout and variations in display for
differentdevices and screen sizes.

CSS Solved a Big Problem

HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>

<p>This is a paragraph</p>

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare
forweb developers. Development of large websites, where fonts and color information were added to every
single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS. CSS removed the style
formattingfrom the HTML page!

Dept. of CSE, VKIT 2023-2024 6

FULL STACK WEB DEVELOPMENT

CSS Saves a Lot of Work!

The style definitions are normally saved in external .css files. With an external stylesheet file, you can change
thelook of an entire website by changing just one file.

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document
writtenin a markup language like HTML. CSS is a cornerstone technology of theWorld Wide Web, alongside
HTML and JavaScript.

CSS is designed to enable the separation of presentation and content, including layout, colours, and fonts. This
separation can improve content accessibility, provide more flexibility and control in the specification of
presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in
a separate .css file, and reduce complexity and repetition in the structural content.

Separation of formatting and content also makes it feasible to present the same markup page in different styles
for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen
reader), and on Braille-basedtactile devices. CSS also has rules for alternate formatting if the content is
accessed on a mobile device.

The name cascading comes from the specified priority scheme to determine which style rule applies if more
thanone rule matches a particular element. This cascading priority scheme is predictable.

The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type
(MIMEtype) text/css is registered for use with CSS by RFC 2318 (March 1998). The W3C operates a free CSS
validationservice for CSS documents. In addition to HTML, other markup languages support the use of CSS,
including XHTML, plain XML, SVG, and XUL.

Advantages

Separation of content from presentation

CSS facilitates publication of content in multiple presentation formats based on nominal parameters. Nominal
parameters include explicit user preferences, different web browsers, the type of device being used to view
the

Dept. of CSE, VKIT 2023-2024 7

FULL STACK WEB DEVELOPMENT
content (a desktop computer or mobile Internet device), the geographic location of the user and many other
variables.

Site-wide consistency

When CSS is used effectively, in terms of inheritance and "cascading", a global style sheet can be used to
affectand style elements site-wide. If the situation arises that the styling of the elements should be changed or
adjusted, these changes can be made by editing rules in the global style sheet. Before CSS, this sort of
maintenance was more difficult, expensive and time-consuming.

Bandwidth

A stylesheet, internal or external, specifies the style once for a range of HTML elements selected by class, type
or relationship to others. This is much more efficient than repeating style information inline for each occurrence
of the element. An external stylesheet is usually stored in the browser cache, and can therefore be used on
multiplepages without being reloaded, further reducing data transfer over a network.

Page reformatting

With a simple change of one line, a different style sheet can be used for the same page. This has advantages
for accessibility, as well as providing the ability to tailor a page or site to different target devices. Furthermore,
devices not able to understand the styling still display the content.

Accessibility

Without CSS, web designers must typically lay out their pages with techniques such as HTML tables that
hinderaccessibility for vision-impaired users.

2.3 JAVASCRIPT

JavaScript is often abbreviated as JS, is a high-level, interpreted programming language. It is a language which
is also characterized as dynamic, weakly typed, prototype-based and multi-paradigm.

Alongside HTML and CSS, JavaScript is one of the three core technologies of the World Wide Web. JavaScript
enables interactive web pages and thus is an essential part of web applications. The vast majority of websites
useit, and all major web browsers have a dedicated JavaScript engine to execute it.

Dept. of CSE, VKIT 2023-2024 8

FULL STACK WEB DEVELOPMENT
As a multi-paradigm language, JavaScript supports event-driven, functional, and imperative (including object-
oriented and prototype-based) programming styles. It has an API for working with text, arrays, dates, regular
expressions, and basic manipulation of the DOM, but the language itself does not include any I/O, such as
networking, storage, or graphics facilities, relying for these upon the host environment in which it is embedded.

Initially only implemented client-side in web browsers, JavaScript engines are now embedded in many other
typesof host software, including server-side in web servers and databases, and in non-web programs such as
word processors and PDF software, and in runtime environments that make JavaScript available for writing
mobile anddesktop applications, including desktop widgets.

Although there are strong outward similarities between JavaScript and Java, including language name, syntax,
and respective standard libraries, the two languages are distinct and differ greatly in design; JavaScript was
influenced by programming languages such as Self and Scheme.

Because JavaScript code can run locally in a user's browser (rather than on a remote server), the browser can
respond to user actions quickly, making an application more responsive. Furthermore, JavaScript code can
detectuser actions that HTML alone cannot, such as individual keystrokes. Applications such as Gmail take
advantageof this: much of the user-interface logic is written in JavaScript, and JavaScript dispatches requests for
information(such as the content of an e-mail message) to the server. The wider trend of Ajax programming
similarly exploitsthis strength.

A JavaScript engine (also known as JavaScript interpreter or JavaScript implementation) is an interpreter that
interprets JavaScript source code and executes the script accordingly. The first JavaScript engine was created
by Brendan Eich at Netscape, for the Netscape Navigator Web browser. The engine, code-named
SpiderMonkey, isimplemented in C. It has since been updated (in JavaScript 1.5) to conform to ECMAScript
3. The Rhino engine,created primarily by Norris Boyd (formerly at Netscape, now at Google) is a JavaScript
implementation in Java.Rhino, like SpiderMonkey, is ECMAScript 3 compliant.

`A Web browser is by far the most common host environment for JavaScript. Web browsers typically create
"hostobjects" to represent the DOM in JavaScript. The Web server is another common host environment. A
JavaScriptWeb server would typically expose host objects representing HTTP request and response objects,
which a JavaScript program could then interrogate and manipulate to dynamically generate Web pages.
Because JavaScript is the only language that the most popular browsers share support for, it has become a
target languagefor many frameworks in other languages, even though JavaScript was never intended t o b e

Dept. of CSE, VKIT 2023-2024 9

FULL STACK WEB DEVELOPMENT
such language. Despite the performance limitations inherent to its dynamic nature, the increasing speed of
JavaScript engines hasmade the language a surprisingly feasible compilation target.

2.4 . React JS

ReactJS is a JavaScript framework. It can be added to an HTML page with a <script> tag. ReactJS extends
HTML attributes with Directives, and binds data to HTML with Expressions. ReactJS is a JavaScript
framework. It is a library written in JavaScript. ReactJS is distributed as a JavaScript file, and can be added to
a web page with a script tag.

ReactJS Extends HTML

ReactJS extends HTML with ng-directives. The ng-app directive defines an ReactJS application. The ng-model
directive binds the value of HTML controls (input, select, text area) to application data. The ng-bind directive
binds application data to the HTML view.

ReactJS Applications

ReactJS modules define ReactJS applications. ReactJS controllers’ control ReactJS applications. The ng-app
directive defines the application, the ng-controller directive defines the controller.

ReactJS (also written as React.js) is a JavaScript-based open-source front-end web application framework
mainlymaintained by Facebook and by a community of individuals and corporations to address many of the
challenges encountered in developing single-page applications. The JavaScript components complement
Apache Cordova, aframework used for developing cross-platform mobile apps. It aims to simplify both the
development and the testing of such applications by providing a framework for client-side model–view–
controller (MVC) and model–view–view model (MVVM) architectures, along with components commonly
used in rich Internet applications. (This flexibility has led to the acronym MVW, which stands for "model-view-
whatever" and may also encompass model–view–presenter and model–view–adapter.) In 2014, the original
ReactJS team began working on the Reactapplication platform.

The ReactJS framework works by first reading the HTML page, which has additional custom tag attributes
embedded into it. React interprets those attributes as directives to bind input or output parts of the page to a
modelthat is represented by standard JavaScript variables. The values of those JavaScript variables can be
manually setwithin the code, or retrieved from static or dynamic JSON resources.

Dept. of CSE, VKIT 2023-2024 10

FULL STACK WEB DEVELOPMENT
According to JavaScript analytics service Libscore, ReactJS is used on the websites of Wolfram Alpha, NBC,
Walgreens, Intel, Sprint, ABC News, and about 12,000 other sites out of 1 million tested in October 2016.
ReactJSis currently in the top 100 of the most starred projects on GitHub. ReactJS is the frontend part of the
MERN stack,consisting of MongoDB database, Express.js web application server framework, React.js itself,
and Node.js serverruntime environment.

ReactJS's design goals include:

• To decouple DOM manipulation from application logic. The difficulty of this is dramatically affected by
the way the code is structured.
• To decouple the client side of an application from the server side. This allows development work to progress
in parallel, and allows for reuse of both sides.
• To provide structure for the journey of building an application: from designing the UI, through writing the
business logic, to testing.

ReactJS implements the MVC pattern to separate presentation, data, and logic components. Using dependency
injection, React brings traditionally server-side services, such as view-dependent controllers, to client-side web
applications. Consequently, much of the burden on the server can be reduced.

2.5 Node JS
Node.js is an open-source server environment. Node.js is free. Node.js runs on various platforms (Windows,
Linux, Unix, Mac OS X, etc.). Node.js uses JavaScript on the server

Why Node.js?

A common task for a web server can be to open a file on the server and return the content to the client.Here

is how PHP or ASP handles a file request:

1. Sends the task to the computer's file system.

2. Waits while the file system opens and reads the file.
3. Returns the content to the client.
4. Ready to handle the next request.
Here is how Node.js handles a file request:

Dept. of CSE, VKIT 2023-2024 11

FULL STACK WEB DEVELOPMENT
1. Sends the task to the computer's file system.
2. Ready to handle the next request.
3. When the file system has opened and read the file, the server returns the content to the client.

Node.js eliminates the waiting, and simply continues with the next request. Node.js runs single-threaded, non-
blocking, asynchronously programming, which is very memory efficient.

What Can Node.js Do?

• Node.js can generate dynamic page content

• Node.js can create, open, read, write, delete, and close files on the server
• Node.js can collect form data
• Node.js can add, delete, modify data in your database

What is a Node.js File?

• Node.js files contain tasks that will be executed on certain events

• A typical event is someone trying to access a port on the server
• Node.js files must be initiated on the server before having any effect
• Node.js files have extension ".js"
Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code
outsideof a browser. Historically, JavaScript was used primarily for client-side scripting, in which scripts
written in JavaScript are embedded in a webpage's HTML and run client-side by a JavaScript engine in the
user's web browser. Node.js lets developers use JavaScript to write Command Line tools and for server-side
scripting— running scripts server-side to produce dynamic web page content before the page is sent to the user's
web browser. Consequently, Node.js represents a "JavaScript everywhere" paradigm,[6] unifying web
application developmentaround a single programming language, rather than different languages for server side
and client side scripts.
Though .js is the conventional filename extension for JavaScript code, the name "Node.js" does not refer to a
particular file in this context and is merely the name of the product. Node.js has an event-driven architecture
capable of asynchronous I/O. These design choices aim to optimize throughput and scalability in web
applications with many input/output operations, as well as for real-time Web applications (e.g., real-time
communication programs and browser games).

Dept. of CSE, VKIT 2023-2024 12

FULL STACK WEB DEVELOPMENT

Chapter 3

TECHNICAL AND NON-TECHNICAL ACTIVITIES

3.1 Non-Technical Activities

There is a broad consensus amongst employers and educational practitioners that they must ensure the
workforceequipped not only with disciplinary knowledge but a skill set that enables them to use and apply the
disciplinary knowledge in a work setting. The ability to apply disciplinary knowledge using the skill set
significantly influences the extent to which a graduate is employable; that being their ability to effectively
practice / implementtheir technical capabilities.

The skill set is commonly perceived tube generic, its required composition the name across different disciplines
and workplace contents. The increased demand from employers for non-technical skills in business graduates
canlargely be attributed to three factors. First, changing attitude of the perceived role of higher education,
second, changes in business practices and, third, changes in job roles. In consideration of changing attributes,
there has been a gradual shift in expected undergraduate outcomes. The overarching goal of graduate business
education has traditionally been considered to rigorously develop the ability to analyze, reason and evaluate
relevant disciplinary information/data to enhance disciplines.

The development of non-technical skills is not without challenge as some perceive it detracts from the
fundamental and unique goal of graduate business education; reducing its worth and likening it to business
management vocational education programs. There has been a gradual shift towards the commercialization of
business degrees whereby higher education providers are increasingly expected to develop both cognitive and
non-cognitive capabilities and mold graduate curricula to industry requirements. A number of reports show
that relevant professional associations and are dissatisfied with the level of non-technical skills of many
business graduates. Some of the non-technical activities learnt during my internship are below.

Dept. of CSE, VKIT 2023-2024 13

FULL STACK WEB DEVELOPMENT

Oral Communication Skills

Making a speech or presentation before a large group of people such as manager, customer, your peers. The
needto effectively communicate technical information about our particular discipline to others and the need to
maintaina friendly work environment. We must have a good communication skill in any organization today. My
internshiptaught me of how to communicate effectively both within the team and outside the team.

How to Work with Co-Workers

Everyone is different and getting along with co-workers isn’t always easy. We often come across unusual
characters at work. My internship helped me learn how to interact with different types of people in a
professionalsetting, this can take some getting used to but will help me to settle in at new jobs faster.

Time Management Skills

To be an effective employee and successful we must be able to manage our time efficiently. Most people have
fairly good time management skills from school or university experience. In the workplace however, it can be
quite different, often with a much higher tempo of tasks needing to be completed and usually unforeseen
variationsduring the day. My internship taught me techniques of how to manage time better.

Teamwork

Being able to work with other people in the department and office is key. Interns were encouraged to work
together and brainstorm ideas to help the company gain followers and ultimately receive more donation for
theircause. Being able to work together and help one another was vital to the department’s success. Teamwork
is suchan important aspect of running successful company and my internships have taught me how to do this
on a business level.

Dept. of CSE, VKIT 2023-2024 14

FULL STACK WEB DEVELOPMENT

How to take Directions from Line manager

Most people listen to their boss as they know they should or just because they’re the boss. But it is also important
to note what they are saying and more important why they are saying it. We should always remember that not
everyone is a good boss or a good communicator and we have to learn how to listen to people that we might
notlike on a personal level.

Learn how to Network

Networking is one of the top looked for skills within business as it is the key to start-up, growth and investment
within companies. Networking is all about building relationships; that can be with people we work with
currentlyor are looking to hire or other businesses that we might come in contact with or perhaps a potential
new client. Regardless of our sector the ability to network will help us in the future. The more connections we
have the easierit is to find someone suitable for a problem we need solving.

3.2 Technical Activities

Software

VS Code is a free and open-source text and source code editor for macOS, Linux, and Microsoft Windows
with support for plug-ins written in Node.js, and embedded Git Control, developed by GitHub. VS Code is a
desktop application built using web technologies. Most of the extending packages have free software licenses
and are community-built and maintained. VS Code is based on Electron (formerly known as VS Code Shell),
a framework that enables cross-platform desktop applications using Chromium and Node.js. It is written in
CoffeeScript and Less. It can also be used as an integrated development environment (IDE). VS Code was
released frombeta, as version 1.0, on 25 June 2015. Its developers call it a "hackable text editor for the 21st
Century".

Packages

The most other configurable text editors, VS Code enable users to install third-party packages and themes to
customize the features and looks of the editor. Packages can be installed, managed and published via VS Code's
package manager npm.

Dept. of CSE, VKIT 2023-2024 15

FULL STACK WEB DEVELOPMENT

Working

VS Code has shell there we write a code of the program, then we install the package related to that
language ofthe code then execute the program and VS Code gives output of the program. How it happens?

Step1: Writhed program has a special extension of that file that is processed by the package of the language.

Step2: The processed part of program go to the VS Code application and then go to the OS.

Step3: The program saved to hard disk of the system.Step4: The all process done by processor of the CPU.

Step5: The output shown on the monitor.

Firefox

Mozilla Firefox (or simply Firefox) is a free and open-source web browser developed by Mozilla Foundation
for Windows, macOS, Linux, and BSD operating systems. Its sibling, Firefox for Android, is available
for Android. Firefox uses the Gecko layout engine to render web pages, which implements current and
anticipated web standards. In 2016, Firefox began incorporating new technology under the code name
Quantum to promote parallelism and a more intuitive user interface. An additional version, Firefox for iOS,
was released on November 12, 2015, due to platform restrictions, it uses the Web Kit layout engine instead of
Gecko, as withall other iOS web browsers.

Firefox was created in 2002 under the codename "Phoenix" by the Mozilla community members who desired
a standalone browser, rather than the Mozilla Application Suite bundle. During its beta phase, Firefox proved
to bepopular with its testers and was praised for its speed, security, and add-ons compared to Microsoft's then-
dominant Internet Explorer 6. Firefox was released on November 9, 2004, and challenged Internet Explorer's
dominance with 60 million downloads within nine months. Firefox is the spiritual successor of Netscape
Navigator, as the Mozilla community was created by Netscape in 1998 before their acquisition by AOL.

Firefox usage grew to a peak of 32% at the end of 2009, temporarily making version 3.5 the world's most
popularbrowser. Usage then declined in competition with Google Chrome. As of March 2018, Firefox has
11.6% usage

Dept. of CSE, VKIT 2023-2024 16

FULL STACK WEB DEVELOPMENT
share as a "desktop" browser, according to Stat Counter, making it the second most popular such web
browser; usage across all platforms is lower at 5.44% (and then 4th most popular overall). Firefox is still the
mostpopular desktop browser in Cuba (even most popular overall at 62.77%) and Eritrea with 78.3% and 91%
of the market share, respectively. According to Mozilla, as of December 2014, there were half a billion Firefox
users around the world.

Bootstrap

Bootstrap is an HTML, CSS, and JS framework for building responsive and mobile-first websites. It makes
the front-end design and development much quicker. Originally introduced by Twitter.

Configuration

Configuration design is a kind of design where a fixed set of predefined components that can be interfaced
(connected) in predefined ways is given, and an assembly (i.e. designed artifact) of components selected from
this fixed set is sought that satisfies a set of requirements and obeys a set of constraints.

Project Implementation
CODE

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<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 href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap"
rel="stylesheet">
<link rel="shortcut icon"
href="https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Netflix_icon.svg/2048px-Netflix_icon.svg.png"
type="image/x-icon">
<title>Netflix Clone</title>
</head>
<style>

Dept. of CSE, VKIT 2023-2024 17

FULL STACK WEB DEVELOPMENT

*{
margin: 0;
font-family: 'Roboto', sans-serif;
}
</style>

<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>

</body>

</html>

import axios from "axios";

import { loginFailure, loginStart, loginSuccess } from "./AuthAction";

export const login = async (user, dispatch) => {

dispatch(loginStart());
try{
const res=await axios.post("https://netflixbackend.vercel.app/server/auth/login", user);
dispatch(loginSuccess(res.data));
}catch(err){
dispatch(loginFailure());
}
};

export const loginStart = () =>({

type:"LOGIN_START",
});

export const loginFailure = () =>({

type:"LOGIN_FAILURE",
});

Dept. of CSE, VKIT 2023-2024 18

FULL STACK WEB DEVELOPMENT

export const loginSuccess = (user) =>({

type:"LOGIN_SUCCESS",
payload:user
});

//For Logout
export const logOut = () =>({
type:"LOGOUT"
});

import AuthReducer from "./AuthReducer";

import { createContext, useEffect, useReducer } from "react";

const InitailState = {
user: JSON.parse(localStorage.getItem("user")) || null,
isFetch: false,
error: false,
};

export const AuthContext = createContext(InitailState);

export const AuthContextProvider = ({ children }) => {

const [state, dispatch] = useReducer(AuthReducer, InitailState);

useEffect(() => {
localStorage.setItem("user", JSON.stringify(state.user));
}, [state.user]);

return (
<AuthContext.Provider
value={{
user: state.user,
isFetching: state.isFetching,
error: state.error,
Dept. of CSE, VKIT 2023-2024 19
FULL STACK WEB DEVELOPMENT

dispatch,
}}
>
{children}
</AuthContext.Provider>
);
};

const AuthReducer = (state, action) => {

switch (action.type) {
case "LOGIN_START":
return {
user: null,
isFetching: false,
error: false,
};

case "LOGIN_FAILURE":
return {
user: null,
isFetching: true,
error: false,
};

case "LOGIN_SUCCESS":
return {
user: action.payload,
isFetching: false,
error: false,
};
case "LOGOUT":
return {
user: null,
isFetching: false,

Dept. of CSE, VKIT 2023-2024 20

FULL STACK WEB DEVELOPMENT

error: false,
};

default : return {...state}

}
};

export default AuthReducer;

import React, { useContext } from "react";
import "./App.scss";
import Home from "./pages/home/Home";
import Login from "./pages/login/Login";
import Register from "./pages/register/Register";
import Watch from "./pages/watch/Watch";
import {
BrowserRouter as Router,
Routes,
Route,
Navigate,
} from "react-router-dom";
import {AuthContext} from './authContext/AuthContext'

const App = () => {

const {user} = useContext(AuthContext);

return (
<Router>
<Routes>
<Route
exact
path="/"
element={<>{user ? <Home /> : <Navigate to="/register" />}</>}/>
<Route
exact
path="/register"
Dept. of CSE, VKIT 2023-2024 21
FULL STACK WEB DEVELOPMENT

element={<>{!user ? <Register /> : <Navigate to="/" />}</>}

/>

<Route
exact
path="/login"
element={<>{!user ? <Login /> : <Navigate to="/" />}</>}
/>

{ user && (
<>
<Route path="/movies" element={<Home type="movie"/>} />
<Route path="/series" element={<Home type="series" />} />
<Route path="/watch" element={<Watch />} />
</>

)}

</Routes>
</Router>
);
};

export default App;

import { InfoOutlined, PlayArrow } from "@material-ui/icons";

import "./Features.scss";
import { useEffect,useState } from "react";
import axios from "axios";
const Features = ({ type, setGenre }) => {
const [movie, setMovie] = useState({});

const [isLoading, setIsLoading] = useState(true);

const [error, setError] = useState(null);

Dept. of CSE, VKIT 2023-2024 22

FULL STACK WEB DEVELOPMENT

useEffect(() => {
const getMovie = async () => {
try {
const res = await axios.get(`https://netflixbackend.vercel.app/server/movie/random?type=${type}`, {
headers: {
token:
"Bearer " + JSON.parse(localStorage.getItem("user")).accessToken,
},
});
setMovie(res.data[0]);
setIsLoading(false);
} catch (error) {
setError(error);
setIsLoading(false);
}
};
getMovie();
}, [type]);

if (isLoading) {
return <div>Loading...</div>;
}

if (error) {
return <div>Error: {error.message}</div>;
}

console.log(movie);
return (
<div className="features">
{type && (

<div className="category">
<span>{type === "movie" ? "Movies" : "Series"}</span>

Dept. of CSE, VKIT 2023-2024 23

FULL STACK WEB DEVELOPMENT

<select
name="genre"
id="genre"
onChange={(e) => setGenre(e.target.value)}
>
<option>Genre</option>
<option value="horror">Horror</option>
<option value="comedy">Comedy</option>
<option value="fantasy">Fantasy</option>
<option value="Adventure">Adventure</option>
<option value="romance">Romance</option>
<option value="crime">Crime</option>
<option value="drama">Drama</option>
</select>
</div>
)}
{movie && (
<>
<img src={movie.img} alt="Not found" />
<div className="info">
<img src={movie.imgTitle} alt="" />
<span className="desc">{movie.desc}</span>
<div className="buttons">
<button className="play">
<PlayArrow />
<span>Play</span>
</button>
<button className="more">
<InfoOutlined />
<span>Info</span>
</button>
</div>
</div>

</>
Dept. of CSE, VKIT 2023-2024 24
FULL STACK WEB DEVELOPMENT
)}
</div>
);
};
.features {
height: 90vh;
// position: inherit;
position: relative;

.category{
position: absolute;
top: 80px;
left: 50px;
font-size:30px;
font-weight: 500;
color: white;
display: flex;
align-items: center;

select{
cursor: pointer;
background-color: var(--main-color);
color: white;
border: 1px solid white;
margin-left: 12px;
padding: 5px;
}
}

img {
width: 100%;
height: 100%;
// object-fit: cover;
object-fit: fill;
}

Dept. of CSE, VKIT 2023-2024 25

FULL STACK WEB DEVELOPMENT

.info {
width: 35%;
position: absolute;
left: 50px;
bottom: 100px;
color: white;
display: flex;
flex-direction: column;

img {
width: 400px;
}

.desc {
margin: 20px 0;
}

.buttons {
display: flex;

button {
padding: 10px 20px;
border: none;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 500;
margin-right: 10px;
cursor: pointer;
&.Play {
background-color: white;

Dept. of CSE, VKIT 2023-2024 26

FULL STACK WEB DEVELOPMENT

color: var(--main-color);
padding: 20px 20px;
}

&.more {
background-color: gray;
color: white;
}
span{
margin-left: 5px;
}
}
}
}
}
import {
Add,
PlayArrow,
ThumbDownAltOutlined,
ThumbUpAltOutlined,
} from "@material-ui/icons";
import { useEffect, useState } from "react";
import "./ListItem.scss";
import axios from "axios";
import { Link } from "react-router-dom";

export default function ListItem({ item, index }) {

const [isHovered, setisHovered] = useState(false);
const [movie, setMovie] = useState({});

useEffect(() => {
const getMovie = async () => {
try {
const res = await axios.get("https://netflixbackend.vercel.app/server/movie/find/" + item, {
headers: {
Dept. of CSE, VKIT 2023-2024 27
FULL STACK WEB DEVELOPMENT

token:
"Bearer "+JSON.parse(localStorage.getItem("user")).accessToken
},
});
setMovie(res.data);
console.log(res.data)
} catch (error) {
// console.log(error)
console.log("Error")
}
};
getMovie();
}, [item]);

return (
<Link to='/watch' state={{ from: movie }}>
<div
className="listItem"
style={{ left: isHovered && index * 225 - 50 + index * 2.5 }}
onMouseEnter={() => setisHovered(true)}
onMouseLeave={() => setisHovered(false)}
>
<img src={movie.imgThumb} alt="" />
{isHovered && (
<>
<video src={movie.trailer} autoPlay={true} loop />
<div className="itemInfo">
<div className="icons">
<PlayArrow className="icon" />
<Add className="icon" />
<ThumbUpAltOutlined className="icon" />
<ThumbDownAltOutlined className="icon" />
</div>
<div className="itemInfoTop">

Dept. of CSE, VKIT 2023-2024 28

FULL STACK WEB DEVELOPMENT

<span>1 hour 14 mins</span>

<span className="ageLimit">+{movie.ageLimit}</span>
<span>{movie.year}</span>
</div>
<div className="desc">{movie.desc}</div>
<div className="genre">{movie.genre}</div>
</div>
</>
)}
</div>
</Link>
);
}

Dept. of CSE, VKIT 2023-2024 29

FULL STACK WEB DEVELOPMENT

Chapter4

OUTCOME OF INTERNSHIP
4.1 Learning from Internship Program

The Internship program was beneficial for us. It helped us in improving our various technical skills and
enhancedmy knowledge in new areas.

• We gained knowledge in the area of Web Development, the various issues involved and mechanisms in the
systems etc.
• By studying Web Development, I also learnt that how development function and what are the various issues
one need to be aware of while looking for web development
• I was working on a development project for the first time and I got introduced to this important area of
development the look and feel of a website.
• I brushed up my knowledge on HTML, CSS as it was required to develop applications on top of web
development.

Work Experience

Our internship was quite satisfactory in terms of work environment. The team with which we worked with
wasvery friendly and helped us in solving our problems. New experiences include

• Team work

In this project 6-7 people work together thus providing enough opportunity for team work and coordination.
Thiswas a good experience for us as the team was very cooperative and understanding.

• Responsibility and Keeping Commitments

The importance of keeping commitments and the time of others was an important thing, which I learnt as
anintern.

4.2 Technical Outcomes

Dept. of CSE, VKIT 2023-2024 30

FULL STACK WEB DEVELOPMENT
4.2.1 Knowledge of web technologies
Web technology is a collective name for technology primarily for the World Wide Web. This does; however,
tendto focus more specifically towards technology that aides in the creation, maintenance and development of
web- based applications.

From a developer’s point of view, these are things like languages and frameworks, data storage mechanisms,
services and products to allow us to create platforms and applications for the web to build websites and web
applications (a web application is a website that offers functionality, storing data - text, images, etc. - that can
beprocessed and return a useful output to you, or that you can come back to later, such as Facebook or Quora).

On the other side, you have client-side web technologies, which include things like HTML, CSS, JavaScript
(which includes JavaScript Frameworks like jQuery, React and React). These execute run from the web page
thata user loads, but actually run on the users (clients) computer.

However, web technology is not limited to the developers. Web browsers, for example, are in the category of
webtechnology as it is technology that allows a user to access the web.

4.2.2 Web Development

Web development broadly refers to the tasks associated with developing websites for hosting via intranet or
internet. The web development process includes web design, web content development, client-side/server-side
scripting and network security configuration, among other tasks

Project: Developing Extensions.

Industry: Web Development

Data: The source for the platform will be the customer requirement. The main requirement is to produce an
interactive web application extension for the user to easily use Clickup.

Problem Statement:

1. To produce an interactive web application extension for the user to easily use Clickup through
browserextension

2. The problem must be explicitly stated down and discussed with the team in question

Dept. of CSE, VKIT 2023-2024 31

FULL STACK WEB DEVELOPMENT
3. Define a scope for the project.
4. Assembling the project charter.
Using the web technologies such as HTML, CSS BOOTSTRAP, JAVASCRIPT, React.js I have analyzed the
problem statement and successfully developed a web application.

4.2.3 Using profession specific terminology appropriately

One of the most important things is that writing must be appropriate for others to understand. I have learnt to
usethe terminology that makes sense to my readers. When we become a professional in a particular field, we
have tolearn language of that field. As a professional, people hire us to work on their behalf because we have
the knowledge and skills that they don’t possess. Therefore, we find our self-communicating in writing with
people who don’t know the language of our field; our writing must make sense to people to read it.

4.2.4 Effectively using software

As with any great endeavor, web design is about both inspiration and perseverance. Back in the day, creating
web pages was the sole province of hardcore coders, but that’s not the case anymore given that there are
numeroustools to simplify the process. Some of these even have a visual interface, allowing you to drag and
drop links, textand images as if you were designing a poster or presentation.

Other web design tools are geared towards programmers, acting as advanced text editors, and allowing for
building a website extension line-by-line. However, most web design tools exist somewhere between these
two extremes.

Some of the best web tools which we are using in our internship project are discussed below

Described by its developer as a "hackable text editor for the 21st Century", the free and open source
VSCode comes to us from the team at GitHub.

VS Code is a dedicated desktop app and supports a variety of programming languages such as HTML,
JavaScript,Java, PHP, CSS and XML. The text editor automatically recognizes the language you are using and
will be color-coded and arrange it accordingly. VS Code also has a useful autocomplete feature for writing
code. You can manage multiple files at once via the excellent 'minimal' in the left-hand pane.

Dept. of CSE, VKIT 2023-2024 32

FULL STA

FULL STACK WEB DEVELOPMENT

freely downloadable extensions, such as 'packages', which can make this text editor a joy to use. Available
packages include Emmet, which allows you to write HTML and CSS using abbreviated code. Another is
Pigmentwhich scans your script for color codes and displays these automatically in the background color.

VS Code is truly cross-platform as it is available for Windows, Linux and macOS. This makes it ideal for
working on copyrighted material. And because it's open source the development community can quickly
respond to any bugs or security flaws which are discovered.

4.2.5 Applying Knowledge to the Task

In knowledge intensive environment, task in an organization is typically performed by a group of people who
have task related knowledge and expertise. Each group may require task-related knowledge on different topic
domains and documents to accomplish its tasks. Document recommendation methods are very useful to resolve
the information overload problem and proactively support knowledge workers in the performance of tasks by
recommending appropriate documents to meet their information needs.

A worker’s document referencing behavior can be modeled as a knowledge flow (KF) to represent the
evolutionof his information needs over time. However, the information needs of workers and groups may change
over time. Additionally, most traditional recommendation methods which provide personalized
recommendation do not consider worker’s KFs, or the information needs of majority of workers in a group to
recommend task knowledge. In this work, I, integrate the KF mining method and propose group-based
recommendation method, including group based collaborative filtering (GCF) and group content- based
filtering (GCBF), to actively provide the taskrelated documents for group. Experimental results show that the
proposed methods have better performance thanthe personalized recommendation methods in recommending
the needed documents for groups. Thus, the recommended documents can fulfill the groups task needs and
facilitate knowledge sharing among groups.

4.3 Non-Technical Outcomes

4.3.1 Verbal and Written Communication Skills

We have demonstrated and learnt our strong communication skills, both verbal and written, throughout the
internship, while working for training and development.

Dept. of CSE, RRCE 2022-2023 33

FULL STA

FULL STACK WEB DEVELOPMENT

4.3.2 Personality Development

Personality development plays an imperative role at workplace as it decides the way an individual interacts
with his fellow workers and responds to various situations. How an individual behaves at the workplace
depends on his/her personality. Personality development helps in polishing and grooming individuals and
makes them betterand efficient resources for the organization. Personality development also reduces stress
levels and teaches an individual to face even the worst situations with a smile. Personality reflects how one
conducts himself/herself in the professional environment. Never carry your personal problems to work.
Personality development helps an individual to keep his personal life separate from his professional life.

Differences in opinions and views often lead to conflicts and arguments among employees. Employees with
different attitudes and mindsets find it extremely difficult to adjust with each other and work in unison.
Personalitydevelopment sessions motivate an individual to think positively and eventually reduce stress at the
workplace. Individuals as a result of personality development tend to behave in a mature way; making the
organization a much better place to work. Personality development is essential to bring a change in an
individual’s attitude, thinking, behavior and mindsets. It also strengthens the relationship among co -workers.

4.3.3 Time Management

Proper time management at work place has a number of positive effects, ranging from making you more
focusedand valuable employee of reducing the stress of your job. Employers appreciate employees who can
get the maximum amount of good works done in minimum amount of time. It also strengthens the relationship
among co- workers.

4.3.4 Resource Utilization Skills

Effective management of resources is essential tasks of companies that are managing different projects. It is
important for them to efficiently organize allocate personal as well as equipment for different projects, same
timeavoiding idle resources. Having the information of availability of resource and have them available at the
right time for the activities plays the vital role in managing the costs and smoothly executing the project
activities.

Dept. of CSE, RRCE 2022-2023 34

FULL STACK WEB DEVELOPMENT

4.3.4 Time Managing Skills

To be an effective employee and successful we must be able to manage our time efficiently. Most people have
effectively good tome management skill from school or university experience. We had an opportunity to
improveour time management skills such that we could apply it both in our professional and personal life

Ofttimes were tested for time management with tasks to be performed within schedule that helped us to
complete the taskswithin scheduled time.

4.3.5 Teamwork

Teamwork is such an important aspect of running a successful company and our internship has thought us how
to do this on a business level. Key techniques adopted in our internship for effective team work:
• Communication Process: exchange contact details, establishing rules and regulations and limits on
communication forms (Email, Texts, Mobile WhatsApp), maximum length of time responses, when face-to-
face meetings were held.
• Task Analysis and distribution of workload: dividing up questions or parts of questions into equal
proportions, going off to work individually to return the day before the task is due to put it all together.
Meeting Schedule: Meetings were conducted frequently (once in 3 days) to know the status of the task being
completed. This allowed us maintain our pace completing the assigned work

Dept. of CSE, RRCE 2022-2023 35

FULL STACK WEB DEVELOPMENT

Chapter 5

SCREENSHOTS

Fig 5.1: Login page1

Dept. of CSE, RRCE 2022-2023 36

FULL STACK WEB DEVELOPMENT

Fig 5.2 Login Page2

Fig 5.3 Home page

Dept. of CSE, RRCE 2022-2023 37

FULL STACK WEB DEVELOPMENT

Fig 5.4 Movies

Fig 5.5 Catogiries

Dept. of CSE, RRCE 2022-2023 38

FULL STACK WEB DEVELOPMENT

Fig 5.6 Movie screen

Dept. of CSE, RRCE 2022-2023 39

FULL STACK WEB DEVELOPMENT

CONCLUSION
This project made with Reactjs, HTML, CSS and JavaScript is to develop chrome extensions which are
powered by clickup APIs which have Oauth.20 authentication for the security authorization to help clickup
clients to be able to use clickup platform easily and compactly on a chrome extension. The extension enables
the user to have the information about tasks, workspaces and other details regarding their workflow. The project
has shown combinationof different technologies can result in a robust and efficient solution. Reactjs proved to
be an excellent choice for building a dynamic and responsive frontend, while Html and CSS allowed us to craft
a user friendly and intuitive user interface.

Dept. of CSE, RRCE 2022-2023 40

FULL STACK WEB DEVELOPMENT

REFERENCES

1. https://github.com/jhen0409/react-chrome-extension-boilerplate

2. https://developer.chrome.com/docs/extensions/

3. https://github.com/facebook/react-devtools

4. https://developer.chrome.com/docs/extensions/samples/

5. https://www.youtube.com/watch?v=Ux9XNcIVlRo

6. https://github.com/Ajay1455/Netflix

7. https://www.freecodecamp.org/news/mern-stack-roadmap-what-you-need-to-know-to-build-full-stack-
apps/

8. https://www.geeksforgeeks.org/mern-stack-vs-java-full-stack/

9. https://www.geeksforgeeks.org/courses/mern-full-stack-development-classroom

10. https://books.google.co.in/books/about/Pro_MERN_Stack.html?id=TayXDwAAQBAJ&redir_esc=y

Dept. of CSE, RRCE 2022-2023 41