TypeScript Tutorial: Building a Simple Interactive Interactive Kanban Board

Written by

learnmodernjavascript

in

In the world of project management and software development, organizing tasks and visualizing workflow is crucial for productivity and collaboration. Kanban boards, with their intuitive columns and cards, provide a powerful visual tool for managing tasks. This tutorial will guide you through building a simple, interactive Kanban board using TypeScript. You’ll learn the core concepts behind Kanban, understand how to represent tasks and columns, and implement drag-and-drop functionality for seamless task management. This hands-on project will not only teach you TypeScript fundamentals but also give you practical experience in building a functional web application.

What is Kanban and Why Use It?

Kanban is a visual workflow management method that helps you optimize the flow of work. It originated in the manufacturing industry and has been widely adopted in software development. The core principles of Kanban include:

  • Visualize Workflow: Using a board with columns representing different stages of a process (e.g., To Do, In Progress, Review, Done).
  • Limit Work in Progress (WIP): Restricting the number of tasks in each column to avoid bottlenecks.
  • Manage Flow: Focusing on the smooth movement of tasks through the workflow.
  • Make Process Policies Explicit: Clearly defining how the work should be done.
  • Implement Feedback Loops: Regularly reviewing the workflow to identify areas for improvement.

Kanban boards are valuable because they:

  • Increase transparency by providing a clear overview of project status.
  • Improve efficiency by highlighting bottlenecks and reducing wasted effort.
  • Enhance collaboration by making it easier for team members to understand the workflow.
  • Promote continuous improvement by encouraging regular review and adaptation.

Setting Up the Project

Before we start coding, let’s set up our development environment. We’ll use TypeScript, HTML, CSS, and JavaScript. You’ll need Node.js and npm (Node Package Manager) installed on your system. If you don’t have them, download and install them from the official Node.js website.

Create a new project directory and navigate into it using your terminal:

mkdir kanban-board
cd kanban-board

Initialize a new npm project:

npm init -y

Install TypeScript as a dev dependency:

npm install typescript --save-dev

Create a tsconfig.json file to configure TypeScript:

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

This configuration specifies that TypeScript should compile to ES5 JavaScript, use the CommonJS module system, output the compiled files to a dist directory, and enable strict type checking. Create a src folder and inside it, create an index.ts file. This is where we’ll write our TypeScript code.

Create an index.html file in the root directory. This will be the entry point for our application. Add the following basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kanban Board</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="app"></div>
    <script src="dist/index.js"></script>
</body>
</html>

Create a style.css file in the root directory. We’ll add some basic styling later to make the board look presentable. For now, leave it empty. Now, let’s begin writing our TypeScript code!

Defining Data Structures

First, we need to define the data structures to represent our Kanban board. We’ll start with the Task and Column interfaces.

// src/index.ts
interface Task {
    id: string;
    title: string;
    description: string;
}

interface Column {
    id: string;
    title: string;
    tasks: Task[];
}

The Task interface has properties for an ID, title, and description. The Column interface has an ID, title, and an array of Task objects. These interfaces will help us maintain type safety and organize our data.

Creating the Kanban Board Class

Next, we will create a KanbanBoard class to manage our Kanban board’s state and behavior. This class will handle the tasks, columns, and drag-and-drop functionality. Here’s the basic structure:

// src/index.ts
// ... (Task and Column interfaces from above)

class KanbanBoard {
    private columns: Column[];
    private appElement: HTMLElement;

    constructor(appElement: HTMLElement) {
        this.appElement = appElement;
        this.columns = [
            {
                id: 'todo',
                title: 'To Do',
                tasks: [],
            },
            {
                id: 'inProgress',
                title: 'In Progress',
                tasks: [],
            },
            {
                id: 'review',
                title: 'Review',
                tasks: [],
            },
            {
                id: 'done',
                title: 'Done',
                tasks: [],
            },
        ];
        this.render();
    }

    // Method to render the board
    render(): void {
        // Implementation will go here
    }

    // Method to add a task
    addTask(columnId: string, task: Task): void {
        // Implementation will go here
    }

    // Method to move a task
    moveTask(taskId: string, sourceColumnId: string, targetColumnId: string): void {
        // Implementation will go here
    }

    // Method to handle drag and drop events
    setupDragAndDrop(): void {
        // Implementation will go here
    }
}

The KanbanBoard class takes an HTML element (appElement) as an argument in its constructor. This will be the element where the Kanban board will be rendered. The constructor initializes the columns with their titles and empty task arrays. It also calls the render() method to display the initial board.

Implementing the Render Method

The render() method is responsible for generating the HTML structure of the Kanban board. It iterates through the columns and creates the necessary elements for each column and its tasks. Let’s implement the render method:

