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 Work Schedule Organizer is a self-contained React + Vite app with no external data dependencies. All customization happens by editing a small set of local files — the employee roster, a single CSS file, and the Vite config. This page walks through each area in turn.

​
Editing initial employees

The employee roster shown on first load comes from public/employees.json. To add your team’s data, replace or extend the records in that file before running the app.
1

Open public/employees.json

The file is a JSON array. Each element represents one employee. Open it in any text editor.
2

Add a new employee object

Copy the template below and paste it inside the array. Fill in the values for your new employee and choose an id that is not already used.
{
  "id": 13,
  "name": "Taylor",
  "phone": "555-000-1234",
  "email": "taylor@example.com",
  "workdays": {
    "monday": true,
    "tuesday": true,
    "wednesday": false,
    "thursday": true,
    "friday": false
  }
}
Set each workdays key to true or false. All five keys (monday through friday) must be present for the employee card to render correctly.
3

Validate the file

Confirm the file is still valid JSON. A trailing comma after the last array element or a missing closing bracket are the most common mistakes.
4

Refresh the browser

Employee data is loaded once at startup via fetch('/employees.json'). Refresh the page (or restart the dev server) to see your changes. The list is sorted alphabetically by name automatically.
For a complete description of every field in the employee record, see the Employee data format page.

​
Changing styles

All visual styling lives in a single file: src/App.css. There are no CSS modules, no Tailwind classes, and no inline styles in the JSX — every rule you need to change is in that one file. The key CSS classes are:
ClassElement
.appOuter container card (max-width, padding, background)
.employeesCSS grid that wraps all employee cards
.employeeIndividual employee card (border, shadow, hover lift)
.filterWorkday filter bar (flexbox row of checkboxes)
.addEmployeeAdd Employee form panel
The following excerpt shows how buttons are styled. Override these rules in App.css to change the button color, shape, or typography across the entire app. 
button {
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 0.95rem;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);
}

button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(37, 99, 235, 0.3);
}
The body background is a CSS linear-gradient defined on the body selector, not inside .app. Change it there if you want a different page background color.

​
Building for production

Run the build command to compile and bundle the app for deployment. Vite outputs the production bundle into the dist/ directory. 
npm run build
After building, preview the production output locally before deploying: 
npm run preview
npm run preview serves the files from dist/ using Vite’s built-in static server. It accurately reflects what will be served in production, including the public/employees.json file.
The dist/ directory contains everything needed to deploy — copy it to any static hosting provider (Netlify, Vercel, GitHub Pages, an S3 bucket, etc.).

​
Available scripts

All scripts are defined in package.json and run via your package manager.
ScriptCommandDescription
Dev servernpm run devStarts Vite’s development server with HMR at localhost:5173.
Buildnpm run buildCompiles and bundles the app into dist/ for production.
Previewnpm run previewServes the dist/ build locally to verify output before deploying.
Lintnpm run lintRuns ESLint across all source files using the project’s config.

Build docs developers (and LLMs) love

Get started for freeTalk to us