Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/y-broad/workschedule/llms.txt

Use this file to discover all available pages before exploring further.

The employee list is the main view of the Work Schedule Organizer. When the app loads, it fetches employee data from public/employees.json, sorts everyone alphabetically by name, and renders a responsive grid of cards — one per employee. Each card shows the employee’s contact details alongside a set of checkboxes that reflect their weekly schedule.

​
Employee cards

Each card is rendered by the Employee component (src/employee.jsx). It destructures the employee’s name, phone, and email fields, as well as each day from the nested workdays object, then renders them as a labelled list of checkboxes. 
export default function Employee({ employee }) {
  const { name, phone, email } = employee;
  const { monday, tuesday, wednesday, thursday, friday } = employee.workdays;
  return (
    <>
      <div className="employee">
        <h2>{name}</h2>
        <p>Phone: {phone}</p>
        <p>Email: {email}</p>
        <label>{name}'s workdays:</label>
        <ul>
          <li>
            <input type="checkbox" checked={monday} readOnly />
            Monday
          </li>
          <li>
            <input type="checkbox" checked={tuesday} readOnly />
            Tuesday
          </li>
          <li>
            <input type="checkbox" checked={wednesday} readOnly />
            Wednesday
          </li>
          <li>
            <input type="checkbox" checked={thursday} readOnly />
            Thursday
          </li>
          <li>
            <input type="checkbox" checked={friday} readOnly />
            Friday
          </li>
        </ul>
      </div>
    </>
  );
}
The workday checkboxes on each card are read-only. They reflect the stored schedule and cannot be toggled directly in the list view.

​
Loading employees on startup

Employee data is fetched once when the app mounts. The useEffect hook in App.jsx makes a GET request to /employees.json, parses the response, sorts the result alphabetically, and stores it in React state. 
useEffect(() => {
  (async () => {
    try {
      const response = await fetch("/employees.json");
      const data = await response.json();
      const sortedEmployees = sortEmployees(data);

      setEmployees(sortedEmployees);
    } catch (error) {
      console.error(error);
    }
  })();
}, []);
Sorting is handled by sortEmployees, which uses String.prototype.localeCompare for locale-aware alphabetical ordering: 
function sortEmployees(employees) {
  return employees.sort((a, b) => a.name.localeCompare(b.name));
}
The same function is called whenever a new employee is added, so the list stays sorted at all times.

​
Sample employee record

Each entry in employees.json follows this shape: 
{
  "id": 1,
  "name": "Bob",
  "phone": "123-456-7890",
  "email": "bob@example.com",
  "workdays": {
    "monday": true,
    "tuesday": false,
    "wednesday": true,
    "thursday": false,
    "friday": true
  }
}
See Employee data format for the full field reference.

​
Responsive grid layout

The .employees container uses a CSS grid with auto-fit and minmax(240px, 1fr) column sizing. Cards automatically reflow to fill the available width — from a single-column view on narrow screens to multiple columns on wider displays — without any JavaScript involved.

Build docs developers (and LLMs) love

Get started for freeTalk to us