Cette WebApp est un un tableau personnel permettant d'ajouter des tâches pense-bête sous forme de posts-its. Il a été développé dans le cadre du CheckPoint 4 de la formation développeur Javascript de la Wild Code School de juin 2022 par Juliane Casier
Ce projet a été développé en 2 jours et est un projet de fin de formation. Il fonctionne en l'état mais les fonctionnalités restent simples :
- créer un nouveau tableau de posts-its
- Créer des posts-its de 3 couleurs différentes
- Remplir un post it avec du texte
- Déplacer (en drag and drop) les post-its sur un tableau.
Ce projet est écrit en React
Template
: Application développée sur React, Node Express à partir d'un template développé par la Wild Code School. Seul la partie front a été utilisée
Outils utilisés dans ce template:
- Concurrently : Permet d'exécuter plusieurs commandes dans un même terminal
- Husky : Permet d'exécuter des actions en déclenchement de commandes git
- Vite : Alternative à Create-React-App, embarquant moins de packages pour une expérience plus fluide
- ESLint : Outil de "qualité de code", permet de s'assurer que des règles pré-configurées sont bien respectées
- Prettier : Outil de "qualité de code" également, se concentre plus particulièrement sur le style du code
- Standard Airbnb : L'un des "standards" les plus connus, même s'il n'est pas officiellement lié à ES/JS
- Nodemon : Outil permettant de relancer un serveur à chaque fois qu'un des fichiers est modifié
Redux
: Redux a été utilisé pour gérer les informations liées aux utilisateurs au moment de la connexion ou de l'inscription puis tout au long de la navigationReact DND
: Pour gérer le Drag and Drop des posts-its, React DND a été utiliséAutres librairies diverses
:- Styled Component a été utilisé pour gérer le style de l'application.
- React Router pour gérer les liens entre les page.
- Prop-types pour typer les props.
Sur VSCode, installer les plugins Prettier - Code formatter et ESLint et les configurer
Cloner ce dépôt, se rendre à l'intérieur
Lancer la commande npm run setup
setup : Initialisation du frontend et du backend ainsi que des outils
dev : Démarrage des trois serveurs (frontend + backend + admin) dans un même terminal
dev-front : Démarrage d'un serveur React pour le frontend
lint : Exécute des outils de validation de code (sera exécutée automatiquement à chaque commit)
fix : Fixe les erreurs de formatage (à lancer si lint ne passe pas)
Ce projet a été développé dans le cadre de la fin de formation développeur web Javascript de la Wild Code School de juin 2022 par Juliane Casier