BrickFinder Le front & la sécurité

Où on en est — le grand final

Récap de ton projet BrickFinder :

Jusqu'ici, tu testais avec Thunder Client. Un vrai utilisateur, lui, veut cliquer. On construit donc le front : une page où on dépose une photo, et où s'affichent les sets qu'on peut construire.

1. C'est quoi React ?

React est une librairie pour construire des interfaces web à base de composants. Un composant est un bout d'interface réutilisable (un bouton, une carte, toute une page) décrit par une fonction qui renvoie du JSX — du HTML écrit dans du JavaScript.

Créer l'app (avec Vite)

Vite est l'outil qui monte un projet React prêt à l'emploi. Dans un nouveau dossier (à côté de ton back) :

npm create vite@latest brickfinder-front -- --template react
cd brickfinder-front
npm install
npm run dev

  VITE ready
  ➜  Local:   http://localhost:5173/

Ouvre http://localhost:5173 : la page React d'exemple s'affiche. Ton front tourne !

Le composant de départ

Ouvre src/App.jsx. Remplace tout son contenu par le minimum :

function App() {
  return (
    <div>
      <h1>BrickFinder</h1>
      <p>Dépose une photo de tes briques.</p>
    </div>
  )
}

export default App

2. L'état : useState & l'upload

Une interface réagit. Pour se « souvenir » de ce que l'utilisateur fait (le fichier choisi, les résultats…), React utilise l'état : des variables spéciales créées avec useState. Quand l'état change, l'affichage se met à jour tout seul.

Choisir un fichier

import { useState } from "react"

function App() {
  const [fichier, setFichier] = useState(null)

  return (
    <div>
      <h1>BrickFinder</h1>
      <input type="file" accept="image/*"
             onChange={e => setFichier(e.target.files[0])} />
      {fichier && <p>Photo prête : {fichier.name}</p>}
    </div>
  )
}
export default App

Choisis une photo : son nom s'affiche. L'état fonctionne.

3. Envoyer la photo au back

On relie le front au back du Milestone 1. Au clic sur un bouton, on envoie la photo à POST /api/inventaire et on récupère l'inventaire.

const [inventaire, setInventaire] = useState(null)

async function analyser() {
  const fd = new FormData()
  fd.append("photo", fichier)
  const rep = await fetch("http://localhost:3000/api/inventaire", {
    method: "POST",
    body: fd
  })
  const data = await rep.json()
  setInventaire(data.inventaire)
}

Ajoute le bouton dans le JSX : <button onClick={analyser}>Analyser</button>.

4. useEffect : enchaîner vers la faisabilité

Dès qu'on a l'inventaire, on veut automatiquement demander la faisabilité (Milestone 2). C'est le rôle de useEffect : exécuter du code quand une donnée change. Ici : « quand inventaire change, va chercher la faisabilité ».

import { useState, useEffect } from "react"

const [faisabilite, setFaisabilite] = useState([])

useEffect(() => {
  if (!inventaire) return
  fetch("http://localhost:3000/api/faisabilite", {
    method: "POST",
    headers: { "content-type": "application/json" },
    body: JSON.stringify({ inventaire })
  })
    .then(rep => rep.json())
    .then(data => setFaisabilite(data.resultats))
}, [inventaire])

5. Le moment waouh : les sets en image

C'est ici que ton appli devient bluffante. Pour chaque set, on affiche sa vraie photo (récupérée de Rebrickable en M2), une jauge de faisabilité animée, et une célébration quand tu peux le construire. On affiche la liste avec .map :

<div className="cartes">
  {faisabilite.map(set => (
    <div className={set.constructible ? "carte ok" : "carte"} key={set.setNum}>
      <img src={set.image} alt={set.nom} />
      <h3>{set.nom}</h3>
      <div className="barre">
        <div className="jauge" style={{ width: set.pourcentage + "%" }} />
      </div>
      <p className="pct">{set.pourcentage}%</p>
      {set.constructible
        ? <p className="badge">✅ Tu peux le construire !</p>
        : <p>Il te manque {set.manquantes.length} type(s) de pièce</p>}
    </div>
  ))}
</div>

Le style qui fait tout (src/App.css)

Remplace le contenu de src/App.css par :

.cartes { display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.carte { border: 1px solid #ddd; border-radius: 12px; padding: 12px;
  text-align: center; transition: transform .2s; }
.carte:hover { transform: translateY(-4px); }
.carte img { width: 100%; height: 120px; object-fit: contain; }
.barre { background: #eee; border-radius: 99px; height: 10px; overflow: hidden; }
.jauge { background: #6a2d9c; height: 100%; transition: width .8s ease; }
.carte.ok { border-color: #10916f; box-shadow: 0 0 0 2px #10916f; }
.badge { color: #10916f; font-weight: bold; }

Gérer le chargement et les erreurs

Un appel réseau peut être lent ou échouer. On ajoute deux états :

const [chargement, setChargement] = useState(false)
const [erreur, setErreur] = useState("")

6. Sécuriser l'appli

Une appli qui marche, c'est bien. Une appli sécurisée, c'est ce qu'on attend d'un pro (et au cœur de l'E7 / OWASP). Trois chantiers concrets.

1 · La clé reste côté serveur

Vérifie-le : ta clé Claude est lue dans index.js (back) via process.env, et jamais écrite dans le front React. Le navigateur envoie une photo au back ; c'est le back qui parle à Claude avec la clé. Si la clé était dans le front, n'importe qui pourrait l'extraire (le code front est public).

2 · Valider ce qui entre (ne jamais faire confiance au client)

Un utilisateur pourrait envoyer un énorme fichier, ou pas une image. On limite multer, côté back :

const upload = multer({
  storage: multer.memoryStorage(),
  limits: { fileSize: 5 * 1024 * 1024 },           // 5 Mo max
  fileFilter: (req, file, cb) => {
    cb(null, file.mimetype.startsWith("image/"))    // images seulement
  }
})

3 · Protéger les actions sensibles (OWASP A01)

Souviens-toi : l'endpoint POST /api/catalogue/:setNum (M2) modifie la base. Laissé ouvert, n'importe qui pourrait polluer ton catalogue : c'est une faille de contrôle d'accès (OWASP A01). On exige un jeton admin :

function adminSeulement(req, res, next) {
  if (req.headers["x-admin-token"] !== process.env.ADMIN_TOKEN) {
    return res.status(403).json({ erreur: "Accès refusé" })
  }
  next()
}

app.post("/api/catalogue/:setNum", adminSeulement, async (req, res) => { /* ... */ })

7. Finitions

Ton appli est complète et sécurisée. Quelques touches pour la rendre présentable (et défendable en E6).

Une touche finale

Tu as déjà le style waouh (Ch5). Ajoute un en-tête sympa au-dessus des cartes (« Avec tes pièces, tu peux construire… ») et, si tu veux, un petit confetti ou une animation quand au moins un set est constructible. L'œil doit comprendre en 2 secondes.

Afficher les pièces manquantes

Dans chaque carte non constructible, liste le détail : {set.manquantes.map(m => <li key={m.type+m.couleur}>{m.manque} × {m.type} {m.couleur}</li>)}.

Bravo — BrickFinder est complet

Tu as construit, de zéro, une application web full-stack, utile et sécurisée :

Mini-quiz (vérifie-toi)

Tu es bloqué ? La checklist

Glossaire

Compétences mobilisées — référentiel BTS SIO SLAM