// src/index.ts
// ... (Task, Column, and KanbanBoard class definition from above)

    render(): void {
        this.appElement.innerHTML = ''; // Clear the existing content

        const boardContainer = document.createElement('div');
        boardContainer.classList.add('kanban-board');

        this.columns.forEach(column => {
            const columnElement = document.createElement('div');
            columnElement.classList.add('kanban-column');
            columnElement.dataset.columnId = column.id;

            const columnTitle = document.createElement('h3');
            columnTitle.textContent = column.title;
            columnElement.appendChild(columnTitle);

            column.tasks.forEach(task => {
                const taskElement = document.createElement('div');
                taskElement.classList.add('kanban-task');
                taskElement.dataset.taskId = task.id;
                taskElement.textContent = task.title;
                columnElement.appendChild(taskElement);
            });

            boardContainer.appendChild(columnElement);
        });

        this.appElement.appendChild(boardContainer);
        this.setupDragAndDrop(); // Initialize drag and drop after rendering
    }

Inside the render() method, we first clear the content of the appElement to ensure a clean render. We then create a container for the entire board and iterate through each column. For each column, we create a column element, add the column title, and then iterate through the tasks within that column. For each task, we create a task element, add its title, and append it to the column element. Finally, we append the column element to the board container and the board container to the appElement. We also call setupDragAndDrop() after rendering the board to initialize drag-and-drop functionality.

Adding Tasks

The next step is to implement the addTask() method, which will allow us to add tasks to specific columns. Here’s how to implement it:

// src/index.ts
// ... (Task, Column, KanbanBoard class definition and render() method from above)

    addTask(columnId: string, task: Task): void {
        const column = this.columns.find(col => col.id === columnId);
        if (column) {
            column.tasks.push(task);
            this.render(); // Re-render the board to reflect the changes
        }
    }

The addTask() method finds the column with the specified columnId. If the column exists, it adds the task to the column’s tasks array and re-renders the board to display the new task.

Implementing Drag and Drop

Now, let’s implement the drag-and-drop functionality. This involves handling several events: dragstart, dragover, drop, and dragend. We’ll use these events to allow users to move tasks between columns. First, implement the setupDragAndDrop() method:

// src/index.ts
// ... (Task, Column, KanbanBoard class definition and other methods from above)

    setupDragAndDrop(): void {
        const taskElements = document.querySelectorAll('.kanban-task');
        taskElements.forEach(taskElement => {
            taskElement.draggable = true;

            taskElement.addEventListener('dragstart', (event: DragEvent) => {
                if (event.dataTransfer) {
                    event.dataTransfer.setData('text/plain', taskElement.dataset.taskId || '');
                    event.dataTransfer.effectAllowed = 'move';
                }
            });
        });

        const columnElements = document.querySelectorAll('.kanban-column');
        columnElements.forEach(columnElement => {
            columnElement.addEventListener('dragover', (event: DragEvent) => {
                event.preventDefault(); // Prevent default to allow drop
            });

            columnElement.addEventListener('drop', (event: DragEvent) => {
                event.preventDefault();
                const taskId = event.dataTransfer?.getData('text/plain');
                const targetColumnId = columnElement.dataset.columnId || '';
                const sourceColumnId = this.findColumnIdByTaskId(taskId || '');

                if (taskId && sourceColumnId !== targetColumnId) {
                    this.moveTask(taskId, sourceColumnId, targetColumnId);
                }
            });
        });
    }

In the setupDragAndDrop() method:

  • We select all task elements and set the draggable attribute to true.
  • We add a dragstart event listener to each task element. This event listener sets the data transfer object with the task ID and sets the effect allowed to ‘move’.
  • We select all column elements and add dragover and drop event listeners.
  • The dragover event listener prevents the default behavior to allow the drop.
  • The drop event listener retrieves the task ID from the data transfer object, gets the target column ID, and calls the moveTask() method.

Now, let’s implement the moveTask() method:

// src/index.ts
// ... (Task, Column, KanbanBoard class definition and other methods from above)

    moveTask(taskId: string, sourceColumnId: string, targetColumnId: string): void {
        let taskToMove: Task | undefined;

        // Find task and remove from source column
        this.columns.forEach(column => {
            column.tasks = column.tasks.filter(task => {
                if (task.id === taskId) {
                    taskToMove = task;
                    return false; // Remove the task from the source column
                }
                return true;
            });
        });

        // Add task to target column
        if (taskToMove) {
            const targetColumn = this.columns.find(col => col.id === targetColumnId);
            if (targetColumn) {
                targetColumn.tasks.push(taskToMove);
            }
        }

        this.render(); // Re-render the board
    }

The moveTask() method:

  • Iterates through the columns to find the task with the specified taskId and removes it from its original column.
  • If the task is found, it finds the target column.
  • Adds the task to the target column.
  • Finally, it calls render() to update the board.

Finally, we need a helper method to find the source column ID based on the task ID:

// src/index.ts
// ... (Task, Column, KanbanBoard class definition and other methods from above)

    findColumnIdByTaskId(taskId: string): string {
        for (const column of this.columns) {
            if (column.tasks.some(task => task.id === taskId)) {
                return column.id;
            }
        }
        return ''; // Or throw an error if the task is not found
    }

Adding Basic Styling

To make our Kanban board visually appealing, let’s add some basic CSS. Here’s a basic style sheet to get you started:

/* style.css */
.kanban-board {
    display: flex;
    padding: 20px;
}

