Nextodo — Trello-style Kanban application built with Next.js logo

Nextodo — Trello-style Kanban application built with Next.js

November 2021

Task management application inspired by Trello for organising tasks in Kanban columns with drag-and-drop.

View site

Project description

Context

Nextodo is a web-based task management application inspired by Kanban interfaces such as Trello.

The project was carried out as part of a technical exercise aimed at exploring modern front-end development best practices with React and Next.js, as well as setting up unit and end-to-end tests.

The goal was to design a fluid interface for visually organising tasks and manipulating elements via drag-and-drop.

Problem

Task management quickly becomes difficult when projects are not organised visually.

Kanban-style tools help structure tasks into columns and quickly identify:

  • tasks to do
  • tasks in progress
  • completed tasks.

The project aimed to replicate this logic while putting modern front-end development concepts into practice.

Solution

Nextodo offers a simple interface for creating columns and organising tasks as cards within them.

Users can reorganise elements using a drag-and-drop system, making it easier to prioritise and track progress.

The application is built on Next.js and React, with state management via Redux and the react-beautiful-dnd library for smooth movement of cards and columns.

Key features

  • creation and deletion of Kanban columns
  • creation, editing and deletion of tasks
  • task organisation by drag-and-drop
  • moving cards between columns
  • task status management (to do / done)
  • task display filters
  • quick deletion of completed tasks.

Each column also has filters to show only certain tasks by status.

Results

Nextodo is a practical demonstration of building a modern Kanban interface with React.

The project highlights:

  • front-end application state management
  • manipulating dynamic elements via drag-and-drop
  • designing interactive, modular interfaces.

Development environment

Next.jsNext.js
ReactReact
JavaScriptJavaScript
CSSCSS

Have a similar project? Let's talk

Looking for a freelance developer to bring your idea to life? Let's discuss your web, mobile or software project together.

Contact me