lOMoARcPSD|31484230

Internship report

CSE Internship (Visvesvaraya Technological University)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by Likith T (likith200305@gmail.com)
 lOMoARcPSD|31484230

VISVESVARAYA TECHNOLOGICAL UNIVERSITY

Jnana Sangama, Belagavi, Karnataka-590014

An Internship Report
On

“FULL STACK WEB DEVELOPMENT”

Along with the project
“PROPERTY LISTING WEBSITE”
Submitted in partial fulfilment for the award of the degree of
Bachelor of Engineering
In
Electronics & Communication Engineering
Submitted by
MOHITH M
1BI20EC073
Internship Carried Out at
VARCONS TECHNOLOGIES Pvt. Ltd.,
# 213, 2nd Floor, 18 M G Road, Ulsoor
Bangalore-560001

Internal Guide External Guide

SRINIVASAMURTHY R TEJAS S RAO
ASSISTANT PROFESSOR GUIDE
DEPARTMENT OF ECE, BIT VARCONS TECHNOLOGIES PVT LTD

DEPARTMENT OF ELECTRONICS & COMMUNICATION ENGINEERING

BANGALORE INSTITUTE OF TECHNOLOGY
K R Road, V.V Puram, Bengaluru-560004
2023-2024

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

BANGALORE INSTITUTE OF TECHNOLOGY

K.R. Road, V. V Puram, Bengaluru -560004 Phone: 26613237/26615865, Fax:22426796

www.bitbangalore.edu.in

Department of Electronics and Communication Engineering.

CERTIFICATE

Certified that the Internship / Professional practice work entitled “FULL STACK WEB
DEVELOPMENT” along with the project “PROPERTY LISTING
WEBSITE” carried out by Mr. MOHITH M bearing USN: 1BI20EC073 a bonafide student of
BANGALORE INSTITUTE OF TECHNOLOGY in partial fulfillment for the award of Bachelor
of Engineering in Electronics and Communication Engineering of the Visvesvaraya
Technological University, Belgaum during the year 2023-2024. It is certified that all corrections
indicated for Internal Assessment have been incorporated in the Report deposited in the departmental
library. The Internship report has been approved as it satisfies the academic requirements in respect of
Internship work prescribed for the said Degree.

SRINIVASAMURTHY R Dr. HEMANTH KUMAR A R

Assistant Professor Professor & H.O.D
Dept. of E.C.E Dept. of E.C.E.

External Viva
Name of the examiners Signature with date
1.
2.

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

ACKNOWLEDGEMENT

I take this opportunity to express my sincere gratitude and respect to the Bangalore
Institute of Technology, Bangalore for providing me an opportunity to carry out my internship
training at Varcons Technologies Pvt Ltd.

I express my sincere regards and thanks to TEJAS S RAO, Our Guide, Varcons
Technologies, for giving necessary advice and guidance.

With profound sense of gratitude, I acknowledge the guidance and support extended by
SRINIVASAMURTHY R, Assistant Professor, Department of Electronics & Communication
Engineering, BIT, Bangalore. His incessant encouragement and valuable technical support have
been of immense help in realizing this internship training. Hir guidance gave us the environment
to enhance our knowledge, skills and to reach the pinnacle with sheer determination, dedication
and hard work.

I would like to thank Dr. VIJAYALAKSHMI, Associate Professor, and Dr.

VIDYASARASWATHI H N, Assistant Professor, Internship coordinators, Department of
Electronics & Communication Engineering, BIT, Bangalore.

I express my sincere regards and thanks To Dr. HEMANTH KUMAR A R, Professor and
HOD, Electronics & communication Engineering, BIT and Dr. M U ASWATH, Principal, BIT,
Bangalore, For their encouragement and support throughout the internship work.

I also extend my thanks to the entire faculty of the Department of ECE, BIT, Bangalore,
who have encouraged me throughout the course of bachelor’s degree.

MOHITH M
(1BI20EC073)

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

ABSTRACT

In the ever-evolving realm of real estate, adaptability and user-centricity have become the cornerstones of
success. This project is a dedicated response to this paradigm shift, outlining the comprehensive
development of a modern real estate listing website with a central focus on simplicity and efficiency. In a
market where time is of the essence and user experience is paramount, our objective is to create a digital
platform that resonates with both property buyers and sellers, offering them an environment that is not
only user-friendly but also finely tuned to the specific needs and expectations of the real estate industry.

Furthermore, this project places an unwavering emphasis on three critical pillars: responsive design,
mobile accessibility, and security. The real estate market is not bound by location or device, and as such,
our website will be meticulously designed to ensure that it functions flawlessly across all screens and
devices. This includes a strong commitment to responsive design principles that adapt to varying screen
sizes and orientations, guaranteeing that users can access and interact with property listings anytime,
anywhere.

In summary, this project represents a significant step forward in redefining the digital landscape of real
estate listings.

We hope, that the project meets the requirements. We are immensely grateful to have been provided with
such an amazing hands-on learning experience.

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

BANGALORE INSTITUTE OF TECHNOLOGY

VISION

To establish and develop the Institute as a center of higher learning, ever abreast with expanding
horizon of knowledge in the field of engineering and technology, with entrepreneurial thinking,
leadership excellence for life-long success and solve societal problem.

MISSION

• Provide high quality education in the engineering disciplines from undergraduate through
doctoral levels with creative academic and professional programs.
• Develop the Institute as a leader in Science, Engineering, Technology and
management, Research and apply knowledge for the benefit of society.
• Establish mutual beneficial partnerships with industry, alumni, local, state and central
governments by public service assistance and collaborative research.
• Inculcate personality development through sports, cultural and extracurricular activities
and engage in the social, economic and professional challenges.

