Express js, React js and Mongo DB

Syllabus

Exercise - 1: Express JS – Routing, HTTP Methods

• 1a. Write a program to define a route, Handling Routes, Route Parameters, Query Parameters and URL building.
const express = require('express'); const app = express(); // Middleware to parse JSON request bodies app.use(express.json()); // user data stored in memory const users = { 1: { id: 1201, name: 'DIET', email: '1201@diet.ac.in' }, 2: { id: 1202, name: 'IT DEPT', email: '1202@diet.ac.in' } }; // Home route app.get('/', (req, res) => { res.send('Welcome to the User API!'); }); // Get all users or filter by name using query parameter app.get('/users', (req, res) => { const name = req.query.name; let result = Object.values(users); //to convert the object to an array if (name) { result = result.filter(user => user.name.toLowerCase() === name.toLowerCase()); } res.json(result); }); // Get a specific user by route parameter (user ID) app.get('/users/:id', (req, res) => { const user = users[req.params.id]; if (user) { res.json(user); } else { res.status(404).send('User not found'); } }); // Build a sample URL for a user app.get('/build-url/:id', (req, res) => { const id = req.params.id; const fullUrl = `${req.protocol}://${req.get('host')}/users/${id}`; res.send(`User URL: ${fullUrl}`); }); // Start the server app.listen(3000, () => { console.log('Server is running on http://localhost:3000'); });
• 1b. Write a program to accept data, retrieve data and delete a specified resource using http methods.
// app.js const express = require('express'); const app = express(); const port = 3000; // Middleware to parse JSON from request bodies app.use(express.json()); // database to store users let users = { 1: { id: 1201, name: 'DIET', email: '1201@diet.ac.in' }, 2: { id: 1202, name: 'IT DEPT', email: '1202@diet.ac.in' } }; // Add a new user app.post('/users', (req, res) => { const { id, name, email } = req.body; if (!id || !name || !email) { return res.status(400).send('Please provide id, name, and email'); } if (users[id]) { return res.status(409).send('User already exists'); } users[id] = { id, name, email }; res.status(201).json(users[id]); }); // Get all users app.get('/users', (req, res) => { res.json(Object.values(users)); }); // Get user by ID app.get('/users/:id', (req, res) => { const id = req.params.id; const user = users[id]; if (!user) { return res.status(404).send('User not found'); } res.json(user); }); // Delete user by ID app.delete('/users/:id', (req, res) => { const id = req.params.id; if (!users[id]) { return res.status(404).send('User not found'); } delete users[id]; res.send(`User with ID ${id} deleted`); }); // Update Resource - update user by ID app.put('/users/:id', (req, res) => { const id = req.params.id; const { name, email } = req.body; // Check if user exists if (!users[id]) { return res.status(404).send('User not found'); } // Validate input if (!name || !email) { return res.status(400).send('Please provide both name and email'); } // Update user details users[id].name = name; users[id].email = email; res.send(` User with ID ${id} updated successfully`); }); // Start the server app.listen(port, () => { console.log(`Server running at http://localhost:${port}`); });

---

---

Exercise - 2: Express JS – Templating, Form Data

• 2a.Write a program using templating engine.
const express = require('express'); const bodyParser = require('body-parser'); const path = require('path'); const app = express(); // Set up EJS as the templating engine app.set('view engine', 'ejs'); // Use body-parser to parse incoming form data app.use(bodyParser.urlencoded({ extended: true })); // Serve static files (like CSS) from the "public" directory app.use(express.static(path.join(__dirname, 'views'))); // Route to display the form app.get('/', (req, res) => { res.render('index'); // Render the "index.ejs" template }); // Route to handle form submission app.post('/submit', (req, res) => { const { name, email } = req.body; // Render the result page and pass the submitted data res.render('result', { name, email }); }); // Start the server app.listen(3000, () => { console.log('Server is running on http://localhost:3000'); });
• 2b.Write a program to work with form data.
//index.ejs in views folder <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Submit Your Information</title> </head> <body> <h1>Submit Your Information</h1> <form action="/submit" method="POST"> <label for="name">Name:</label> <input type="text" name="name" id="name" required> <br><br> <label for="email">Email:</label> <input type="email" name="email" id="email" required> <br><br> <button type="submit">Submit</button> </form> </body> </html> //result.ejs in views folder <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Form Result</title> </head> <body> <h1>Form Submitted Successfully!</h1> <p><b>Name: <%= name %></b> <p><b>Email: <%= email %></b> <br> <a href="/">Go Back</a> </body> </html>

---

---

