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.

Work Schedule Organizer is a React and Vite frontend application that helps you manage weekly employee work schedules. It loads employee records from a JSON file, displays them in an alphabetically sorted list, and gives you tools to filter by workday and add new employees — all without a backend or database.
This app runs entirely in the browser. All data starts from public/employees.json and any employees you add during a session exist only in React state — they reset on page reload unless you update the JSON file.

​
Key features

  • Employee list: View all employees with their name, phone number, email address, and a checkbox display of their Monday–Friday workdays.
  • Alphabetical sorting: Employees are sorted by name on load and after every new addition, so the list stays organized automatically.
  • Filter by workday: Check one or more day checkboxes to narrow the list to employees who work on those days.
  • Add employees: A form lets you enter a name, phone number, email address, and select workdays. The new employee is inserted into the sorted list immediately.
  • JSON data loading: On startup, App fetches /employees.json from the public/ directory and populates the initial list.

Employee list

Browse all employees with their contact info and weekly schedule.

Add employee

Add new employees with contact details and workday selections.

Filter by workday

Show only the employees working on specific days of the week.

​
Project structure

The app is a standard Vite project. All React components live in src/, and the initial employee data is a static JSON file served from public/. 
workschedule/
├── public/
│   └── employees.json       # Initial employee data loaded on startup
├── src/
│   ├── App.jsx              # Root component — state, data fetching, layout
│   ├── App.css              # Application styles
│   ├── employees.jsx        # Employee list with filter logic
│   ├── employee.jsx         # Single employee card
│   ├── addEmployee.jsx      # Add employee form
│   ├── workDayFilter.jsx    # Workday checkbox filter bar
│   └── main.jsx             # React entry point
├── index.html               # HTML shell
├── package.json
└── vite.config.js

​
Component overview

The application is split into five focused components. Each one handles a single responsibility.

​
App

File: src/App.jsx The root component. It owns the employees state array and the showingAddEmployee toggle. On mount, it fetches /employees.json, sorts the results with localeCompare, and stores them in state. It renders the page heading, the Add Employee button, the AddEmployee form (when visible), and the Employees list.

​
Employees

File: src/employees.jsx Receives the full employees array as a prop and manages its own filteredEmployees state. It renders the WorkDayFilter bar and maps either the filtered list or the full list to individual Employee components. When no employees match the active filter, it falls back to the unfiltered list.

​
Employee

File: src/employee.jsx A presentational component that renders a single employee card. It displays the employee’s name, phone number, and email, then shows five read-only checkboxes — one per weekday — indicating which days that employee works.

​
AddEmployee

File: src/addEmployee.jsx A controlled form component with text inputs for name, phone, and email, plus five checkboxes for workdays. On submit, it calls the addEmployee callback passed down from App, which inserts the new employee into the sorted list and hides the form.

​
WorkDayFilter

File: src/workDayFilter.jsx Renders a row of five day checkboxes (Monday–Friday). Each change fires the filterEmployees callback in Employees, which filters the employee list to those who work on any of the selected days.

Build docs developers (and LLMs) love

Get started for freeTalk to us