Internship Report on Web Full Stack Development 2023-2024

CHAPTER 1
COMPANY PROFILE

The internship began on 14th of August 2023, the first day we were briefed by Mr. about
what we were going to do and some information on the operation of Web Full Stack
Development. We were told about the rules which were to be followed while we were there
on the premises of the Web Full Stack Development. We had to abide by some protocols
set by the organization such as how to pitch, how to complete the task.

Fig 1.1 Company Logo

First 15 days — introduction to Web Full Stack Development. some examples on were
Solved based on it. Importance software development life cycle discussed. Functions in Full
Stack & methods in functions with some examples and assignments.Based upon functions
& method-concepts analysing,coding,checking functionalities and execution.
Next 5 days — Training on how to use the different editors and toolkits.Executing different
project code, required champers in the existing code. Project Modification as per mentor.
Next l0 days — Working on the given tasks and project.

DEPARTMENT OF ISE, SKSVMACET 1

Internship Report on Web Full Stack Development 2023-2024

CHAPTER 2

ABOUT COMPANY

Inventeron stands as a trailblazer and leader in the industry, offering a comprehensive range
of services that encompass design, development, execution, and support and maintenance.
The cornerstone of our expertise lies in training programs and skill development, where we
excel in nurturing learning abilities.

Our commitment to providing the best solutions for business needs is realized through state-
of-the-art technology solutions. Embracing cutting-edge technologies like IoT and embedded
engineering applications, we ensure that our clients benefit from the latest advancements in
the field. Our domain extends far beyond a single industry, covering a spectrum from
embedded technology to web development and system software support. This diversity
allows us to provide complete coverage for the varied challenges that businesses may
encounter.

At the heart of Inventeron is a dedicated and qualified team of professionals. Well-versed

and trained in a myriad of skills, they contribute unique ideas and deliver perfect solutions
tailored to meet the specific requirements of each business. We specialize in guiding our
clients to reinvent and reshape their enterprises in a distinctive manner, providing them with
a competitive edge in the marketplace. By consistently delivering the best services, we ensure
that our clients remain at the forefront, standing out in the crowd with unparalleled
excellence.

2.1 Overview Of Organization

Inventeron Technologies and Business Solutions LLP, or ITABS, is an Indian based

engineering and electronics company headquartered in Bangalore, Karnataka, India. It is
both product and service oriented software company having its products in wireless
communication technology and provides quality service to its valuable clients in its
domain.

DEPARTMENT OF ISE, SKSVMACET 2

Internship Report on Web Full Stack Development 2023-2024

Inventeron’s core products are Embedded components (including IC’s, control boards,
Controllers, Microprocessors, Fuel Systems, Water Level Controllers, Security Systems,
Biometric login systems, Wireless devices etc , ..), industrial products(Network Tower
Management Systems,) and Apps(E-commerce apps, website design and development).

2.2 SERVICES PROVIDED BY THE COMPANY

Knowing the importance of maintenance of servers in the website hosting and online webs
with multimedia, the company have our own separate server and also maintain them.

• PCB Design
• ERP (Enterprise Resource Planning)
• IT Training
• Communication and Networking
• Cloud Computing
• Online Web and Multimedia
• Business Solutions
• Project Management

2.3 BUSINESS PROFILE

• We do Innovations in Embedded Electronics Providing Quality services and

varieties of Electronics Products.
• We deliver the excellence and consequently improve what is essential for human
progress by mastering Science and Technology.
• We have an Excellent and Experienced team of Engineers with latest and advanced
skills Who makes the coding process so simple with lot of fun.
• We are enough passionate and dedicated towards our work that we are ready to work
anytime regardless of time.

DEPARTMENT OF ISE, SKSVMACET 3

Internship Report on Web Full Stack Development 2023-2024

CHAPTER 3

TASKS PERFORMED

3.1 INTRODUCTION
YouTube is a global online video sharing and social media platform headquartered in San

Bruno, California. It was launched on February 14, 2005, by Steve Chen, Chad Hurley, and

