=============================================================================
WT Lab Exam - Web Technology Study Content (with Programs)
=============================================================================

-- @BEGIN: SET1_BOOK_API_SERVER
-- FILE server.js - REST API for Books with Express CRUD for title and author.
-- Keywords: rest api books, express server.js, POST GET PUT DELETE books, express.json, nextId
const express = require('express');
const app = express();

app.use(express.json());

let books = [];
let nextId = 1;

app.post('/books', (req, res) => {
    const { title, author } = req.body;

    if (typeof title !== 'string' || !title.trim() ||
        typeof author !== 'string' || !author.trim()) {
        return res.status(400).json({
            error: 'Title and author are required'
        });
    }

    const book = {
        id: nextId++,
        title: title.trim(),
        author: author.trim()
    };

    books.push(book);
    res.status(201).json(book);
});

app.get('/books', (req, res) => {
    res.json(books);
});

app.get('/books/:id', (req, res) => {
    const book = books.find(
        b => b.id === Number(req.params.id)
    );

    if (!book) {
        return res.status(404).json({
            error: 'Book not found'
        });
    }

    res.json(book);
});

app.put('/books/:id', (req, res) => {
    const book = books.find(
        b => b.id === Number(req.params.id)
    );

    if (!book) {
        return res.status(404).json({
            error: 'Book not found'
        });
    }

    const { title, author } = req.body;

    if (typeof title !== 'string' || !title.trim() ||
        typeof author !== 'string' || !author.trim()) {
        return res.status(400).json({
            error: 'Title and author are required'
        });
    }

    book.title = title.trim();
    book.author = author.trim();

    res.json(book);
});

app.delete('/books/:id', (req, res) => {
    const index = books.findIndex(
        b => b.id === Number(req.params.id)
    );

    if (index === -1) {
        return res.status(404).json({
            error: 'Book not found'
        });
    }

    books.splice(index, 1);

    res.json({
        message: 'Book deleted successfully'
    });
});

app.listen(3000, () => {
    console.log('Server running at http://localhost:3000');
});
-- @END: SET1_BOOK_API_SERVER

-- @BEGIN: SET1_BOOK_API_HELPER_COMMANDS
-- Helper commands to setup, start and test Book REST API with Express and curl.
-- Keywords: mkdir book-api, npm install express, node server.js, curl POST GET PUT DELETE books
mkdir book-api
cd book-api
npm init -y
npm install express

Create server.js and paste the code above.

Start:
node server.js

Test endpoints:
POST   http://localhost:3000/books
GET    http://localhost:3000/books
GET    http://localhost:3000/books/1
PUT    http://localhost:3000/books/1
DELETE http://localhost:3000/books/1

POST/PUT JSON body:
{
    "title": "Computer Networks",
    "author": "Andrew Tanenbaum"
}

Example curl commands (Windows CMD):

curl -X POST http://localhost:3000/books -H "Content-Type: application/json" -d "{\"title\":\"Computer Networks\",\"author\":\"Andrew Tanenbaum\"}"

curl http://localhost:3000/books

curl http://localhost:3000/books/1

curl -X PUT http://localhost:3000/books/1 -H "Content-Type: application/json" -d "{\"title\":\"Network Security\",\"author\":\"William Stallings\"}"

curl -X DELETE http://localhost:3000/books/1
-- @END: SET1_BOOK_API_HELPER_COMMANDS

-- @BEGIN: SET2_REACT_ROUTER_APP
-- FILE src/App.jsx - React Router Application with Home About Team Contact and nested team route.
-- Keywords: react router App.jsx, BrowserRouter Routes Route Link Outlet, Home About Team Contact, nested route team
import React from 'react';
import {
    BrowserRouter,
    Routes,
    Route,
    Link,
    Outlet
} from 'react-router-dom';

function Home() {
    return <h2>Welcome to Home Page</h2>;
}

function About() {
    return (
        <div>
            <h2>About Us</h2>
            <p>This is the About page.</p>
            <Link to="team">Our Team</Link>
            <Outlet />
        </div>
    );
}

function Team() {
    return <h3>Our Team Page</h3>;
}

function Contact() {
    return <h2>Contact Us</h2>;
}

export default function App() {
    return (
        <BrowserRouter>
            <h1>React Router Application</h1>

            <nav>
                <Link to="/">Home</Link>
                {' | '}
                <Link to="/about">About</Link>
                {' | '}
                <Link to="/contact">Contact</Link>
            </nav>

            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />}>
                    <Route path="team" element={<Team />} />
                </Route>
                <Route path="/contact" element={<Contact />} />
            </Routes>
        </BrowserRouter>
    );
}
-- @END: SET2_REACT_ROUTER_APP

-- @BEGIN: SET2_REACT_ROUTER_MAIN
-- FILE src/main.jsx - React entry point rendering App with StrictMode.
-- Keywords: react main.jsx, ReactDOM createRoot, StrictMode, index.css
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);
-- @END: SET2_REACT_ROUTER_MAIN

-- @BEGIN: SET2_REACT_ROUTER_HELPER_COMMANDS
-- Helper commands to setup and run React Router lab with Vite and react-router-dom.
-- Keywords: npm create vite react-lab, npm install react-router-dom, npm run dev, localhost 5173 routes
npm create vite@latest react-lab -- --template react
cd react-lab
npm install
npm install react-router-dom

