m-oniqu3 / bundle

A simple kanban board that allows you to create, edit, and delete multiple boards and tasks. It uses React, TypeScript, Tailwind. and the native HTML5 drag and drop API to allow you to drag and drop tasks and columns.

bundle - a kanban board

Description

This is a simple kanban board that allows you to create, edit, and delete multiple boards and tasks. It is built using React, TypeScript, and Tailwind. It uses the native HTML5 drag and drop API to allow you to drag and drop tasks and columns.

For state management, I used the useReducer hook. I also used the useContext hook to pass the state and dispatch functions down to the components that need them.

Features

• Create, edit, and delete boards
• Create, edit, and delete tasks
• Drag and drop tasks between columns
• Drag and drop columns to reorder them

Technologies Used

• React
• TypeScript
• Tailwind CSS
• HTML5 Drag and Drop API

Future Improvements

• Add a backend to persist the data
• Add user authentication
• Add the ability to share boards with other users
• Add the ability to change the color of the columns

Installation

1. Clone the repository
2. Run npm install to install the dependencies
3. Run npm run dev to start the development server

Screen.Recording.2024-04-14.at.6.38.57.PM.mov