Jawed Karim. It is owned by Google and is the second most visited website, after Google
Search. YouTube has more than 2.5 billion monthly users, who collectively watch more than
one billion hours of videos each day. As of May 2019, videos were being uploaded at a rate
of more than 500 hours of content per minute.

Since its purchase by Google, YouTube has expanded beyond the core website into mobile
apps, network television, and the ability to link with other platforms. Video categories on
YouTube include music videos, video clips, news, short films, feature films, songs,
documentaries, movie trailers, teasers, live streams, vlogs, and more. Most content is
generated by individuals, including collaborations between YouTubers and corporate
sponsors.

3.1.1 Challenges in Implementing the Full Stack Web Application:

1. Learning Curve:

- Overcoming challenges in mastering ReactJS and Firebase for efficient development.

2. Continuous Learning:

- Staying updated with evolving web development technologies for ongoing improvement.

3. Security Considerations:

- Ensuring robust data validation and protection against web vulnerabilities.

4. Integration Challenges:

- Coordinating various components (Google API, CSS, react-reveal) for seamless

functionality.

DEPARTMENT OF ISE, SKSVMACET 4

Internship Report on Web Full Stack Development 2023-2024

3.2 TECHNOLOGIES USED

Different technologies are used for creating web applications. The process of web
development consists of two part i.e. Front-end and Back-end.

3.2.1 FRONT-END

Front end, also known as client-side, refers to the user interface of the web page. Basically,
it is the part of the application where the user can view the content of the application. The
following section describes the technology that were used while developing the application.

HTML:

HTML is the standard markup language for creating Web pages. It stands for HyperText
Markup Language. It describes the structure of a Web page. It consists of a series of
elements. HTML elements tell the browser how to display the content. HTML elements are
represented by tags. 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.

JAVASCRIPT:

JavaScript(often shortened to JS) is a lightweight, interpreted, object-oriented language with

first-class functions, and is best known as the scripting language for Web pages, but it's used
in many non-browser environments as well. It is a prototype-based, multi-paradigm scripting
language that is dynamic, and supports object-oriented, imperative, and functional
programming styles. JavaScript runs on the client side of the web, which can be used to
design / program how the web pages behave on the occurrence of an event. JavaScript is an
easy to learn and also powerful scripting language, widely used for controlling web page
behaviour.

CSS:

CSS is a language that describes the style of an HTML document. CSS describes how HTML
elements should be displayed. CSS is a cornerstone technology of the World Wide Web,
alongside HTML and JavaScript. 3 Types of CSS Styles: Inline, External and Internal.

DEPARTMENT OF ISE, SKSVMACET 5

Internship Report on Web Full Stack Development 2023-2024

3.2.2 BACK-END

Generally, back-end refers to the server-side which also mean internal working part of the
application. This part of the website does not interact directly with the user, but it is
responsible for manipulating and storing the data of an application. This section includes the
explanation of the technologies that were used during the development of this application.

Server:
Node.js, Python (Django or Flask), Ruby on Rails, or another suitable backend framework.
Database:

Relational database (MySQL, PostgreSQL) or NoSQL database (MongoDB).

Store user data, video metadata, comments, and other relevant information.
APIs:
RESTful or GraphQL APIs for communication between the front-end and back-end.
API endpoints for user registration, video upload, commenting, etc.
User Management:
User authentication and authorization.
Profile management, subscription handling, and user activity tracking.
Video Processing:
Video upload and storage (Amazon S3, Google Cloud Storage, or similar).
Video transcoding for different resolutions and formats.

DEPARTMENT OF ISE, SKSVMACET 6

Internship Report on Web Full Stack Development 2023-2024

3.3 System Requirements and Specifications

The introduction of the Software Requirements Specification (SRS) provides an overview of

the entire SRS with purpose, scope, definitions, acronyms, abbreviations, references, and
overview of the SRS. The aim of this document is to gather and analyze and give an in-depth
insight of the complete requirements of our project by defining the requirements in detail.
Nevertheless, it also concentrates on the capabilities required to run our project on different
high-level software features.

