Eine einfache und moderne Aufgabenliste, gebaut mit React und TypeScript. Sortierung und Filtern leicht gemacht.
Hier online ausprobieren: todo.timanthonyalexander.de
Der Code liegt öffentlich auf GitHub: github.com/TimAnthonyAlexander/todo-react
- React + TypeScript
- Material-UI (hab ich verwendet, da ich mich damit auskenne und bei euch auch noch Material-UI verwendet wird)
- @dnd-kit für Drag-and-Drop (hatte erst react-beautiful-dnd)
- LocalStorage zur Datenspeicherung
- Vite zum Bauen (auch zur Erstellung des Projekts genutzt)
Container
Aufgaben erstellen
Zeigt deine Aufgaben nach Status gefiltert an; sortierbar per Drag-and-Drop.
Das Aufgaben-Item, das sich auch per Drag'n'Drop neu sortieren lässt.
Toggle:
- allen Aufgaben
- offenen Aufgaben
- erledigten Aufgaben
Per dnd-kit sortierbarer Container für die Todo-Items. Ich hatte erst react-beautiful-dnd verwendet aber das ist deprecated und funktionierte nicht sonderbar gut mit MUI.