"Comment les établissements scolaires peuvent-ils réduire leur dépendance aux Big Tech et adopter un numérique inclusif, responsable et durable (NIRD) ?"
Une application web immersive, ludique et interactive développée entre le coucher et le lever du soleil pour répondre à cette problématique cruciale.
Ce projet a été réalisé dans le cadre de la Nuit de l'Info 2025, un concours national où des équipes d'étudiants s'affrontent pour développer une application web du coucher au lever du soleil (4 au 5 décembre 2025).
Notre réponse au sujet prend la forme d'un "Test de pureté" numérique. Plutôt que de faire la morale aux utilisateurs, nous les invitons à tester leur niveau de "résistance" face aux GAFAM et aux mauvaises pratiques numériques.
L'application propose :
- Un diagnostic ludique sur 6 axes du numérique responsable.
- Une Carte d'Identité de Résistant générée dynamiquement.
- Des mini-jeux cachés et des défis UX décalés.
- Une ambiance Retro / Synthwave pour rendre le sujet attractif.
Numérique Inclusif, Responsable et Durable. L'objectif est de sensibiliser sur l'obsolescence programmée, la souveraineté des données, et l'impact écologique du cloud, sans être ennuyeux.
Team : MaximeCode & LeBaptouBaptiste
Des développeurs passionnés qui ont troqué leur sommeil contre du code (et beaucoup de café).
- Développement Fullstack : Architecture Next.js, Logique de jeu, Gestion de données, Intégration.
- Design & UI : Charte graphique Synthwave, Animations, Responsive Design.
Maxime
- contact.mbaude@gmail.com
Baptiste
- baptiste.vidal.2005@gmail.com
Le cœur de l'application. Une série de 15 questions réparties en 6 catégories :
- Obsolescence & Matériel
- Sobriété Numérique
- Souveraineté & Cloud
- Logiciels Libres
- Sécurité Numérique
- Durabilité & Réemploi
À la fin du test, l'utilisateur reçoit une "Carte de Résistant" unique :
- Score Global & Rang (Novice, Apprenti, Villageois, Héros).
- Graphique Radar détaillant les forces et faiblesses.
- QR Code de validation.
- Export PNG haute définition.
L'application change radicalement d'ambiance selon le thème choisi :
- Retro (Défaut) : Ambiance Synthwave, néons cyan/magenta, polices pixel/mono. [
Challenge "On veut du gros pixel !"] - Dark : Mode sombre sobre, vert "Matrix", haute lisibilité.
- Light : Mode clair, épuré, style "Corporatif".
Un assistant virtuel volontairement absurde avec 3 personnalités :
- Professeur Trucmuche : Pseudo-intellectuel à côté de la plaque.
- Madame Irma 2.0 : Voyante numérique déjantée.
- Dr. Hors-Sujet : Diagnostics médicaux basés sur la météo.
Un champ de saisie anti-ergonomique (sur la page d'accueil) :
- Le curseur ne suit pas la souris.
- Il se pilote comme un vaisseau spatial (Rotation + Boost).
- Il faut stabiliser le curseur sur une cible pour déverrouiller l'accès.
Caché dans l'application !
- Comment l'activer ? Entrez le pseudo
sudo snakelors de la génération de la carte. - Un Snake complet style "Retro Terminal".
- Malus Windows : Manger le logo Windows fait perdre des points et rétrécir le serpent.
- Bonus Linux : Manger le pingouin Tux donne un boost de vitesse et de score.
- Mobile : Contrôles tactiles dédiés sur téléphone.
Pour 'envoyer' son résultat par mail, l'utilisateur doit "attraper" les lettres qui flottent en apesanteur et rebondissent un peu partout. Un cauchemar UX assumé !
- Framework : Next.js 16 (App Router)
- Langage : JavaScript (React)
- Styling : Tailwind CSS v4
- Animations : Framer Motion
- Icons : Lucide React
- Export Image :
html-to-image
src/
├── app/ # Pages et Routing (App Router)
│ ├── api/chat # API
│ │ └── route.js # Route de l'api
│ ├── layout.js # Layout global (fontes, meta)
│ ├── page.js # Accueil (Hero + Cursor Challenge)
│ ├── test/ # Page du Quiz
│ └── result/ # Page de Résultats + ID Card
├── components/
│ ├── game/ # Composants de jeu (Snake, QuestionCard, CursorChallenge...)
│ ├── layout/ # Hero, Footer...
│ ├── ui/ # Composants réutilisables (Button, Card, Modal...)
│ └── Chatbot.jsx # Logique du Chatbot
├── data/
│ └── questions.js # Base de données des questionsLes scores sont calculés via un hook d'état local qui accumule les points par catégorie. À la fin du test, les résultats sont :
- Sérialisés en JSON.
- Encodés en URI.
- Passés en paramètre d'URL à la page
/result. Cela permet de partager son résultat simplement via l'URL sans base de données complexe.
- Node.js 20+
- npm, yarn, ou pnpm
-
Cloner le dépôt :
git clone https://github.com/MaximeCode/InfoNight25.git cd InfoNight25 -
Installer les dépendances :
npm install
-
Lancer le serveur de développement :
npm run dev
-
Ouvrir http://localhost:3000 dans votre navigateur.
npm run build
npm start- Lancement : Arrivez sur la Home. Déverrouillez l'accès en réussissant le mini-jeu du curseur (flèches directionnelles ou contrôles tactiles).
- Le Test : Répondez aux 15 questions. Chaque réponse influence votre score dans une des 6 catégories NIRD.
- Résultat : Découvrez votre profil.
- Changez le thème (Retro/Dark/Light) pour voir la carte changer.
- Entrez votre pseudo.
- Astuce : Entrez
sudo snakepour une surprise.
- Partage : Cliquez sur "Télécharger ma Carte" pour obtenir un PNG stylé à partager sur les réseaux.
| Défi | Implémentation |
|---|---|
| Test de pureté | Système complet de quiz avec pondération par catégorie et radar chart. |
| Gamification | Mini-jeux (Curseur, Snake, Gravity Keyboard) intégrés au parcours. |
| Chatbot Idiot | "Chat'bruti" intégré avec réponses absurdes et prompts systémiques drôles. |
| Anti-Ergonomie | Le "Cursor Challenge" force l'utilisateur à piloter un vaisseau au lieu d'une souris. |
| Easter Egg | Snake complet caché derrière le pseudo sudo snake. |
| Thème Retro | Design néon, grilles en perspective, effets CRT et scanlines. |
- NIRD Green (
#10b981): Symbole de durabilité et succès. - NIRD Neon (
#06b6d4): Couleur primaire du thème Retro/Tech. - NIRD Gold (
#f59e0b): Accents et grades élevés. - NIRD Dark (
#0f172a): Fond profond bleu nuit pour le constraste.
L'application a été optimisée pour mobile :
- Le Snake dispose de contrôles tactiles virtuels (D-Pad).
- La carte d'identité utilise une transformation CSS
scale()pour tenir sur les petits écrans tout en gardant sa résolution native pour l'export.
Ce projet est sous licence MIT. Vous êtes libres de le réutiliser, de le modifier et de le partager, tant que vous citez les auteurs originaux.
Fait avec ❤️, ☕ et beaucoup de pixels pendant la Nuit de l'Info 2025.