diff --git a/react-project/src/pages/Accueil.jsx b/react-project/src/pages/Accueil.jsx
new file mode 100644
index 0000000..4b4a6b4
--- /dev/null
+++ b/react-project/src/pages/Accueil.jsx
@@ -0,0 +1,108 @@
+import Carte from "../components/Carte";
+import BarreRecherche from "../components/BarreRecherche";
+import { useState, useEffect } from "react";
+
+function Accueil() {
+  const [recherche, setRecherche] = useState("");
+  const [total, setTotal] = useState(0);
+  const [jeux, setJeux] = useState([]);
+  const [chargement, setChargement] = useState(true);
+  const [titre, setTitre] = useState("");
+  const [annee, setAnnee] = useState("");
+  const [plateforme, setPlateforme] = useState("");
+  const [tri, setTri] = useState("titre");
+
+  function ajouter(e) {
+    e.preventDefault();
+    if (titre.trim() === "") return;
+    const nouveau = {
+      id: Date.now(),
+      titre,
+      annee: Number(annee),
+      console,
+      Type: "3d",
+    };
+    setJeux([...jeux, nouveau]);
+    setTitre("");
+    setAnnee("");
+    setPlateforme("");
+  }
+
+  const affiches = [...jeux]
+    .filter((j) => j.titre.toLowerCase().includes(recherche.toLowerCase()))
+    .sort((a, b) => {
+      if (tri === "titre") return a.titre.localeCompare(b.titre);
+      if (tri === "annee") return a.annee - b.annee;
+      return 0;
+    });
+
+  useEffect(() => {
+    fetch("/zelda.json")
+      .then((r) => r.json())
+      .then((data) => {
+        setJeux(data);
+        document.title = `${data.length} jeux Zelda`;
+        setChargement(false);
+      });
+  }, []);
+
+  if (chargement) return <p>Chargement…</p>;
+
+  function Detail() {
+    const { id } = useParams();
+    return <h1>Détails du jeu {id}</h1>;
+  }
+
+  return (
+    <>
+      <BarreRecherche
+        valeur={recherche}
+        onChange={(e) => setRecherche(e.target.value)}
+      />
+      <select value={tri} onChange={(e) => setTri(e.target.value)}>
+        <option value="titre">Titre (A→Z)</option>
+        <option value="annee">Année</option>
+      </select>
+
+      {affiches.length === 0 && <p>Aucun jeu trouvé 😕</p>}
+
+      {affiches.map((jeu) => (
+        <Carte
+          key={jeu.id}
+          gameId={jeu.id}
+          titre={jeu.titre}
+          console={jeu.console}
+          annee={jeu.annee}
+          Type={jeu.Type}
+          onLike={() => setTotal((t) => t + 1)}
+        />
+      ))}
+
+      <p> Total de likes : {total}</p>
+
+      <form onSubmit={ajouter}>
+        <input
+          value={titre}
+          onChange={(e) => setTitre(e.target.value)}
+          placeholder="Titre du jeu"
+        />
+        <input
+          value={annee}
+          onChange={(e) => setAnnee(e.target.value)}
+          placeholder="Année"
+        />
+        <input
+          value={plateforme}
+          onChange={(e) => setPlateforme(e.target.value)}
+          placeholder="Console"
+        />
+        <button type="submit">Ajouter</button>
+
+        <section id="spacer"></section>
+        <section id="spacer"></section>
+      </form>
+    </>
+  );
+}
+
+export default Accueil;
diff --git a/react-project/src/pages/Detail.jsx b/react-project/src/pages/Detail.jsx
new file mode 100644
index 0000000..68ddb7c
--- /dev/null
+++ b/react-project/src/pages/Detail.jsx
@@ -0,0 +1,7 @@
+import { useParams } from "react-router-dom";
+
+function Detail() {
+  const { id } = useParams();
+  return <h1>Détails du jeu {id}</h1>;
+}
+export default Detail;