Aissam Portfolio

L’API, le back-office et le site partagent un seul workspace Bun et Turborepo, parce que les formes qu’ils échangent avaient déjà divergé une fois. La vérification des scopes existait en double : dans le framework de l’API, et recopiée à la main dans le back-office. Les deux concordaient, sans que rien ne les y oblige.

Trois packages portent désormais ce qui passe d’une application à l’autre. @app/contracts contient le type de chaque payload, @app/scopes le vérificateur de permissions, et @app/content les schémas des blocs Markdown et le validateur de documents. @app/contracts à lui seul est importé par 90 fichiers source dans l’API, 88 dans le back-office et 51 dans le site.

Ils sont intégrés au bundle du navigateur et exécutés sous Bun : aucun ne peut importer Hono, les modules natifs de Node ou React. Un changement dans l’un d’eux est un changement du contrat d’échange, vérifié dans l’API, le back-office et le site ensemble.

Notes, documents de projet, études de cas, page d’accueil, carte du parcours, textes du site, médias et taxonomie se modifient dans une seule application Vite et React 19. L’anglais est la source ; le français et l’arabe s’écrivent à côté.

L’éditeur Markdown vérifie un document avec le même validateur que celui que l’API exécute avant d’enregistrer, et son aperçu est le site lui-même, dans un cadre qui suit le défilement de l’éditeur.

Les écrans sont protégés par le scope dont leurs routes ont besoin, et le back-office le vérifie avec le même code que l’API. Un seul compte détient le rôle sysadmin.

La page d’accueil est une histoire racontée par le défilement : une photo qui se referme en carte, la route sur une carte, une phrase qui s’allume, un anneau d’études de cas en CSS 3D, puis les réalisations, une année de contributions, les notes et un moyen de prendre contact.

Une étude de cas est un enregistrement, pas une page : une liste ordonnée de scènes tirées d’un catalogue de onze, typées dans @app/contracts, validées par l’API et dessinées par un composant par type. Cette page en est une.

L’anglais, le français et l’arabe partagent chaque route, et les pages arabes sont de droite à gauche dès le premier affichage. Les visites sont comptées par l’analytics du site lui-même, qui respecte Do Not Track et Global Privacy Control et atteint l’API par un proxy sur la même origine. Aucun traceur tiers.

Rien n’est collecté tant qu’un visiteur n’a pas accepté le bandeau de consentement, et Do Not Track, Global Privacy Control ou le refus propre au site suffisent chacun à faire taire le traceur. L’identité est un indice aléatoire dans sessionStorage, chiffré avec un sel côté serveur ; l’adresse IP sert une fois, pour un pays, et n’est jamais stockée.

Le site envoie les pages vues, des signaux d’engagement et des événements nommés, comme un téléchargement de CV ou une démo terminée, par lots de 20 au plus via le proxy /a/collect sur la même origine. L’API les écrit sans jamais les modifier, si bien qu’un lot renvoyé ne change rien, et marque les robots, les aperçus et les hôtes hors production pour que les rapports les écartent.

Les sessions et les cumuls quotidiens sont des projections reconstruites par des tâches BullMQ dans le processus worker : un scanner passe chaque minute, et un cumul recalcule une journée entière et est refusé si un plus récent est déjà arrivé. Le back-office les lit, avec objectifs, entonnoirs et parcours. Les événements bruts sont gardés 90 jours, les cumuls 395.