Exercise: form + list + states (React)

Goal

Build a small UI that creates items from a form and renders them in a list, with realistic UX states.

Requirements

• UI:
  • A title + short description
  • A form with:
    • Name (required, 2–50 chars)
    • Email (required, simple validation)
    • Role (dropdown: Developer / Engineer / Senior)
    • Submit button
  • A list of created users (newest first)
• State handling:
  • Inline validation errors per field (not just a single generic error)
  • Disable submit while “saving”
  • Show a success state (e.g. toast/message) on save
  • Show an empty state when there are no users
• Data:
  • Saving is simulated with setTimeout (e.g. 500–1000ms)
  • Randomly fail ~20% of the time and show a user-friendly error

Validation note (Zod)

We use Zod in our stack. If you know Zod already, implement the form validation with a Zod schema and map ZodError issues to the relevant fields.

If you don’t know Zod yet, implement simple manual validation first, then come back and replace it with Zod after completing the Zod module.

Reference:

• content/docs/06-zod-validation.mdx

Acceptance criteria (entry)

• Components:
  • At least 3 components (e.g. UserForm, UserList, App)
  • Props are typed (when you later do TS) or at least clearly structured
• UX:
  • Submitting with invalid fields shows errors immediately
  • Submit disables while saving; double-submit doesn’t create duplicates
  • Failed saves do not add the user to the list
• Code quality:
  • No array index keys for list items
  • No duplicated state (e.g. don’t store “isValid” separately from the data that defines validity)

Stretch goals (mid)

• Extract a reusable TextField component (label + input + error text).
• Add “edit user” (inline or modal) with the same validation.
• Replace manual validation with a Zod schema (if you didn’t already).
• Add a basic unit test plan (what you would test and why).

Stretch goals (senior)

• Provide a component boundary proposal for how this would live inside a Next.js app.
• Call out what should stay client-side vs what could be server-side later (when we add tRPC).