{"id":20879914,"url":"https://github.com/mirayatech/drag-track","last_synced_at":"2025-05-12T16:32:00.074Z","repository":{"id":245937906,"uuid":"819614294","full_name":"mirayatech/drag-track","owner":"mirayatech","description":"📂 DragTrack is a simple Kanban board that allows you to drag and drop tasks between columns.","archived":false,"fork":false,"pushed_at":"2024-06-30T13:14:41.000Z","size":208,"stargazers_count":29,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-07-02T22:38:29.149Z","etag":null,"topics":["dnd-kit","framer-motion","kanban","react","tailwind","typescript","ui","ux","vite"],"latest_commit_sha":null,"homepage":"https://drag-track.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mirayatech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-24T21:42:29.000Z","updated_at":"2024-07-01T18:37:07.000Z","dependencies_parsed_at":"2024-06-24T23:24:46.684Z","dependency_job_id":null,"html_url":"https://github.com/mirayatech/drag-track","commit_stats":null,"previous_names":["mirayatech/drag-track"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirayatech%2Fdrag-track","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirayatech%2Fdrag-track/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirayatech%2Fdrag-track/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirayatech%2Fdrag-track/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mirayatech","download_url":"https://codeload.github.com/mirayatech/drag-track/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225142268,"owners_count":17427401,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dnd-kit","framer-motion","kanban","react","tailwind","typescript","ui","ux","vite"],"created_at":"2024-11-18T07:18:17.800Z","updated_at":"2024-11-18T07:18:18.217Z","avatar_url":"https://github.com/mirayatech.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## DragTrack - A Kanban Board for Drag and Drop\n\nDragTrack is a simple Kanban board that allows you to drag and drop tasks between columns. It is built using:\n\n- React\n- DnD-Kit\n- TypeScript\n- Tailwind CSS\n- Framer-Motion\n- Lucide Icons (for the icons)\n\n## 👾 Features\n\n- Drag and drop containers.\n- Delete containers and items.\n- Edit container and item names.\n- Drag and drop items between containers.\n- Add containers and items (both are draggable).\n- Indication of which container you are editing items in.\n\n## 📒 Process\n\nI 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. \n\nThen I styled the board, drawing inspiration from modern Kanban boards like Jira, Trello, and Notion based on my experience. \n\nSubsequently, 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. \n\nSome 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.\n\n**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.\n\n## 🚦 Running the Project\n\nTo run the project in your local environment, follow these steps:\n\n1. Clone the repository to your local machine.\n2. Run `npm install` or `yarn` in the project directory to install the required dependencies.\n3. Run `npm run start` or `yarn start` to get the project started.\n4. Open [http://localhost:5173](http://localhost:5173) (or the address shown in your console) in your web browser to view the app.\n\n## 📹 Video\n\nhttps://github.com/mirayatech/drag-track/assets/71933266/bee55318-f365-4028-9003-c06db8567a53\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmirayatech%2Fdrag-track","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmirayatech%2Fdrag-track","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmirayatech%2Fdrag-track/lists"}