AN

INTERNSHIP REPORT ON

FULLSTACK WEB DEVELOPMENT

submitted in partial fulfilment of the requirements

for the award of the degree

of

BACHELOR OF TECHNOLOGY

in

COMPUTER SCIENCE AND ENGINEERING

By

PEDDINTI MANOJ 21751A05C9

SREENIVASA INSTITUTE OF TECHNOLOGY AND MANAGEMENT

STUDIES

CHITTOOR-517127, A.P.

(Autonomous -NBA accredited)

(Approved by AICTE & Affiliated to JNTUA, Ananthapuramu)

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

(2024-2025)

i
SREENIVASA INSTITUTE OF TECHNOLOGY AND MANAGEMENT STUDIES
CHITTOOR-517127, A.P.
(Autonomous – NBA Accredited)
(Approved by AICTE & Affiliated to JNTUA, Ananthapuramu)

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

CERTIFICATE

This is to certify that the internship report “FULLSTACK WEB DEVELOPMENT” is

a genuine work of

PEDDINTI MANOJ 21751A05C9

submitted to the department of Computer Science and Engineering, in partial

fulfilment of the requirements for the award of the degree of Bachelor of
Technology in Computer Science and Engineering, during the academic year
2024-2025.

Signature of the Supervisor Signature of the Head of Department

Mrs. P. LEELAVATHI , M.Tech., Dr. R. KARUNIA KRISHNA PRIYA

Assistant Professor, Associate Professor & HOD,
Department of Computer Science and Department of Computer Science and
Engineering, Engineering,
Sreenivasa Institute of Technology and Sreenivasa Institute of Technology and
Management Studies, Management Studies,
Chittoor, A.P. Chittoor, A.P.

Submitted for Semester End Examination held on ……………………

INTERNAL EXAMINER EXTERNAL EXAMINER

ii
 STUDENT’S DECLARATION

I, PEDDINTI MANOJ, a student of B. Tech, Reg. No. 21751A05C9 of the

Department of Computer science and Engineering, Sreenivasa Institute of Technology
and Management Studies do hereby declare that I have completed the mandatory
Internship from 05-01-2025 to 05-03- 2025 in under the Faculty Guide ship of, Mrs. P.
LEELAVATHI, M.Tech., Assistant Professor, Department of Computer science and
Engineering in Sreenivasa Institute of Technology and Management Studies, Chittoor.

(Signature and Date)

iii
INTERNSHIP CERTIFICATE

iv
 ACKNOWLEDGEMENT

A Project of this magnitude would have not been possible without the guidance
and co-ordination of many people. I am fortune in having top quality people to help,
support and guide me in every step towards my goal. I’m very much grateful to the
Chairman Sri K. Ranganadham, Garu for his encouragement and stalwart support. I
also extremely indebted to the Secretary Sri D.K. Badri Narayana, Garu for his constant
support.
I express my sincere thanks to our Academic Advisor Dr. K. L. Narayana.,
MTech., Ph.D., further, I would like to express my profound gratitude to our principal
Dr. N. Venkatachalapathi, MTech., Ph.D., for providing all possible facilities
throughout the completion of my project work.
I express my sincere thanks to our Dean (Academics), Dr. M. Saravanan, M.E.,
Ph.D., further I express my sincere thanks to Head of the Department Dr.
R. Karunia Krishna Priya MTech., Ph.D. Associate Professor for his co-operation
and valuable suggestions towards the completion of project work.
I express my sincere thanks to my guide Mrs. P. Leelavathi, M.Tech., Assistant
Professor for offering me the opportunity to do this work under his guidance.
I express my sincere salutation to all other teaching and non-teaching staff of our
department for their direct and indirect support given during my project work. Last but
not the least. I dedicate this work to my parents and the Almighty who have been with
me throughout and helped me to overcome the hard times.

PEDDINTI MANOJ 21751A05C9

v
 ABSTRACT

As part of my FULL STACK WEB DEVELOPMENT internship at Codtech IT

