JavaScript Assignment Help -From Console Errors to Working Code

// UserList.jsx
// Fetches users from an API and displays them.
// Handles three states: loading, error, and success.
// Uses useEffect with an empty dependency array so
// the fetch runs once when the component mounts.

import { useState, useEffect } from "react";

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Define the fetch inside useEffect.
    // We cannot make useEffect itself async, so
    // we create an inner async function and call it.
    async function fetchUsers() {
      try {
        const response = await fetch(
          "https://jsonplaceholder.typicode.com/users"
        );

        // Check if the HTTP status is OK (200-299).
        // fetch does NOT throw on 404 or 500 like axios does.
        // You have to check response.ok manually.
        if (!response.ok) {
          throw new Error(`Server responded with ${response.status}`);
        }

        const data = await response.json();
        setUsers(data);
      } catch (err) {
        // Catches both network errors (no internet)
        // and the error we threw above for bad status codes.
        setError(err.message);
      } finally {
        // Runs whether the fetch succeeded or failed.
        // Stops the loading spinner either way.
        setLoading(false);
      }
    }

    fetchUsers();
  }, []); // Empty array = run once on mount, not on every re-render.

  if (loading) return <p>Loading users...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>
          {user.name} - {user.email}
        </li>
      ))}
    </ul>
  );
}

export default UserList;

// routes/tasks.js
// POST /api/tasks - Creates a new task.
// Validates that the title exists and is not empty.
// Returns 201 on success, 400 on bad input, 500 on server error.

const express = require("express");
const router = express.Router();
const Task = require("../models/Task");

router.post("/", async (req, res) => {
  try {
    const { title, description } = req.body;

    // Validate input before touching the database.
    if (!title || title.trim().length === 0) {
      return res.status(400).json({
        error: "Title is required and cannot be empty"
      });
    }

    const newTask = new Task({
      title: title.trim(),
      description: description ? description.trim() : ""
    });

    const savedTask = await newTask.save();

    // 201 means "Created" - more specific than 200.
    res.status(201).json(savedTask);
  } catch (err) {
    // Never send the raw error object to the client.
    console.error("Error creating task:", err.message);
    res.status(500).json({ error: "Server error" });
  }
});

module.exports = router;