1Glink
1Glink Plateforme LYA
Une collaboration suivie pour structurer plusieurs produits SaaS, de la conception des parcours à leur intégration Angular.
01 · La collaboration
Faire évoluer plusieurs produits sans perdre leur cohérence
Chez 1Glink, je travaille sur plusieurs produits de la plateforme LYA : analyse de candidatures, préparation d’entretiens, visioconférence, traduction et outils d’administration. Chaque sujet possède ses contraintes, mais les utilisateurs doivent retrouver les mêmes repères d’un espace à l’autre.
Mon rôle couvre la conception UX/UI et le développement frontend. Je peux partir d’un besoin métier encore ouvert, structurer le parcours dans Figma, puis l’intégrer en Angular en tenant compte des données disponibles, des états asynchrones et des composants déjà présents dans le produit.
- Besoin métier · Parcours
- Figma · Hiérarchie
- Angular · Composants
Une plateforme qui reste lisible en grandissant
02 · Architecture frontend
Séparer la donnée, l’état et la présentation
Les pages métier ne consomment pas directement des réponses API brutes. Le frontend organise le flux afin que chaque couche puisse évoluer avec une responsabilité claire.
01 · API
Contrats externes
Les services HTTP, l’authentification et les flux temps réel restent isolés de la mise en page.
02 · État
Données applicatives
Les actions, sélecteurs et états locaux représentent le chargement, les erreurs et les données disponibles.
03 · Adaptation
ViewModels typés
Des fonctions dédiées nettoient, regroupent et hiérarchisent les informations nécessaires à la vue.
04 · Interface
Composants Angular
Les templates décrivent les états visibles et s’appuient sur des composants réutilisables et accessibles.
Résultat Les évolutions d’API, de métier ou d’interface restent localisées au lieu de se propager dans toute la page.
03 · Travail produit
Une même méthode sur des écrans très différents
Je pars de la tâche utilisateur, puis je rapproche les contraintes métier, les données disponibles et les composants existants.
Hiérarchiser avant de décorer
Les informations utiles à la décision passent avant les détails et les actions secondaires.
Prévoir les états réels
Une donnée absente, un entretien à venir ou une analyse terminée ne produisent pas le même écran.
Construire pour la réutilisation
Les structures communes deviennent des composants ou des styles partagés lorsqu’un usage réel le justifie.
04 · Design System
Un langage commun pour toute la plateforme
Les fondations visuelles relient les espaces recruteur, candidat et administration. Elles limitent les écarts entre les maquettes et le produit tout en accélérant les évolutions.
Couleurs
- NuitTexte et surfaces immersives
#171a33 - IndigoActions et états actifs
#2457ff - LavandeActions secondaires
#8993cc - BrumeArrière-plans produit
#f5f7fb - SuccèsValidation et progression
#60c991 - AttentionInformation à vérifier
#f5b85b
Typographie
Inter · Regular / Medium / Semibold
Analysez vos candidatures plus rapidement.
Une hiérarchie compacte pour parcourir les scores, comprendre les signaux et préparer la prochaine étape.
05 · UI Engineering
Faire vivre les règles de conception dans le code
Ces exemples ont été réécrits et simplifiés pour le portfolio. Ils montrent les principes utilisés sans reproduire le code ni les contrats internes du client.
Angular
Une API de composant explicite
Les entrées sont typées et immuables afin de rendre l’usage du composant lisible dès le template parent.
type MetricTone = 'neutral' | 'success' | 'warning';
interface MetricViewModel {
readonly label: string;
readonly value: number;
readonly tone: MetricTone;
}
export class MetricsStrip {
readonly metrics = input.required<readonly MetricViewModel[]>();
}SCSS
Des décisions portées par les tokens
Les composants utilisent un vocabulaire commun plutôt que de redéfinir leurs couleurs et espacements.
:root {
--surface-page: #f5f7fb;
--surface-card: #ffffff;
--text-primary: #171a33;
--action-primary: #2457ff;
--space-section: clamp(3rem, 6vw, 6rem);
}
.feature-section {
padding-block: var(--space-section);
color: var(--text-primary);
}Qualité
Tester le comportement observable
Les tests ciblent les transformations et les états qui pourraient rendre une décision métier incorrecte.
it('keeps incomplete candidates visible', () => {
const result = toCandidateCard({
id: 'candidate-1',
name: null,
score: null,
});
expect(result.name).toBe('Profil à compléter');
expect(result.scoreLabel).toBe('Analyse en attente');
});06 · Architecture & Frontend Engineering
Approfondir la construction du frontend
La plateforme constitue aussi un terrain de travail technique : architecture Angular moderne, données métier denses, composants progressivement découplés et système UI en cours d’industrialisation.
01
Angular à l’échelle d’une application métier
Le frontend combine composants standalone, lazy loading, NGXS, Signals, RxJS et fonctionnement zoneless.
02
Faire évoluer une interface sans tout réécrire
Les grosses pages sont progressivement découpées et les nouveaux écrans s’appuient sur des primitives UI communes.
03
Transformer les données pour la vue
Des mappers TypeScript préparent les informations attendues par les cartes, tableaux, timelines et indicateurs.
04
Structurer des interactions riches
Formulaires réactifs, calendrier, validation et état partagé se rejoignent dans les parcours de planification.