FULL STACK DEVELOPMENT
– LAB PROGRAMS (Record Submission)
1. ExpressJS – Routing, HTTP Methods, Middleware
a) Write a program to define a route, Handling Routes, Route Parameters, Query
Parameters and URL building.
// [Link]
const express = require('express');
const app = express();
// Basic Route
[Link]('/', (req, res) => [Link]('Hello World'));
// Route with parameter
[Link]('/user/:id', (req, res) => [Link](`User ID: ${[Link]}`));
// Query parameter
[Link]('/search', (req, res) => [Link](`Search term: ${[Link].q}`));
[Link](3000, () => [Link]("Server running at [Link]
b) Write a program to accept data, retrieve data and delete a specified resource using
HTTP methods.
// [Link]
const express = require('express');
const app = express();
[Link]([Link]());
let users = [{ id: 1, name: "John" }];
// POST - Create
[Link]('/users', (req, res) => {
[Link]([Link]);
[Link](users);
});
// GET - Read
[Link]('/users', (req, res) => [Link](users));
// DELETE - Delete
[Link]('/users/:id', (req, res) => {
users = [Link](u => [Link] != [Link]);
[Link](users);
});
[Link](3000, () => [Link]("CRUD server running..."));
c) Write a program to show the working of middleware.
// [Link]
const express = require('express');
const app = express();
// Middleware function
[Link]((req, res, next) => {
[Link](`Request Method: ${[Link]}, URL: ${[Link]}`);
next(); // pass control
});
[Link]('/', (req, res) => [Link]('Middleware Example'));
[Link](3000, () => [Link]("Middleware server running..."));
2. ExpressJS – Templating, Form Data
a) Write a program using templating engine.
// [Link]
const express = require('express');
const app = express();
[Link]('view engine', 'ejs');
[Link]('/', (req, res) => {
[Link]('index', { name: "John" });
});
[Link](3000, () => [Link]("EJS Example running..."));
views/[Link]
<h1>Hello <%= name %></h1>
b) Write a program to work with form data.
// [Link]
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
[Link]([Link]({ extended: true }));
[Link]('/', (req, res) => {
[Link]('<form method="post"><input name="name"/><button>Submit</button></form>');
});
[Link]('/', (req, res) => {
[Link](`You entered: ${[Link]}`);
});
[Link](3000, () => [Link]("Form data example running..."));
3. ExpressJS – Cookies, Sessions, Authentication
a) Write a program for session management using cookies and sessions.
// [Link]
const express = require('express');
const session = require('express-session');
const app = express();
[Link](session({ secret: "secret", saveUninitialized: true, resave: true }));
[Link]('/set', (req, res) => {
[Link] = "John";
[Link]("Session set!");
});
[Link]('/get', (req, res) => {
[Link](`Hello ${[Link]}`);
});
[Link](3000, () => [Link]("Session Example running..."));
b) Write a program for user authentication.
// [Link]
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
[Link]([Link]());
const users = { admin: "123" };
[Link]('/login', (req, res) => {
const { username, password } = [Link];
if (users[username] && users[username] === password) {
[Link]("Login Successful");
} else {
[Link]("Invalid Credentials");
}
});
[Link](3000, () => [Link]("Authentication Example running..."));
4. ExpressJS – Database, RESTful APIs
a) Write a program to connect MongoDB database using Mongoose and perform CRUD
operations.
// [Link]
const express = require('express');
const mongoose = require('mongoose');
const app = express();
[Link]([Link]());
[Link]("mongodb://localhost:27017/test");
const User = [Link]("User", { name: String, age: Number });
// CREATE
[Link]('/users', async (req, res) => {
const user = new User([Link]);
await [Link]();
[Link](user);
});
// READ
[Link]('/users', async (req, res) => [Link](await [Link]()));
// UPDATE
[Link]('/users/:id', async (req, res) => {
const user = await [Link]([Link], [Link], { new: true });
[Link](user);
});
// DELETE
[Link]('/users/:id', async (req, res) => {
await [Link]([Link]);
[Link]("User Deleted");
});
[Link](3000, () => [Link]("Mongoose CRUD running..."));
b) Write a program to develop a single page application using RESTful APIs.
�This is similar to above, where ReactJS frontend consumes ExpressJS API.
(Sample React fetch)
useEffect(() => {
fetch("[Link]
.then(res => [Link]())
.then(data => setUsers(data));
}, []);
5. ReactJS – Render HTML, JSX, Components
a) Write a program to render HTML to a web page.
function App() {
return <h1>Hello World</h1>;
}
export default App;
b) Write a program for writing markup with JSX.
const element = <h2>{5+5}</h2>;
c) Write a program for creating and nesting components.
function Child() {
return <h2>Child Component</h2>;
}
function Parent() {
return (
<div>
<h1>Parent Component</h1>
<Child />
</div>
);
}
6. ReactJS – Props and States, Styles, Respond to Events
a) Write a program to work with props and states.
// [Link]
function Welcome(props) {
return <h2>Hello {[Link]}</h2>;
}
// State Example
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>Increment</button>
</>
);
}
export { Welcome, Counter };
b) Write a program to add styles (CSS & Sass Styling) and display data.
// [Link]
import "./[Link]";
function StyledText() {
return <h2 className="redText">This is styled text</h2>;
}
export default StyledText;
[Link]
.redText {
color: red;
font-size: 24px;
}
c) Write a program for responding to events.
// [Link]
function EventExample() {
const handleClick = () => alert("Button Clicked!");
return <button onClick={handleClick}>Click Me</button>;
}
export default EventExample;
7. ReactJS – Conditional Rendering, Rendering Lists, React Forms
a) Write a program for conditional rendering.
function Conditional() {
const loggedIn = true;
return (
<>
{loggedIn ? <h2>Welcome User</h2> : <h2>Please Login</h2>}
</>
);
}
export default Conditional;
b) Write a program for rendering lists.
function ListExample() {
const items = ["Apple", "Banana", "Cherry"];
return (
<ul>
{[Link]((item, i) => <li key={i}>{item}</li>)}
</ul>
);
}
export default ListExample;
c) Write a program for working with different form fields using React forms.
import { useState } from "react";
function FormExample() {
const [form, setForm] = useState({ name: "", email: "" });
const handleChange = (e) =>
setForm({ ...form, [[Link]]: [Link] });
const handleSubmit = (e) => {
[Link]();
alert(`Name: ${[Link]}, Email: ${[Link]}`);
};
return (
<form onSubmit={handleSubmit}>
<input name="name" value={[Link]} onChange={handleChange} />
<input name="email" value={[Link]} onChange={handleChange} />
<button>Submit</button>
</form>
);
}
export default FormExample;
8. ReactJS – React Router, Updating the Screen
a) Write a program for routing to different pages using React Router.
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
function Home() { return <h2>Home Page</h2>; }
function About() { return <h2>About Page</h2>; }
function App() {
return (
<BrowserRouter>
<nav>
<Link to="/home">Home</Link> | <Link to="/about">About</Link>
</nav>
<Routes>
<Route path="/home" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}
export default App;
b) Write a program for updating the screen.
import { useState } from "react";
function UpdateExample() {
const [text, setText] = useState("Hello");
return (
<>
<h2>{text}</h2>
<button onClick={() => setText("Updated Text!")}>Update</button>
</>
);
}
export default UpdateExample;
9. ReactJS – Hooks, Sharing Data between Components
a) Write a program to understand the importance of using hooks.
import { useState, useEffect } from "react";
function HookExample() {
const [count, setCount] = useState(0);
useEffect(() => {
[Link] = `Clicked ${count} times`;
}, [count]);
return <button onClick={() => setCount(count + 1)}>Click {count}</button>;
}
export default HookExample;
b) Write a program for sharing data between components.
function Child({ message }) {
return <h2>Message: {message}</h2>;
}
function Parent() {
return <Child message="Hello from Parent" />;
}
export default Parent;
10. MongoDB – Installation, Configuration, CRUD Operations
a) Install MongoDB and configure ATLAS
�(Setup step, no code. Use mongosh for CLI)
b) Write MongoDB queries to perform CRUD operations.
// Insert
[Link]({ name: "John", age: 25 });
// Find
[Link]();
// Update
[Link]({ name: "John" }, { $set: { age: 30 } });
// Delete
[Link]({ name: "John" });
11. MongoDB – Databases, Collections and Records
a) Create and Drop databases/collections.
// Create Database
use mydb
// Create Collection
[Link]("students")
// Drop Database
[Link]()
// Drop Collection
[Link]()
b) Work with records using queries.
// Insert Multiple
[Link]([{name:"A",age:20}, {name:"B",age:22}]);
// Find with Limit
[Link]().limit(1);
// Sort
[Link]().sort({age:1});
// Create Index
[Link]({name:1});
// Aggregate
[Link]([{ $group: { _id: null, avgAge: { $avg: "$age" } } }]);
12. Augmented Programs (Any 2)
a) Design a To-do list application using NodeJS and ExpressJS
const express = require('express');
const mongoose = require('mongoose');
const app = express();
[Link]([Link]());
[Link]('mongodb://localhost:27017/todo');
const Task = [Link]('Task', { text: String });
// Add Task
[Link]('/tasks', async (req, res) => {
const task = new Task([Link]);
await [Link]();
[Link](task);
});
// View Tasks
[Link]('/tasks', async (req, res) => {
[Link](await [Link]());
});
// Delete Task
[Link]('/tasks/:id', async (req, res) => {
await [Link]([Link]);
[Link]("Task Deleted");
});
[Link](3000, () => [Link]("To-do App running..."));
b) Design a Quiz application using NodeJS and ExpressJS
const express = require('express');
const app = express();
[Link]([Link]());
let questions = [
{ q: "2+2=?", a: "4" },
{ q: "Capital of India?", a: "Delhi" }
];
[Link]('/quiz', (req, res) => [Link](questions));
[Link]('/quiz', (req, res) => {
const { q, a } = [Link];
[Link]({ q, a });
[Link]("Question Added");
});
[Link](3000, () => [Link]("Quiz App running..."));