Functional Requirements:

Functional requirements define the specific features and capabilities that a system must have
to meet the users' needs. For a YouTube clone, the functional requirements encompass
various aspects of user interaction, content management, and system behavior. Here are key
functional requirements for a YouTube clone.

User Registration and Authentication:

• Users should be able to create accounts.

• Secure authentication mechanisms (e.g., email/password, OAuth) should be

implemented.

• Password recovery/reset functionality.

Video Upload:

• Users should be able to upload videos.

• Supported video formats and size limitations should be specified.
• Upload progress indication.
Video Management:

• Users can edit video metadata (title, description, tags).

• Thumbnail customization and generation.

• Options for setting video privacy (public, private, unlisted).

Video Playback:
• Seamless video playback with playback controls (play, pause, seek).
• Support for various resolutions and streaming qualities.
• Full screen mode.

DEPARTMENT OF ISE, SKSVMACET 7

Internship Report on Web Full Stack Development 2023-2024

User Interaction:

• Users can like, dislike, and comment on videos.

• Subscribe to channels and receive notifications for new content.

• Social sharing options for videos.

User Profile:

• User profiles displaying uploaded videos and subscription information.

• Option to customize user profile settings.

Search and Discovery:

• Search functionality for finding videos based on keywords.

• Recommendations based on user preferences and history.

• Trending and popular video sections.

Playlist Management:

• Users can create and manage playlists.

• Add and remove videos from playlists.

Notifications:

• Users receive notifications for comments, likes, and new uploads.

• Notification preferences for users to customize their alerts.
Content Reporting:
• Reporting mechanism for users to flag inappropriate content.

• Moderation tools for administrators to review and take action on reported content.
Monetization:

• Integration with an ad network for displaying ads before, during, or after videos.

• Monetization options for content creators.

Analytics:

• View statistics for videos, including views, likes, and comments.

• User engagement analytics for content creators.

Security:
• Protection against unauthorized access and data breaches.

• Secure video streaming and encryption for sensitive data.

DEPARTMENT OF ISE, SKSVMACET 8

Internship Report on Web Full Stack Development 2023-2024

3.3.1 REQUIREMENTS ANALYSIS

Node js and npm (node package manager):

Node.js actually provides a runtime environment to execute JavaScript code from outside a
browser. NPM, the default package manager for Node Js is used for managing and sharing
the packages for any JavaScript projects. React uses Node.js and NPM for the management
of dependencies and runtime.

We can install node js form the official website https://nodejs.org

Then we just have to follow the instructions on the installation dialog box and node js is
installed. To check if the installation was successful or not you can run this command in your
terminal/command prompt:

node –v and npm –v

To fetch api data from Youtube API:

o Head over to the Google developer’s console

o Create a new project by clicking on Select project drop down right next to the logo.
Click the New Project button an give it a speaking name.
o Select your project by choosing it in the Select Dropdown directly next to the logo
in the header.
o Click the Enable APIs and Services button
o Search for YouTube data
o Click on the YouTube Data API v3
o Click the blue enable button
o In the dashboard, click Credentials on the left sidebar
o Which API are you using: YouTube Data API v3
o Where will you be calling the API from: Web browser
o What data are you accessing: Public data
o Click the What credentials do I need button
o Copy the KEY, and paste it into src/api/youtube.js

DEPARTMENT OF ISE, SKSVMACET 9

Internship Report on Web Full Stack Development 2023-2024

3.3.2 System Design

This mini project was divided into a set of react components. The App.js component renders
two components namely Header and Video Module. The header component has a fixed
header styling with a input search type textbox and having two buttons i.e. search and sort
on the right of it. Search button allows you to search for videos based on your query typed
in the search field. And a sort button helps you to sort the results based on a few factors like:
relevance, date, rating, title, video count and view count.

DEPARTMENT OF ISE, SKSVMACET 10

Internship Report on Web Full Stack Development 2023-2024

3.3.3 Hierarchy of react component

