Skip to content

Latest commit

 

History

History
69 lines (47 loc) · 3.26 KB

LISEZMOI.md

File metadata and controls

69 lines (47 loc) · 3.26 KB

BOARB - Le tableau pense-bête

Table of Contents

  1. Informations générales
  2. Technologies
  3. Installation
  4. Autrice

Informations générales

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

Statut du projet et état d'avancement

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.

Technologies

Ce projet est écrit en React

Template

  • 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é

Autres librairies

  • 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 navigation
  • React 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.

Installation

Pour commencer un projet

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

Liste des commandes et signification

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)

Autrice

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