Replace src/App.jsx with the code above.
Replace src/main.jsx with the code above.

Start:
npm run dev

Open the URL printed in the terminal, usually:
http://localhost:5173

Routes:
http://localhost:5173/
http://localhost:5173/about
http://localhost:5173/about/team
http://localhost:5173/contact
-- @END: SET2_REACT_ROUTER_HELPER_COMMANDS

-- @BEGIN: SET3_BOOK_API_SERVER
-- FILE server.js - REST API for Books with Express CRUD for title and author.
-- Keywords: rest api books, express server.js, POST GET PUT DELETE books, express.json, nextId
const express = require('express');
const app = express();

app.use(express.json());

let books = [];
let nextId = 1;

app.post('/books', (req, res) => {
    const { title, author } = req.body;

    if (typeof title !== 'string' || !title.trim() ||
        typeof author !== 'string' || !author.trim()) {
        return res.status(400).json({
            error: 'Title and author are required'
        });
    }

    const book = {
        id: nextId++,
        title: title.trim(),
        author: author.trim()
    };

    books.push(book);
    res.status(201).json(book);
});

app.get('/books', (req, res) => {
    res.json(books);
});

app.get('/books/:id', (req, res) => {
    const book = books.find(
        b => b.id === Number(req.params.id)
    );

    if (!book) {
        return res.status(404).json({
            error: 'Book not found'
        });
    }

    res.json(book);
});

app.put('/books/:id', (req, res) => {
    const book = books.find(
        b => b.id === Number(req.params.id)
    );

    if (!book) {
        return res.status(404).json({
            error: 'Book not found'
        });
    }

    const { title, author } = req.body;

    if (typeof title !== 'string' || !title.trim() ||
        typeof author !== 'string' || !author.trim()) {
        return res.status(400).json({
            error: 'Title and author are required'
        });
    }

    book.title = title.trim();
    book.author = author.trim();

    res.json(book);
});

app.delete('/books/:id', (req, res) => {
    const index = books.findIndex(
        b => b.id === Number(req.params.id)
    );

    if (index === -1) {
        return res.status(404).json({
            error: 'Book not found'
        });
    }

    books.splice(index, 1);

    res.json({
        message: 'Book deleted successfully'
    });
});

app.listen(3000, () => {
    console.log('Server running at http://localhost:3000');
});
-- @END: SET3_BOOK_API_SERVER

-- @BEGIN: SET3_BOOK_API_HELPER_COMMANDS
-- Helper commands to setup, start and test Book REST API with Express.
-- Keywords: mkdir book-api, npm install express, node server.js, POST GET PUT DELETE books endpoints
mkdir book-api
cd book-api
npm init -y
npm install express

Create server.js and paste the code above.

Start:
node server.js

Endpoints:
POST   http://localhost:3000/books
GET    http://localhost:3000/books
GET    http://localhost:3000/books/1
PUT    http://localhost:3000/books/1
DELETE http://localhost:3000/books/1
-- @END: SET3_BOOK_API_HELPER_COMMANDS

-- @BEGIN: SET4_REACT_ROUTER_APP
-- FILE src/App.jsx - React Router Application with Home About Team Contact and nested team route.
-- Keywords: react router App.jsx, BrowserRouter Routes Route Link Outlet, Home About Team Contact, nested route team
import React from 'react';
import {
    BrowserRouter,
    Routes,
    Route,
    Link,
    Outlet
} from 'react-router-dom';

function Home() {
    return <h2>Welcome to Home Page</h2>;
}

function About() {
    return (
        <div>
            <h2>About Us</h2>
            <p>This is the About page.</p>
            <Link to="team">Our Team</Link>
            <Outlet />
        </div>
    );
}

function Team() {
    return <h3>Our Team Page</h3>;
}

function Contact() {
    return <h2>Contact Us</h2>;
}

export default function App() {
    return (
        <BrowserRouter>
            <h1>React Router Application</h1>

            <nav>
                <Link to="/">Home</Link>
                {' | '}
                <Link to="/about">About</Link>
                {' | '}
                <Link to="/contact">Contact</Link>
            </nav>

            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />}>
                    <Route path="team" element={<Team />} />
                </Route>
                <Route path="/contact" element={<Contact />} />
            </Routes>
        </BrowserRouter>
    );
}
-- @END: SET4_REACT_ROUTER_APP

-- @BEGIN: SET4_REACT_ROUTER_MAIN
-- FILE src/main.jsx - React entry point rendering App with StrictMode.
-- Keywords: react main.jsx, ReactDOM createRoot, StrictMode, index.css
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);
-- @END: SET4_REACT_ROUTER_MAIN

-- @BEGIN: SET4_REACT_ROUTER_HELPER_COMMANDS
-- Helper commands to setup and run React Router lab with Vite and react-router-dom.
-- Keywords: npm create vite react-lab, npm install react-router-dom, npm run dev, localhost 5173 routes
npm create vite@latest react-lab -- --template react
cd react-lab
npm install
npm install react-router-dom

Replace src/App.jsx and src/main.jsx with the code above.

Start:
npm run dev

Routes:
http://localhost:5173/
http://localhost:5173/about
http://localhost:5173/about/team
http://localhost:5173/contact
-- @END: SET4_REACT_ROUTER_HELPER_COMMANDS

=============================================================================
END OF CONTENT
=============================================================================