Full Stack Assessment2 Key
Full Stack Assessment2 Key
1. What are React components? State the difference between a functional component and a
class component.
React components are independent, reusable pieces of code that return HTML via a render
function. They serve as the building blocks of any React application, enabling us to split the
UI into separate, reusable pieces that can be developed and maintained independently.
Functional Component: are JavaScript functions that accept props and return React elements
function Greet(props){
return <h1> Hello, {props.Name}! </h1>;
}
Class Components
Explicit lifecycle methods
More verbose
Complex inheritance
Functional Components (Hooks)
More concise
Easier to understand
Functional approach
Better performance
2. Create a simple form component with a text input and a submit button. When submitted,
display the entered text below the form.
import k{ useState } from 'react';
function Form() {
const [input,val setInput] = useState('');
const [submitText, setSubmitText] = useState('');
const submit = (e) => {
setSubmittext(inputValue);
};
return (
<div>
<form onSubmit={submit}>
<input
type="text"
value={inputval}
onChange={(e) => setInput(e.target.value)}
/>
<button type="submit">Submit</button>
</form>
<h1>{submitText}</h1>
</div>
);
}
export default Form;
3. What is Express.js?
Express.js is a web application framework of node.js that provides a robust set of features to
build web applications and APIs.
4. Write an Express.js code to create a simple server with an endpoint /add-user. This endpoint
should accept a POST request with a JSON body containing a user's name and age, and
store this data in an in-memory array.
const express = require('express');
const app = express();
app.use(express.json());
const PORT=3000;
let users = [];
app.listen(PORT, () => {
console.log(`Server running on http://localhost:${PORT}`);
});
5. State the difference between MongoDB and relational databases in terms of data structure
and schema? write a Todo schema with title and description in both MongoDB Shell and
Express (Mongoose).
MongoDB
Structure: Collections
Schema: Flexible
Data format: BSON/JSON. { TITLE: “Learn MongoDB”; DESCRIPTION: “Understand and
practice”}
Relational Database
Structure: Table(rows and columns)
Schema: Fixed
Data format: Typed fields. Title Varchar2(20), Description varchar2(50);
MangoDBshell
db.createCollection("todos", {
title: { bsonType: "string" },
description: { bsonType: "string" }
});
Express
const mongoose = require('mongoose');
const todoSchema = new mongoose.Schema({
title: String,
description: String
});
const Todo = mongoose.model('Todo', todoSchema);
6. Discuss the three phases of a React component's lifecycle and list the corresponding
methods in class components vs. functional components with hooks (4 Marks)
Explain the React component lifecycle in the CartComponent by adding items to the cart
using useEffect. How does the first useEffect simulate the mount and unmount phases, and
how does the second useEffect handle updates when items are added to the cart?(4 Marks)
What is React.memo? Explain how wrapping a child component (CartItem) in React.memo
can improve performance in CartComponent. 4 Marks)
Class Components:
Mounting: componentDidMount()
Updating: componentDidUpdate()
Unmounting: componentWillUnmount()
(or)
7. Explain the React Router for navigation between the Product List and Cart pages, using the
CardLayout wrapper and useState for managing state?
Create a Product List page that displays product names and prices, using useState to
manage the cart and allowing users to add products to the cart. Create an Add to Cart page
that lists the items in the cart, including product names, prices, and quantities, using useState
to manage cart items. Wrap both pages in a CardLayout component for consistent design.
//APP.JSX
import ProductList from './router/ProductList'
import Cart from './router/Cart'
import {BrowserRouter, Routes, Route} from 'react-router-dom'
import Navbar from './router/Navbar'
import { useState } from 'react'
function addToCart(product) {
setCartItems([...cartItems, product])
}
return(
<div>
<BrowserRouter>
<Navbar/>
<Routes>
<Route path='/' element={<ProductList addToCart={addToCart}/>}></Route>
<Route path='/Cart' element={<Cart cartItems={cartItems}/>}></Route>
</Routes>
</BrowserRouter>
</div>
)
}
Navbar.jsx
import {Link} from 'react-router-dom'
export default function Navbar(){
return(
<div style={{padding: '20px', backgroundColor: 'black', color: 'white'}}>
<Link to='/' style={{color: 'white', padding: '10px'}}>Product List</Link>
<Link to='/Cart' style={{color: 'white', padding: '10px'}}>Cart</Link>
</div>
)
}
CardLayout.jsx
export default function CardLayout({ children }){
return(
<div style={{padding: '20px', border: '1px solid black', margin: '20px'}}>
{children}
</div>
)
}
Cart.jsx
export default function Cart({ cartItems }){
return(
<div>
<h2>Cart</h2>
{cartItems.map((item) => (
<div style={{padding: '10px', border: '1px solid gray', margin: '10px'}}>
<h3>Name : {item.name}</h3>
<p>Price: {item.price}</p>
</div>
))
}
</div>
)
}
Product.jsx
import { useState } from 'react'
import CardLayout from './CardLayout'
(12 Marks)
8. Write a user registration system with a React frontend and an Express backend. The frontend
should include a registration form with fields for username, email, password, and confirm
password, along with validation and a "Register" button that sends a POST request to
/api/register. Upon successful registration, the response should be displayed. Additionally,
implement a button to fetch registration statistics from /api/status, including total users and
the last registration time. The backend should handle the registration logic with validation for
username, email, and password, and return a response with success/error messages and
registration strength. It should also provide registration stats via /api/stats.
// App.js
import { useState } from 'react';
function App() {
const [uname, setname] = useState('');
const [email, setEmail] = useState('');
const [pwd, setPwdd] = useState('');
const [confirmPwd, setConfirmPwd] = useState('');
const [message, setMessage] = useState('');
const [stats, setStats] = useState('');
function handleRegister() {
let errors = [];
if (!uname || !email || !pwd || !confirmPwd) {
errors.push('All fields are required');
}
})
})
.then(response => response.json())
.then(data => {
console.log('Registration response:', data);
setMessage(data.message);
})
.catch(error => {
console.log('Error:', error);
setMessage('Registration failed');
});
}
// Fetch Stats
function fetchStats() {
fetch('http://localhost:3000/api/stats')
.then(response => response.json())
.then(data => {
console.log('Stats data:', data);
setStats(data);
})
.catch(error => {
console.log('Error fetching stats:', error);
setMessage('Fetch stats failed');
});
}
return (
<div style={{ padding: '20px' }}>
<h1>User Registration</h1>
<div><label>Username:</label>
<input type="text" value={uname} onChange={(e) => setname(e.target.value)}/>
</div>
<div><label>Email:</label>
<input type="text" value={email} onChange={(e) => setEmail(e.target.value)}/>
</div>
<div><label>Password:</label>
<input type="password" value={pwd} onChange={(e) =>
setPwd(e.target.value)}/></div>
<div> <label>Confirm Password:</label>
<input type="password" value={confirmPassword} onChange={(e) =>
setConfirmPwd(e.target.value)}/></div>
</div>
);
}
app.use(cors());
app.use(express.json());
// Registration endpoint
app.post("/api/register", (req, res) => {
try {
const { username, email, password } = req.body;
// Basic validation
if (!username || !email || !password) {
return res.json({
success: false,
message: "All fields are required"
});
}
users.push(newUser);
// Update stats
registrationStats.totalUsers = users.length;
registrationStats.lastRegistration = new Date().toLocaleString();
res.json({
success: true,
message: `Registration successful! Password strength: ${strength}`,
strength: strength
});
} catch (error) {
console.log('Registration error:', error);
res.json({
success: false,
message: "Registration failed"
});
}
});
// Stats endpoint
app.get("/api/stats", (req, res) => {
try {
res.json({
totalUsers: registrationStats.totalUsers,
lastRegistration: registrationStats.lastRegistration || "No registrations yet"
});
} catch (error) {
console.log('Stats error:', error);
res.json({
error: "Failed to get stats"
});
}
});
(or)
9. Create an Cricket Match Predictor app where users predict the match winner. The user
should input the names of two teams, predict the winner, and provide predicted scores for
both teams. The app should include a form with fields for the two teams, predicted scores,
and a dropdown to select the winner. Once the prediction is submitted, the server generates
random predictions for the winner and the scores for fun. The backend updates the actual
results and shows a comparison with the user’s and server’s predictions.
10. Create a Book Tracker app using React and Express where users manage their reading list.
The React form collects book title, author, genre, and rating. Users can add new books via a
POST request to /api/AddBooks and view all books using a GET request to /api/GetBooks.
The Express backend handles these requests and stores book data in MongoDB. Users can
also edit or delete books through corresponding PUT and DELETE endpoints. The React app
should update the book list dynamically after each action. Filtering options by genre or rating
should be supported as query parameters in the GET request.
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
return (
<div>
<h1>Book Tracker</h1>
<div>
<input placeholder="Title" value={title} onChange={(e) => setTitle(e.target.value)} />
<input placeholder="Author" value={author} onChange={(e) => setAuthor(e.target.value)}
/>
<input placeholder="Genre" value={genre} onChange={(e) => setGenre(e.target.value)} />
<input placeholder="Rating" value={rating} onChange={(e) => setRating(e.target.value)} />
<button onClick={edit }</button
<button onClick={updateBook}</button<button onClick={AddBook }</button>
<button onClick={deleteBook}</button><button onClick={getBooks}</button
</div>
<div>
{books.map(book => (
<div key={book._id}>
<h3>{book.title}</h3>
<p>{book.author}</p>
<p>{book.genre}</p>
<p>Rating: {book.rating}</p>
</div>
))}
</div>
</div>
);
}