Kanvio | Projekt

Beschreibung

Kanvio ist ein Kanban-Board für Aufgabenplanung mit Fokus auf Klarheit, schnelle Bedienung und Alltagstauglichkeit. Ziel war eine Oberfläche, die auch bei mehreren Listen und vielen Aufgaben übersichtlich bleibt und schnell reagiert.

Im Zentrum stehen flexible Spalten, schnelles Verschieben per Drag-and-Drop, ein durchdachter Papierkorb und viele kleine Komfortfunktionen, die sowohl auf Desktop als auch auf Mobilgeräten sinnvoll nutzbar sind.

Technik

Das Projekt ist vollständig mit HTML, CSS und Vanilla JavaScript umgesetzt. Daten, Einstellungen und Listen werden lokal im Browser über localStorage gespeichert, ganz ohne Backend.

Kanvio kombiniert modulare Board- und Task-Logik mit einer klaren Struktur. Eigene Module für Rendering, State, Drag-and-Drop, Suche, Import/Export und Dialoge sorgen für gute Wartbarkeit und eine stabile Anwendung.

Zusätzlich sind Light- und Dark-Mode, Wallpaper-Auswahl, Transparenzsteuerung, Undo, Sortier- und Filteroptionen sowie JSON-Import/Export direkt in die Anwendung integriert.

Technische Highlights

Mehrere Listen mit Erstellen, Umbenennen, Löschen und eigenem Spalten-Setup
Drag-and-Drop für Aufgaben zwischen Spalten sowie zur Anpassung der Spaltenreihenfolge
Sortierung und Filter pro Spalte nach Fälligkeit, Überfälligkeit, Priorität und alphabetischer Reihenfolge
Papierkorb mit Wiederherstellen und endgültigem Löschen gelöschter Aufgaben
Undo-Funktion für den letzten Schritt
Responsive Oberfläche mit Optimierungen für Desktop und Mobilgeräte inklusive Schnellaktionen
Import und Export als JSON sowie persistente Speicherung über localStorage

Was ich dabei gelernt habe

Bei Kanvio habe ich gelernt, wie wichtig eine klare Trennung von State, Rendering und Interaktionen für größere Vanilla-JS-Anwendungen ist. Gerade bei vielen kleinen UI-Aktionen, Drag-and-Drop und unterschiedlichen Geräten zahlt sich eine saubere Struktur direkt in Stabilität und Wartbarkeit aus.