REPORTS

SUMMER INTERNSHIP - 2

NAME :- Yogita Dusane

ROLL NO. :- 22041C04071
SEM/YEAR :- 5th Sem/3rd Year
COLLEGE NAME :- Jija Mata Government
Polytechnic College, Burhanpur(M.P)

1
 ABOUT INTERNSHIP
Internship Overview

Institution :- Academy Of Skill Development (Asd), Kolkata

Course :- Full Stack Web Development Using Mern Stack
Project :- Online Exam Panel
Project Size :- Individual
Days :- Monday,Tuesday,Wednesday,Thursday
Total Session :- 15
Internship Duration :- 4 Weeks (05/08/2024 – 2/09/2024)
Mentor Name :- Mr. Ashraf Ali Sir

2
CONFORMATION LETTER

3
CERTIFICATE

4
 MODULES
FULL STACK WEB DEVELOPMENT USING
MERN STACK (PROJECT-BASED)
MODULES TOPICS
1 Introduction to NODEJS Application
Introduction to NODE.JS
Asynchronous JavaScript Concept
The importance of being asynchronous Introduction to setting up a
Node.jsEnvironment Run your first NODE.JS Application
The Node.js process Working in REPLNode JS Console
2 File System& File Streaming Working with built-inmodule Concept of File
System Module ReadingDirectories
Reading Files
Working with Streams
Readable stream & Writable stream
3 Building servers
Creating servers with HTTP Receiving data
Handling GET, POST, PUT, and DELETE requests Sending requestsHTTP
streaming Working with TCP
Working with Pipes
Deals with JSON Data.
4 Building APIs using modules, events, and packagesWhat is NPM
Installing Packages Locally
Adding dependency in package.json Installing packagesglobally
Updating packages The EventEmitter APICommonJS Modulesnpm Packages
(nodemon command,npm install command etc)
5 Introduction to ExpressJS
Introduction to using the Express framework to set up a web server Routes,
rendering,layouts, URL building, express servers Configuration
Views
Middlewares
6 Installation of Mongo Database
7 Store data with Mongoose and MongoDB. Mongo DB connection withExpressJs
framework.
8 Mongo DB
Querying with Mongoose
9 MongoDB CRUD operation using Express
Introduction to setting up a MongoDB database and connecting it to a Node.js
serverSample CRUD(Create,Read,Update,Delete ) operation in NODE.JS
10 Authentication With Passport and JWT
Stateful vs. Stateless Authentication OAuth2Passport
JWT – JSON Web Tokens
11 Advanced Topics Node.js API designError Handling
Debugging Testing
12 Introduction to ReactJS
Introduction
Downloading and Installing ReactJS Understanding VirtualDOM
Components in ReactJS
INDUSTRIAL TRAINING AND INTERNSHIPS 2024
Rendering data in ReactJS
Applying CSS class and HTML content in the ReactJS Componentlifecycle and
state
Understanding the state of React
Creating multiple components in ReactJs Creating reusablecomponents.

5
 MODULES
