Positive Quotes App
Positive Quotes App est le projet TFE que j’ai réalisé pendant la dernière année de ma formation en développement front-end. Il s’agit d’une application Angular développée avec TypeScript, Angular Material et SCSS, conçue pour permettre aux utilisateurs de découvrir, sauvegarder et retrouver des citations motivantes dans une interface calme et claire.
Le projet inclut maintenant une expérience de démo publique contrôlée. L’inscription publique est fermée, et les visiteurs peuvent explorer l’application grâce à l’option Continue as Demo. Les favoris et l’historique de la démo sont limités et temporaires, tandis que le compte propriétaire reste privé pour une utilisation complète.
Technologies & outils utilisés
Outils visuels & UI
Création du logo et d’éléments simples d’identité visuelle.
Préparation et retouche des visuels et des images de fond.
Préparation de l’interface, des écrans et du parcours utilisateur.
Front-end & expérience démo
Développement de la structure de l’application avec Angular et Angular Material.
Mise en place de la logique applicative, des parcours utilisateur et des composants typés.
Stylisation de l’interface avec SCSS, incluant les thèmes sombre et clair.
Gestion de la logique de démo pour les citations, les favoris et l’historique.
Explorez Positive Quotes App grâce à la prévisualisation en direct. Utilisez l’option Continue as Demo pour parcourir les citations par catégorie, sauvegarder un nombre limité de favoris, consulter un historique temporaire et basculer entre les thèmes sombre et clair.
Le mode démo est volontairement contrôlé pour les visiteurs du portfolio. Il permet de tester l’application sans créer de compte personnel, tout en gardant le compte propriétaire privé.
Consultez le code complet sur GitHub pour explorer la structure Angular, la logique TypeScript, les composants Angular Material, le style SCSS, la gestion des thèmes et le parcours de démo contrôlé.
Afficher le prototype sur Figma
Explorez la préparation de l’interface et le parcours utilisateur de Positive Quotes App en consultant le prototype Figma.
Processus de création
Positive Quotes App a été développé comme projet front-end de fin d’études, avec une attention particulière portée à la création d’une application Angular complète : interface, structure des composants, actions utilisateur, accès démo, gestion des données et présentation responsive.
Concept & direction UI
Définition d’une direction visuelle calme, positive et inspirée de la nature, avec des variations de thèmes sombre et clair pour offrir une expérience personnalisée.
Prototype & parcours utilisateur
Utilisation de Figma pour préparer les écrans principaux : connexion, accès démo, accueil, favoris, historique et paramètres du compte.
Développement Angular
Développement de l’application avec Angular, Angular Material et TypeScript, en organisant l’interface en composants et pages réutilisables.
Logique de démo contrôlée
Mise en place d’une expérience de démo contrôlée avec des favoris limités et un historique temporaire pour les visiteurs publics, tout en gardant l’accès propriétaire séparé de la démo portfolio.
Fonctionnalités
Positive Quotes App inclut des fonctionnalités pratiques d’application front-end : accès démo contrôlé, catégories de citations, favoris, historique, changement de thème, paramètres du compte et images de fond dynamiques.
Accès démo contrôlé
Les visiteurs peuvent utiliser l’application grâce à l’option Continue as Demo, sans créer de compte. L’inscription publique est fermée afin de garder la démo portfolio propre et contrôlée.
Catégories & données API
Les citations peuvent être parcourues par catégorie, avec un contenu chargé via une API et affiché dans une interface claire.
Favoris limités
Les visiteurs en mode démo peuvent sauvegarder un nombre limité de citations favorites et les retrouver pendant l’expérience de démonstration.
Historique temporaire des citations
L’expérience démo garde un historique limité des citations consultées, ce qui permet aux visiteurs de retrouver les citations déjà explorées.
Thèmes sombre & clair
Les utilisateurs peuvent basculer entre les thèmes sombre et clair, modifiant l’atmosphère visuelle de l’application.
Images de fond dynamiques
Les images de fond changent via une API lorsque les pages sont actualisées, ce qui donne à l’interface une expérience plus variée et atmosphérique.