.kanban-column {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    margin: 10px;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.kanban-column h3 {
    text-align: center;
    margin-bottom: 10px;
}

.kanban-task {
    padding: 10px;
    margin-bottom: 5px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background-color: #fff;
    cursor: move;
}

This CSS provides a basic layout for the board, columns, and tasks, including some padding, borders, and background colors to make it readable and user-friendly. Include this file in your index.html file.

Putting It All Together

Now that we have all the methods implemented, let’s instantiate the KanbanBoard class and add some initial tasks to test it.

// src/index.ts
// ... (Task, Column, KanbanBoard class definition and other methods from above)

// Initialize the app
const appElement = document.getElementById('app') as HTMLElement;
if (appElement) {
    const kanbanBoard = new KanbanBoard(appElement);

    // Add initial tasks
    kanbanBoard.addTask('todo', { id: '1', title: 'Task 1', description: 'Description for Task 1' });
    kanbanBoard.addTask('todo', { id: '2', title: 'Task 2', description: 'Description for Task 2' });
    kanbanBoard.addTask('inProgress', { id: '3', title: 'Task 3', description: 'Description for Task 3' });
}

In the index.ts file, we get the element with the ID “app”, create a new KanbanBoard instance, and add some initial tasks to the “To Do” and “In Progress” columns. Make sure your HTML has an element with the ID “app” to render the board. Compile the TypeScript code with the command tsc in the terminal. This will create a dist folder containing the compiled JavaScript file.

Open index.html in your browser. You should see a Kanban board with the columns “To Do”, “In Progress”, “Review”, and “Done”. You should be able to drag and drop the tasks between the columns. If you encounter any problems, double-check your code, console logs, and browser’s developer tools for errors.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to fix them when building a Kanban board with TypeScript:

  • Incorrect TypeScript Configuration: If you get compilation errors, double-check your tsconfig.json file. Ensure that the compilerOptions are correctly set, especially the target, module, and outDir properties.
  • Incorrect Element Selection: Ensure that you are selecting the correct HTML elements using document.getElementById or document.querySelector. Typos in element IDs or class names can cause your code to fail.
  • Drag and Drop Event Handling: Ensure that you have correctly implemented the dragstart, dragover, and drop event listeners. For instance, forgetting to call event.preventDefault() in the dragover event will prevent the drop functionality from working.
  • Data Transfer Issues: Make sure you are using event.dataTransfer.setData() and event.dataTransfer.getData() correctly to transfer the data (task ID) between the drag and drop events.
  • Incorrect Rendering: If your board is not updating after adding or moving tasks, make sure you are calling the render() method after any state changes.
  • Type Errors: TypeScript helps prevent many errors, but make sure you are using types correctly. Check the console for type-related errors.
  • Scope Issues: Be mindful of variable scope, especially when working with event listeners and callbacks. Use this carefully within the class methods.

Key Takeaways

  • TypeScript Fundamentals: You’ve practiced using interfaces, classes, and methods, which are fundamental concepts in TypeScript.
  • Event Handling: You’ve learned how to handle drag and drop events, which are essential for creating interactive web applications.
  • Data Management: You’ve learned how to manage data in a structured way using interfaces and classes.
  • Code Organization: You’ve seen how to organize your code into modular components for better maintainability.
  • Practical Application: You’ve built a real-world application that can be used for project management.

FAQ

Here are some frequently asked questions about building a Kanban board in TypeScript:

  1. Can I add more columns?
    Yes, you can easily add more columns by modifying the columns array in the KanbanBoard constructor and updating the CSS to accommodate the new columns.
  2. How can I save the tasks?
    To save the tasks, you can use local storage, a database, or an API. You would need to add methods to load and save the tasks to the chosen storage mechanism. For example, you can use localStorage.setItem() and localStorage.getItem() to save and load tasks from the browser’s local storage.
  3. How do I add more task details?
    You can extend the Task interface to include more properties, such as due dates, assignees, or priorities. You’ll also need to modify the rendering logic to display these additional details in the task elements.
  4. How can I improve the UI?
    You can improve the UI using CSS frameworks like Bootstrap, Tailwind CSS, or Material UI to add more styling and make the board more user-friendly. You can also add animations and transitions to enhance the user experience.
  5. What are the next steps?
    To take this project further, consider adding the ability to create new tasks, edit existing tasks, and integrate with a backend to store tasks persistently. You could also add user authentication and collaboration features to make it a more comprehensive project management tool.

With the skills and knowledge gained from this tutorial, you’re well on your way to building more complex and interactive web applications using TypeScript. This hands-on project offers a solid foundation for understanding how to structure and implement a functional Kanban board, and it will equip you with a strong understanding of how to use TypeScript in a real-world scenario. The ability to visualize and manage tasks efficiently can be a game-changer for any project or team, and this Kanban board provides a practical example of how to make that happen. Remember, the key to mastering TypeScript and web development is practice, so try experimenting with different features, refining the design, and exploring additional functionalities to expand your skills. You’ll find that with each iteration, your understanding and abilities grow.

More posts