Mes projets dans le Développement web

Nom du projet : Site web Galbani France et tests UX

Date du projet : Février - Mai 2025

Contexte : Alternance Développeuse web de 1 an à Lactalis Informatique en 3ème année du BUT MMI

Langages/librairies/outils utilisé(e)s : Symfony PHP, Contentful, HTML/CSS, JavaScript, Docker, Gitlab

Type(s) de production :

Lien du projet : Site web Galbani France

Description du projet :

Lors de mon alternance de 3ème année du BUT MMI, j'ai participé à la mise à jour du site web Galbani France. Ce projet avait pour objectif de réduire les côuts de développement du site web et de sa maintenance grâce au headless CMS Contentful.

Mon rôle :

Avec l'équipe de développeurs, j'avais pour rôle de réaliser certains blocs en développement front-end au regard d'une maquette mobile/desktop. J'ai codé principalement des blocs pour la page details Recette et Gamme des produits notamment des filtres et une liste d'ingrédient adaptable en fonction de combien de personnes sont souhaitées pour la recette. Ce site est créé avec le framework Symfony PHP et le headless CMS Contentful. Egalement, j'ai fait de l'intégration de contenu dans le CMS. Enfin, j'ai effectué de nombreux tests UX et fonctionnels en reprenant la maquette du site web réalisé par l'agence et voyant les différences entre les deux supports.

Savoirs :

• Maîtrise des technologies backend avec Symfony (PHP) et CMS headless (Contentful).
• Connaissances en HTML/CSS/JavaScript modernes et responsive design (desktop/mobile).
• Compréhension des processus de tests UX et fonctionnels.
• Notions en Docker, intégration continue (Gitlab CI/CD).

Savoirs-faire :

• Développement de composants frontend selon les maquettes.
• Intégration de contenu dans un headless CMS.
• Mise en œuvre de filtres dynamiques et d’adaptation des quantités pour une liste d'ingrédients d'une recette par exemple.
• Tests UX fonctionnels et ergonomiques sur les versions desktop/mobile.

Savoirs-être :

• Rigueur dans la conformité aux maquettes.
• Travail en équipe avec les développeurs internes.
• Esprit d’analyse pour identifier les écarts UX.
• Adaptabilité à un environnement professionnel exigeant (alternance, autonomie, agilité, etc.)

Nom du projet : Jeu de réalité virtuelle Escoinx Game

Date du projet : Mars 2025

Contexte : Projet scolaire en 3ème année du BUT MMI

Langages/librairies/outils utilisé(e)s : C#, Unity, Blender

Type(s) de production :

Lien du projet : Jeu de réalité virtuelle L'Escoinx Game

Description du projet :

Lors d'un projet pour la matière Développement web et dispositif interactif de 3ème année de BUT MMI, l'objectif était de réaliser un jeu en VR (réalité virtuelle) et de manipuler le moteur de rendus 3D Unity. Nous avons choisis en groupe de réaliser un escape game avec plusieurs pièces correspondant à différents types de jeux, d'avoir une quête secondaire avec des canards en plastique et faire référence à "Coinx", un canard en plastique retrouvé près de l'IUT et devant notre mascotte de la classe durant l'année. Le but de l'EscoinxGame est simple : Sortir du monde hanté par l'entité du canard Coinx. A mesure que le joueur avance dans les pièces, il y a de plus en plus de photos et d'images représentant Coinx. Dans la première pièce : il faut trouver les 3 clés cachés. Dans la deuxième pièce il faut tirer à l'aide d'un bazooka canards sur 20 cibles positionnées aléatoirement. La troisième pièce vous subissez une téléportation qui vous fait arriver à la scène finale pour terminer le jeu. Il y a une quête secondaire avec le fait de trouver les 10 canards en plastique cachés à trouver dans le jeu. Le jeu a été développé sur le casque VR HTC Vive.

Mon rôle :