LONG TERM GOALS

• To be among top 3 private engineering colleges in Karnataka and top 20 in India.

• To be the most preferred choice of students and faculty.

• To be the preferred partner of corporate.

• To provide knowledge through education and research in engineering.

• To develop in each student mastery of fundamentals, versatility of mind, motivation for

learning, intellectual discipline and self-reliance which provide the best foundation for
continuing professional achievement.

• To provide a liberal as well as a professional education so that each student acquires a

respect for moral values, a sense of their duties as a citizen, a feeling for taste and
style.

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

DEPARTMENT OF ELECTRONICS AND COMMUNICATION

VISION

Imparting Quality Education to achieve Academic Excellence in Electronics and

Communication Engineering for Global Competent Engineers.

MISSION

• Create state of art infrastructure for quality education.

• Nurture innovative concepts and problem solving skills.

• Delivering Professional Engineers to meet the societal needs.

PROGRAM EDUCATIONAL OBJECTIVES

• Prepare graduates to be professionals, Practicing engineers and entrepreneurs in the

field of Electronics and Communication.

• To acquire sufficient knowledge base for innovative techniques in design and

development of systems.

• Capable of competing globally in multidisciplinary field.

• Graduates will maintain and improve technical competence through continuous

learning process.

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

PROGRAM SPECIFIC OUTCOMES

PSO1: Core Engineering: The graduates will be able to apply the principles of
Electronics and Communication in core areas.
PSO2: Soft Skills: An ability to use latest hardware and software tools in
Electronics and Communication engineering.
PSO3: Successful Career: Preparing Graduates to satisfy industrial needs.

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

COURSE OUTCOMES OF 18ECI85

After going through the internship, the student is able to:

CO1: Apply engineering and management principles.

CO2: Analyze real-time problems and suggest alternate solutions.
CO3: Integrate internship experience with their academic plan.
CO4: Imbibe the practice of professional ethics and need for lifelong learning.
CO5: Build professional network that can be resource for students.

CO TO PO & PSO MAPPING

PO PO PO PO PO PO PO PO PO PO1 PO1 PO1 PSO PSO PSO

1 2 3 4 5 6 7 8 9 0 1 2 1 2 3
CO
H M L M L M --- --- --- L --- --- H L
1
CO
H H M M H M L L L M L --- H L L
2
CO
H L M L L L L L L --- M L ---
3
CO
--- --- --- --- L --- H --- --- M H H M H M
4
CO
L L L L L H H L L L M
5

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

TABLE OF CONTENTS
CHAPTER CONTENTS PAGE NUMBER

CHAPTER 1: PROFILE OF THE ORGANIZATION 1-13

1.1 INTRODUCTION 1
1.1.1 VISION 1
1.1.2 MISSION 1
1.1.3 QUALITY POLICY 2
1.2 HISTORY 2
1.3 PRODUCTS OF VARCONS TECHNOLOGIES 3
1.3.1 ANDRIOD APPS 3
1.3.2 WEB APPLICATION 3
1.3.3 WEB DESIGN 4
1.4 COMPANY MAJOR SERVICES 5
1.5 ROLES AND RESPONSIBILITIES 6
1.5.1 INTERNSHIP DUTIES AND RESPONSIBILITIES 6
1.5.2 SUPPORT 6
CHAPTER 2: ABOUT THE DEPARTMENT 7
2.1 SPECIFIC FUNCTIONALITIES 7
2.2 TESTING 7
2.3 STRUCTURE OF THE DEPARTMENT 8
CHAPTER 3: TASKS PERFORMED 9
3.1 OVERVIEW OF INTERNSHIP ACTIVITIES 9

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

CHAPTER CONTENTS PAGE NUMBER

CHAPTER 4: PHASE 1 OF THE WORK AND OBSERVATION 10-12
4.1 HYPERTEXT MARKUP LANGUAGE(HTML) 10
4.1.1 SYNTAX OF HTML 10
4.2 CASCADED STYLE SHEETS(CSS) 11
4.2.1 CSS SYNTAX 11-12
CHAPTER 5: PHASE 2 OF WORK AND OBSERVATION 13-15
5.1 BOOTSTRAP 13
5.1.1 ADVANTAGES OF BOOTSTRAP 13
5.2 JAVASCRIPT 14
5.2.1 JAVASCRIPT SYNTAX 14
5.2.2 FEATURES OF JAVASCRIPT 14
5.3 FIGMA 15
CHAPTER 6: PHASE 3 OF THE WORK AND OBSERVATION 16-18
6.1 MERN STACK 16
6.1.1 MONGODB 17
6.1.2 EXPRESS.JS 17
6.1.3 REACT.JS 17
6.1.4 NODE.JS 17
6.2 BENEFITS OF USING MERN STACK 18
CHAPTER 7 PHASE 4 OF THE WORK AND OBSERVATION 19-27
7.1 PROJECT IMPLEMENTATION 19
7.1.1 PROBLEM STATEMENT 19
7.1.2 IMPLEMENTATION DETAILS 19
7.1.3 BLOCK DIAGRAM 20
7.2 SYSTEM ANALYSIS 21
7.2.1 EXISITING SYSTEM 21
7.2.2 PROPOSED SYSTEM 21
7.3 TOOLS USED 21
7.3.1 HARDWARE REQUIREMENT SPECIFICATION 21
7.3.2 SOFTWARE REQUIREMENT SPECIFICATION 22
7.4 SNAPSHOTS 23

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

