en / es / ca / de

Kanban

This Full Stack project runs a Kanban. Kanban is a visual system for managing work and tasks as they proceed in a process. It is easy to use, tasks are simply dragged and dropped into the desired column.

Source code

Features

  • It works with a user system, registration is required in order to access it.
  • Each user has 4 columns in his account to manage the tasks: TODO, DOING, REVIEW and DONE.
  • To change the status of a task, just drag it to the desired column.
  • It is also possible to organize the tasks within the same column.
  • Each task can be deleted individually.
  • The done tasks column includes an emptying function to remove them all at once.

What I learned

  • How to implement Drag and Drop with React.
  • How to use advanced React Hooks features (useRef, usEffect, useState).
  • How to create a user system.

Technologies

  • Front-end: React Hooks (JavaScript), CSS-SASS
  • Back-end: Node with Express, MongoDB