Nuit de l'Info 2024

Un défi technologique collaboratif

Contexte du projet

La Nuit de l'Info est un événement national annuel qui rassemble des équipes d'étudiants autour d'un défi commun : développer une application web en un temps limité. L'objectif est de répondre à une problématique ou un thème donné en mobilisant des compétences techniques et organisationnelles dans un cadre collaboratif. Notre équipe a travaillé sur ce projet dans un esprit de coopération et de créativité. Nous avons utilisé le framework Vue.js pour réaliser une solution répondant aux critères fixés par le thème de l'année.

Sujet / Thème : Et si l’océan était un corps humain ?
Durée : 15 heures
Équipe : Équipe pluridisciplinaire de 8 étudiants
Contraintes :

Méthodes de travail et résultats obtenus

Phase 1 : Début du projet

Lors du lancement de l’événement, nous avons pris connaissance du thème et des défis proposés. Une première session de brainstorming a permis de générer des idées et de définir un concept original autour de l’ODD 14 (« Vie aquatique »). Pour mener à bien ce projet, nous avons adopté une méthodologie agile en nous concentrant sur une organisation claire et une communication efficace au sein de l'équipe.

Phase 2 : Répartitions des tâches

Chaque membre de l'équipe s'est vu attribuer une mission spécifique :

  • Design UX/UI de la plateforme
  • Développement frontend avec Vue.js
  • Création de quiz interactifs
  • Suivi des défis secondaires de sponsors
  • Documentation et recherche sur le thème abordé

Phase 3 : Prototypage rapide

Une fois les idées principales définies et les rôles attribués, nous avons rapidement élaboré un prototype fonctionnel de l’application. Cette étape nous a permis de visualiser la structure globale du site, d’organiser les différentes sections (accueil, contenus éducatifs, quiz, animations) et de tester l’ergonomie de l’interface utilisateur. L’objectif était de valider notre concept initial tout en identifiant les éventuelles contraintes techniques ou ergonomiques.
Nous avons utilisé des outils de maquettage comme Figma pour le design, et mis en place une première version du projet avec des composants Vue.js simplifiés afin de servir de base au développement itératif.

Phase 4 : Développement itératif

Le projet a été construit par étapes, avec des sessions de tests régulières pour garantir la qualité du code et la cohérence fonctionnelle. Grâce à Vue.js, nous avons pu rapidement construire une application web dynamique avec une navigation fluide entre les sections éducatives, les quiz et les animations visuelles.

Focus technique : Utilisation des composants Vue, gestion d’état avec des props et événements, intégration de styles responsives et animations CSS.

Phase 5 : Résultat

Contribution personnelle

Dans ce projet, j’ai contribué en réalisant deux parties clés de l’application renforcant l'aspect éducatif et interactif de notre projet, tout en respectant les contraintes de temps par l'évènement

La page : "Vie Aquatique"

Une page dédiée à l’objectif de développement durable n°14, mettant en avant les enjeux de la protection des océans et des ressources marines. J’ai conçu et développé cette page en veillant à la cohérence visuelle et à la mise en valeur des informations clés.

ndi vie aquatique

La Quizz interactif

J’ai conçu et développé un quiz permettant de tester les connaissances des utilisateurs sur le thème du développement durable. Cette fonctionnalité comprenait une interface intuitive et un système de gestion des réponses avec retour instantané.

Cette partie m’a permis de combiner contenu pédagogique, accessibilité et interactivité dans un format engageant et visuellement attractif.

Apprentissages réalisés

Développement frontend

Utilisation de Vue.js, structuration d’un projet avec composants, gestion d’états et routage simple.

Travail en équipe

Coordination avec les autres membres, répartition claire des responsabilités et entraide continue.

Design UI/UX

Application d'une charte graphique cohérente, optimisation pour une navigation intuitive et responsive.

Créativité et pédagogie

Création de contenus éducatifs sur l’environnement de manière ludique et impactante.

Conclusion : Cet évènement m’a permis de m’investir pleinement dans un projet en temps limité, tout en renforçant mes compétences en développement, en design et en communication au sein d’une équipe motivée.

Compétences travaillées

Développement web

Vue.js HTML/CSS SPA (Single Page Application) Composants dynamiques

Travail en équipe

Répartition des tâches Collaboration Communication Respect des délais

Culture générale et sensibilisation

ODD 14 Développement durable Sensibilisation par le numérique