7.4.1 INDEX/MAIN PAGE 23

7.4.2 PROPERTIES PAGE 25
7.4.3 AGENTS PAGE 27
7.4.4 CONTACT US PAGE 28
CHAPTER 8 REFLECTION NOTES 29
8.1 INTERNSHIP OUTCOMES 29
8.2 TECHNICAL OUTCOMES 29
CHAPTER 9 CONCLUSION 30
REFERENCES 31

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

Table of Figures

FIGURE CONTENT PAGE

NUMBER NUMBER

1.1 Varcons Technologies logo 2

4.1 CSS Syntax 11
6.1 Overview of MERN stack 16
7.1 Block Diagram 20
7.4.1 Index/ Main page 23
7.4.2 Properties page 25
7.4.3 Agents page 27
7.4.4 Contact us page 28

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

Full Stack Web Development 2023-24

Chapter 1
PROFILE OF THE ORGANIZATION
1.1 INTRODUCTION
Varcons Technologies is a Technology Organization providing solutions for all web design and
development, MYSQL, PYTHON Programming, HTML, CSS, ASP.NET and LINQ. Meeting the ever
increasing automation requirements, Varcons Technologies specialize in ERP, Connectivity, SEO Services,
Conference Management, effective web promotion and tailor-made software products, designing solutions
best suiting client requirements. The organization where they have a right mix of professionals as a
stakeholder to help us serve our clients with best of our capability and with at par industry standards. They
have young, enthusiastic, passionate and creative Professionals to develop technological innovations in the
field of Mobile technologies, Web applications as well as Business and Enterprise solution.

Varcons Technologies, strive to be the front runner in creativity and innovation in software
development through their well-researched expertise and establish it as an out of the box software
development company in Bangalore, India. As a software development company, they translate this
software development expertise into value for their customers through their professional solutions.

1.1.1 VISION:

To provide high quality and optimal Technological Solutions to business requirements of our clients.

1.1.2 MISSION:

To collaborate with our clients to provide them with best Technological solution hence creating
Good Present and Better Future for our client which will bring a cascading a positive effect in their
business shape as well.

Department Of Electronics and Communication, BIT Page 1

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

Full Stack Web Development 2023-24

1.1.3 QUALITY POLICY:

Varcons Technologies is recognized as a leading provider of cutting-edge technologies and services,

offering scalable solutions for businesses of all sizes. Founded by a group of individuals who initially
conceptualized their ideas on paper, Varcons Technologies now delivers smart and innovative services to
numerous clients. The commitment lies in ensuring that every product and service offered is developed
with practical usability in mind. Prioritizing creativity and customizability, Varcons Technologies cater to
the diverse needs of its clientele.

Furthermore, at Varcons Technologies, subscription models for software products that have been
meticulously configured are provided. This approach enables users to access ready-to-use applications,
significantly reducing installation and configuration time. By offering pre-configured solutions, the aim is
to minimize potential glitches associated with software deployment, thereby enhancing user experience
and satisfaction.

Figure 1.1: Varcons Technologies logo

1.2 HISTORY
Varcons Technologies, was incorporated with a goal “To provide high quality and optimal
Technological Solutions to business requirements of our clients”. Every business is a different and has a
unique business model and so are the technological requirements. They understand this and hence the
solutions provided to these requirements are different as well. They focus on clients requirements and
provide them with tailor-made technological solutions. They also understand that Reach of their Product to
its targeted market or the automation of the existing process into e-client and simple process are the key
features that our clients desire from Technological Solution they are looking for and these are the features
that we focus on while designing the solutions for their clients.

They understand that the best desired output can be achieved only by understanding the clients demand
better. Varcons Technologies work with their clients and help them to define their exact solution
requirement.

Department Of Electronics and Communication, BIT Page 2

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

Full Stack Web Development 2023-24

Sometimes even they wonder that they have completely redefined their solution or new application
requirement during the brainstorming session, and here they position themselves as an IT solutions
consulting group comprising of high caliber consultants. They believe that Technology when used
properly can help any business to scale and achieve new heights of success. It helps Improve its
efficiency, profitability, reliability; to put it in one sentence “Technology helps you to Delight your
Customers” and that is what we want to achieve.

1.3 PRODUCTS OF VARCONS TECHNOLOGIES

1.3.1 ANDROID APPS

It is the process by which new applications are created for devices running the Android operating
system. Applications are usually developed in Java (and/or Kotlin; or other such option) programming
language using the Android software development kit (SDK), but other development environments are
also available, some such as Kotlin support the exact same Android APIs (and byte code), while others
such as Go have restricted API access.

The Android software development kit includes a comprehensive set of development tools. These
include a debugger, libraries, a handset emulator based on QEMU, documentation, sample code, and
tutorials. Currently supported development platforms include computers running Linux (any modern
desktop Linux distribution), Mac OS X 10.5.8 or later, and Windows 7 or later. As of March 2015, the
SDK is not available on Android itself, but software development is possible by using specialized
Android applications.

1.3.2 WEB APPLICATION

It is a client–server computer program in which the client (including the user interface and client-
side logic) runs in a web browser. Common web applications include web mail, online retail sales, online
auctions, wikis, instant messaging services and many other functions. web applications use web
documents written in a standard format such as HTML and JavaScript, which are supported by a variety
of web browsers. Web applications can be considered as a specific variant of client–server software
where the client software is downloaded to the client machine when visiting the relevant web page, using
standard procedures such as HTTP. The Client web software updates may happen each time the web
page is visited.