Solutions, I completed four practical projects that enhanced my technical and problem-
solving skills.
1. Portfolio Website – Built a responsive personal website with advanced CSS and
animations using GSAP for smooth transitions and modern UI.
2. Online Learning Platform – Developed a platform with video lessons, quizzes,
and user progress tracking, focusing on authentication and media streaming.
3. Collaborative Document Editor – Created a real-time editor using React.js and
Node.js with MongoDB, supporting live collaboration via WebSockets.
4. E-Commerce PWA – Built a Progressive Web App with offline support and push
notifications using service workers and Cache API.
These projects strengthened my abilities in frontend frameworks, backend
development, database integration, and user-centric design.

vi
 INDEX

CHAPTER TABLE OF CONTENT PAGE

NO NO

1 INTRODUCTION

1.1 INTRODUCTION OF THE COMPANY 1

AND COURSE INTRODUCTION TO
1.2 UI/UX DESGN 3

2 FPROJECT DESCRIPTION

2.1 STEP TO IMPLEMENT 4

2.1.1 TASK 1 4
2.1.2 TASK 2 12
2.1.3 TASK 3 19
2.1.4 TAKS 4 30

3 SUMMERY AND CONCLUSION

3.1 PROJECT SUMMERY 39

3.2 CONCLUSION 41

3.3 REFERENCES & PHOTOS 44

vii
 CHAPTER – 1
INTRODUCTION

1.1 INTRODUCTION OF THE COMPANY AND COURSE

INTRODUCTION TO THE COMPANY:
At CodTech IT Solutions, our mission is to empower businesses with
innovative IT services and consulting. We deliver customized, reliable, and cost-
effective technology solutions to help clients achieve their goals. Our commitment
to excellence builds lasting partnerships and drives success in a digital landscape.
CodTech IT Solutions Pvt. Ltd. is a leading Indian IT services provider,
committed to delivering comprehensive and innovative solutions across diverse
domains. As an organization registered with AICTE, CodTech focuses on
fostering talent and skill development through a dynamic learning environment for
aspiring professionals. Through real-world projects and mentorship, they are
equipped with the skills and confidence needed to excel in their careers, making
CodTech a preferred destination for innovation and opportunity.

INTRODUCTION TO THE COURSE:

The Full Stack Web Development course offered by Codtech IT
Solutions was designed to provide comprehensive, hands-on training in both
front-end and back-end web technologies. Over a period of two months, the course
focused on building dynamic, responsive, and scalable web applications using
modern development tools and frameworks.
Participants were introduced to key concepts such as HTML, CSS, JavaScript, and
advanced libraries like React.js and GSAP on the front-end, as well as Node.js,
Python (Django/Flask), and databases like MongoDB and PostgreSQL on the
back-end. The course emphasized real-world applications through task- based
learning, encouraging problem-solving, creativity, and code optimization.
By the end of the course, learners were equipped with the skills to develop
complete web solutions, from user interfaces to server-side logic and database
integration, preparing them for professional roles in web development.

1
1.2 INTRODUCTION TO FULL STACK WEB DEVELOPMENT
DEFINITION:
Full Stack Web Development refers to the end-to-end development of web applications,
covering both the front-end (client-side) and back-end (server-side) technologies. It
involves building responsive user interfaces, implementing server logic, and managing
databases to deliver complete and functional web applications. A full stack developer
possesses the skills to handle all layers of development, ensuring smooth integration and
high performance across the web stack.

Role of a Full Stack Developer:

A full stack developer is responsible for designing, developing, and maintaining web
applications from concept to deployment. Their key responsibilities include:

1. Frontend Development – Building dynamic and responsive interfaces using

HTML, CSS, JavaScript, and modern frameworks like React.js or Vue.js.

2. Backend Development – Creating server-side logic and APIs using Node.js,

Python (Flask/Django), or other backend technologies.

3. Database Management – Integrating and managing data using databases like

MongoDB or PostgreSQL, ensuring data security and scalability.

4. Version Control & Deployment – Using Git for version control and deploying
applications using services like GitHub, Vercel, or Heroku.

Components of Full Stack Web Development

