NDI édition 2023

Le projet de la CoopTeam pour l'édition 2023 de la Nuit De l'Info!

Auteurs

Les magnifiques membres de la CoopTeam

• Ilan VELTER,
• Thomas QUEMIN
• Alexis BASTIDE
• Eliott BASSIER
• Maévann POUPON
• Antonin CHABAUD-PECH
• Théo DUBERNET

Défis réalisés

Les défis réalisés sont:

• Le défi principal (pour lancer, voir suite)
• Easter eggs par Code Troopers
• UX/UI cauchemardesque par RedLab
• MOVAI CODE par Coddity
• Jeu de rythme par Rhythm Freaks
• Retroverse Pipeline par l'Ecole Polytechnique de Sousse

Fonctionnalités

• Une page d'accueil "slides" qui résume la problématique
• Deux autres pages qui approfondissent la problématique des fake news et de la lutte contre le changement climatique à son échelle
• Un jeu de rythme sur le thème du climat (voir défis)
  • Cliquer sur le soleil pour jouer
• Des easter eggs:
  • Quelque chose se passe dans le code source d'une des slides de la page d'accueil
  • Quelque chose se passe si vous tapes "saucisse" au clavier sur la page d'accueil
• Une fonction mal écrite:
  • Calculer le taux de différences en °C entre 2010 et 2020 (dossier Movaicode)
• Des pipelines de CI/CD, et entre autre une pipeline Docker

Lien d'accès

Ici

Détails sur l'installation en local

Pour installer le projet, il y a deux façon :

• Soit par docker
• Soit manuellement

Docker permet directement de le build et de l'exposer directement sur le web à l'aide nginx.

Par docker

Pour pouvoir build avec docker, il vous faut docker dans un premier temps. Téléchargez ensuite le projet. Puis lancez un terminal dans le répétoire du projet puis executez cette commande:

docker buildx build . -t ndi2023-Coopteam

À partir de là, il manque plus qu'à lancer le container.

docker run -p 3000:80 -it ndi2023-Coopteam

Votre serveur est en ligne !

Pour changer toute configuration, vous devez changer les fichiers qui se trouve dans nginx.

Manuellement

Pour pouvoir build / utiliser le projet, je vous recommande de voir le tuto, chapitre II.3, II.5 à II.6 et chapitre V.

Je vais rapidement passer dessus.

Téléchargez NodeJS. Ensuite, téléchargez le projet. Rentrez dans le répétoire du projet puis à partir de là, lancez un terminal et rentrez cette commande:

npm ci

À partir de là, vous avez deux commandes possibles, soit pour build, soit pour développer.

Build

Pour build le projet, lancez toujours dans un terminal cette commande:

npm run build

Un dossier se nommant out s'est maintenant créé et vous pouvez l'host comme vous le voulez.

Développer

Pour modifier le projet et avoir en temps réel le résultat, vous devez executer cette commande:

npm run dev

Un message devrait s'afficher avec une URL pour se rendre sur le site.

Technologies employées

• NodeJS: JavaScript runtime environment orienté serveur majoritairement
• ReactJS: Une bibliothèque JavaScript pour créer des interfaces utilisateurs
• NextJS: Un framework full-stack pour créer des applications orienté web
• SASS: Un framework css qui permet la simplication de l'écriture du css
• Tailwindcss: Un framework css qui permet d'utiliser des classes prédéfinies pour une écrire beaucoup plus rapide

Optionnel

• Docker: Plateforme permettant de lancer certaines applications dans des conteneurs. Augmente la portabilité du code
• Nginx: Serveur web permettant d'exposer son site web.

Tuto

Un gros tuto est proposé dans le dossier tutos. N'hésitez pas à le voir pour plus de renseignement quant à son installation.