Department Of Electronics and Communication, BIT Page 3

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

Full Stack Web Development 2023-24

During the session, the web browser interprets and displays the pages, and acts as the universal
client for any web application. The use of web application frameworks can often reduce the number of
errors in a program, both by making the code simpler, and by allowing one team to concentrate on the
framework while another focuses on a specified use case. In applications which are exposed to constant
hacking attempts on the Internet, security- related problems can be caused by errors in the program.

Frameworks can also promote the use of best practices such as GET after POST. There are some
who view a web application as a two-tier architecture. This can be a “smart” client that performs all the
work and queries a “dumb” server, or a “dumb” client that relies on a “smart” server. The client would
handle the presentation tier, the server would have the database (storage tier), and the business logic
(application tier) would be on one of them or on both. While this increases the scalability of the
applications and separates the display and the database, it still doesn’t allow for true specialization of
layers, so most applications will outgrow this model. An emerging strategy for application software
companies is to provide web access to software previously distributed as local applications. Depending
on the type of application, it may require the development of an entirely different browser-based
interface, or merely adapting an existing application to use different presentation technology. These
programs allow the user to pay a monthly or yearly fee for use of a software application without having
to install it on a local hard drive. A company which follows this strategy is known as an application
service provider (ASP), and ASPs are currently receiving much attention in the software industry.

Security breaches on these kinds of applications are a major concern because it can involve both
enterprise information and private customer data. Protecting these assets is an important part of any web
application and there are some key operational areas that must be included in the development process.
This includes processes for authentication, authorization, asset handling, input, and logging and auditing.
Building security into the applications from the beginning can be more effective and less disruptive in the
long run.

1.3.3 WEB DESIGN

It encompasses many different skills and disciplines in the production and maintenance of websites.
The different areas of web design include web graphic design; interface design; authoring, including
standardized code and proprietary software; user experience design; and search engine optimization.

The term web design is normally used to describe the design process relating to the front-end

Department Of Electronics and Communication, BIT Page 4

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

Full Stack Web Development 2023-24

(client side) design of a website including writing mark up. Web design partially overlaps web
engineering in the broader scope of web development. Web designers are expected to have an awareness
of usability and if their role involves creating markup then they are also expected to be up to date with
web accessibility guidelines. Web design partially overlaps web engineering in the broader scope of web
development

1.4 COMPANY MAJOR SERVICES

Website as Software: They develop websites that behave and interact similar to sophisticated software.
These websites emphasize user engagement through features such as responsive design, intuitive
interfaces, interactive elements, and smooth navigation. They often incorporate advanced functionalities
like content management systems, e-commerce capabilities, APIs for data exchange, and social media
integration.

Branding and Design: They offer professional Graphic design, Brochure design & Logo design, are
experts in crafting visual content to convey the right message to the customers. They also design custom
wraps for your products (also known as package designing).

Search Engine Optimization: They help you manage your SEO campaign more efficiently and
effectively. We help you gain market share by leveraging our expertise. our holistic approach to identify
anything that may be hurting your traffic or rankings and show you just how to outrank the competition.

Analytics and Research: We analyze the way your users/customers interact with you/your business by
gathering, studying and understanding the consumer voice and their perception of the product/service.

Embedded Systems and IOT: We work with Consumer Electronics, Lighting, Home Automation,
Metering, Sensor-Technology, Home Appliance and Medical Device companies to help them create
smart and connected products.

Comprehensive Customer Support: With a comprehensive range of services, we guarantee your

technology needs are not just met, but exceeded. We shall work with you customers/users closely to
understand the way your users/customers use/make use of products/services.

Department Of Electronics and Communication, BIT Page 5

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

Full Stack Web Development 2023-24

1.5 ROLES AND RESPONSIBILITIES

1.5.1 INTERNSHIP DUTIES AND RESPONSIBILITIES

 Assisting in conducting literature reviews: Responsibilities include researching and summarizing

existing literature on the topic of the research project. This involves reading scientific papers,
reviewing reports, and analyzing data.

 Assisting in the design of experiments: Collaborating with other members of the research team to
design experiments or studies that will test hypotheses and generate data.

 Collaborating with team members: Working with other members of the team to share findings,
brainstorm ideas, and contribute to the overall project.
 Writing reports and presentations: Responsibilities entail summarizing project findings in written
reports or presentations.

1.5.2 SUPPORT
At VCT, we make sure every product/service that we offer is built keeping in mind the practical
usability of the product/Service, We're a startup focused on Creativity and Customizability, and We also
provide subscription models for Software that we have already built, Since the application is already
configured, the user has a ready-to-use application. This not only reduces installation and configuration
time but also cuts down the time wasted on potential glitches linked to software deployment. Developers
provide technical support to clients, end-users, and other departments within the organization. They
troubleshoot technical issues, provide solutions, and help users understand how to use software products.

Department Of Electronics and Communication, BIT Page 6

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

Full Stack Web Development 2023-24

Chapter 2
ABOUT THE DEPARTMENT

2.1 SPECIFIC FUNCTIONALITIES

 Software Development: The primary responsibility of the developers' department is to design,
develop, test, and deploy software applications to meet the requirements of the clients or end-users.
Developers use programming languages, frameworks, and tools to create software products that are
efficient, user-friendly, and scalable.

 Technical Support: Developers provide technical support to clients, end-users, and other departments
within the organization. They troubleshoot technical issues, provide solutions, and help users
understand how to use software products.

 Research and Development: Developers are responsible for researching new technologies and trends