Exercise - 3: Express JS – Cookies, Sessions, Authentication

• 3a. Write a program for session management using cookies and sessions
//npm install express express-session cookie-parser const express = require('express'); const session = require('express-session'); const cookieParser = require('cookie-parser'); const app = express(); const PORT = 3000; app.use(cookieParser()); app.use(express.urlencoded({ extended: true })); // Configure session middleware app.use(session({ secret: 'mySecretKey', resave: false, saveUninitialized: true, cookie: { maxAge: 60000 } // 1 minute })); // Home route app.get('/', (req, res) => { if (req.session.username) { res.send(`Welcome back, ${req.session.username}! <a href="/logout">Logout</a>`); } else { res.send(`<form method="POST" action="/login"> <input name="username" placeholder="Enter your name" required /> <button type="submit">Login</button> </form>`); } }); // Login route app.post('/login', (req, res) => { const { username } = req.body; req.session.username = username; res.redirect('/'); }); // Logout route app.get('/logout', (req, res) => { req.session.destroy(); res.clearCookie('connect.sid'); res.send('Logged out successfully. <a href="/">Login again</a>'); }); // Start server app.listen(PORT, () => { console.log(`Server running at http://localhost:${PORT}`); });
• 3b. Write a program for user authentication.
//npm install express express-session body-parser const express = require('express'); const session = require('express-session'); const bodyParser = require('body-parser'); const app = express(); const PORT = 3000; // Dummy user data const USERS = { admin: { password: 'admin' }, user: { password: 'user@123' } }; app.use(bodyParser.urlencoded({ extended: true })); app.use(session({ secret: 'authSecret', resave: false, saveUninitialized: true })); // Login form app.get('/', (req, res) => { if (req.session.username) { res.send(`Welcome, ${req.session.username}! <a href="/logout">Logout</a>`); } else { res.send(`<form method="POST" action="/login"> <input name="username" placeholder="Username" required /> <input type="password" name="password" placeholder="Password" required /> <button type="submit">Login</button> </form>`); } }); // Login handler app.post('/login', (req, res) => { const { username, password } = req.body; const user = USERS[username]; if (user && user.password === password) { req.session.username = username; res.redirect('/'); } else { res.status(401).send('Invalid credentials. <a href="/">Try again</a>'); } }); // Logout handler app.get('/logout', (req, res) => { req.session.destroy(); res.send('Logged out. <a href="/">Login</a>'); }); // Protected route app.get('/dashboard', (req, res) => { if (req.session.username) { res.send(`Hello ${req.session.username}, welcome to your dashboard.`); } else { res.status(401).send('Unauthorized. <a href="/">Login</a>'); } }); app.listen(PORT, () => { console.log(`Auth server running on http://localhost:${PORT}`); });

---

---

Exercise-4: Express JS – Database, RESTful APIs

