DooT

A small drag-and-drop to-do list built with React and TypeScript. Tasks live in two columns — Active and Completed — and can be dragged between them; dropping a task into a column marks it done (or not) automatically.

Features

• Add tasks from the input bar (Enter or the + button)
• Edit a task in place (pencil icon), delete it (cross icon), or toggle it done (check icon)
• Drag tasks to reorder them or move them between the Active and Completed columns
• Gruvbox-inspired dark color scheme, responsive down to phone widths

Screenshots

Tech stack

• React 17 + TypeScript, bootstrapped with Create React App
• react-beautiful-dnd for drag and drop
• react-icons for the task action icons

Project structure

src/
├── index.tsx                 # Entry point
├── App.tsx                   # State (active/completed lists) + drag-and-drop logic
├── model.ts                  # The Todo interface
└── components/
    ├── InputField.tsx        # New-task input bar
    ├── TodoList.tsx          # The two droppable columns
    ├── SingleTodo.tsx        # A single draggable task card (edit/delete/done)
    └── styles.css            # Styles for all components

Tasks are kept in component state only — there is no persistence, so refreshing the page clears the lists.

Running it

Requires Node.js and npm.

npm install
npm start        # dev server at http://localhost:3000

Other scripts:

npm run build    # production build in build/
npm test         # test runner (no tests written yet)

License

See LICENSE.