in software development to improve the quality of the products and services offered by the
organization. They experiment with new programming languages, tools, and techniques to enhance the
organization's capabilities.

 Collaboration: Developers work closely with other departments, such as project management, quality
assurance, and user experience, to ensure the software products meet the organization's requirements
and standards. They collaborate with clients to understand their needs and develop software that meets
their specific requirements.

 Continuous Improvement: Developers continuously improve software products through upgrades,

bug fixes, and new feature additions. They monitor the performance of software products, analyze
user feedback, and make necessary adjustments to improve the product's overall usability
and functionality

Department Of Electronics and Communication, BIT Page 7

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

Full Stack Web Development 2023-24

2.2 TESTING
 The testing phase is an important part of software development. It is the Information zed system will
help in automate process of finding errors and missing operations and also a complete verification to
determine whether the objectives are met and the user requirements are satisfied. Software testing is
carried out in three steps:

The first includes unit testing, where in each module is tested to provide its correctness, validity
and also determine any missing operations and to verify whether the objectives have been met. Errors are
noted down and corrected immediately.

Unit testing is the important and major part of the project. So, errors are rectified easily in
particular module and program clarity is increased. In this project entire system is divided into several
modules and is developed individually So, unit testing is conducted to individual modules.

The second step includes Integration testing. It need not be the case, the software whose modules
when run individually and showing perfect results, will also show perfect results when run as a whole.

2.3 STRUCTURE OF THE DEPARTMENT

Varcons Technologies plays an essential role as an institute, the level of education, and
development of student's skills are based on their trainers. If you do not have a good mentor, then you
may lag in many things from others and that is why we at Varcons Technologies give you the facility of
skilled employees so that you do not feel unsecured about academics.

Personality development and academic status are some of those things which lie on mentor's hands.
If you are trained well then you can do well in your future and knowing its importance of Varcons
Technologies always tries to give you the best.

They have a great team of skilled mentors who are always ready to direct their trainees in the best
possible way they can to ensure the skills of mentors we held many skill development programs as well
so that each and every mentor can develop their own skills with the demands of the companies so that
they can prepare a complete packaged trainee.

Department Of Electronics and Communication, BIT Page 8

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

Full Stack Web Development 2023-24

Chapter 3:

TASKS PERFORMED

3.1 OVERVIEW OF INTERNSHIP ACTIVITIES

Sl. No Name of the Topic Date

1 Introduction and Overview 12th August 2023
2 HTML and CSS 13th August 2023 – 29th August
2023
3 JavaScript, Node.js & 30th August 2023 – 13th September
MongoDB 2023
4 FE project Allotment 5th September 2023
5 Project Implementation 14th September 2023 – 21st
September 2023
6 Submission and Evaluation 22nd September 2023 - 30th
September 2023
7 Certification 3rd October 2023

The internship at Varcons Technologies Pvt Ltd in full-stack development provided the opportunity
to gain knowledge in various languages like HTML, CSS, and JavaScript. This experience identified a
strong interest in web design, leading to a focus on becoming a front-end developer. The comprehensive
curriculum significantly improved understanding of web development and design concepts. Introduction to
HTML and CSS enabled the creation of engaging and dynamic web pages. Additionally, exposure to
Python Django and MySQL provided valuable experience with back-end development, further
enhancing the skill set.

In this Internship, I came to know about technologies and performed tasks using them,
 Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS)
 Bootstrap, JavaScript and Figma
 MERN stack (Mongo DB, Express.js, React.js and Node.js)
 Project implementation (Property Listing website)

Department Of Electronics and Communication, BIT Page 9

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

Full Stack Web Development 2023-24

Chapter 4:

PHASE 1 OF THE WORK AND OBSERVATION

4.1 HYPERTEXT MARKUP LANGUAGE (HTML)
Hyper Text Markup Language or HTML is the standard markup language for documents designed to

be displayed in a web browser. Web browsers receive HTML documents from a web server or from local
storage and render the documents into multimedia web pages.

HTML provides a means 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.

4.1.1 SYNTAX OF HTML STATEMENT

Syntax: <p>This is a paragraph </p>
HTML, a markup language, utilizes diverse tags for content formatting, enclosed within angle
brackets <>. While some tags stand alone, most are paired with corresponding closing tags. In this
context,<p> and </p> forms the opening and closing tags respectively where ‘p’ indicates a paragraph.

In HTML, an element commences with a starting tag and concludes with a closing tag if it
encapsulates additional content, denoted by the element name preceded by a forward slash.In our context,
‘p’ is the element which indicates a paragraph element.
Here are few such HTML elements:

HTML ELEMENT STARTING TAG DESCRIPTION CLOSING TAG

<p> <p> Defines a paragraph </p>

<a> <a> Defines a hyperlink </a>

<h1> <h1> Defines a top-level heading </h1>

<ul> <ul> Defines an unordered list </ul>

<div> <div> Defines a division or section </div>

<img> <img> Defines an image NA

Department Of Electronics and Communication, BIT Page 10

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

Full Stack Web Development 2023-24

HTML attributes provide additional information about HTML elements.

 All HTML elements can have attributes.

 Attributes are always specified in the start tag.

 Attributes usually come in name/value pairs like name="value"

Here is a table listing a few of the common attributes used in HTML:

ATTRIBUTE MEANING
id Unique id for an HTML element

style Inline CSS styles for an element

href URL of the linked resource (used with <a> elements)

src URL of the image or media file

alt Alternative text for an image

width Width of an element (used with <img> elements)

height Height of an element (used with <img> elements)