• 4a. Write a program to connect MongoDB database using Mangoose and perform CRUD operations.
//npm install express mongoose body-parser //https://www.mongodb.com/try/download/community //https://www.mongodb.com/try/download/shell //net start MongoDB //mongosh //net stop MongoDB const express = require('express'); const mongoose = require('mongoose'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.json()); // Parse JSON requests // 1. Connect to MongoDB mongoose.connect('mongodb://127.0.0.1:27017/userdb', { useNewUrlParser: true, useUnifiedTopology: true }) .then(() => console.log('Connected to MongoDB')) .catch(err => console.error('MongoDB connection error:', err)); // 2. Define Schema const userSchema = new mongoose.Schema({ name: String, email: String }); // 3. Create Model const User = mongoose.model('User', userSchema); // --- CRUD Routes --- // CREATE - POST /users app.post('/users', async (req, res) => { const { name, email } = req.body; const newUser = new User({ name, email }); await newUser.save(); res.status(201).json(newUser); }); // READ - GET /users app.get('/users', async (req, res) => { const users = await User.find(); res.json(users); }); // UPDATE - PUT /users/:id app.put('/users/:id', async (req, res) => { const updatedUser = await User.findByIdAndUpdate(req.params.id, req.body, { new: true }); res.json(updatedUser); }); // DELETE - DELETE /users/:id app.delete('/users/:id', async (req, res) => { await User.findByIdAndDelete(req.params.id); res.json({ message: 'User deleted' }); }); // Start server app.listen(3000, () => console.log('Server running on http://localhost:3000'));
• 4b.Write a program to develop a single page application using RESTful APIs.
// server.js const express = require('express'); const mongoose = require('mongoose'); const path = require('path'); const app = express(); const PORT = 3000; // ----- Replace with your MongoDB connection string if needed ----- const MONGO = 'mongodb://localhost:27017/mydb'; // --------------------------------------------------------------- app.use(express.json()); app.use(express.static(path.join(__dirname, 'public'))); // Connect to MongoDB mongoose.connect(MONGO, { useNewUrlParser: true, useUnifiedTopology: true }) .then(() => console.log(' MongoDB connected')) .catch(err => console.error(' MongoDB connect error:', err)); // Schema and Model const userSchema = new mongoose.Schema({ name: { type: String, required: true }, email: { type: String, required: true } }); const User = mongoose.model('User', userSchema); // RESTful API // Get all users app.get('/api/users', async (req, res) => { const users = await User.find().sort({ _id: -1 }); res.json(users); }); // Create user app.post('/api/users', async (req, res) => { try { const user = new User(req.body); await user.save(); res.status(201).json(user); // 201 Created } catch (err) { res.status(400).json({ error: err.message }); } }); // Update user app.put('/api/users/:id', async (req, res) => { try { const u = await User.findByIdAndUpdate(req.params.id, req.body, { new: true, runValidators: true }); if (!u) return res.status(404).json({ error: 'Not found' }); res.json(u); } catch (err) { res.status(400).json({ error: err.message }); } }); // Delete user app.delete('/api/users/:id', async (req, res) => { try { const u = await User.findByIdAndDelete(req.params.id); if (!u) return res.status(404).json({ error: 'Not found' }); res.json({ message: 'Deleted' }); } catch (err) { res.status(400).json({ error: err.message }); } }); // Serve SPA (index.html is in public/) app.get('/', (req, res) => { res.sendFile(path.join(__dirname, 'public', 'index.html')); }); app.listen(PORT, () => { console.log(` Server running at http://localhost:${PORT}`); }); // public/app.js const api = '/api/users'; const usersBody = document.getElementById('usersBody'); const form = document.getElementById('userForm'); const nameInput = document.getElementById('name'); const emailInput = document.getElementById('email'); const msg = document.getElementById('msg'); const cancelEdit = document.getElementById('cancelEdit'); let editId = null; async function fetchUsers() { const res = await fetch(api); const data = await res.json(); renderUsers(data); } function renderUsers(users) { usersBody.innerHTML = users.map(u => ` <tr data-id="${u._id}"> <td>${escapeHtml(u.name)}</td> <td>${escapeHtml(u.email)}</td> <td> <button onclick="onEdit('${u._id}', '${escapeJs(u.name)}', '${escapeJs(u.email)}')">Edit</button> <button onclick="onDelete('${u._id}')">Delete</button> </td> </tr> `).join(''); } function escapeHtml(str){ return String(str).replace(/[&<>"'`]/g, s=>'&#'+s.charCodeAt(0)+';'); } function escapeJs(str){ return encodeURIComponent(str); } // Form submit -> create or update form.addEventListener('submit', async e => { e.preventDefault(); const name = nameInput.value.trim(); const email = emailInput.value.trim(); if (!name || !email) return showMsg('Please fill name and email'); try { if (editId) { // update const res = await fetch(`${api}/${editId}`, { method: 'PUT', headers: {'Content-Type':'application/json'}, body: JSON.stringify({ name, email }) }); if (!res.ok) throw await res.json(); showMsg('Updated successfully'); editId = null; cancelEdit.style.display = 'none'; } else { // create const res = await fetch(api, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ name, email }) }); if (res.status !== 201) throw await res.json(); showMsg('Added successfully'); } form.reset(); fetchUsers(); } catch (err) { showMsg(err.error || err.message || 'Error', true); } }); window.onEdit = (id, nameEnc, emailEnc) => { const name = decodeURIComponent(nameEnc); const email = decodeURIComponent(emailEnc); nameInput.value = name; emailInput.value = email; editId = id; cancelEdit.style.display = ''; showMsg('Editing mode - submit to save'); }; window.onDelete = async id => { if (!confirm('Delete this user?')) return; try { const res = await fetch(`${api}/${id}`, { method: 'DELETE' }); if (!res.ok) throw await res.json(); showMsg('Deleted'); fetchUsers(); } catch (err) { showMsg(err.error || 'Error deleting', true); } }; cancelEdit.addEventListener('click', () => { editId = null; form.reset(); cancelEdit.style.display = 'none'; showMsg(''); }); function showMsg(text, isError=false){ msg.textContent = text; msg.style.color = isError ? 'red' : 'green'; if (!text) msg.style.display = 'none'; else msg.style.display = ''; setTimeout(()=>{ if (!isError) msg.textContent = ''; }, 2500); } // initial load fetchUsers(); // public/index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Users SPA</title> <style> body{font-family: Arial; max-width:900px;margin:30px auto;padding:0 10px} input, button { padding:6px; margin:4px; } table { width:100%; border-collapse:collapse; margin-top:12px } th, td { border:1px solid #ddd; padding:8px; text-align:left } tr:nth-child(even){background:#f9f9f9} .small{font-size:0.9em;color:#666} </style> </head> <body> <h1>Users — Single Page App</h1> <form id="userForm"> <input id="name" placeholder="Name" required /> <input id="email" placeholder="Email" required /> <button type="submit">Add</button> <button type="button" id="cancelEdit" style="display:none">Cancel Edit</button> </form> <div id="msg" class="small"></div> <table> <thead><tr><th>Name</th><th>Email</th><th>Actions</th></tr></thead> <tbody id="usersBody"></tbody> </table> <script src="app.js"></script> </body> </html>