3.3.4 Data flow Diagram:

DEPARTMENT OF ISE, SKSVMACET 11

Internship Report on Web Full Stack Development 2023-2024

3.3.5 Snapshot:

Fig:output 1

Fig:output 2

DEPARTMENT OF ISE, SKSVMACET 12

Internship Report on Web Full Stack Development 2023-2024

CHAPTER 4
REFLECTION

4.1 REFLECTION NOTES

Internship program at INVENTRON TECHNOLOGIES has been successful. I have
achieved most of the expected goals in learning, design and technology. The internship site
was fully cooperative with my work and study plans. I had opportunities to learn Full Stack
Web Development.
In the internship, startup• 2 weeks they completely taught us about the basic web
development. After when they feel I get thorough in Basics, then they started different coding
levels. In the internship program I had to undergo training in which I was given sample codes,
using which I had to work and analysis different types of problems. These methods were later
used to get the required output.

4.1.1 Importance of a mentor or faculty guide to the reflection:

Your reflection process is best led by a workplace it. guide such as a supervisor mentor, or a
faculty member after the experience. This post-experience reflection with a guide gives you
another voice that can ask questions and draw comparisons to abstract idea that are now more
completely understood. Lessons learned can become internalized and put to use in future
work opportunities.
In addition, almost everyone has experienced a less than 100% positive work experience at
one time or another in their work lives. As an intern, at the beginning of your career
experiences and career path, you will almost always learn something that will inform you at
any future work setting. A guide to your reflection activities will point out both the positives
of what you learned as well as the learning that you can take from the absence of an obvious
achievement. Both sides can be extremely powerful and transformational as you approach
next steps in career development.

DEPARTMENT OF ISE, SKSVMACET 13

Internship Report on Web Full Stack Development 2023-2024

4.2 EXPERIENCE:
• Company provides us to the sufficient study material. software’s and projects.
• As an intern I participated in the activities conducted in the company during the
internship period.
• How to implement our ideas into real: as I’m an Information science student we have
different ideas about voice and images.
• When I first step into the company I learnt how to behave with my other interns.
• As I came to programming skills 1 know basics of program but till my internship 1
didn’t use my programming skills anywhere during my internship first time, I used
to implement my programming skills and by own I wrote some smaller programs by
using my knowledge and successfully I executed those programs.
• After completion of my internship whole training build a curious about the present
corporate world and programming languages.
• Interaction with my guide and other team workers my communication skills
improved

4.3 LEARNING OUTCOMES:

• Internship provides broader work experience.

• Develop work habits and attitude necessary for Job success.
• Build a record of work experiences.
• Teaches valuable job search skills carrier assessments.

DEPARTMENT OF ISE, SKSVMACET 14

Internship Report on Web Full Stack Development 2023-2024

4.4 COMPLETION OF CERTIFICATE:

DEPARTMENT OF ISE, SKSVMACET 15

Internship Report on Web Full Stack Development 2023-2024

CHAPTER 5
CONCLUSION

Building this project helped me solidify my knowledge in the main concepts of

HTML,JSS,CSS. This project will include React components, lifecycle methods, state
management, passing props from parent to child components, API request and much more.
Thus, it was a great overall learning experience.

The future work for this react app will be including major features of Youtube such as:

1. Home feed with infinite scroll.

2. Trending videos.

3. YouTube landing page.

4. Displaying comments and video details.

DEPARTMENT OF ISE, SKSVMACET 16

Internship Report on Web Full Stack Development 2023-2024

REFERENCES:

Web Reference:

1. https://developers.google.com/youtube/v3

2. https://scrimba.com/g/glearnreact

3. https://www.techomoro.com/how-to-install-and-setup-a-react-app-onwindows-10/

4. https://scrimba.com/g/gintrotojavascript

5. https://reactjs.org/docs/faq-internals.html

6. https://developers.google.com/apis-explorer

7. https://scrimba.com/g/glearnreact

DEPARTMENT OF ISE, SKSVMACET 17