4.2 CASCADED STYLE SHEETS(CSS)

Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation and
styling of a document written in a markup language such as HTML or XML.

CSS is easy to learn and understand but it provides powerful control over the presentation of an

HTML document. CSS has a simple syntax and uses several English keywords to specify the names of
various style properties.

4.2.1 CSS SYNTAX:

A CSS comprises of style rules that are interpreted by the browser and then applied to the
corresponding elements in your document.

Figure 4.1: CSS Syntax

Department Of Electronics and Communication, BIT Page 11

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

Full Stack Web Development 2023-24

The above image explains the parts of a CSS syntax into three parts:

 Selector: Identifies the HTML element to which the rule applies. In the provided example, the selector
is h1, indicating that the rule affects all <h1> elements in the HTML document.

 Declaration: Comprises a property-value pair determining the styling of the selected element. In the
sample, there are two declarations: color: blue and font-size: 12px. The former sets text color to blue for
<h1> elements, while the latter adjusts font size to 12 pixels.

 Property-Value: Each declaration includes a property and a value. The property specifies the style
aspect being modified, while the value sets the property's value. For instance, the property color dictates
text color modification, with the value blue indicating the chosen color

Department Of Electronics and Communication, BIT Page 12

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

Full Stack Web Development 2023-24

Chapter 5:

PHASE 2 OF THE WORK AND OBSERVATION

5.1 BOOTSTRAP

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end
web development. It contains HTML, CSS and (optionally) JavaScript-based design templates for
typography, forms, buttons, navigation, and other interface components.

The most prominent components of Bootstrap are its layout components, as they affect an entire web
page. The basic layout component is called "Container", as every other element in the page is placed in it.
A precompiled version of Bootstrap is available in the form of one CSS file and three JavaScript files that
can be readily added to any project.

Bootstrap containers can be selected to have one of the viewport widths to accommodate various
devices:

 Smaller than 576 pixels

 576–768 pixels

 768–992 pixels

 992–1200 pixels

 Larger than 1200 pixels

5.1.1 ADVANTAGES OF BOOTSTRAP:

 Faster development: Pre-built components and styles save time compared to coding everything from
scratch.

 Responsive design: Bootstrap ensures websites adapt to different screen sizes, a crucial aspect of
modern web development.

 Consistent UI: Bootstrap promotes a consistent look and feel across web pages, streamlining the
development process.

 Learning aid: Working with Bootstrap can solidify understanding of HTML, CSS, and JavaScript
concepts used to create these components.
 Complexity: It is very easy to use. Anybody having basic knowledge of HTML and CSS can use
Bootstrap.

Department Of Electronics and Communication, BIT Page 13

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

Full Stack Web Development 2023-24

5.2 JAVASCRIPT

JavaScript (JS) is a programming language and core technology of the Web, alongside HTML and
CSS. 99% of websites use JavaScript on the client side for webpage behavior.

Web browsers have a dedicated JavaScript engine that executes the client code on users' devices.
These engines are also utilized in some servers and a variety of apps.

The JavaScript client-side mechanism provides many advantages over traditional CGI server-side
scripts. For example, you might use JavaScript to check if the user has entered a valid e-mail address in a
form field. The JavaScript code is executed when the user submits the form, and only if all the entries are
valid, they would be submitted to the Web Server. JavaScript can be used to trap user-initiated events such
as button clicks, link navigation, and other actions that the user initiates explicitly or implicitly.

5.2.1 JAVASCRIPT SYNTAX:

JavaScript syntax defines the rules for writing correct JavaScript code. Here are some fundamental aspects:

 Variables:

Used to store data.

Declared with keywords let (preferred for modern JavaScript) or const (for constant values).

 Data Types:

JavaScript is loosely typed - variables can hold different data types without explicit declaration.

Common data types include Numbers, Strings, Booleans, Objects, Arrays.

 Comments:

Explain code functionality for humans (not executed by JavaScript engine).

Use // for single-line comments and /* */ for multi-line comments.

5.2.2 FEATURES OF JAVASCRIPT:

 Versatility: JavaScript can be used for both front-end (client-side) and back-end (server-side)
development, making it a full-stack solution for web development.

 Lightweight Scripting Language: Designed for data handling in web browsers, it's known for its fast
execution and minimal resource usage.

 Platform Independent: JavaScript code can run on various platforms with a compatible engine,
making it widely applicable.

Department Of Electronics and Communication, BIT Page 14

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

Full Stack Web Development 2023-24

 DOM Manipulation: JavaScript interacts with the Document Object Model (DOM), allowing for
dynamic changes to web page content and structure.

 Event-Driven: Responds to user interactions and browser events, creating dynamic web experiences.

5.3 FIGMA

Figma is a web-based collaborative interface design tool with some offline capabilities. Here's a
breakdown of its key features:
 Interface Design (UI) & User Experience (UX) Focus: Designed specifically for UI/UX design
workflows, Figma offers tools for creating vector graphics, prototyping user interfaces, and designing
interactive elements.
 Real-Time Collaboration: Multiple designers can work on the same design project simultaneously,
seeing changes instantly.
 Version Control & Branching: Figma allows version history tracking and the creation of branches for
exploring design variations without affecting the main project.
 Prototyping Features: Create interactive prototypes to simulate user journeys and test design
functionality.
 Design System Management: Organize reusable design components (like buttons, icons) for consistent
brand application across projects.

Department Of Electronics and Communication, BIT Page 15

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

Full Stack Web Development 2023-24

Chapter 6:

PHASE 3 OF THE WORK AND OBSERVATION