---

---

Exercise-5: React JS – Render HTML, JSX, Components – function and Class

• 5a.Write a program to render HTML to a web page
// index.js import React from "react"; import ReactDOM from "react-dom/client"; // Create root element const root = ReactDOM.createRoot(document.getElementById("root")); // Render plain HTML root.render( <h1>Hello, this is plain HTML rendered by React!</h1> );
• 5 b.Write a program for writing markup with JSX.
import React from "react"; import ReactDOM from "react-dom/client"; const name = "Sandeep"; const year = new Date().getFullYear(); ReactDOM.createRoot(document.getElementById("root")).render( <div> <h1>Welcome to JSX Example</h1> <p>Hello, {name}! The year is {year}.</p> </div> );
• 5 c.Write a program for creating and nesting components (function and class).
import React from "react"; import ReactDOM from "react-dom/client"; function WelcomeMessage() { return <h2>Welcome to React Components!</h2>; } class Footer extends React.Component { render() { return <p>© {new Date().getFullYear()} My Website</p>; } } function App() { return ( <div> <WelcomeMessage /> <p>This is the main content area.</p> <Footer /> </div> ); } ReactDOM.createRoot(document.getElementById("root")).render(<App />);

---

---

Exercise-6: React JS – Props and States, Styles, Respond to Events

• 6a.Write a program to work with props and states.
//Props means data passed from parent to child. //State means data inside a component that can change. import React, { useState } from "react"; import ReactDOM from "react-dom/client"; // Child component using props function Greeting(props) { return <h2>Hello, {props.name}!</h2>; } // Parent component using state //App uses useState to store count. //Button updates count → page re-renders automatically. function App() { const [count, setCount] = useState(0); // state: starts at 0 return ( <div> <Greeting name="Sandeep" /> {/* props example */} <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click Me</button> </div> ); } // Render parent const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />);
• 6b.Write a program to add styles (CSS & Sass Styling) and display data.
import React from "react"; import ReactDOM from "react-dom/client"; function App() { const myStyle = { color: "blue", backgroundColor: "lightyellow", padding: "10px", borderRadius: "8px" }; const fruits = ["Apple", "Banana", "Mango", "Orange"]; return ( <div style={myStyle}> <h1>Fruit List</h1> <ul> {fruits.map((fruit, index) => ( <li key={index}>{fruit}</li> ))} </ul> </div> ); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />);
• 6c.Write a program for responding to events.
import React, { useState } from "react"; import ReactDOM from "react-dom/client"; function App() { const [message, setMessage] = useState("Click a button!"); function handleGreet() { setMessage("Hello from React Event!"); } function handleReset() { setMessage("Click a button!"); } return ( <div> <h1>{message}</h1> <button onClick={handleGreet}>Greet</button> <button onClick={handleReset}>Reset</button> <input type="text" placeholder="Type something" onChange={(e) => setMessage(e.target.value)} /> </div> ); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />);

---

---

Exercise-7: React JS – Conditional Rendering, Rendering Lists, React Forms

