← Tous les projetsÉtude de cas — 02/04

PWA + IoT · 2024

Pokédex connecté

Le pont entre un objet physique et une app, en NFC et Bluetooth.

Rôle
Développement PWA & IoT
Stack
ReactTypeScriptArduinoNFC
État
Prototype fonctionnel — expérimental, non commercialisé
Année
2024

Du problème au résultat

  1. Le problème

    Et si scanner un objet réel le faisait apparaître instantanément dans une application ? Le monde physique et le numérique restent souvent étanches l'un à l'autre. Ce projet voulait les relier pour de vrai, pas juste en démo.

    • Physique / numérique
    • Temps réel
  2. L'approche

    Séparer clairement les responsabilités plutôt que tout faire dans le navigateur : le matériel détecte, l'app affiche, et c'est le pont entre les deux qui devait être impeccable, pas chaque côté pris isolément.

    • Séparation des rôles
    • Latence minimale
  3. La direction

    Une PWA volontairement minimale : l'objet détecté devient le contenu, l'interface s'efface pour laisser la place à l'effet de matérialisation en temps réel.

    • Minimal
    • Installable
  4. La fabrication

    Côté logiciel, une PWA en React et TypeScript : installable, rapide, qui se met à jour en direct quand un objet est détecté.

    Côté matériel, un microcontrôleur Arduino programmé en C++ gère la lecture NFC et la liaison Bluetooth, puis transmet l'information à l'app.

    • React
    • TypeScript
    • C++
    • Arduino
    • NFC
    • Bluetooth
  5. Le résultat

    Une démo qui tient la route : la détection NFC/Bluetooth déclenche l'affichage dans l'app en moins d'une seconde, sans latence perceptible à l'usage. La preuve que le pont entre objet physique et interface web peut être fluide, pas seulement théorique.

    • Latence < 1s
    • Preuve de concept validée

Le vrai défi n'était pas dans le navigateur, mais entre les deux : faire dialoguer une puce NFC et une interface React sans latence perceptible. Le Pokédex tient sur ce pont, posé proprement.

Ce que ce projet m'a appris

Relier logiciel et matériel

Faire communiquer une interface React avec un microcontrôleur et des capteurs physiques.

Gérer des états en temps réel

Afficher clairement la connexion, la détection et les changements transmis par le matériel.

Simplifier une expérience complexe

Masquer la complexité technique derrière une interaction courte et compréhensible.

Ce que je peux apporter à une entreprise

Prototyper une idée inhabituelle

Je peux tester rapidement la faisabilité d'une expérience qui combine plusieurs technologies.

Découper un système complexe

Je sépare les responsabilités pour rendre les échanges entre matériel, données et interface plus faciles à maintenir.

Concevoir autour de l'usage

Je garde l'interaction principale simple, même lorsque le fonctionnement interne est technique.

En résumé

Ce projet démontre ma capacité à prototyper une interaction entre matériel et interface web afin de rendre une technologie complexe immédiatement compréhensible.