6.1 MERN STACK

MERN stands for MongoDB, Express.js, React.js, and Node.js, and it's a popular choice for building
full-stack web applications. It allows developers to use a single language, JavaScript, across the entire
stack, enabling code reuse and streamlining the development process. Here is a brief explanation of the
stack’s four components:
 MongoDB: A NoSQL database that stores data in flexible, JSON-like documents.
 Express.js: A minimalist web application framework for Node.js that simplifies building web
applications and APIs.
 React.js: A JavaScript library for building user interfaces, particularly single-page applications, using
reusable components.
 Node.js: A JavaScript runtime built on Chrome's V8 JavaScript engine, used for building scalable and
high-performance network applications.

Figure 6.1: Overview of MERN stack

Department Of Electronics and Communication, BIT Page 16

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

Full Stack Web Development 2023-24

6.1.1 MONGODB:

MongoDB is a powerful and versatile NoSQL database solution for modern web applications and
data-driven projects that prioritize flexibility, performance, and scalability.

Data Model: Stores data in flexible, JSON-like documents. Documents can have different structures
and don't require a predefined schema (unlike relational databases with rigid table structures).

Scalability: It is designed to handle large amounts of data and high traffic and scales horizontally by
adding more servers to the database cluster for increased processing power and storage capacity.

6.1.2 EXPRESS.JS:

Express.js, often shortened to Express, is a popular web framework built on top of Node.js. It
provides a robust set of features for building web applications and APIs.

Simplified Server-Side Development: Express streamlines working with Node.js HTTP

functionalities by offering a layer of abstraction and it handles common tasks like routing (mapping
URLs to specific functions), incoming request handling, and response generation.

6.1.3 REACT.JS:

React.js, also commonly referred to as React, is a free and open-source JavaScript library for
building user interfaces (UI) specifically. It's known for its component-based approach and its focus on
efficient UI updates.

Component-Based Architecture: React applications are built by composing reusable UI

components and these components encapsulate both the UI template (what it looks like) and the
logic (how it behaves).

6.1.4 NODE.JS:

Node.js is an open-source, cross-platform JavaScript runtime environment built on Chrome's V8

JavaScript engine. It allows you to run JavaScript code outside of a web browser, primarily focusing on
server-side scripting and application development.

Event-Driven Architecture: Node.js operates on an event-driven, non-blocking I/O (Input/Output)

model. This means it can handle multiple concurrent requests without waiting for one to finish before
processing the next.

Department Of Electronics and Communication, BIT Page 17

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

Full Stack Web Development 2023-24

6.2 BENEFITS OF USING MERN STACK

 JavaScript Everywhere: You can leverage JavaScript throughout the development process, from front-
end UI to back-end logic, potentially streamlining development for JavaScript-familiar teams.

 Faster Development: Each MERN component is known for relative ease of use, potentially leading to
faster development cycles.

 Scalability: Both MongoDB and Node.js can handle large amounts of data and traffic, making MERN
suitable for scalable web applications.

 Active Community: Each technology has a large and active developer community, providing ample
resources and support.

Department Of Electronics and Communication, BIT Page 18

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

Full Stack Web Development 2023-24

Chapter 7:

PHASE 4 OF THE WORK AND OBSERVATION

7.1 PROJECT IMPLEMENTATION

7.1.1 PROBLEM STATEMENT:
 Description: The template is for real estate agencies. It should display property listings with high-
quality images, detailed descriptions, and interactive search filters and an inquiry form should be easily
accessible.
 Objective: Implement a robust property search functionality with filters and ensure that property
images load quickly and are presented in a user-friendly gallery format by making the inquiry form
simple and prominent.

7.1.2 IMPLEMENTATION DETAILS:

This website is hosted in Render, URL: https://tt-developers.onrender.com/

The real estate listing website is designed to provide users with a seamless experience in exploring
available properties and connecting with real estate agents. The website offers comprehensive details about
the properties listed by the company, including images, descriptions, and specifications. Its primary
objective is to centralize all information related to the real estate listings offered by TT Developers in one
accessible platform.

The home page serves as a gateway, presenting essential information about the company and its
services. It provides information regarding the presence of the organization and its key locations, recently
added properties, newsletter, and social media handles of the organization. Following this, the properties
page showcases detailed information about each listing, highlighting key features and amenities to assist
potential buyers in their decision-making process and provides an intuitive search filter for the users.

The agents section offers a visual tour of all the agents of the organization, allowing users to find the
right agent that is suitable for the property they want. Lastly, the contact page facilitates communication
between users and the company, enabling inquiries and requests to be efficiently addressed.

Department Of Electronics and Communication, BIT Page 19

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

Full Stack Web Development 2023-24

Backend functionality, crucial for managing inquiries and property listings, is supported by database
integration, leveraging technologies such as MongoDB. Routing through Express.js ensures smooth
navigation across the website, directing users to relevant content based on their preferences. Additionally,
a user login feature grants access to like and wish list property listings effectively.

Overall, the website serves as a vital tool for individuals seeking to explore real estate opportunities
and connect with trusted professionals in the industry.

7.1.3 BLOCK DIAGRAM:

Figure 7.1: Block Diagram

Department Of Electronics and Communication, BIT Page 20

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

Full Stack Web Development 2023-24

7.2 SYSTEM ANALYSIS

7.2.1 EXISTING SYSTEM:

 Aging Design: The current website suffers from an outdated and chaotic design, diminishing its
attractiveness and user-friendliness.

 Restricted Search Capabilities: The search and filtering features on the current website are
