ASSIGNMENT #2

Web Technologies

Submitted to : Ma’m Sadaf Riaz

GROUP MEMBERS : MUHAMMAD MUJTABA (SP22-BCS-171)
MUHAMMAD BASIT (SP22-BCS-160)
ASHAR JABBAR KHAN (SP22-BCS-174)

QUESTION 1 :

Key Components of the MERN Stack

The MERN stack is a popular full-stack development framework that combines four key
technologies: MongoDB, Express.js, React.js, and Node.js. Here's a breakdown of each
component and how they work together:

1. MongoDB (Database Layer)

MongoDB is a NoSQL database used to store and manage application data in a flexible,
document-based format.

 Document-Oriented Storage: Data is stored in JSON-like documents, making it easier

to manage and retrieve.
 Scalability: Supports horizontal scaling and distributed databases.
 Integration: Works seamlessly with Node.js through libraries like Mongoose.
 Dynamic Schema: Allows developers to modify data structures without downtime.
 Data Flow: Acts as the storage for both frontend (user input) and backend (processed
data).
2. Express.js (Backend Framework)

Express.js is a lightweight and flexible Node.js framework that simplifies server-side application
development.

 Middleware Support: Handles HTTP requests, routes, and responses efficiently.

 RESTful APIs: Facilitates the creation of APIs for CRUD operations on the database.
 Data Handling: Interacts with MongoDB to query, update, or delete data.
 Scalability: Allows for modular code, making applications more scalable.

3. React.js (Frontend Framework)

React.js is a JavaScript library for building interactive and dynamic user interfaces.

 Component-Based Architecture: Enables reusable UI components.

 State Management: Manages application state using tools like Redux or React Context.
 Virtual DOM: Optimizes rendering for better performance.
 APIs and Integration: Fetches data from the backend (Express.js) using HTTP requests.
 Single Page Application (SPA): Creates dynamic and seamless user experiences without
full-page reloads.

4. Node.js (Runtime Environment)

Node.js is a JavaScript runtime that allows developers to run JavaScript code on the server side.

 Event-Driven Architecture: Handles multiple client requests simultaneously.

 Backend Logic: Runs the Express.js application to process requests and manage routes.
 Communication with MongoDB: Uses libraries like Mongoose to connect and interact
with the database.
 JavaScript Everywhere: Ensures the same programming language is used on both
frontend and backend.

How They Interact to Create a Full-Stack Application

1. Frontend (React.js):
o The user interacts with the application through the React.js frontend.
o React sends HTTP requests to the backend to retrieve or send data.
2. Backend (Express.js + Node.js):
o Express.js handles incoming requests from the frontend and defines the
application’s API endpoints.
 Node.js executes the Express application, handling server-side logic and routing.
o
3. Database (MongoDB):
o MongoDB stores the data received from the frontend (via the backend) or fetched
for frontend display.
o The backend interacts with MongoDB to perform CRUD operations.
4. Data Flow:
o Frontend: Sends a request (e.g., login, form submission) to the backend.
o Backend: Processes the request, interacts with MongoDB for data, and sends a
response back to the frontend.
o Frontend: Updates the UI based on the backend response.

Summary of Workflow

1. User interacts with the React.js frontend.

2. HTTP request is sent to Express.js via RESTful APIs.
3. Express.js processes the request using Node.js and interacts with MongoDB for data.
4. Data is fetched or updated in MongoDB, and the response is sent back to the frontend.
5. The React.js frontend updates the UI dynamically, providing a seamless user
experience.

QUESTION 2:
CODE :

import React, { useState, useEffect } from 'react';

const App = () => {

const [formData, setFormData] = useState({

name: '',

email: '',

country: '',

gender: '',

subjects: [],

});
const [errors, setErrors] = useState({});

const [isValid, setIsValid] = useState(false);

const emailRegex = /^\w(\.?[\w-])*@\w(\.?[\w-])*\.[a-z]{2,6}(\.[a-z]{2})?$/i;

useEffect(() => {

validateForm();

}, [formData]);

const validateForm = () => {

const newErrors = {};

let valid = true;

if (!formData.name) {

newErrors.name = 'Name is required.';

valid = false;

if (!formData.email || !emailRegex.test(formData.email)) {

newErrors.email = 'Please enter a valid email.';

valid = false;

if (!formData.country) {
 newErrors.country = 'Country is required.';

valid = false;

if (!formData.gender) {

newErrors.gender = 'Please select a gender.';

valid = false;

if (formData.subjects.length < 1) {

newErrors.subjects = 'Please select at least one subject.';

valid = false;

setErrors(newErrors);

setIsValid(valid);

};

const handleChange = (e) => {

const { name, value, type, checked } = e.target;

if (type === 'checkbox') {

setFormData(prevState => {

const subjects = checked

? [...prevState.subjects, value]

: prevState.subjects.filter(item => item !== value);

 return { ...prevState, subjects };

});

} else {

setFormData(prevState => ({ ...prevState, [name]: value }));

};

const handleSubmit = (e) => {

e.preventDefault();

if (isValid) {

console.log('Form submitted successfully:', formData);

// You can also reset the form here if needed

setFormData({

name: '',

email: '',

country: '',

gender: '',

subjects: [],

});

} else {

console.log('Form has errors:', errors);

};
return (

<div>

<h1>Registration Form</h1>

<form onSubmit={handleSubmit}>

<div>

<label>Name:</label>

<input

type="text"

name="name"

value={formData.name}

onChange={handleChange}

/>

{errors.name && <span style={{ color: 'red' }}>{errors.name}</span>}

</div>

<div>

<label>Email:</label>

<input

type="email"

name="email"

value={formData.email}

onChange={handleChange}

/>
 {errors.email && <span style={{ color: 'red' }}>{errors.email}</span>}

</div>

<div>

<label>Country:</label>

<select

name="country"

value={formData.country}

onChange={handleChange}

>

<option value="">--Please choose an option--</option>

<option value="US">United States</option>

<option value="CA">Canada</option>

<option value="MX">Mexico</option>

<option value="GB">United Kingdom</option>

<option value="AU">Australia</option>

</select>

{errors.country && <span style={{ color: 'red' }}>{errors.country}</span>}

</div>

<div>

<label>Gender:</label>

<input

type="radio"

name="gender"
 value="male"

checked={formData.gender === 'male'}

onChange={handleChange}

/> Male

<input

type="radio"

name="gender"

value="female"

checked={formData.gender === 'female'}

onChange={handleChange}

/> Female

{errors.gender && <span style={{ color: ' red' }}>{errors.gender}</span>}

</div>

<div>

<label>Subjects:</label>

<div>

<input

type="checkbox"

name="subjects"

value="Math"

checked={formData.subjects.includes('Math')}

onChange={handleChange}

/> Math
 <input

type="checkbox"

name="subjects"

value="Science"

checked={formData.subjects.includes('Science')}

onChange={handleChange}

/> Science

<input

type="checkbox"

name="subjects"

value="History"

checked={formData.subjects.includes('History')}

onChange={handleChange}

/> History

</div>

{errors.subjects && <span style={{ color: 'red' }}>{errors.subjects}</span>}

</div>

<button type="submit">Save</button>

</form>

</div>

);

};
export default App;

OUTPUT :