MODULES TOPICS
14 Properties and Events Working with propertiesAccessing Child properties
Understanding events in ReactJSExploring static methods
15 Forms Components
Working with Forms in ReactJS
16 Accessing DOM
Referring DOM nodes
17 Tooling Support
Converting JSX to JS
Using Gulp To compile and concatenate JSX files - I
Using Gulp To compile and concatenate JSX files (Using Browserify) – II
Component CommunicationWorking with jQuery – Ajax DOM Event Listeners
Inline Styles in ReactJS
Using dangerously SetInnerHTMLMajor AddOns in React
Two-Way Data Binding
Clone Elements - [cloneWithProps Deprecated - Use React.cloneElement
insteadUsing React.cloneElement
Making use of classSet to apply Conditional Styles Making use of class names
to apply conditionalstyling Animation using CSS Transition

18 Introduction to React RouterWorking with React Router

Working with Links & Creating Nested Routes Refactoring Routes and
Components
19 React and Remote Data
Introducing Fetch
Rendering Remote Data in Components
20 Project work and documentation

6
 INTRODUCTON
This Internship Was Conducted As Part Of My Academic Curriculum
In The 5th Semester Of My Engineering Course. The Internship Was
Held At The Academy Of Skill Development (Asd), Kolkata. During
This Period, I Gained Practical Exposure To Various Web
Development Technologies, Including Reactjs, Node.Js, Expressjs,
Mongodb, And More. Under The Guidance Of Mr. Ashraf Ali, I
Learned Both Front-End And Back-End Web Development Concepts,
Which Helped Me Enhance My Skills And Broaden My Knowledge In
Full-Stack Development.

7
 OBJECTIVES
Gain Hands-On Experience In Web Development Frameworks Like
Reactjs And Node.Js.
Understand How To Create Web Applications Using Front-End And
Back-End Technologies.
Learn About Asynchronous Javascript, Building Apis, And Working
With Databases.
Understand Various Authentication Methods, Including Passport
And Jwt.

8
 Table Of Contents

Date Topic
5-8-2024 Overview of Web Development,
Introduction to HTML, CSS,
Bootstrap, JavaScript, ReactJS
6-8-2024 Introduction to NODEJS
Application, Asynchronous
JavaScript, First NODEJS
Application
07-8-2024 Introduction to React Router,
Working with Links, Nested
Routes
08-8-2024 File System and File Streaming,
Working with the File System
Module
12-8-2024 Properties and Events in
ReactJS, Understanding Events
and Static Methods
13-8-2024 ReactJS Components, Lifecycle,
State, Reusable Components,
Forms with Chakra UI and MUI
14-8-2024 Conditional Styles, classNames,
CSS Transitions, Two-Way Data
Binding
20-8-2024 Building Servers with HTTP,
Handling GET, POST, PUT,
DELETE requests, TCP Streaming
21-8-2024 Working with Arrays in React.js,
Fetching and Filtering Data
22-8-2024 Building APIs with Modules,
NPM, Installing Packages,
EventEmitter API
26-8-2024 Introduction to ExpressJS
Framework, Setting up a Web
Server, Middleware
27-8-2024 Installation of MongoDB, CRUD
Operations with Mongoose and
MongoDB
28-8-2024 Authentication with Passport
and JWT, OAuth2
29-8-2024 Node.js API Design, Error
Handling, Testing, Project
Presentation
2-9-2024 Final Report and Conclusion

9
 TOPICS COVERED

05/08/2024 - Overview And Introduction To Web Development

This Session Introduced The Basics Of Web Development, Focusing On Html, Css,
Bootstrap, And Javascript. I Learned The Fundamentals Of Reactjs, Including
Downloading And Installing The Framework. The Concept Of Virtual Dom Was
Explained, Along With The Implementation Of a Simple "Hello World"
Application.

06/08/2024 - Introduction To Node.Js Application

In This Session, I Was Introduced To Node.Js, An Essential Runtime For
Executing Javascript Server-Side. We Explored Asynchronous Programming And
Its Significance In Node.Js Applications. I Set Up The Node.Js Environment And
Ran My First Application While Learning About Objects And Anonymous
Functions.

07/08/2024 - Introduction To React Router

This Class Focused On React Router, Which Is Used For Navigating Between
Different Components In a Single-Page Application. I Learned How To Create
Nested Routes, Work With Links, And Refactor Routes For Better Modularity In
React Applications.

08/08/2024 - File System And File Streaming

We Explored The Node.Js File System Module And Its Usage For Reading
Directories And Files. The Class Covered Working With Readable And Writable
Streams, Helping Me Understand How To Process Data Streams In Real-Time.

12/08/2024 - Properties And Events In Reactjs

In Reactjs, Properties (Props) Are Essential For Passing Data To Components. We
Learned How To Access Child Properties And Understood The Role Of Events In
Reactjs. This Session Also Covered Static Methods And Their Applications In
Creating More Reusable Components.

13/08/2024 - Components In Reactjs

This Class Introduced React Components, Focusing On Rendering Data And
Working With Css Classes And Html Content In Jsx. I Gained An Understanding Of
The Component Lifecycle, State Management, And The Creation Of Reusable
Components.

14/08/2024 - Conditional Styles And Animation

This Session Taught How To Apply Conditional Styles In React Using Classset And
Classnames. Additionally, We Implemented Animations Using Css Transition
Group And Explored Two-Way Data Binding In React.

20/08/2024 - Building Servers With Http

We Learned To Create Http Servers Using Node.Js, Handling Get, Post, Put, And
Delete Requests. The Class Also Covered Http Streaming And Working With Tcp
To Process Requests And Handle Json Data.

S 10
 TOPICS COVERED

21/08/2024 - Working With Arrays In Reactjs

In This Session, I Learned How To Fetch And Filter Data From Arrays In Reactjs.
This Was Essential For Building Dynamic User Interfaces Where Data Is Updated
And Rendered Interactively.

22/08/2024 - Building Apis And Managing Npm Packages

We Covered Building Apis In Node.Js Using Modules And Events. Additionally, We
Learned About Npm, The Node Package Manager, And How To Install, Update,
And Manage Dependencies In The Project.

26/08/2024 - Introduction To Expressjs

This Class Introduced The Expressjs Framework, Which Simplifies The Process Of
Setting Up a Web Server In Node.Js. I Learned About Routing, Rendering,
Middleware, And How To Configure The Express Server For Building Web
Applications.

27/08/2024 - Mongodb Integration And Crud Operations

We Connected Mongodb With Node.Js Using Mongoose For Data Storage And
Performed Crud Operations. The Session Focused On Querying Databases And
Connecting Mongodb To An Expressjs Server For Handling Dynamic Data.

28/08/2024 - Authentication With Passport And Jwt

This Session Covered Authentication In Web Applications Using Passport And
Json Web Tokens (Jwt). I Learned About Stateful Vs. Stateless Authentication And
The Role Of Oauth2 In Securing Applications.

29/08/2024 - Node.Js Api Design And Error Handling

We Discussed Best Practices For Designing Restful Apis In Node.Js. The Class Also
Covered Error Handling Mechanisms And Testing Strategies, Ensuring Robust
And Secure Api Development.

2/09/2024 - Project Presentation

The Final Session Involved Presenting Our Online Exam Panel Project, Where I
Showcased The Web Application I Developed During The Internship, Highlighting
The Key Technologies Used And The Learning Outcomes.

S 11
 SKILLS
Reactjs : Building Interactive Uis, State Management, And Handling User Input.
Node.Js & Expressjs: Setting Up Servers, Working With Apis, And Handling
Requests.
Mongodb & Mongoose : Storing And Managing Data, Performing Crud
Operations.
Authentication : Implementing Passport And Jwt For Secure User Authentication.
Web Development : Creating Full-Stack Applications Using Front-End And Back-
End Technologies.

12
 CHALLENGES
Challenges Faced

During My Internship, I Encountered Challenges Such As Understanding

Asynchronous Behavior In Javascript And Troubleshooting Issues In The Node.Js
Environment. However, With Guidance From My Mentor And Research, I
Overcame These Challenges And Gained a Deeper Understanding Of Web
Development Concepts.

13
PROJECT

14
PROJECT

15
PROJECT

16
PROJECT

17
PROJECT

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

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">

<title>Home Page with Full Background and Scrollable Carousel</title>

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
}