constrained, posing difficulties for users seeking specific properties.

 Lack of Responsiveness: The website lacks responsiveness, leading to usability challenges on mobile
devices, which are becoming the primary platform for property searches.

7.2.2 PROPOSED SYSTEM:

 Modern Design: The proposed system will feature a modern, clean, and user-friendly design that
appeals to users and enhances their experience.
 Advanced Search and Filters: Robust search and filter options will be implemented, allowing users to
refine their property searches based on various criteria like location, price, and more.
 Responsive Design: The new website will be fully responsive, ensuring seamless access and usability
across all devices, including smartphones and tablets with features like lazy loading of images.
 Communication Channels: A newsletter will be included to keep users informed about exciting offers,
promotions, and relevant updates at regular intervals to interested individuals.
 Agents Support: Real estate professionals will have dedicated profiles and tools to manage leads and
communicate with clients efficiently.

7.3 TOOLS USED:

7.3.1 HARDWARE REQUIREMENT SPECIFICATION:

 Internet Connection
 GHz or faster processor
 1 GB of RAM

Department Of Electronics and Communication, BIT Page 21

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

Full Stack Web Development 2023-24

7.3.2 SOFTWARE REQUIREMENT SPECIFICATION:

 Functional Requirements
 Windows 10 or above Operating System
 VS Code ( IDE Recommended)
 Extensions:
HTML Formatter
Live Server

 Non-Functional Requirements

 Availability: The online registration system shall permit backing up of the registration database
while other registration activities are going on.
 Accessibility: The system shall be accessible by people with specific vision needs to the extent
that a user shall be able to display whole user interface in a larger font without truncating
displayed text or other values.
 Security: The access permissions for system data may only be change by the systems data
administrator passwords shall never be viewable at the point of entry or any other time.

Department Of Electronics and Communication, BIT Page 22

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

Full Stack Web Development 2023-24

7.4 SNAPSHOTS:
7.4.1 INDEX/MAIN PAGE:

Department Of Electronics and Communication, BIT Page 23

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

Full Stack Web Development 2023-24

Department Of Electronics and Communication, BIT Page 24

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

Full Stack Web Development 2023-24

Figure 7.4.1: Index/Main page

7.4.2 PROPERTIES PAGE:

Department Of Electronics and Communication, BIT Page 25

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

Full Stack Web Development 2023-24

Figure 7.4.2: Properties page

Department Of Electronics and Communication, BIT Page 26

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

Full Stack Web Development 2023-24

7.4.3 AGENTS PAGE:

Figure 7.4.3: Agents page

Department Of Electronics and Communication, BIT Page 27

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

Full Stack Web Development 2023-24

7.4.4 CONTACT US PAGE:

Figure 7.4.4: Contact us page

Department Of Electronics and Communication, BIT Page 28

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

Full Stack Web Development 2023-24

Chapter 8
REFLECTION NOTES

It was a very knowledgeable experience where one gets to experience the current Industry standards
and the skills expected in an individual trying to secure a career in the web development domain. It helped
in improving myself as a better team person in trying to coordinate with my team during the
implementation of the project. It helped me in designing intuitive web interfaces which are functional while
still being visually pleasing with an optimized user interface for better interaction. It helped me in making
better choices with the perspective of the end user. I was able to cultivate professionalism and collaboration
skills through communication, and problem-solving, and feedback essential in today’s work environment.

8.1 INTERNSHIP OUTCOMES

Internship outcomes are:

 This internship has taught me how to deal with sudden changes in my workload.
 I learned to break down complex projects into manageable tasks and track progress towards completion.
 The internship fostered my ability to work independently while also being a valuable team player,
contributing effectively to group projects.
 It adds as a valuable addition to my portfolio to show my technical capabilities to potential recruiters.

8.2 TECHNICAL OUTCOMES:

 I gained experience with [specific technology or software] used in the industry, allowing me to contribute
more effectively to future projects.
 I honed my problem-solving skills by troubleshooting technical challenges and independently researching
solutions.
 This internship strengthened my understanding of [technical concept] through real-world application in
various projects.

Department Of Electronics and Communication, BIT Page 29

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

Full Stack Web Development 2023-24

Chapter 9
CONCLUSION

Through this FSWD internship, I gained valuable hands-on experience in the fundamentals of front-
end web development. Mastering the core technologies like HTML, CSS, and JavaScript has equipped me to
contribute meaningfully to web development projects. The internship fostered a strong foundation in user-
centered design principles. I learned to prioritize intuitive user interfaces (UIs) that are clear, accessible, and
engaging for a broad audience. The template was designed in such a way that future modifications can be
done easily. The webpage boasts an intuitive design, ensuring ease of use with a user-friendly interface that
is clear and unambiguous. Overall, this internship has solidified my passion for the full stack web
development and provided a clear roadmap for further learning. I am confident that the skills and knowledge
I've gained will enable me to contribute effectively to building user-friendly and dynamic web experiences.

Department Of Electronics and Communication, BIT Page 30

Downloaded by Likith T (likith200305@gmail.com)

 lOMoARcPSD|31484230

Full Stack Web Development 2023-24

REFERENCES

 Geeks for Geeks geeksforgeeks.org

 W3 schools https://www.w3schools.com/

 MDN Web Docs https://developer.mozilla.org/en-US/docs/Web

 Bootstrap getbootstrap.com

 VS Code Documentation https://code.visualstudio.com/docs

 Figma www.figma.com

Department Of Electronics and Communication, BIT Page 31

Downloaded by Likith T (likith200305@gmail.com)