1. Develop a Task Management Application that Allows Users to Create, Update, Delete, and Retrieve Tasks. Specify How API Front End and API Back End Have Been Designed.

Answer:

A Task Management Application allows users to manage tasks efficiently. It involves API design for both frontend and backend, ensuring smooth interaction between the user interface and database.

API Backend Design:

• The backend should follow RESTful API principles and be built using Node.js with Express.js.
• The data is stored in a MongoDB or MySQL database.
• Endpoints:
  • POST /tasks → Create a new task
  • GET /tasks → Retrieve all tasks
  • GET /tasks/:id → Retrieve a specific task
  • PUT /tasks/:id → Update a task
  • DELETE /tasks/:id → Delete a task

Example Backend Code (Node.js & Express.js)

const express = require("express");
const app = express();
app.use(express.json());

let tasks = []; // Sample in-memory database

app.post("/tasks", (req, res) => {
    const task = { id: tasks.length + 1, title: req.body.title, completed: false };
    tasks.push(task);
    res.status(201).json(task);
});

app.get("/tasks", (req, res) => res.json(tasks));

app.put("/tasks/:id", (req, res) => {
    let task = tasks.find(t => t.id == req.params.id);
    if (!task) return res.status(404).send("Task not found");
    task.title = req.body.title;
    task.completed = req.body.completed;
    res.json(task);
});

app.delete("/tasks/:id", (req, res) => {
    tasks = tasks.filter(t => t.id != req.params.id);
    res.send("Task deleted");
});

app.listen(3000, () => console.log("Server running on port 3000"));

Frontend API Integration:

The frontend is built using React.js and communicates with the backend using fetch or Axios.

Example React Code for Fetching Tasks

import { useState, useEffect } from "react";

function TaskList() {
    const [tasks, setTasks] = useState([]);

    useEffect(() => {
        fetch("<http://localhost:3000/tasks>")
            .then(response => response.json())
            .then(data => setTasks(data));
    }, []);

    return (
        <div>
            <h1>Task List</h1>
            <ul>
                {tasks.map(task => (
                    <li key={task.id}>{task.title} - {task.completed ? "Done" : "Pending"}</li>
                ))}
            </ul>
        </div>
    );
}

export default TaskList;

Conclusion:

This design ensures proper API communication, allowing users to manage tasks effectively. The frontend fetches data from the backend, and API endpoints handle CRUD operations.

2. Develop a Student Attendance Management Application that Allows Users to Create, Update, Delete, and Retrieve Student Attendance. Specify How API Front End and API Back End Have Been Designed.

Answer:

A Student Attendance Management System keeps track of student attendance records, allowing teachers/admins to mark attendance and students to view their records.

API Backend Design: