Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mirayatech/drag-track
📂 DragTrack is a simple Kanban board that allows you to drag and drop tasks between columns.
https://github.com/mirayatech/drag-track
dnd-kit framer-motion kanban react tailwind typescript ui ux vite
Last synced: about 1 month ago
JSON representation
📂 DragTrack is a simple Kanban board that allows you to drag and drop tasks between columns.
- Host: GitHub
- URL: https://github.com/mirayatech/drag-track
- Owner: mirayatech
- Created: 2024-06-24T21:42:29.000Z (6 months ago)
- Default Branch: master
- Last Pushed: 2024-06-30T13:14:41.000Z (6 months ago)
- Last Synced: 2024-07-02T22:38:29.149Z (6 months ago)
- Topics: dnd-kit, framer-motion, kanban, react, tailwind, typescript, ui, ux, vite
- Language: TypeScript
- Homepage: https://drag-track.vercel.app
- Size: 203 KB
- Stars: 29
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 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](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