Personal Catalogue: React & Firebase — Chapter 4, Exercise 1
=====================================================================

TASK
Build the full AddItemForm component with FIELD_CONFIG covering all
four types, wire it into the app, and create one real item of each
type through the actual UI, confirming each one via the Firebase
console's Firestore data viewer.

SOLUTION

With fieldConfig.js, validateItem.js, and AddItemForm.jsx in place from
this chapter, mount the form:

// App.jsx
import AddItemForm from './components/AddItemForm';

function App() {
  return <AddItemForm onCreated={(item) => console.log('Created:', item)} />;
}

Run the app, and for each item type:
1. Select the type from the dropdown.
2. Fill in title plus every type-specific field (Book: author, isbn,
   publisher, tags; Cd: artist, tracklist; Dvd/Bluray: director,
   runtimeMinutes, and regionCode/resolution respectively).
3. Submit.

Console output after all four:
Created: {id: 'a1b2c3...', itemType: 'Book', title: 'Clean Code', author: 'Robert C. Martin', ...}
Created: {id: 'd4e5f6...', itemType: 'Cd', title: 'Discovery', artist: 'Daft Punk', ...}
Created: {id: 'g7h8i9...', itemType: 'Dvd', title: 'Spirited Away', director: 'Hayao Miyazaki', runtimeMinutes: 125, ...}
Created: {id: 'j1k2l3...', itemType: 'Bluray', title: 'Blade Runner 2049', director: 'Denis Villeneuve', runtimeMinutes: 164, resolution: '4K', ...}

Opening the Firestore data viewer in the Firebase console and browsing
to the `items` collection shows all four documents, each with exactly
the fields its own FIELD_CONFIG entry defines and no others — a Book
document has no runtimeMinutes field, a Dvd document has no tags field,
and so on.

WHY THIS WORKS AS AN ANSWER
----------------------------
It builds and exercises all four item types through the real UI rather
than a script, and confirms the result against the actual Firebase
console rather than just trusting the console.log output, matching the
chapter's own emphasis on checking Firestore directly rather than
assuming a client-side success message means the write landed
correctly.