Le projet EsmeWeb a pour but d'être à la fois un site vitrine pour l'association Sudrihack et une plateforme d'échange pour ses membres. Ce site contiendra plusieurs modules propre à Sudrihack :
- Une vitrine des projets de l'association
- Un classement dynamique des membres de l'association, conformément au module RPG de l'association
À l'avenir, tous les projets de la Sudrihack auront un impact sur le projet EsmeWeb.
La partie frontend (tout ce qui apparaît sur le navigateur) utilise 2 principales technologies :
- React, un framework de templating en Javacript
- Tailwind, un outil assistant au CSS
En ce qui concerne la partie backend, tout est géré par Firebase, dans le cloud.
Des connaissances en HTML, CSS et Javascript permettent de facilement se familiariser avec le projet.
Afin de pouvoir faire fonctionner le projet localement, vous aurez besoin d'avoir NodeJS à la version 14.5.0 ou plus préférablement, voici comment voir la version actuelle de node sur son ordinateur, cette commande fonctionne pour tous les systèmes d'exploitation :
user@pc:~ $ node -v
v14.5.0 Si vous n'avez pas NodeJS, ou la bonne version, voici un lien de téléchargement pour télécharger Node avec la bonne version.
Contrairement à NodeJS, Yarn n'est pas nécessaire au fonctionnement du projet, néanmoins, nous vous recommandions fortement de l'utiliser, cet outil est beaucoup plus rapide que son équivalent installé par défaut, NPM.
Vous trouverez un guide pour installer Yarn ici.
Comme Yarn, Git n'est pas nécessaire, mais fortement recommandé pour pouvoir facilement mettre le projet à jour ou envoyer le code que vous avez produit dans le depot.
Voici un guide pour l'installer ici.
user@pc:~/Dev/MesProjets $ git clone https://github.com/mindflix/esmeWeb.gituser@pc:~/Dev/MesProjets $ cd esmeWeb
user@pc:~/Dev/MesProjets/esmeWeb $ yarn installuser@pc:~/Dev/MesProjets $ cd esmeWeb
user@pc:~/Dev/MesProjets/esmeWeb $ npm installEn cas d'erreur, réferez vous à cette documentation, si votre erreur n'y figure pas, rédigez une issue ici.
user@pc:~/Dev/MesProjets/esmeWeb $ yarn startuser@pc:~/Dev/MesProjets/esmeWeb $ npm run startEn cas d'erreur, réferez vous à cette documentation, si votre erreur n'y figure pas, rédigez une issue ici.
Le serveur sera généralement accessible sur votre navigateur a cette adresse :
http://localhost:3000
Nous utilisons Webpack en tant que bundler pour notre projet, ce qui nous donne accès au hot-reloading, cela veux dire que lorsque vous sauvegarderez un fichier du projet pendant que le serveur est en route, votre page web sur votre navigateur sera automatiquement rafraichie.
Cela ne fait gagner que quelques secondes, mais sur une journée où cette étape est répétée plusieurs centaines de fois, le gain de temps est remarquable.
La mise en production consiste à mettre le build de production sur le serveur de production. Le build de production est généré de manière à augmenter les performances du site au coût du temps de génération.
user@pc:~/Dev/MesProjets/esmeWeb $ yarn builduser@pc:~/Dev/MesProjets/esmeWeb $ npm run buildEn cas d'erreur, réferez vous à cette documentation, si votre erreur n'y figure pas, rédigez une issue ici.
Ce projet est découpé en 2 modules :
- Un module contenant des API en Javascript, permettant de communiquer avec la base de données Firebase.
- Un module interface frontend en Javascript avec React, qui utilise les API pour populer nos interfaces avec des données.
À venir...
Un projet NodeJS standard, fonctionnant via ReactJs. React est une bibliothèque JavaScript libre développée par Facebook depuis 2013. Le but principal de cette bibliothèque est de faciliter la création d'application web monopage, via la création de composants dépendant d'un état et générant une page HTML à chaque changement d'état.
