Sujet

Vous choisirez une des thématiques suivantes pour proposer une application fonctionnelle en prenant en compte l'expérience utilisateur, l'ergonomie et l'accessibilité. L’application ou le service devra obligatoirement utiliser un framework front et back. L’application devra utiliser du SASS/SCSS pour toute la partie CSS. L'application sera proposée dans plusieurs langues.

Un back office correctement configuré, avec une interface et une expérience utilisateur de qualité devra être disponible (possible d’utiliser des outils comme EasyAdmin correctement configurés et personnalisés).

Vous veillerez à soigner l'apparence du site et la mise en pratiques de vos connaissances en Webdesign (sans y passer la plus grande partie de la SAE). Un logo simple sera proposé.

Pour chaque sujet, vous imaginerez le contexte et le storytelling de votre entreprise/application.

Choix du sujet

🛠 Socle Technique Commun (Imposé)

Chaque projet doit respecter cette architecture :

• Backend : Symfony 7/8 (API Platform ou contrôleurs custom retournant du JSON).

• Frontend : Vue.js 3 (Composition API).

• Base de données : MySQL/MariaDb.

• Internationalisation (i18n) :

  • Backend : Gestion des contenus traduisibles en DB (via extensions Gedmo ou entités dédiées).

  • Frontend : Utilisation de vue-i18n pour l'interface.

• UX/UI : Maquettage conseillé et tests utilisateurs simples et respect des règles d'accessibilité (WCAG).

Sujet 1 : EcoTrack (Data & Visualisation)

Objectif : Transformer des données brutes en informations visuelles impactantes.

Le Concept : Une application de "Personal Carbon Tracking". L'utilisateur saisit ses activités (transport, repas, achats) et visualise son impact écologique en temps réel.

📝 Descriptif du projet

Le but est de transformer des données froides (coefficients de CO2) en une expérience engageante. L'application doit permettre de :

• Saisir des activités : Un formulaire intelligent où l'utilisateur choisit un type d'action (ex: trajet en voiture) et entre la distance.

• Visualiser l'évolution : Un tableau de bord avec des graphiques (par semaine/mois) et une comparaison par rapport à la moyenne nationale.

• Se fixer des défis : Système de "Budgets Carbone" à ne pas dépasser.

🎯 Focus UX & I18n

• UX : Réduire la friction de saisie. Utilisation de curseurs (sliders), d'icônes claires et de feedback immédiat (le score change au fur et à mesure de la saisie).

• I18n : Adaptation des unités (km/miles, kg/lbs) et traduction des catégories d'activités.

Spécifications Techniques :

• Calculateur d'empreinte : Implémenter un service Symfony qui calcule le score carbone selon des coefficients stockés en base.

• Formulaire dynamique : Utiliser Vue.js pour créer un formulaire à étapes (Wizard) où les champs s'adaptent selon les réponses précédentes.

• Dashboard : Intégration d'une librairie de graphiques (Chart.js ou ApexCharts) pour afficher l'évolution de la consommation.

• I18n spécifique : Gérer les unités de mesure (km vs miles, kg vs lbs) via un "switcher" global.

Point de vigilance UX :

Le "Data Entry" (l'étape de saisie) est souvent ennuyeux. Vous devez proposer une interface qui réduit le nombre de clics (autocomplétion, icônes parlantes).

Un côté gamification est indispensable sur ce type d'application pour inciter les utilisateurs à utiliser l'application.

Sujet 2 : SwapSkills (Interactions & Temps Réel)

Objectif : Gérer une mise en relation complexe entre utilisateurs.

Le Concept : Une plateforme communautaire de troc de services. Ici, l'unité de monnaie est la "minute" (par exemple). 1h de cours d'anglais donne droit à 1h de réparation de vélo.

📝 Descriptif du projet

L'application doit gérer une mise en relation de confiance entre voisins ou membres d'une école.

• Profil & Compétences : Chaque utilisateur liste ce qu'il sait faire (Offres) et ce qu'il recherche (Demandes).

• Système de Match : Un moteur de recherche par mots-clés et par catégories.

• Messagerie & Booking : Un système pour convenir d'un rendez-vous. Une fois le service rendu, les deux utilisateurs valident et le "crédit temps" est transféré.

🎯 Focus UX & I18n

• UX : La clarté du profil. Comment mettre en avant les avis et la fiabilité d'un membre ? Création d'un workflow de validation simple pour confirmer que le service a été fait.

• I18n : Interface multilingue pour une utilisation dans des quartiers cosmopolites ou des campus internationaux.

Spécifications Techniques :

• Moteur de recherche : Système de filtres croisés (catégories, localisation, disponibilité) géré de manière asynchrone par Vue.js.

• Système de Messaging : Création d'une entité Message et Conversation. Gestion du temps : Utilisation de composants de calendrier (type FullCalendar) pour la prise de rendez-vous.

• I18n spécifique : Traduction des catégories de compétences (ex: "Plumbing" -> "Plomberie") et gestion des fuseaux horaires.

Point de vigilance UX :

Le tunnel de "Booking" (réservation). Vous devez réfléchir à la clarté du flux : demande -> acceptation -> réalisation -> notation.

Sujet 3 : CookMates (Collaboration & Mobile-First)

Objectif : Gérer la synchronisation de données entre plusieurs membres d'un groupe.

Le Concept : Une application collaborative pour les colocations ou les familles afin de mettre fin au gaspillage alimentaire et aux oublis de courses.

📝 Descriptif du projet

L'application centralise les besoins de la maison et planifie les repas.

• Inventaire Partagé : Une liste des produits présents dans le frigo/placard avec dates de péremption.

• Planificateur de Repas : Choisir des recettes pour la semaine. L'application vérifie ce qu'il manque et l'ajoute automatiquement à la liste de courses.

• Liste de Courses Collaborative : Plusieurs utilisateurs peuvent cocher les articles en rayon simultanément (mise à jour en direct).

🎯 Focus UX & I18n

• UX : Mode "Cuisine" (écran qui ne se met pas en veille, gros boutons pour mains sales) et accessibilité (contrastes élevés pour lecture rapide en magasin).

• I18n : Traduction complète des ingrédients et conversion des unités de mesure (système métrique pour l'Europe, impérial pour l'UK/US).

Spécifications Techniques :

• Gestion de groupe : Implémenter un système d'invitation (via token mail ou code unique) pour rejoindre une colocation.

• Inventaire intelligent : CRUD dynamique sur les ingrédients du frigo avec des "seuils d'alerte" (couleurs qui changent en fonction de la quantité restante).

• Générateur de liste : Script qui transforme un "Menu de la semaine" en "Liste de courses" agrégée par rayon de supermarché.

• I18n spécifique : Localisation des noms d'ingrédients (très formateur pour les bases de données multilingues).

Point de vigilance UX :

L'interface "en cuisine" ou "en magasin". Les boutons doivent être larges, l'interface doit être utilisable d'une seule main (le pouce) et supporter un mode sombre (confort visuel).

Contraintes et critères imposés

• De manière générale

  • Les sites devra être hébergé sur votre VPS

  • Le site devra être sécurisé (https, ...)

  • Le produit devra être accessible (RGAA AA) et “éco-conçu”

  • Le produit utilisera un framework front et back

• L'UX du site devra être particulièrement soignée. Le site devra être ergonomique et intuitif.

• Envoyer les mails nécessaires pour ce type de site