• 7a.Write a program for conditional rendering.
import React, { useState } from "react"; import ReactDOM from "react-dom/client"; function App() { const [isLoggedIn, setIsLoggedIn] = useState(false); return ( <div> <h1>Conditional Rendering Example</h1> {isLoggedIn ? ( <h2>Welcome Back, User!</h2> ) : ( <h2>Please Login to Continue</h2> )} <button onClick={() => setIsLoggedIn(!isLoggedIn)}> {isLoggedIn ? "Logout" : "Login"} </button> </div> ); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />);
• 7b.Write a program for rendering lists.
import React from "react"; import ReactDOM from "react-dom/client"; function App() { const students = ["Ravi", "Anu", "Priya", "Kiran", "Sita"]; return ( <div> <h1>Rendering Lists Example</h1> <ul> {students.map((student, index) => ( <li key={index}>{student}</li> ))} </ul> </div> ); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />);
• 7c.Write a program for working with different form fields using react forms.
import React, { useState } from "react"; import ReactDOM from "react-dom/client"; function App() { const [formData, setFormData] = useState({ name: "", email: "", gender: "", agree: false }); function handleChange(e) { const { name, value, type, checked } = e.target; setFormData({ ...formData, [name]: type === "checkbox" ? checked : value }); } function handleSubmit(e) { e.preventDefault(); alert(`Form Submitted!\n${JSON.stringify(formData, null, 2)}`); } return ( <div> <h1>React Forms Example</h1> <form onSubmit={handleSubmit}> <label> Name:{" "} <input type="text" name="name" value={formData.name} onChange={handleChange} /> </label> <br /><br /> <label> Email:{" "} <input type="email" name="email" value={formData.email} onChange={handleChange} /> </label> <br /><br /> <label> Gender:{" "} <select name="gender" value={formData.gender} onChange={handleChange} > <option value="">Select</option> <option value="male">Male</option> <option value="female">Female</option> </select> </label> <br /><br /> <label> <input type="checkbox" name="agree" checked={formData.agree} onChange={handleChange} />{" "} I agree to terms </label> <br /><br /> <button type="submit">Submit</button> </form> </div> ); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />);

---

---

Exercise-8: React JS – React Router, Updating the Screen

• 8a.Write a program for routing to different pages using react router.
//npm install react-router-dom import React from "react"; import ReactDOM from "react-dom/client"; import { BrowserRouter, Routes, Route, Link } from "react-router-dom"; // Home Component function Home() { return <h2>Welcome to Home Page</h2>; } // About Component function About() { return <h2> This is the About Page</h2>; } // Contact Component function Contact() { return <h2>Contact us at: contact@example.com</h2>; } // Parent App function App() { return ( <BrowserRouter> <div> <h1>React Router Example</h1> {/* Navigation Links */} <nav> <Link to="/">Home</Link> |{" "} <Link to="/about">About</Link> |{" "} <Link to="/contact">Contact</Link>|{" "} <a href="https://kottesandeep.blogspot.com/" target="_blank"> My Blog </a> </nav> {/* Routes */} <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="/contact" element={<Contact />} /> </Routes> </div> </BrowserRouter> ); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />); //BrowserRouter → enables routing in React app. //Link → works like <a> but without page reload. //Routes + Route → decides which component to show based on URL.
• 8a.Write a program for routing to different pages using react router.
import React, { useState } from "react"; import ReactDOM from "react-dom/client"; function App() { const [message, setMessage] = useState("Welcome to React!"); function updateMessage() { setMessage("Screen Updated!"); } return ( <div> <h1>{message}</h1> <button onClick={updateMessage}>Click to Update Screen</button> </div> ); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />);

---

---

Exercise-9: React JS – Hooks, Sharing data between Components

• 9a.Write a program to understand the importance of using hooks.
import React, { useState, useEffect } from "react"; import ReactDOM from "react-dom/client"; function App() { // useState Hook — to store and update counter value const [count, setCount] = useState(0); // useEffect Hook — runs when component renders or updates useEffect(() => { document.title = `You clicked ${count} times`; }, [count]); // runs again only when 'count' changes return ( <div> <h1>Understanding Hooks Example</h1> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click Me</button> </div> ); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />); //useState(0) → creates a state variable count with initial value 0. //useEffect() → performs side effects (like updating document title). //When setCount() is called, React re-renders the component → the UI updates //automatically. //Without Hooks, you’d have to write a Class Component and use this.state and //componentDidMount(), which is longer and harder.
• 9b.Write a program for sharing data between components.
import React, { useState } from "react"; import ReactDOM from "react-dom/client"; // Child component that receives data (props) from parent function Child(props) { return ( <div> <h2>Child Component</h2> <p>Received Message: {props.message}</p> </div> ); } // Parent component function Parent() { const [message, setMessage] = useState("Hello from Parent!"); return ( <div> <h1>Sharing Data Between Components</h1> <Child message={message} /> <button onClick={() => setMessage("Message Updated from Parent!")}> Update Message </button> </div> ); } // Render Parent const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<Parent />); //The Parent has a state variable message. //It passes this value to Child via props → <Child message={message} />. //When parent updates the state (using the button), the new message is //automatically passed to Child.