En binôme, j'avais pour rôle de créer la carte avec les 4 pièces dans Unity. J'ai utilisé des kit de modèles gratuits de Kenney.nl. J'ai réalisé le modèle 3D du canard en plastique sur Blender. J'ai rassemblé toutes les ressources photos personnelles de Coinx utiles pour le jeu et des sons téléchargés sur la plateforme gratuite Pixabay. Au niveau développement sur Unity, j'ai mis de la collision avec tous les murs et objets de chaque pièce. Tous les petits objets sont "draggable", prenable par le joueur pour plus de réalisme dans l'expérience utilisateur. J'ai travaillé sur la première pièce avec la récupération des 3 clés et l'animation de la porte qui s'ouvre au bout des 3 clés mises dans les serrures. Egalement, j'ai travaillé sur la quête secondaire de récupération des 10 canards, apparaissant dans la scène final au nombre de ce que le joueur a trouvé dans la partie.

Savoirs :

• Bases du développement 3D et interactif en VR avec Unity (C#).
• Utilisation de Blender pour la modélisation 3D.
• Notions en conception d’escape game narratif et ludification.
• Connaissances des interactions physiques (collision, objets draggables).

Savoirs-faire :

• Création et organisation d’un environnement 3D (cartographie des pièces).
• Modélisation 3D originale d’un objet clé (le canard en plastique).
• Programmation des interactions complexes : clés à collecter, portes à déverrouiller, quête secondaire.
• Implémentation de mécaniques immersives (objets interactifs, téléportation).

Savoirs-être :

• Créativité et humour dans la narration et le design du jeu (concept original autour de la mascotte canard "Coinx").
• Esprit d'équipe car il y a une répartition équitable du travail en binôme.
• Sens du détail dans la modélisation et l'ambiance sonore.

Nom du projet : Direction artistique et campagne de communication pour le casque VR Pico G3

Date du projet : Octobre 2024 - Janvier 2025

Contexte : Projet scolaire en 3ème année du BUT MMI

Langages/librairies/outils utilisé(e)s : Flutter (Dart), Android Studio

Type(s) de production :

Document(s) écrit(s) :

• Cahier-des-charges-TopTeckel.pdf
• Manuel-utilisation-TopTeckel.pdf

Description du projet :

Lors d’un projet choix libre pour la matière Dispositifs Interactifs de mon parcours en 3ème année du BUT MMI, j’ai réalisé TopTeckel, une application Android/IOS éducative et ludique en Flutter (Dart). TopTeckel est un jeu en deux parties : un jeu éducatif et un jeu Gacha. Le but du jeu est d’apprendre tout en s’amusant en remportant le plus de points et de tickets Gacha en attrapant les bons objets et en répondant à des questions de culture générale. On peut utiliser les tickets dans la machine Gacha pour débloquer des accessoires et personnaliser votre teckel dans la page Profil.

Mon rôle :

En binôme, je me suis occupée des parties base de données en local, gestion des comptes utilisateurs, du jeu Gacha, des maquettes et de tous les éléments graphiques (fonds, personnage, accessoires, logo, etc, ...) de l’application et de la personnalisation de son teckel. J'ai également participé à la rédaction du manuel d'utilisation du jeu.

Savoirs :

• Développement mobile multiplateforme avec Flutter (Dart).
• Utilisation de bases de données locales et gestion des profils utilisateurs.
• Concepts de jeux éducatifs et de systèmes de récompenses (Gacha).
• Création d’interfaces et assets graphiques sur mesure.
• Notions de l'expérience utilisateur et de la gamification

Savoirs-faire :

• Développement de la partie jeu Gacha, base de données, comptes utilisateurs.
• Conception des graphismes originaux : personnage, accessoires, fonds, logo.
• Implémentation de la personnalisation dans l’application (avatar teckel).
• Rédaction d’un manuel utilisateur clair et accessible.

Savoirs-être :

• Créativité graphique et ludique.
• Rigueur technique dans l’implémentation de mécaniques de jeu.
• Collaboration fluide avec le binôme (répartition claire).
• Sens pédagogique dans la rédaction de la documentation.

Nom du projet : Vidéo de présentation de l'entreprise Pack Agile - Expert et conseils emballages pour les entreprises

Date du projet : Septembre 2024 - Janvier 2025

Contexte : Projet scolaire en 3ème année du BUT MMI

Langages/librairies/outils utilisé(e)s : ReactJS, Symfony PHP, API de paiement Paypal, Tailwind (framework CSS), Github

Type(s) de production :

Description du projet :

Lors de mon projet de fin d’études du BUT MMI, l’association Val’orisons53 avait comme besoin de créer une application web de gestion de repas et paiement en ligne pour le restaurant Le Belvédère à destinations des étudiants de santé à Laval. Cette application gère du côté étudiant : la liste des menus en ligne par semaine, le fait de réserver un repas dans son panier et pouvoir le payer; et du côté administrateur : un back office des menus, ingrédients et utilisateurs de l’application avec la gestion de ses derniers (création, modification, mise à jour et suppression). Nous avons donc pour cela créer l'application : Val'Miam.

Mon rôle :

En groupe de 4, j’avais comme rôles ceux de cheffe de projet, responsable du côté front en ReactJs et graphiste pour les maquettes de l’application. J'ai donc créé les maquettes de chaque page en fonction de leur logo existant. j'ai développé le front-end de toutes les pages. J’ai travaillé également le Symfony PHP pour certaines fonctionnalité telle que la modification d’un ingrédient.

Savoirs :

• Conception de maquettes cohérentes avec l'identité du client.
• Développement fullstack web : ReactJS (front) et Symfony PHP (back).
• Intégration d’API de paiement (Paypal).
• Utilisation de Tailwind CSS pour le design system.
• Gestion d’un projet client réel en contexte de fin d’études.

Savoirs-faire :

• Réalisation de maquettes fonctionnelles respectant l’identité visuelle du client.
• Développement complet du frontend de l’application (pages menus, panier, paiement).
• Implémentation de la modification de contenu via backend Symfony (CRUD).
• Coordination d’équipe : planification, suivi et priorisation des tâches.

Savoirs-être :

• Leadership en tant que cheffe de projet.
• Autonomie dans le pilotage des étapes de production.
• Ecoute client pour répondre aux besoins réels d'une association.
• Sens des responsabilités et gestion du temps sur une période longue.

Nom du projet : Motion design du casque VR Pico G3

Date du projet : Octobre 2024

Contexte : Alternance Développeuse web de 1 an à Lactalis Informatique en 3ème année du BUT MMI

Langages/librairies/outils utilisé(e)s : HTML/CSS, PHP, Wordpress, extension 'ACF' sur WordPress, Gitlab, Docker

Type(s) de production :

Lien du projet : « Plaisirs du Monde » pour Président France

Description du projet :

Lors de mon alternance de 3ème année du BUT MMI, j'ai réalisé une nouvelle page pour le site web Président France. La nouvelle page web administrable « Plaisirs du Monde » faisait partie de l’opération promotionnelle de Président France visant à mettre en avant les nouveaux produits de la gamme Labné Président et Cottage Cheese sur leur site web. Cette page permet aux administrateurs de sélectionner les recettes sans avoir à modifier le code, grâce à un système de champs configurables.

Mon rôle :

En autonomie sur cette mission, à partir d’une maquette mobile, j’ai codé l’interface en HTML/CSS et intégré les fonctionnalités dynamiques en PHP via l’extension ACF de WordPress. J’ai également assuré la communication avec le client par mail et en visioconférence pour ajuster le projet selon ses retours.

Savoirs :

• Développement web avec PHP, HTML/CSS et WordPress.
• Utilisation avancée de l’extension ACF (Advanced Custom Fields).
• Pratiques d’intégration continue avec Docker et Gitlab.
• Sensibilité à la conception administrable pour les clients non développeurs.

Savoirs-faire :

• Intégration frontend à partir d’une maquette mobile.
• Configuration de champs dynamiques personnalisés dans WordPress.
• Autonomie complète sur un projet client en production.
• Communication proactive avec le client (mails, visioconférences, feedbacks).

Savoirs-être :

• Autonomie et prise d’initiative dans un environnement professionnel.
• Souci du détail pour l’intégration visuelle.
• Sens du service client et adaptabilité aux retours.
• Confiance professionnelle accordée par l’entreprise.

Nom du projet : Interface administrateur d'un site e-commerce (back office)

Date du projet : Mai - Juin 2024

Contexte : Projet scolaire en 2ème année du BUT MMI

Langages/librairies/outils utilisé(e)s : ReactJS, JavaScript, Symfony, PHP, HTML/CSS, Tailwind, SQL, API pour gestion des types d'erreurs HTTP (avec Symfony), Base de données

Type(s) de production :

Description du projet :

Lors d’un projet autonomie de 2ème année du BUT MMI, l'objectif était de réaliser une interface administrateur d'un site e-commerce fictif (back office) en React JS et une API Symfony pour la gestion des erreurs. Nous avons décider de créer ce back office pour un site e-commerce proposant des articles de la marque "Pusheen".

Mon rôle :

En binôme, j’étais graphiste et développeuse. J'avais pour rôle de gérer les pages d'erreur PHP pour l'API Symfony telles que : lister le ou les produits (GET), ajouter/supprimer/modifier des produits (POST, DELETE, PUT) et dans le React JS, l'apparence avec Tailwind et les fonctionnalités telles que la supression/l'ajout des produits, le tri et le filtre par catégorie.

Savoirs :

• Développement d’applications en ReactJS (front) et Symfony PHP (API REST).
• Intégration d’une API de gestion des erreurs HTTP.
• Structuration d’une base de données SQL.
• Gestion de filtres, tris et CRUD dans une interface admin.

Savoirs-faire :

• Développement du frontend d’un back office
• Traitement des erreurs HTTP dans l’API
• Mise en œuvre des opérations CRUD et filtres dynamiques

Savoirs-être :

• Rigueur dans la gestion des erreurs et des cas limites
• Esprit d’analyse
• Collaboration et gestion de projet en binôme

Nom du projet : Application Android/IOS Jeu du palet Puck&Play

Date du projet : Mai - Juin 2024

Contexte : Projet scolaire en 2ème année du BUT MMI

Langages/librairies/outils utilisé(e)s : Java, SQL, Android Studio, Base de données

Type(s) de production :

Description du projet :

Lors d’un projet autonomie de 2ème année du BUT MMI, l'objectif était de réaliser une application Android/IOS du jeu du palet. Le but du jeu c'est de remporter le plus de points en une partie. Une partie se fait en 10 points et se fait à 2 joueurs ou à 4. Un palet apparaît au centre du terrain. Pour mettre un point, il faut utiliser son poussoir pour viser le but adverse se trouvant en face de son propre terrain, déterminé par un rectangle de la couleur adverse. Après chaque point, le palet réapparaît au milieu. Le poussoir ne peut pas dépasser la surface de son terrain. Une fois que 10 points ont été marqués, la partie s'arrête. Nous avons décidé en groupe d'intégrer le fait de jouer à 2 ou 4 joueurs, l'historique, le classement des joueurs, le changement d'apparence des poussoirs et la gestion du son comme fonctionnalités qui nous démarque. Nous avons nommé l'application : Puck&Play.

Mon rôle :

En groupe de 4, j'avais pour rôle d'être graphiste et développeuse. J'ai réalisé tout d'abord le logo et les maquettes de l'application. Ensuite, j'ai été en charge de développer le côté front-end toutes les pages de l'application et, en fonctionnalités, j'ai codé : le classement des joueurs, l'historique des parties, les filtres et le changement de l'apparence du poussoir joué.

Savoirs :

• Développement mobile natif Android avec Java.
• Utilisation d’une base de données SQL locale.
• Notions de gamification et d’UX mobile.
• Design d’interfaces ludiques et gestion de données utilisateur.

Savoirs-faire :

• Développement de pages de l’application : classement, historique, filtres.
• Création de l’identité graphique (logo, maquettes).
• Mise en œuvre de personnalisation du gameplay (apparence des poussoirs).
• Programmation de la logique de score, de parties et de multijoueurs.

Savoirs-être :

• Esprit d’équipe dans un projet à 4.
• Capacité à proposer des idées originales pour enrichir l’application.

Nom du projet : Remise à jour du site web pour Pack Agile - Expert et conseils emballages pour les entreprises

Date du projet : Avril 2024

Contexte : Stage Webdesigner de 10 semaines à Pack Agile en 2ème année du BUT MMI

Langages/librairies/outils utilisé(e)s : HTML/CSS, JavaScript, WordPress, OVH

Type(s) de production :

Description du projet :

Lors de mon stage de 2ème année en BUT MMI, j’ai eu pour mission de moderniser le site web de l’entreprise, tant sur le plan visuel que sur les aspects de sécurité et de référencement. Conçu sous WordPress, le site nécessitait une mise à jour pour le rendre plus dynamique et attractif.

Mon rôle :

En autonomie, j’ai réalisé des maquettes (wireframe), adapté la charte graphique existante, créé des visuels en vectoriel et intégré du code en HTML/CSS/JavaScript pour personnaliser le thème. J’ai également amélioré la sécurité en effectuant des mises à jour et en ajoutant des extensions, tout en optimisant le référencement naturel. Grâce à ces actions, le site Pack Agile est passé de la 6e à la 1re position en tappant "conseils packaging". J'ai rédigé les mentions légales, politique de confidentialité et politique de cookies pour le site web, qui n'existait pas encore. Enfin, j'ai rédigé de la documentation pour comment utiliser et mettre à jour le contenu le site web sous Wordpress.

Savoirs :

• Connaissances en HTML/CSS/JavaScript
• Connaissance de WordPress et de son écosystème (thèmes, extensions)
• Principes de référencement naturel (SEO)
• Notions de sécurité web
• Cadre légal : mentions légales, RGPD, cookies

Savoirs-faire :

• Intégration et personnalisation de thèmes WordPress
• Création de maquettes web (wireframes)
• Rédaction de contenus numériques juridiques (mentions légales, politique de confidentialité)
• Optimisation SEO (technique et contenu)
• Documentation technique (guide d’utilisation pour client non
• développeur)

Savoirs-être :

• Autonomie (projet mené seule)
• Sens de l’initiative (améliorations sécurité, SEO)
• Rigueur (documentation complète, conformité juridique)
• Sens de l’esthétique et souci du détail (modernisation visuelle du site)

Nom du projet : ACCIF, Application Carte interactive répertoriant les IUTs de France

Date du projet : Septembre 2023 - Janvier 2024

Contexte : Projet scolaire en 2ème année du BUT MMI

Langages/librairies/outils utilisé(e)s : HTML/CSS, Boostrap (framework CSS), JavaScript, JQuery (librairie), Apache Echarts (API carte), Github

Type(s) de production :

Description du projet :

Lors d’un projet autonomie de 2ème année du BUT MMI, l’UNPIUT et l’ADIUT avaient besoin d’une application web intégrée au site iut.fr. Cette application créée propose une carte interactive répertoriant tous les IUT de France avec des informations détaillées sur leurs formations en alternance (contacts, calendrier, etc, ...). Les utilisateurs peuvent rechercher un IUT par la barre de recherche, filtrer par région et type de formation, et consulter les détails des formations proposées.

Mon rôle :

En groupe de 4, j’avais comme rôles ceux de cheffe de projet, j’étais responsable du front-end (HTML/CSS, Bootstrap, JavaScript) et du back-end avec les fonctionnalités interactives, comme l’affichage des informations des IUT et la gestion du filtre Professionnel/Étudiant (JavaScript, jQuery).

Savoirs :

• Intégration web avec HTML/CSS et Bootstrap
• Manipulation DOM avec JavaScript / jQuery
• Utilisation d’une API de visualisation de données (Apache Echarts)
• Connaissances des systèmes éducatifs (IUT / formations alternance)

Savoirs-faire :

• Création d’interfaces dynamiques et interactives
• Utilisation d’APIs externes (cartes interactives)
• Mise en œuvre de filtres multicritères (région, statut, type de formation)
• Travail collaboratif avec GitHub
• Coordination d’équipe (rôles, délais, priorités : méthode agile)

Savoirs-être :

• Leadership (cheffe de projet)
• Esprit d’équipe (groupe de 4 personnes)
• Capacité à expliquer et répartir les tâches
• Polyvalence (front + back)
• Sens de l’utilisateur (ergonomie, lisibilité de la carte)

Nom du projet : Quiz musical Music'All

Date du projet : Avril - Juin 2023

Contexte : Projet scolaire en 1ère année du BUT MMI

Langages/librairies/outils utilisé(e)s : HTML/CSS, PHP, JavaScript, SQL

Type(s) de production :

Description du projet :

Lors d’un projet autonomie de 1ère année du BUT MMI, j’ai codé un quiz musical interactif nommé Music’All. Ce jeu permet aux utilisateurs de tester leurs connaissances sur 12 genres musicaux. Le joueur sélectionne l’un des genres disponibles, puis répond à 10 questions aléatoires. Il doit deviner le titre de la chanson et/ou le nom de l’artiste pour marquer des points. À la fin du quiz, son score est affiché sur 10 points. Un système de comptes utilisateurs permet aux joueurs d’enregistrer leur score total et d’accéder à leur classement général par rapport aux autres joueurs.

Mon rôle :

En binôme, j’étais responsable du développement du front-end en HTML, CSS et JavaScript, comme la gestion du quiz, des scores et du classement. J’ai également participé à l’intégration de la base de données en SQL musicale et à la mise en place des comptes utilisateurs. Enfin, j'ai créé l'identité du site web avec la création du fond, des disques vinyles et le tourne-disque.

Savoirs :

• Langages web (HTML, CSS, JavaScript, PHP, SQL)
• Logique de base de données relationnelle
• Concepts de jeu (quiz, scoring, aléatoire)
• Notions de l'expérience utilisateur et de la gamification

Savoirs-faire :

• Création d’un système de quiz interactif
• Gestion des comptes utilisateurs (connexion, stockage scores)
• Affichage dynamique des scores et classements
• Intégration graphique (fond, vinyles, tourne disque)
• Structuration et interrogation d’une base SQL musicale

Savoirs-être :

• Créativité (éléments graphiques personnalisés)
• Réactivité et adaptabilité (développement et corrections en temps réel)
• Esprit d’initiative (développement complet d’un jeu)

Nom du projet : Jeu Tétris

Date du projet : Avril - Mai 2022

Contexte : Projet scolaire de fin de terminale en spécialité NSI au lycée

Langages/librairies/outils utilisé(e)s : Python, module graphique 'Tkinter'

Type(s) de production :

Description du projet :

Lors du projet final pour la spécialité NSI (Numérique et Sciences Informatiques) au lycée, nous avions carte blanche pour choisir un projet à programmer. J'ai choisi de réaliser un jeu Tétris avec une interface graphique en Python. Le but du jeu est d'avoir le score le plus élevé en tenant le plus longtemps possible sans que les pièces arrivent en haut du cadre gris. Lorsque l'on réalise une ligne complète avec la même couleur, la ligne s'efface de l'écran.

Mon rôle :

Tout d'abord, j'ai dessiné sur tablette graphique avec le logiciel IbisPaintX le fond à motifs du jeu. Je souhaitais en plus du jeu, créer une interface graphique pour un rendu visuel plus agréable que simplement le jeu. Pour coder le visuel, j'ai utilisé l'interface graphique Tkinter. Pour l'agencement des blocs et la mécanique du jeu j'ai utilisé des matrices. Le jeu se joue au clavier de l'ordinateur.

Savoirs :

• Programmation en Python
• Utilisation de l’interface graphique Tkinter
• Notions de logique algorithmique et manipulation de matrices
• Conception de jeux (boucle de jeu, détection collisions, score)

Savoirs-faire :

• Création d’une interface utilisateur graphique en Python
• Codage des règles du Tétris (rotation, descente, suppression de ligne)
• Liaison entre interface et logique de jeu

Savoirs-être :

• Autonomie (projet individuel)
• Créativité (visuel personnalisé)