Frontend Development
 Key Features: UI layout, responsiveness, DOM manipulation, animations, state
management.
 Technologies Used: HTML5, CSS3, JavaScript, React.js, Vue.js, Bootstrap,
GSAP, Three.js.
Backend Development
 Key Features: API creation, server logic, authentication, database interaction.
 Technologies Used: Node.js, Express.js, Python (Django/Flask), RESTful APIs,
JWT.

2
Database Management
 Key Features: Data storage, retrieval, schema design, relationships, and
performance optimization.
 Technologies Used: MongoDB, PostgreSQL, Mongoose ORM.
Tools & Deployment
 Key Features: Version control, CI/CD, testing, and live deployment.

 Technologies Used: Git, GitHub, Postman, Heroku, Netlify, Vercel.

3
 CHAPTER - 2
PROJECT DESCRIPTION

2.1.1 Task 1: Personal Portfolio Website

Description
This task focuses on building a modern, interactive personal portfolio website to
showcase your profile, skills, and projects. It uses a smooth UI with CSS animations and
optional GSAP for dynamic transitions. The site is responsive and works across all
devices.

Features
1. Smooth scroll navigation between sections (Home, About, Skills, Projects,
Contact).

2. Animated hero section with entrance effects using GSAP.

3. Responsive layout with clean typography (Poppins font).

4. Interactive contact form.

5. Scroll-based section reveal effects.

6. Single-page structure for simplicity and focus.

Step-by-Step Process to Build the App

Planning and Design

 Sketch wireframes for key sections: Hero, About, Projects, Contact.

 Use a modern, clean font (Poppins) and flat color scheme.

Setup

 Structure all components (header, sections, footer) in a single HTML file.

 Use internal <style> and <script> blocks to keep it all in one file.

UI Enhancements

 Use CSS transitions and GSAP for scroll animations.

 Hover effects on buttons and cards.

4
  Smooth scroll behavior and animated headers.

Testing and Debugging

 Check responsiveness on mobile, tablet, and desktop.

 Validate contact form input and button behaviors.

Deployment

 Upload to GitHub Pages or Netlify as a portfolio-ready resume site.

5
SOURCE CODE
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<title>My Portfolio</title>

<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swa
p" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

<style>

