/Kanban-Portfolio

Kanban Portfolio est un projet permettant à un utilisateur d'organiser ses activités et ses tâches. :thumbsup:

Primary LanguageJavaScript

🎉 Kanban Project 🎉

📝 Sommaire 📝

👋 Introduction

Bienvenue sur ce projet Kanban ! Celui-ci a été réalisé en vu de mettre en avant et consolider mes acquis depuis le début de la formation Fullstack JS (31/10/22).

  • Les aspects techniques de ce projet sont :

    • Mettre en place un serveur NodeJS (Architecture MVC) ✅
    • Concevoir et gérer une base de donnée relationnelle (MCD, MLD) ✅
    • La conception et la consommation d'une API REST ✅
    • Veiller à la sécurité des intéractions avec cette API contre les tentatives de XSS ✅
    • Clean code ✅
    • Préparation de wireframes
    • Intégration d'une page web responsive ✅
    • Projet de type Single Page Application (SPA) lié à une API ✅
    • Approche autodidacte en s'appuyant sur la documentation ✅

  • L'environnement technique de ce projet :

    • Front-end :

      • JavaScript vanilla
      • HTML & CSS
      • Sass

    • Back-end :

      • NodeJS & Express
      • PostgreSQL
      • Sequelize

✏️ Description du projet

  • Ce projet a pour intention principale l'implémentation des fonctionnalités classiques d'un Kanban tels que : la création d'une nouvelle liste, de nouvelles cartes et de nouvelles catégories. Une carte peut être assignée à une liste et une catégorie peut être assignée à une carte.

  • Au-delà de la création ainsi que l'assignation d'un élément à un autre, l'utilisateur est libre d'organiser son Kanban selon ses désirs en modifiant la position de la liste ou bien la position d'une carte dans une liste.

  • Il peut aussi choisir de renommer une liste, une carte ou une catégorie (+ changer la couleur de leur bordure pour ces dernières) de manière intuitive en cliquant sur les boutons mis à disposition. Seules les listes et les catégories peuvent être renommées en double cliquant sur leur nom.

  • De plus, l'utilisteur peut également choisir de supprimer une liste, une carte ou une catégorie ainsi que les données associées. Soyez vigilant lorsque vous supprimez ! ⚠️

🚀 Comment lancer ce projet ?

  1. Clonez dans un premier temps ce répertoire GitHub

  2. Assurez-vous d'avoir installé PostgreSQL

  3. Installez les dépendances en vous plançant dans le dossier backend puis tapez npm install dans le terminal

  4. Créez la base de donnée avec les commandes suivantes :

a. CREATE ROLE "username" WITH LOGIN PASSWORD 'password';

b. CREATE DATABASE "dbname" OWNER "username";

-- Importez la base de donnée --

c. psql -U "username" -d "dbname" -f ./data/create_db.sql;

-- Connectez vous à la base de donnée --

d. psql -U "username" -d "dbname";` -- puis entrez votre 'password'

-- Une fois connecté, entrez la commande --

e. SELECT * FROM "list";

-- Si cela vous retourne un tableau avec des éléments à l'intérieur, féliciations vous avez importé la base de donnée ! --

-- Sinon, répétez depuis l'étape C --

🎨 MCD de la base de donnée

image

• Code Mocodo

List: code_list (INT), name (VARCHAR), position (INT), created_at (DATE), updated_at (DATE)
contain, 11 Card, 0N List
Card: code_card (INT), name (VARCHAR), color(VARCHAR), position (INT), created_at (DATE), updated_at (DATE)
:

::
associated, 0N Card, 0N Tag: code_card, code_tag
Tag: code_tag (INT), _name (VARCHAR), color (VARCHAR), created_at (DATE), updated_at (DATE)

🖥️ Constitution de l'API

Routes/Méthodes GET POST PATCH PUT DELETE
/lists Renvoie toutes les listes Ajoute une liste
❌
❌
❌
/lists/:listId Renvoie une liste
❌
 Met à jour une liste
❌
 Supprime une liste
/cards Renvoie toutes les cartes Créé une carte
❌
❌
❌
/cards/:cardId Renvoie une carte
❌
 Met à jour une carte
❌
 Supprime une carte
/cards/:cardId/tags
❌
 Assigne une catégorie à une carte
❌

❌
❌
/cards/:cardId/tags/:tagId
❌
❌
❌
❌
 Retire une catégorie à une carte
/tags Renvoie toutes les catégories Créé une catégorie
❌
❌
❌
/tags/:tagId Renvoie une catégorie
❌
 Met à jour une catégorie
❌
 Supprime une catégorie

🎊 Conclusion 🎊

Voilà qui conclut la présentation et la mise en marche de ce projet. Ce Kanban a été très instructif et amusant à concevoir du début à la fin, malgré les heures de formations intensives où il a fallu persévérer pour s'organiser afin de mener ce projet jusqu'au bout.

Merci beaucoup pour votre temps si vous êtes arrivé jusque là 💪 ! En espérant que vous avez apprécié ce projet et à bientôt pour de nouvelles aventures ! 👋