PATEL GROUP OF INSTITUTIONS
MCA / IMCA – SEM – MID TERM EXAMINATION SUMMER – 2026
Subject Code: MC02094041 Date: 20/05/2026
Subject Name: Full Stack Development Total Marks: 30
Time: 2:00 pm to 3:30 pm
✦ SOLUTION PAPER ✦
Q.1 (a) – Short Answer Questions [05 Marks]
1. Define Web Server
A Web Server is software (and hardware) that accepts HTTP/HTTPS requests from clients (web
browsers) and sends back web resources such as HTML pages, images, and data. It listens on port 80
(HTTP) or 443 (HTTPS). Popular web servers include Apache, Nginx, and [Link] HTTP module. In the
MERN stack, [Link] with Express acts as the web server.
2. What is MongoDB?
MongoDB is an open-source, document-oriented NoSQL database. It stores data in flexible, JSON-like
documents called BSON (Binary JSON). Key features:
• Schema-less – no fixed structure required
• Horizontally scalable with sharding
• Supports rich queries, indexing, and aggregation
• Collections replace tables; documents replace rows
3. ReactJS is a __________ library.
ReactJS is a JavaScript (UI / Front-end) library. It is developed and maintained by Meta (Facebook) and
is used to build fast, interactive user interfaces using a component-based architecture.
4. What is ReactJS?
ReactJS is an open-source JavaScript library for building user interfaces, especially single-page
applications (SPAs). Key concepts include:
• Components – reusable, independent UI building blocks
• JSX – syntax extension that combines JavaScript and HTML
• Virtual DOM – lightweight copy of real DOM for efficient updates
• State & Props – data management inside and between components
• Hooks – functions like useState, useEffect for stateful logic
5. async and await are used for __________ programming.
async and await are used for Asynchronous programming. They simplify working with Promises by
making asynchronous code look and behave like synchronous code. async declares a function that
returns a Promise; await pauses execution until the Promise resolves.
Example:
async function fetchData() { const response = await
fetch('[Link] const data = await [Link]();
[Link](data); }
6. What is a Templating Engine?
A Templating Engine is a tool that enables embedding dynamic data into static HTML templates on the
server side before sending the final HTML to the browser. It separates presentation (HTML) from logic
(JavaScript/data). Popular engines used with [Link]: EJS, Pug (Jade), Handlebars.
Example (EJS): <h1>Welcome, <%= username %>!</h1>
Q.1 (b) – Structure of an HTML Document with Example [05 Marks]
An HTML document has a well-defined structure consisting of the following parts:
• <!DOCTYPE html> – Declaration telling the browser this is an HTML5 document.
• <html> – Root element wrapping all content.
• <head> – Contains meta-information: title, charset, CSS links, scripts.
• <body> – Contains all visible content: headings, paragraphs, images, etc.
Complete Example:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"
content="width=device-width, initial-scale=1.0"> <title>My First Web Page</title> <link
rel="stylesheet" href="[Link]"> </head> <body> <header> <h1>Welcome to My
Website</h1> </header> <main> <p>This is a paragraph of text.</p> <img src="[Link]"
alt="Sample Image"> <a href="[Link] Here</a> </main> <footer>
<p>© 2026 My Website</p> </footer> </body> </html>
Q.2 (a) – CSS Selectors: Types and Explanation [05 Marks]
CSS Selectors are patterns used to select and style HTML elements. There are six major types:
Selector Type Syntax Example Description
Universal * * { margin:0; } Selects all elements
Element/Type tag p { color:red; } Selects all <p> tags
Class .classname .btn { ... } Selects elements with class='btn'
ID #idname #header { ... } Selects element with id='header'
Attribute [attr] [type='text'] Selects elements with attribute
Pseudo-class :state a:hover { ... } Selects element in a state
Pseudo-element ::part p::first-line Styles part of an element
Descendant AB div p { ... } p inside div
Child A>B ul > li { ... } Direct child li of ul
Group A, B h1, h2 { ... } Selects h1 and h2
Example demonstrating multiple selectors:
/* Element Selector */ p { font-size: 16px; } /* Class Selector */ .highlight {
background-color: yellow; } /* ID Selector */ #main-title { color: navy; font-size:
24px; } /* Pseudo-class */ a:hover { color: red; text-decoration: underline; } /*
Descendant */ nav ul li { list-style: none; display: inline; }
Q.2 (b) – Different Events of JavaScript [05 Marks]
JavaScript events are actions that occur in the browser which can be detected and responded to using
event handlers. Events are categorized as follows:
Mouse Events
Event Description
click Fires when element is clicked
dblclick Fires on double-click
mouseover Mouse pointer enters element
mouseout Mouse pointer leaves element
mousedown / mouseup Mouse button pressed / released
Keyboard Events
Event Description
keydown Key is pressed down
keyup Key is released
keypress Key press (character key – deprecated in modern JS)
Form Events
Event Description
submit Form is submitted
change Input value changes
focus / blur Element gains / loses focus
input Value changes in real time
Window / Document Events
Event Description
load Page fully loaded
DOMContentLoaded DOM ready before images load
resize Browser window resized
scroll Page is scrolled
unload User leaves the page
Drag Events
Event Description
dragstart / dragend Drag operation starts / ends
drop Element dropped on target
Event Handling Example:
// Method 1: addEventListener (preferred)
[Link]('btn').addEventListener('click', function() { alert('Button
clicked!'); }); // Method 2: Inline HTML attribute <button onclick="sayHello()">Click
Me</button> // Method 3: DOM property [Link]('input').onchange =
function(e) { [Link]('New value:', [Link]); };
■■■■ OR ■■■■
Q.2 (b) [OR] – Differences between SQL and NoSQL Databases [05 Marks]
Parameter SQL Databases NoSQL Databases
Full Form Structured Query Language Not Only SQL
Data Model Tables (rows & columns) Documents, Key-Value, Graph, Column
Schema Fixed, predefined schema Dynamic / schema-less
Scalability Vertical (scale up) Horizontal (scale out)
Transactions ACID compliant BASE (eventual consistency)
Query Language SQL (standardized) Database-specific (MQL, CQL…)
Examples MySQL, PostgreSQL, Oracle MongoDB, Redis, Cassandra, Firebase
Best For Complex joins, financial apps Big data, real-time web, flexible data
Relationships Joins between tables Embedded documents / references
Performance Slower for huge unstructured data Faster for large-scale unstructured data
Conclusion: SQL databases are ideal for structured, relational data with complex queries. NoSQL
databases (like MongoDB used in MERN) are better for scalable, flexible, and high-speed applications.
Q.3 (a) – NodeJS Program to Create a Simple HTTP Server [05 Marks]
[Link] provides a built-in http module to create HTTP servers without any external library. Below is a
complete working program:
Program Code:
// Step 1: Import the built-in 'http' module const http = require('http'); // Step 2:
Define hostname and port const hostname = '[Link]'; // localhost const port = 3000;
// Step 3: Create the server const server = [Link]((req, res) => { // Set
HTTP status code and response headers [Link] = 200;
[Link]('Content-Type', 'text/html'); // Send different responses based on URL if
([Link] === '/') { [Link]('<h1>Welcome to Home Page!</h1>'); } else if ([Link] ===
'/about') { [Link]('<h1>About Us Page</h1>'); } else { [Link] = 404;
[Link]('<h1>404 - Page Not Found</h1>'); } }); // Step 4: Start listening on the port
[Link](port, hostname, () => { [Link](`Server running at
[Link] });
Explanation:
• require('http') – Loads Node's built-in HTTP module.
• [Link](callback) – Creates server; callback fires on every request.
• req (IncomingMessage) – Contains request info: URL, method, headers.
• res (ServerResponse) – Used to send back status codes, headers, and body.
• [Link](port, host, callback) – Binds server to port 3000 and starts listening.
• Run with: node [Link] → open browser at [Link]
Q.3 (b) – CRUD Operations in MongoDB with Examples [05 Marks]
CRUD stands for Create, Read, Update, Delete – the four fundamental database operations. MongoDB
performs CRUD on collections of documents.
C – CREATE (insertOne / insertMany)
Insert one or more documents into a collection.
// Insert one document [Link]({ name: 'Raj Patel', age: 22, course:
'MCA', city: 'Ahmedabad' }); // Insert multiple documents [Link]([ {
name: 'Priya Shah', age: 21 }, { name: 'Amit Modi', age: 23 } ]);
R – READ (find / findOne)
Query documents from a collection.
// Fetch all documents [Link](); // Fetch with condition (age > 21)
[Link]({ age: { $gt: 21 } }); // Fetch specific fields (projection)
[Link]({}, { name: 1, course: 1, _id: 0 }); // Fetch single document
[Link]({ name: 'Raj Patel' });
U – UPDATE (updateOne / updateMany)
Modify existing documents in a collection.
// Update one document [Link]( { name: 'Raj Patel' }, // Filter { $set: {
city: 'Surat' } } // Update ); // Update multiple documents [Link]( {
course: 'MCA' }, { $inc: { age: 1 } } // Increment age by 1 );
D – DELETE (deleteOne / deleteMany)
Remove documents from a collection.
// Delete one document [Link]({ name: 'Amit Modi' }); // Delete multiple
documents [Link]({ age: { $lt: 20 } }); // Delete ALL documents in
collection [Link]({});
■■■■ OR ■■■■
Q.3 (a) [OR] – React Component Lifecycle Phases [05 Marks]
Every React component goes through three main lifecycle phases: Mounting, Updating, and
Unmounting. In class components these are explicit methods; in functional components they are handled
via the useEffect hook.
Phase Class Methods Hook Equivalent When Called
MOUNTING constructor() useState init When component first appears in DOM
render() useEffect(fn, [])
componentDidMount()
UPDATING shouldComponentUpdate() useEffect(fn, [dep]) When state or props change
render()
componentDidUpdate()
UNMOUNTING componentWillUnmount() useEffect cleanup Before component removed from DOM
(return fn)
ERROR componentDidCatch() Error Boundaries When child component throws error
getDerivedStateFromError()
Functional Component with Hooks (Modern Approach):
import React, { useState, useEffect } from 'react'; function Timer() { const [count,
setCount] = useState(0); // MOUNTING – initial state // Runs after mount (like
componentDidMount) useEffect(() => { [Link]('Component Mounted!'); const timer =
setInterval(() => { setCount(prev => prev + 1); }, 1000); // Cleanup – like
componentWillUnmount return () => { clearInterval(timer); [Link]('Component
Unmounted!'); }; }, []); // [] means run only once on mount // Runs whenever 'count'
updates (like componentDidUpdate) useEffect(() => { [Link] = `Count: ${count}`;
}, [count]); return <h2>Count: {count}</h2>; }
Q.3 (b) [OR] – GET vs POST Methods in AJAX [05 Marks]
AJAX (Asynchronous JavaScript and XML) communicates with the server without reloading the page. The
two most common HTTP methods used are GET and POST.
Parameter GET Method POST Method
Purpose Retrieve / fetch data from server Send / submit data to server
Data Location Appended in URL as query string Sent in request body (hidden)
Security Less secure – visible in URL More secure – not visible in URL
Data Limit Limited (~2048 characters) No practical size limit
Caching Can be cached by browser Not cached
Bookmarkable Yes – URL contains data No – data not in URL
Idempotent Yes – same result every time No – may change server state
Use Case Search, filtering, reading data Login, registration, file upload
Speed Slightly faster (no body) Slightly slower
AJAX Example using Fetch API:
// ■■ GET Request ■■ fetch('[Link] { method: 'GET',
headers: { 'Content-Type': 'application/json' } }) .then(response => [Link]())
.then(data => [Link]('GET Response:', data)) .catch(error =>
[Link]('Error:', error)); // ■■ POST Request ■■
fetch('[Link] { method: 'POST', headers: { 'Content-Type':
'application/json' }, body: [Link]({ // Data sent in body name: 'Raj Patel',
email: 'raj@[Link]' }) }) .then(response => [Link]()) .then(data =>
[Link]('POST Response:', data)) .catch(error => [Link]('Error:', error));
★ END OF SOLUTION PAPER ★ | Subject: Full Stack Development (MC02094041) | Summer 2026