Nextodo — Application Kanban type Trello développée avec Next.js

Contexte

Nextodo est une application web de gestion de tâches inspirée des interfaces Kanban comme Trello.

Le projet a été réalisé dans le cadre d'un exercice technique visant à explorer les bonnes pratiques du développement front-end moderne avec React et Next.js, ainsi que la mise en place de tests unitaires et end-to-end.

L'objectif était de concevoir une interface fluide permettant d'organiser visuellement des tâches et de manipuler les éléments via glisser-déposer.

Problème

La gestion des tâches devient rapidement difficile lorsque les projets ne sont pas organisés visuellement.

Les outils de type Kanban permettent de structurer les tâches en colonnes et d'identifier rapidement :

• les tâches à faire

• les tâches en cours

• les tâches terminées.

Le projet visait à reproduire cette logique tout en mettant en pratique les concepts modernes du développement front-end.

Solution

Nextodo propose une interface simple permettant de créer des colonnes et d'y organiser des tâches sous forme de cartes.

Les utilisateurs peuvent réorganiser les éléments grâce à un système de drag-and-drop, facilitant la priorisation et le suivi de l'avancement.

L'application repose sur Next.js et React, avec une gestion d'état via Redux et l'utilisation de la bibliothèque react-beautiful-dnd pour le déplacement fluide des cartes et des colonnes.

Fonctionnalités principales

• création et suppression de colonnes Kanban

• création, modification et suppression de tâches

• organisation des tâches par glisser-déposer

• déplacement des cartes entre colonnes

• gestion du statut des tâches (à faire / terminées)

• filtres d'affichage des tâches

• suppression rapide des tâches terminées.

Chaque colonne dispose également de filtres permettant d'afficher uniquement certaines tâches selon leur statut.

Résultats

Nextodo constitue une démonstration pratique de la création d'une interface Kanban moderne avec React.

Le projet met en avant :

• la gestion d'état d'une application front-end

• la manipulation d'éléments dynamiques via drag-and-drop

• la conception d'interfaces interactives et modulaires.