* { margin: 0; padding: 0; box-sizing: border-box;

} body {
font-family: 'Poppins', sans-serif;
background: #fdfdfd;
color: #333;

scroll-behavior: smooth;

header {
background:
#222; color: #fff;
padding: 1rem
2rem; position:
fixed; width:
100%;
top: 0;

z-index: 1000;
display: flex;
justify-content: space-
between; align-items: center;

6
}

header nav a {

margin-left: 1rem;
text-decoration:
none; color: #fff;
font-weight: 500;

section {

padding: 100px
20px; min-height:
100vh; display:
flex;
flex-direction:
column; justify-
content: center;
}

.hero {

background: linear-gradient(135deg, #6e8efb, #a777e3);

color: white;
text-align: center;

.hero h1 {

font-size: 3rem;
margin-bottom:
1rem;
}

.section-title {
font-size:
2rem;
margin-bottom:
1rem; text-align:
center;
}

.about, .projects, .contact {

7
 background: #f5f5f5;

.projects .card {
background: #fff;
border-radius:
10px;
box-shadow: 0 5px 15px
rgba(0,0,0,0.1); margin: 1rem auto;
padding: 1rem;
max-width:
500px;
}

.contact form {

max-width:
400px; margin: 0
auto; display:
flex;
flex-direction: column;

.contact input, .contact textarea {

padding: 0.75rem;
margin-bottom:
1rem; border-radius:
5px; border: 1px
solid #ccc; font-
family: inherit;
}

.contact button {
padding: 0.75rem;
background:
#6e8efb; color:
white;
border: none;
border-radius:
5px;

8
 cursor: pointer;
font-weight:
bold;
}

footer {

text-align: center;
padding: 1rem;
background:
#222; color:
white;
}

@media (max-width: 600px) {

.hero h1 { font-size: 2rem; }

</style>

</head>

<body>

<header>

<div class="logo">My Portfolio</div>

<nav>

<a href="#hero">Home</a>

<a href="#about">About</a>

<a href="#projects">Projects</a>

<a href="#contact">Contact</a>

</nav>

</header>

<section class="hero" id="hero">

9
 <h1>Hi, I'm a Web Developer</h1>

<p>I build responsive and interactive websites</p>

</section>
<section class="about" id="about">

<h2 class="section-title">About Me</h2>

<p style="text-align: center;">I’m a passionate full stack developer skilled in modern

front- end and back-end technologies. I love creating visually engaging and functional
websites.</p>
</section>
<section class="projects" id="projects">

<h2 class="section-title">Projects</h2>

<div class="card">

<h3>To-Do List Web App</h3>

<p>A simple, interactive task manager with a clean UI and responsive layout.</p>

</div>
gsap.utils.toArray("section").forEach(section
=> { gsap.from(section, {
scrollTrigger: {
trigger: section,
start: "top
80%",
},

y: 50,

opacity: 0,

duration: 0.8,

ease: "power2.out"

});

});

</script>

</body>

</html>
10
SAMPLE OUJTPUT

11
2.1.2 Task 2: Online Learning Platform
Description
This task involves creating a simple yet elegant online learning interface where
users can watch video lessons and track their progress. The focus is on a responsive video
layout, user feedback through progress indicators, and an engaging learning experience.
Features

1. Embedded video player with lesson list

2. Click-to-play functionality
3. Progress tracking with completed lesson badges

4. Clean card-based layout for courses

5. Fully responsive design

Step-by-Step Process Planning
and Design
 Structure layout for video, lesson list, and progress.

 Choose a calming color scheme for user focus.

Setup

 HTML layout for video area and clickable lesson items.

 CSS for a modern card-style layout.

UI Enhancements

 Hover animations and transitions for cards.

 Responsive design for tablet and mobile.

Testing and Debugging

 Ensure video playback works across devices.

 Test progress tracking logic and localStorage save.

Deployment

 Hosted on GitHub Pages or Netlify with accessible design and clean code

12
SOURCE CODE
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<title>Online Learning Platform</title>

<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet">

<style>

:root {

--bg-light: #f0f2f5;

--bg-dark: #1a1a2e;

--card-light: rgba(255, 255, 255, 0.8);

--card-dark: rgba(255, 255, 255, 0.05);

--text-light: #1a1a1a;

--text-dark: #f5f5f5;

--accent: #6e8efb;

body {

font-family: 'Poppins', sans-serif;

margin: 0;
padding: 0;

background: var(--bg-light);
color: var(--text-light);
transition: all 0.3s ease-in-out;
}

13
body.dark {

background: var(--bg-dark);

color: var(--text-dark);

header {

padding: 1.5rem 2rem;

display: flex;
justify-content: space-
between; align-items: center;
background: linear-gradient(to right, #6e8efb, #a777e3);
color: white;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);

.toggle-mode {

padding: 0.5rem
1rem; border: none;
background: #fff;
color: #333;
font-weight: 600;
border-radius:
6px; cursor:
pointer;
}

.container {
display: flex;
flex-wrap:
wrap; padding:
2rem;

14
 gap: 2rem;

.video-player {
flex: 2;
min-width: 300px;
background: var(--card-
light); border-radius: 20px;
box-shadow: 0 8px 20px
rgba(0,0,0,0.15); padding: 1rem;
transition: 0.3s ease;

body.dark .video-player {
background: var(--card-
dark); backdrop-filter:
blur(10px);
}

iframe {
width:
100%;
height: 400px;
border: none;
border-radius:
12px;
}

.lesson-list {
flex: 1;
display: flex;
flex-direction: column;

15
 gap: 1rem;

.lesson {

background: var(--card-light);
padding: 1rem;
border-radius: 12px;
cursor: pointer;
box-shadow: 0 4px 10px
rgba(0,0,0,0.1); transition: 0.2s ease;
display: flex;

justify-content: space-
between; align-items: center;
}

.lesson:hover {

transform: translateY(-3px);

.lesson.completed {
background:
#6e8efb; color:
white;
}

body.dark .lesson {
background: var(--card-
dark); backdrop-filter:
blur(10px);
}

16
 body.dark .lesson.completed {
background: #a777e3;
}

</style>

</head>

<body>

function playVideo(index) {
document.getElementById('videoFrame').src =
lessons[index];

// Mark as completed

const allLessons = document.querySelectorAll('.lesson');

allLessons.forEach((el, i) => {
if (i <= index) el.classList.add('completed');

});

function toggleDarkMode() {
document.body.classList.toggle("dark");
}

</script>

</body>

</html>

17
SAMPLE OUTPUT

18
2.1.3 Task 3: Real-Time Collaborative Document Editor
This task focuses on building a web-based document editor that simulates
collaborative editing in real-time. Users can write, save, delete, and revisit documents
within a modern, intuitive interface. The goal is to mimic real-time collaboration with a
professional UI/UX standard.

Features

 Live text editing

 Save document (auto-store in browser memory)

 Delete current document

 View & load recent documents

 Light/Dark Mode Toggle

 Character and word count in real-time

 Editable document title

Step-by-Step Process

1. Planning & Design

 Choose a clean layout with glassmorphism

 Prioritize in-place editing and ease of use

 Add user presence simulation with color tags

2. Setup
 HTML structure includes: title input, document editor, toolbar

 CSS for visual design, responsiveness, and transitions

 JS for localStorage logic (save/delete/load), editor functionality, and word count

3. UI Enhancements
 Added dark mode toggle

 Styled buttons with hover effects

 Embedded all styles and scripts in one HTML file

19
4. Testing
 Validate save/load/delete across reloads
 Test on multiple screen sizes
 Check typing and formatting behavior

20
SOURCE CODE
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<title>Task 3: Collaborative Editor</title>

<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swa
p" rel="stylesheet">
<style>

:root {

--bg-light: #f0f2f5;

--bg-dark: #1a1a2e;

--card-light: rgba(255, 255, 255, 0.8);

--card-dark: rgba(255, 255, 255, 0.05);

--text-light: #1a1a1a;

--text-dark: #f5f5f5;

--accent: #6e8efb;

body {

font-family: 'Poppins', sans-serif;

margin: 0;
padding: 0;

background: var(--bg-light);
color: var(--text-light);
transition: all 0.3s ease-in-
21
 out;
}

#docTitle {
width:
100%;
font-size: 1.5rem;
margin-bottom:
1rem; padding:
0.5rem; border:
none;
border-radius: 8px;

background:
rgba(255,255,255,0.9); font-
weight: bold;
}

.editor {
width:
100%;
height: 300px;
border: none;
outline: none;
font-size:
1rem;
padding:
1rem;
border-radius: 12px;
resize: none;
background:
rgba(255,255,255,0.9); color:
inherit;
}

22
body.dark {

background: var(--bg-dark);

color: var(--text-dark);

header {

padding: 1.5rem 2rem;

display: flex;
justify-content: space-
between; align-items: center;
background: linear-gradient(to right, #6e8efb, #a777e3);
color: white;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);

.toggle-mode {

padding: 0.5rem
1rem; border: none;
background: #fff;
color: #333;
font-weight: 600;
border-radius:
6px; cursor:
pointer;
}

.container {
padding:
2rem;
max-width: 1000px;
margin: auto;

23
}

.editor-tools
{ display:
flex; gap:
1rem;
flex-wrap: wrap;
margin-bottom:
1rem;
}

.editor-tools button {
padding: 0.5rem
1rem; border: none;
border-radius:
8px; font-weight:
600; cursor:
pointer;
background: var(--accent);
color: white;
}

.editor-box {

background: var(--card-
light); border-radius: 16px;
padding: 1rem;
box-shadow: 0 8px 20px rgba(0,0,0,0.15);

body.dark .editor-box {
background: var(--card-
dark); backdrop-filter:
blur(10px);

24
}

#docTitle {
width:
100%;
font-size: 1.5rem;
margin-bottom:
1rem; padding:
0.5rem; border:
none;
border-radius: 8px;

background:
rgba(255,255,255,0.9); font-
weight: bold;
}

.editor {
width:
100%;
height: 300px;
border: none;
outline: none;
font-size:
1rem;
padding:
1rem;
border-radius: 12px;
resize: none;
background:
rgba(255,255,255,0.9); color:
inherit;
}

body.dark #docTitle,
body.dark .editor {
background: rgba(255,255,255,0.1);

25
 color: white;

.footer {

margin-top:
1rem; font-size:
0.85rem; display:
flex;
justify-content: space-between;

select {

padding: 0.4rem;
border-radius:
6px; font-weight:
500;
}

</style>

</head>

<body>

<header>

<h1>Task 3: Document Editor</h1>

<button class="toggle-mode" onclick="toggleDarkMode()"> F

舵 Toggle</button>

</header>

<div class="container">

<div class="editor-tools">

-
.
' Save</button>
<button onclick="saveDoc()">⬛

26
 _ Delete</button>
<button onclick="deleteDoc()">넢̄

<select id="recentDocs" onchange="loadDoc()">

괚
‘ Recent Docs</option>
<option value="">)

</select>

</div>
<div class="editor-box">

<input id="docTitle" placeholder="Untitled Document..." />

<textarea class="editor" id="editor" placeholder="Start typing here..."></textarea>

<div class="footer">

<span id="charCount">0 characters</span>

<span id="wordCount">0 words</span>

</div>

</div>

</div>

<script>

const title = document.getElementById('docTitle');

const editor = document.getElementById('editor');
const charCount =
document.getElementById('charCount'); const
wordCount = document.getElementById('wordCount');
const recent = document.getElementById('recentDocs');

// Update count
editor.addEventListener('input', ()
=> { const text = editor.value;
charCount.textContent = `${text.length} characters`;

wordCount.textContent = `${text.trim().split(/\s+/).filter(Boolean).length} words`;

27
 });

function saveDoc() {

if (!title.value.trim()) return alert("Enter a title");

localStorage.setItem(`doc-${title.value}`, editor.value);
updateRecent();
alert("Document saved!");

// Load doc
function
loadDoc() {
const val =
recent.value; if (val) {
title.value = val;

editor.value = localStorage.getItem(`doc-
${val}`); editor.dispatchEvent(new
Event('input'));
}

// Dark mode toggle

function
toggleDarkMode() {
document.body.classList.toggle("dark");

updateRecent();

</script>

</body>

</html>
28
SAMPLE OUTPUT

29
2.1.4 Task 4: Interactive Map Location Saver
This task involves building a modern Map App where users can search and save
specific locations. Users can mark, save, revisit, delete, and edit locations directly on the
map. The interface is fully responsive and visually enhanced, combining powerful
mapping capabilities (via LeafletJS) and persistent local storage, all packed into one sleek
HTML file.

Features

 Interactive world map using LeafletJS

 Click to add a marker or search by location name

 Save favorite locations to localStorage

 View and reload recently saved markers

 Edit location names directly from the list

 Delete unwanted saved locations

 Beautiful glassmorphic UI with responsive design

Step-by-Step Process

1. Planning & Design

 Centered interactive map with control panel

 Add, view, edit, and delete markers on the fly

 Saved places show in a sidebar with “recent” functionality

2. Setup
 Embed LeafletJS for open-source interactive maps

 Style everything with Poppins font, glassmorphism, and soft animations

 Handle map clicks and form inputs in JavaScript

 Use localStorage to persist location data

30
3. Enhancements
 Responsive layout for mobile/tablet

 Auto-center on selected locations

 Editable list of saved places with icons and color themes

4. Testing
 Check map interaction, saving, editing, and deleting

 Validate coordinates and location names

 Optimize for performance and load times

31
SOURCE CODE
<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">

? Map Explorer PRO+</title>

<title>●

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>

<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700
&display=swap" rel="stylesheet">
<style>

* { margin: 0; padding: 0; box-sizing:

border-box; } body {
font-family: 'Poppins', sans-serif;

background: radial-gradient(circle at top left, #151e3d,

#0d1321); color: #fff;
display: flex;

flex-direction:
column; height:
100vh; overflow:
hidden;
}

.container {
display: flex;
flex: 1;

32
 overflow: hidden;
z-index: 1;

.sidebar {
flex: 1;
background: rgba(15, 20, 40,
0.9); backdrop-filter:
blur(20px); padding: 1.2rem;
overflow-y: auto;

border-left: 2px solid rgba(255,255,255,0.05);

display: flex;
flex-direction: column;

h2 {

font-weight: 700;
margin-bottom:
1rem; font-size:
1.6rem; color:
#61dafb;
text-shadow: 0 0 5px #61dafb80;

input, button {
width: 100%;
padding: 0.8rem;
margin-bottom:
1rem; border-radius:
12px; border: none;
font-size: 1rem;

font-family: 'Poppins';

input {

33
 background: rgba(255,255,255,0.08);
color: #fff;
border: 1px solid rgba(255,255,255,0.1);

button {

background: linear-gradient(135deg, #6c63ff, #5142fc);

color: #fff;
cursor: pointer;

transition: transform 0.2s ease, background 0.3s ease;

button:hover {

background: linear-gradient(135deg, #817cff, #5a50fc);

transform: scale(1.02);
}

ul {

list-style: none;
margin-top:
1rem; overflow-
y: auto; flex: 1;
}

li {

background:
rgba(255,255,255,0.05); margin-
bottom: 0.5rem;
padding: 0.6rem;
border-radius:
10px; display: flex;
justify-content: space-
between; align-items: center;
transition: background 0.3s ease;

34
}

li:hover {

background: rgba(255,255,255,0.08);

.loc-text {
flex: 1;
margin-right: 10px;
color: #fff;
}

.loc-text[contenteditable] {
outline: none;
}

.btn-small {

background: rgba(255,255,255,0.12);
color: #fff;
border: none;

padding: 0.4rem
0.6rem; font-size:
0.8rem;
border-radius:
6px; margin-left:
5px; cursor:
pointer;
}

.btn-small:hover {
background:
#6c63ff;
}

.animate-marker {

animation: bounce 0.8s ease infinite alternate;

@keyframes bounce {
35
 0% { transform: translateY(0); }
100% { transform: translateY(-
8px); }
}

</style>

</head>

<body>

<div class="container">

<div id="map"></div>

<div class="sidebar">

’艗
<h2>艔`艓
' Map Explorer PRO+</h2>

<input type="text" id="search" placeholder="Search place...">

Q̇ Search & Go</button>

<button onclick="searchPlace()">•

.⬛' Save Current Location</button>

<button onclick="saveCurrentLocation()">-

<ul id="savedList"></ul>

</div>

</div>

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<script>

let map = L.map('map').setView([20.5937, 78.9629],

5); let marker;

L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
attribution: '&copy; OpenStreetMap contributors'
}).addTo(map);

36
 function addAnimatedMarker(latlng, name =
'') { if (marker) map.removeLayer(marker);
marker = L.marker(latlng, {

function loadSaved() {

let saved = JSON.parse(localStorage.getItem('places') ||

'[]'); let list = document.getElementById('savedList');
list.innerHTML = "";
saved.forEach((place, index) => {

let li = document.createElement('li');

let span =
document.createElement('span');
span.className = 'loc-text';
span.contentEditable = true;
span.textContent = place.name;
span.onblur = () => {
saved[index].name = span.textContent;
localStorage.setItem('places', JSON.stringify(saved));
};

let goBtn =
document.createElement('button');
goBtn.className = 'btn-small';
goBtn.textContent = 'Go';
goBtn.onclick = () => {
map.setView([place.lat, place.lng],
13);
addAnimatedMarker([place.lat, place.lng], place.name);

loadSaved();

</script>

</body>

</html>

37
SAMPLE OUTPUT

38
 CHAPTER – 3
PROJECT SUMMERY

1. Portfolio Website
Summary:
This Portfolio Website showcases the developer’s personal projects, skills, and
achievements through a visually dynamic and interactive interface. It leverages modern
web animation libraries like GSAP or Three.js to deliver a stunning user experience.
Key Features:
• Smooth page transitions using GSAP or Three.js.
• Animated sections for projects, skills, and contact info.
• Responsive and mobile-friendly design.
• Clean, professional layout tailored for personal branding.

2. Online Learning Platform

Summary:
This platform simulates an e-learning system where users can watch video lessons,
attempt quizzes, and track their course progress. It integrates essential features like media
streaming, authentication, and user progress storage, offering a complete LMS
experience.
Key Features:
• Video-based lessons with playback controls.
• Interactive quizzes with instant results.
• Login/Signup functionality with user-specific progress tracking.
• Database integration for storing scores and progress.

3. Real-Time Collaborative Document Editor

Summary:
A modern editor for collaborative writing, this tool allows multiple users to edit and
manage documents in real time. Built using React.js or Vue.js with

39
Node.js/Python and MongoDB/PostgreSQL, it provides seamless syncing and rich
editing tools.
Key Features:
• Real-time collaboration and auto-syncing.
• Create, edit, save, delete, and view recent documents.
• In-document editing with enhanced UI/UX.
• Fully responsive interface with backend integration.

4. Progressive Web App (PWA) for Map

Summary:
A location-based web application with offline support, push notifications, and real-
time map interaction. Using OpenStreetMap, Leaflet.js, and PWA technology (Service
Workers + Cache API), users can search, save, and manage places—even ofline.
Key Features:
• Location search, save, delete, and edit.
• View and manage recent places.
• Fully functional ofline with Service Workers.
• Push notifications and responsive, animated UI.

40
 CONCLUSON

The internship provided an immersive, hands-on experience in full stack web

development, allowing the application of both frontend and backend technologies to build
real-world projects. Through the completion of four diverse tasks—ranging from a
dynamic portfolio to a PWA map application—I gained a strong foundation in UI/UX
design, client-server architecture, database integration, real-time communication, and
performance optimization.
Each task enhanced different skill areas:

 The Portfolio Website emphasized creative design and animation using

GSAP/Three.js.
 The Online Learning Platform focused on multimedia handling, user
authentication, and persistent data storage.
 The Real-Time Collaborative Document Editor showcased the power of
modern JavaScript frameworks and backend integration.
 The PWA Map Application demonstrated how to deliver offline-first,
installable apps with high interactivity and push capabilities.
Overall, this internship refined my ability to think critically, design user-centric
applications, and engineer scalable, responsive web systems. These experiences have laid
a solid groundwork for advancing my career in web development and building future-
ready digital solutions.

41
 REFERENCES

1. Mozilla Developer Network (MDN Web Docs)

Comprehensive documentation for HTML, CSS, JavaScript, and Web APIs.
https://developer.mozilla.org/

2. W3Schools
Tutorials and examples for web technologies including frontend and backend
basics.
https://www.w3schools.com/

3. React.js Official Documentation

Guide for building user interfaces with React.
https://reactjs.org/

4. Node.js Official Documentation

Backend JavaScript runtime environment documentation. https://nodejs.org/

5. PostgreSQL Documentation
Open-source relational database system reference. https://www.postgresql.org/docs/

6. MongoDB Manual
Documentation for MongoDB operations and integration.
https://www.mongodb.com/docs/manual/

7. OpenStreetMap & Leaflet.js

APIs and libraries for building interactive maps.
https://leafletjs.com/ https://www.openstreetmap.org/

8. GSAP Animation Library

JavaScript animation library for stunning UI transitions. https://greensock.com/gsap/

9. Three.js
JavaScript 3D library used to create immersive web experiences. https://threejs.org/

10. Google Fonts – Poppins

Typeface used across UI elements for clean, modern appearance.
https://fonts.google.com/specimen/Poppins

42
PHOTOS

43
44