Drag Track

DragTrack - A Kanban Board for Drag and Drop

DragTrack is a simple Kanban board that allows you to drag and drop tasks between columns. It is built using:

• React
• DnD-Kit
• TypeScript
• Tailwind CSS
• Framer-Motion
• Lucide Icons (for the icons)

👾 Features

• Drag and drop containers.
• Delete containers and items.
• Edit container and item names.
• Drag and drop items between containers.
• Add containers and items (both are draggable).
• Indication of which container you are editing items in.

📒 Process

I started by implementing the functionality for creating containers. Next, I added the ability to drag and drop containers. Afterwards, I focused on the capability to create items inside containers and further, to drag and drop them.

Then I styled the board, drawing inspiration from modern Kanban boards like Jira, Trello, and Notion based on my experience.

Subsequently, I added functionalities for deleting items and containers. I then implemented the ability to edit the names of containers and items. Lastly, I added an indication of which container you are editing items in. Afterward, I performed some small refactoring and styling touch-ups.

Some features were added in between the main features development. Everything is saved in local storage. The user can come back, and everything will still be there.

NOTE: The project's purpose is to demonstrate the use of DnD-Kit and TypeScript. It is not meant to be a full-fledged Kanban board.

🚦 Running the Project

To run the project in your local environment, follow these steps:

1. Clone the repository to your local machine.
2. Run npm install or yarn in the project directory to install the required dependencies.
3. Run npm run start or yarn start to get the project started.
4. Open http://localhost:5173 (or the address shown in your console) in your web browser to view the app.

📹 Video

https://github.com/mirayatech/drag-track/assets/71933266/bee55318-f365-4028-9003-c06db8567a53