my-library/src/App.jsx

@@ -7,6 +7,7 @@ import Profile from './pages/Profile';
 import NotFound from './pages/NotFound';
 import AddBook from './pages/AddBook';
 import BookDetail from './pages/BookDetail';
+import Customers from './pages/Customers';
 
 export default function App() {
   return (
@@ -19,6 +20,7 @@ export default function App() {
         <Route path="*" element={<NotFound />} />
         <Route path="books/new" element={<AddBook />} />
         <Route path="books/:bookId" element={<BookDetail />} />
+        <Route path="customers" element={<Customers />} />
       </Route>
     </Routes>
   );

my-library/src/api/customers.js

@@ -0,0 +1,9 @@
+import client from './client';
+
+export function registerCustomer(customer) {
+  return client.post('/api/customers', customer);
+}
+
+export function findCustomerByPhone(phoneNumber) {
+  return client.get(`/api/customers/phone/${encodeURIComponent(phoneNumber)}`);
+}

my-library/src/pages/AddBook.jsx

@@ -35,7 +35,7 @@ export default function AddBook() {
 
     registerBook(payload)
       .then((response) => {
-        setMessage({ type: 'success', text: `Livre créé (id : ${response.data}) ✅` });
+        setMessage({ type: 'success', text: `Livre créé (id : ${response.data})` });
         setForm(initialForm);  
       })
       .catch((error) => {

my-library/src/pages/Customers.jsx

@@ -0,0 +1,90 @@
+import { useState } from 'react';
+import { registerCustomer, findCustomerByPhone } from '../api/customers';
+
+const initialForm = { firstName: '', lastName: '', phoneNumber: '' };
+
+export default function Customers() {
+  const [form, setForm] = useState(initialForm);
+  const [registerMsg, setRegisterMsg] = useState(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  function handleChange(e) {
+    const { name, value } = e.target;
+    setForm((prev) => ({ ...prev, [name]: value }));
+  }
+
+  function handleRegister(e) {
+    e.preventDefault();
+    setSubmitting(true);
+    setRegisterMsg(null);
+    registerCustomer(form)
+      .then((response) => {
+        setRegisterMsg(`Client créé (id : ${response.data})`);
+        setForm(initialForm);
+      })
+      .catch((error) => {
+        console.error(error);
+        setRegisterMsg('Erreur lors de la création du client.');
+      })
+      .finally(() => setSubmitting(false));
+  }
+
+  const [phone, setPhone] = useState('');
+  const [customer, setCustomer] = useState(null);
+  const [searchError, setSearchError] = useState(null);
+
+  function handleSearch(e) {
+    e.preventDefault();
+    setSearchError(null);
+    setCustomer(null);
+    findCustomerByPhone(phone)
+      .then((response) => setCustomer(response.data))
+      .catch((error) => {
+        console.error(error);
+        setSearchError('Aucun client trouvé avec ce numéro.');
+      });
+  }
+
+  return (
+    <main>
+      <h1>Gestion des clients</h1>
+
+      <section>
+        <h2>Enregistrer un client</h2>
+        <form onSubmit={handleRegister}>
+          <label>Prénom
+            <input name="firstName" value={form.firstName} onChange={handleChange} required />
+          </label>
+          <label>Nom
+            <input name="lastName" value={form.lastName} onChange={handleChange} required />
+          </label>
+          <label>Téléphone
+            <input name="phoneNumber" value={form.phoneNumber} onChange={handleChange} required />
+          </label>
+          <button type="submit" disabled={submitting}>
+            {submitting ? 'Envoi…' : 'Créer le client'}
+          </button>
+        </form>
+        {registerMsg && <p>{registerMsg}</p>}
+      </section>
+
+      <section>
+        <h2>Rechercher un client</h2>
+        <form onSubmit={handleSearch}>
+          <label>Téléphone
+            <input value={phone} onChange={(e) => setPhone(e.target.value)} required />
+          </label>
+          <button type="submit">Rechercher</button>
+        </form>
+        {searchError && <p>{searchError}</p>}
+        {customer && (
+          <div>
+            <p>{customer.firstName} {customer.lastName}</p>
+            <p>Téléphone : {customer.phoneNumber}</p>
+            <p><strong>Points de fidélité : {customer.loyaltyPoints}</strong></p>
+          </div>
+        )}
+      </section>
+    </main>
+  );
+}