Tournoi Asynconf 2023

Description

Voici mon projet pour cette édition du tournoi de l'Asynconf. Je l'ai réalisé sous forme de site web, disponible à l'adresse asynconf.maxencebonamy.fr.
Vous retrouverez ci-dessous les instructions pour exécuter le code, ainsi qu'une description brève du travail que j'ai réalisé conformément aux attentes du jury. Ensuite, vous retrouverez les technologies que j'ai utilisées pour réaliser le projet ainsi que l'arborescence du projet.

Important

Le projet se lance sur Replit mais n'est vraiment pas stable du tout, donc si vous voulez l'essayer, je vous conseille très fortement de vous rendre plutôt ici : asynconf.maxencebonamy.fr !

Lancement du code

Lancer le code avec Replit

1. Se rendre sur le dépôt Replit.

2. Cliquer sur le bouton Run, ceci installera les dépendances et exécutera le code.

Lancer le code sur une autre machine

Note

Prerequis:

• Git doit être installé. Si ce n'est pas le cas, se rendre ici.
• NodeJS doit être installé. Si ce n'est pas le cas, se rendre ici.

1. Cloner ce dépôt GitHub à l'aide de la commande suivante :

git clone https://github.com/maxencebonamy/AGB

2. Naviguer à l'intérieur du dossier en tapant cette commande :

cd AGB

3. Installer les dépendances NodeJS à l'aide de la commande suivante :

npm i

4. Exécuter le code en tapant cette commande :

npm run dev

Travail réalisé

• Le site est entièrement "responsive", c'est-à-dire qu'il est adapté pour les tailles d'écran les plus communes (notament ordinateur, tablette et smartphone).
• Il est possible de choisir entre le thème sombre et le thème clair, et ce à l'aide du "toggle" placé à droite de la barre de navigation.
• Des tests unitaires ont été mis en place pour tester l'algorithme principal, ainsi que d'autres fonctionnalités. Pour les lancer, il suffit de taper la commmande :

npx jest

• J'ai choisi d'utiliser des fichiers au format json pour stocker les données liées au fonctionnement de l'algorithme. Ils sont placés dans le dossier src/assets/data.

• La modification d'un de ces fichiers entraînera automatiquement des modifications sur le site de manière à ajouter, modifier ou supprimer des options très facilement.

• Le code est commenté de manière à expliquer les instructions ou fonctions qui ne sont pas explicites.

• Je n'ai malheureusement pas eu le temps de réaliser des tests de scénarios pour les composants avec React Testing Library.

Technologies utilisées

Pour réaliser ce projet, j'ai fait le choix d'utiliser les technologies suivantes :

• NextJS : Un des framework React les plus répandus. Bien que je n'utilise pas la plupart de ses fonctionnalités dans ce projet, il reste un choix tout à fait cohérent.
• Typescript : Le langage que j'ai choisi d'utiliser pour avoir un code type-safe et ainsi plus maintenable.
• React : La librairie JavaScript que j'utilise le plus, c'est donc un choix assez logique pour moi de l'utiliser dans ce projet.
• TailwindCSS : La librairie CSS que j'utilise dans la plupart de mes projets pour gagner en efficacité.
• Shadcn/UI : Une librairie React & Tailwind qui fournit des composants d'UI. J'ai ensuite apporté quelques modifications sur certains.
• ESLint : Le linter TypeScript que j'ai utilisé pour écrire du code propre et maintenable (je l'utilise également comme formatter).
• Jest : Une librairie JavaScript pour réaliser des tests unitaires.

• J'ai également utilisé le logiciel Figma pour réaliser une maquette du site avant de le coder.
• De plus, j'ai utilisé le site Flaticon pour trouver les icônes présentes sur le site.
• Ensuite, j'ai utilisé quelques autres librairies utilitaires telles que Lucide pour quelques icônes supplémentaires ainsi que ReactParallaxTilt pour réaliser un effet "Tilt" sur certaines cartes.
• Finalement, Pour héberger le site, j'ai utilisé Vercel.

Arborescence du projet

Tout le code source se situe dans le dossier src.

• Sous-dossier app : Point de départ de l'application, le fichier layout.tsx englobe le fichier page.tsx (fonctionnement du routing de NextJS).
• Sous-dossier assets : Images, icônes et fichier de données au format json. Un fichier README.md est placé dans le dossier des données pour plus d'explications.
• Sous-dossier components : Tous les composants React utilisées dans l'application, ceux présents dans le sous-dossier ui viennent de la librairie Shadcn/UI, ce sont donc les seuls que je n'ai pas écrits.
• Sous-dossier lib : Les fichiers sources, qui correspondent à l'algorithme, aux fonctions utilitaires et les types.

Tous les tests se situent dans le dossier tests. La même arborescence que le dossier src est gardée.