Retour aux travaux

AyronÉtude de cas · Projet personnel

Le prix de l'or et des métaux, en dirham.

Une application web full-stack qui affiche en temps quasi réel le prix de l'or (24 et 18 carats), de l'argent et du cuivre en dirham marocain, avec variations, historique et explications. Elle s'adresse aux particuliers, bijoutiers, artisans et petits investisseurs au Maroc.

Réalisé avec l'aide d'outils d'IA (Claude Code).

Rôle
Conception, développement et tests
Période
Octobre 2026, en cours
Type
Application web full-stack, responsive
Statut
Fonctionne en local, dépôt privé
Accès
Démo bientôt disponible

01Contexte

Des cours mondiaux, lisibles au Maroc.

Les cours mondiaux des métaux sont exprimés en dollars américains, et dans des unités peu utilisées au quotidien, comme l'once troy (31,1034768 g). Pour quelqu'un qui achète ou vend au Maroc, ces chiffres ne parlent pas directement.

Ayron convertit ces cours en dirhams, au gramme ou au kilogramme, et calcule le prix de l'or selon le carat. Une page Méthodologie explique les calculs, et une page Sources indique l'origine des données et leur fréquence de mise à jour.

02Fonctionnalités

Ce que fait l'application.

Tout ce qui suit fonctionne aujourd'hui, en local, avec de vraies données.

Réalisé

Cours réels
Or 24K, or 18K, argent, cuivre et taux USD/MAD, récupérés depuis l'API Metals.Dev.
Conversions
Once troy (31,1034768 g) vers gramme, tonne vers kilogramme, carats (18 et 24), dollar vers dirham.
Variations
Évolution depuis la clôture de la veille (↑ ↓ →), avec un texte pour les lecteurs d'écran.
Actualisation
Automatique toutes les 60 s, mise en pause quand l'onglet est caché. Bouton « Actualiser » et flash discret sur un prix qui change.
Graphique
« Évolution des prix » sur 7 et 30 jours, avec de vraies données.
Marché
Statut ouvert ou fermé selon les horaires réels du marché des métaux.
États
Chargement (squelettes), erreur et hors ligne : aucun faux prix n'est jamais affiché.
Interface
Mode clair et sombre, design responsive pensé d'abord pour le mobile, menu mobile, pages Méthodologie, Sources et Conditions.

03Défis techniques

Les problèmes qui m'ont le plus appris.

Pour chacun : le problème rencontré, puis la solution retenue.

  1. Protéger un quota de 100 requêtes par mois

    Problème
    L'API Metals.Dev n'autorise que 100 requêtes par mois. Si chaque actualisation, toutes les 60 s, appelait le fournisseur, un seul onglet ouvert épuiserait le quota en moins de deux heures.
    Solution
    Le navigateur interroge ma propre route API toutes les 60 s, mais le serveur n'appelle le fournisseur qu'à un intervalle configurable, grâce à un cache côté serveur : les requêtes simultanées sont dédoublonnées, seules les données validées sont gardées, et les derniers prix valides sont conservés en cas de panne.
    Navigateur toutes les 60 s
    Ma route API cache côté serveur
    Metals.Dev intervalle configurable
    Les visiteurs lisent le cache : seul le serveur appelle le fournisseur.

  2. Des données fiables, ou aucune

    Problème
    Une erreur d'unité suffit à afficher un prix faux sans que rien ne plante. J'ai rencontré deux pièges réels dans l'API : le cuivre exprimé en once troy, et le taux du dirham donné à l'envers.
    Solution
    Chaque réponse est validée avec Zod, avec des fourchettes de vraisemblance qui détectent les erreurs d'unité. Les deux pièges sont gérés dans le code.

  3. Un changement d'heure que le serveur ignorait

    Problème
    Le Maroc est revenu à l'heure GMT le 20 septembre 2026. Les données horaires du serveur Node.js n'étaient pas à jour, ce qui provoquait une erreur d'hydratation React.
    Solution
    Les heures sont affichées uniquement dans le navigateur, dans le fuseau de l'appareil du visiteur.

  4. Une clé API qui ne quitte jamais le serveur

    Problème
    Une clé présente dans le code du navigateur peut être lue par n'importe quel visiteur.
    Solution
    Les fichiers qui utilisent la clé sont marqués avec le module « server-only » : elle reste exclusivement côté serveur, jamais dans le code envoyé au navigateur.

  5. Des calculs vérifiés automatiquement

    Problème
    Une erreur de conversion (once, carat, taux de change) passe facilement inaperçue à l'œil.
    Solution
    33 tests unitaires couvrent les conversions, les carats, les taux de change, les variations et les horaires du marché. Le code est en TypeScript strict et vérifié par ESLint.

  6. Une interface lisible par tous

    Problème
    Une hausse en vert et une baisse en rouge ne disent rien à une personne daltonienne ou à un lecteur d'écran.
    Solution
    Contrastes vérifiés, information jamais portée par la couleur seule, navigation au clavier, et animations réduites si l'utilisateur le demande.

04Technologies

Les outils utilisés.

Stack

Application

Next.js 16 (App Router), React 19, TypeScript

Les pages et la route API côté serveur

Interface

Tailwind CSS 4, shadcn/ui (Base UI), next-themes

Composants, mise en page responsive, thème clair et sombre

Graphique

TradingView Lightweight Charts 5

L'évolution des prix sur 7 et 30 jours

Données

API Metals.Dev, Zod 4

Les cours des métaux, et la validation de chaque réponse

Qualité

Vitest 5, ESLint, TypeScript strict

33 tests unitaires

Typographie

IBM Plex Sans, IBM Plex Sans Arabic

Une famille de polices pour l'alphabet latin et l'arabe

05Prochaines étapes

Ce qui arrive.

Ayron est en cours de développement. Ces étapes sont prévues : aucune n'est encore terminée.

  • À venir

    Version arabe, avec une mise en page de droite à gauche (RTL), grâce à next-intl

  • À venir

    Base de données Supabase pour l'historique long : 3 mois, 1 an

  • À venir

    Section ferraille et recyclage

  • À venir

    Outils : calculateur de bijou, convertisseur, simulateur

  • À venir

    Alertes de prix

  • À venir

    Mise en ligne sur Vercel

Et ensuite

Un stage, un projet, une question ?

Me contacter Voir les autres travaux