Contexte
HeroJourney est un produit que j'ai conçu et développé seul, en ligne sur herojourney.fr. Le point de départ était technique : j'avais besoin d'un vrai projet pour prendre en main la dernière version d'Angular, et un tutoriel ne suffit pas pour cela. Il fallait une application complète, avec des comptes, des données et des utilisateurs.
L'idée vient du jeu de rôle. D'un côté un Guide, de l'autre un Héros. Le Guide fixe des objectifs et récompense les efforts. Le Héros gagne de l'expérience, monte de niveau et débloque des succès. Parent et enfant, coach et sportif, professeur et élève : le principe s'adapte à chaque duo.
Enjeux
- Apprendre Angular 20 sur un cas réel : signals, composants autonomes, TypeScript strict.
- Gérer deux rôles aux droits différents, reliés par un code d'invitation.
- Livrer un produit utilisable, pas une démonstration : inscription, sécurité des données, mobile, pages légales.
- Rester seul à bord, avec une infrastructure qui ne demande pas d'administration au quotidien.
Démarche
L'interface est construite avec Angular 20 et Angular Material 3, avec un design system maison pour l'univers visuel. L'état de l'application repose sur les signals d'Angular.
Le backend s'appuie sur AWS Amplify Gen 2 : Cognito pour l'authentification et les deux rôles, AppSync et DynamoDB pour les données, S3 pour les photos. Aucun serveur à maintenir.
Le Guide garde la main sur la progression : l'XP, les succès et les récompenses sont attribués manuellement. Autour de ce cœur, l'application propose un journal avec commentaires, une galerie de photos, une messagerie privée, une liste de souhaits et un centre de notifications. Elle s'installe sur mobile comme une application, avec notifications push.
Les tests unitaires tournent avec Vitest, et chaque modification passe par une intégration continue GitHub Actions.
Résultat
HeroJourney est en ligne et accessible gratuitement, sans rien installer. Le projet a rempli son objectif de départ, la maîtrise de la dernière version d'Angular, et il est devenu un produit complet : authentification, base de données, stockage de fichiers, application mobile installable.
C'est aussi un exemple concret de ce que PicAndClick peut livrer pour un client : une application web sur mesure, de la première maquette à la mise en production sur AWS.