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 !
-
Se rendre sur le dépôt Replit.
-
Cliquer sur le bouton
Run
, ceci installera les dépendances et exécutera le code.
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.
- Cloner ce dépôt GitHub à l'aide de la commande suivante :
git clone https://github.com/maxencebonamy/AGB
- Naviguer à l'intérieur du dossier en tapant cette commande :
cd AGB
- Installer les dépendances NodeJS à l'aide de la commande suivante :
npm i
- Exécuter le code en tapant cette commande :
npm run dev
- 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 dossiersrc/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.
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.
Tout le code source se situe dans le dossier src
.
- Sous-dossier
app
: Point de départ de l'application, le fichierlayout.tsx
englobe le fichierpage.tsx
(fonctionnement du routing de NextJS). - Sous-dossier
assets
: Images, icônes et fichier de données au formatjson
. Un fichierREADME.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-dossierui
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.