/* Navigation Bar Styling */

.navbar {
background-color: rgba(74, 144, 226, 0.8);
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
position: fixed;
width: 100%;
z-index: 10;
}

.navbar a {
color: white;
text-decoration: none;
margin: 0 15px;
font-size: 1.1rem;
transition: color 0.3s ease;
}

.navbar a:hover {
color: #f1f1f1;
}

.search-bar input {
padding: 7px;
border-radius: 5px;
border: none;
outline: none;
}

.search-bar input[type="text"] {

19
 PROJECT
width: 150px;
}

.search-results {
display: none;
position: absolute;
background-color: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
width: 200px;
margin-top: 5px;
}

.search-results a {
display: block;
padding: 10px;
color: #333;
text-decoration: none;
}

.search-results a:hover {
background-color: #f1f1f1;
}

/* Full-Page Background Image Section */

.hero-section {
height: 100vh;
background-image: url('https://images.unsplash.com/photo-1519389950473-
47ba0277781c?q=80&w=2070&auto=format&fit=crop&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
background-size: cover;
background-position: center;
background-attachment: fixed;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
text-align: center;
padding: 0 20px;
}

.hero-section h1 {
font-size: 4rem;
margin: 0;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.hero-section p {
font-size: 1.5rem;
margin-top: 20px;
max-width: 800px;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
}

/* Carousel Section */
.carousel-section {

20
 PROJECT
padding: 50px 0;
background-color: #f9f9f9;
}

.carousel {
max-width: 100%;
overflow: hidden;
position: relative;
margin: 0 auto;
}

.carousel-images {
display: flex;
transition: transform 0.5s ease-in-out;
}

.carousel-images img {
width: 100vw;
height: 500px;
object-fit: cover;
}

.carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
z-index: 10;
}

.carousel-btn.left {
left: 10px;
}

.carousel-btn.right {
right: 10px;
}

/* Footer */
footer {
text-align: center;
padding: 20px;
background-color: rgba(74, 144, 226, 0.8);
color: white;
}

@media (max-width: 768px) {

.navbar {
flex-direction: column;
}

.hero-section h1 {

21
 PROJECT
font-size: 3rem;
}

.hero-section p {
font-size: 1.2rem;
}

.carousel-images img {
height: 300px;
}
}
</style>
</head>

<body>

<!-- Navigation Bar -->

<nav class="navbar">
<div class="nav-links">
<a href="index.html">Home</a>
<a href="all.html">Start Quiz</a>
<a href="register.html">Registration</a>
<a href="stulog.html">Login</a>
<a href="adminp.html">Admin Panel</a>
<a href="stupanel.html">Student Panel</a>
</div>
<div class="search-bar">
<input type="text" id="searchInput" placeholder="Search...">
<div class="search-results" id="searchResults">
<a href="index.html">Home</a>
<a href="all.html">Start Quiz</a>
<a href="register.html">Registration</a>
<a href="login.html">Login</a>
<a href="adminp.html">Admin Panel</a>
<a href="stupanel.html">Student Panel</a>
</div>
</div>
</nav>

<!-- Full-Page Background Image Section -->

<div class="hero-section">
<h1>Welcome to the Quick Quiz</h1>
<p>Your one-stop solution to test your knowledge in various subjects like HTML, CSS, JavaScript,
and Python.
Scroll down to begin your journey!</p>
</div>

<!-- <div class="card-group">

<div class="card">
<img class="card-img-top" src="/img/css.jpg" alt="Card image cap" style="width: 20%; height:
50%;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>

22
 PROJECT
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="card">
<img class="card-img-top" src="/img/html.jpg" alt="Card image cap" style="width: 20%; height:
50%;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div> -->
<!-- </div>
<div class="card-group">
<div class="card">
<img class="card-img-top" src="/img/Python.png" alt="Card image cap" style="width: 20%;
height: 50%;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>

<div class="card"></div>
<img class="card-img-top" src="/img/JavaScript-logo.png" alt="Card image cap" style="width:
20%; height: 50%;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div> -->

<div class="card-group" style="margin-top: 10px;">

<div class="card" style="text-align: center;">
<img class="card-img-top" src="/img/html3.png" alt="Card image cap"
style="width: 50%; height: 70%; margin-top: 10px; text-align: center;">
<div class="card-body" style="text-align: center;">
<a href="quiz.html" class="btn btn-primary">Start Quiz</a>
</div>
</div>
<div class="card" style="text-align: center;">
<img class="card-img-top" src="/img/css2.png" alt="Card image cap"
style="width: 50%; height: 70%; margin-top: 10px;">
<div class="card-body">
<a href="css.html" class="btn btn-primary">Start Quiz</a>
</div>
</div>

23
 PROJECT
<div class="card" style="text-align: center;">
<img class="card-img-top" src="/img/js2.png" alt="Card image cap"
style="width: 50%; height: 70%;margin-top: 10px; padding-left: 50px;">
<div class="card-body">
<a href="java.html" class="btn btn-primary">Start Quiz</a>
</div>
</div>
</div>
<div style="text-align: center; margin: 10px;">
<a href="all.html" class="btn btn-primary">View More</a>

<!-- <button type="button" class="btn btn-primary">view more</button> -->

</div>
<!-- Carousel Section -->
<!-- <div class="carousel-section">
<div class="carousel">
<button class="carousel-btn left" id="prevBtn">&#10094;</button>
<div class="carousel-images" id="carouselImages">
<img src="https://plus.unsplash.com/premium_photo-1661526018602-
c4e8c1993e68?q=80&w=1954&auto=format&fit=crop&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Students
Learning">
<img src="https://plus.unsplash.com/premium_photo-1661662850226-
83c981ed4eba?q=80&w=1932&auto=format&fit=crop&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Students
Giving Quiz">
<img src="https://images.unsplash.com/photo-1420310414923-
bf3651a89816?q=80&w=2070&auto=format&fit=crop&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3Ds" alt="Students
Focusing">
</div>
<button class="carousel-btn right" id="nextBtn">&#10095;</button>
</div>
</div> -->

<!-- Footer -->

<footer>
&copy; 2024 Quiz Portal. All rights reserved.
</footer>

<script>
const carouselImages = document.getElementById('carouselImages');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
let index = 0;
const totalImages = carouselImages.children.length;

nextBtn.addEventListener('click', () => {
index = (index + 1) % totalImages;
carouselImages.style.transform = `translateX(-${index * 100}vh)`;
});

prevBtn.addEventListener('click', () => {
index = (index - 1 + totalImages) % totalImages;

24
 PROJECT
carouselImages.style.transform = `translateX(-${index * 100}vh)`;
});

const searchInput = document.getElementById('searchInput');

const searchResults = document.getElementById('searchResults');

// Display search results based on input

searchInput.addEventListener('input', function () {
const query = searchInput.value.toLowerCase();
const links = searchResults.querySelectorAll('a');

if (query.length === 0) {
searchResults.style.display = 'none';
return;
}

searchResults.style.display = 'block';
let hasResults = false;

links.forEach(link => {
const text = link.textContent.toLowerCase();
if (text.includes(query)) {
link.style.display = 'block';
hasResults = true;
} else {
link.style.display = 'none';
}
});

if (!hasResults) {
searchResults.style.display = 'none';
}
});

document.addEventListener('click', function (event) {

if (!searchInput.contains(event.target) && !searchResults.contains(event.target)) {
searchResults.style.display = 'none';
}
});
</script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-
ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>

</html>

25
 CONCLUSION
This Internship Has Been a Valuable Learning Experience. It Provided Me With
The Opportunity To Work With Cutting-Edge Technologies And Develop a Deeper
Understanding Of Web Development. The Practical Knowledge Gained During
This Internship Will Significantly Contribute To My Future Career As a Full-Stack
Developer.

26