Web App 2026

Dither Kanban

A productivity tool with a kanban board, a calendar, and an "urgent and upcoming" overview in one place. Built to organise tasks and projects without getting complicated.

ROLE Product Design & Development
STACK React, TypeScript, Tailwind, Supabase
Dither Kanban board view

Many kanban tools start simple and then add a lot of features. Scrum teams and solo workers still need the basics: a board for current work, a backlog, and a clear view of what is due this week.

Dither Kanban focuses on the basics instead. It borrows core ideas from kanban and scrum, columns, backlogs, priorities, and due dates, but keeps the interface easy to scan.

Dither Kanban overview panel
Board

A kanban board for day to day work. Columns like To do, In progress, and Done. Cards can be dragged between columns as the work moves.

Calendar

Tasks laid out over time for sprint and weekly planning. See what is due and when, across all projects.

Overview

A list of urgent and upcoming tasks across all projects. When there is a lot going on, open the overview instead of checking every board.

Calendar view
Task cards

Priority, due date, subtasks with counters, and a description field. Everything a task needs, nothing it doesn't.

Multiple projects

Each board has its own colour and dithered background. Switching contexts is instant.

Dithering

Each board generates a unique background using Floyd-Steinberg. Pick a colour and the pattern is created automatically.

Ctrl+K search

Global search across all tasks, instantly. No extra clicks.

Undo

Deleted tasks and projects are recoverable. 20 tasks, 10 projects. Mistakes are fine.

Sync + offline

Supabase keeps data in sync across devices. Works without an account, works without internet.

The starting idea was that every project should feel different without extra setup. Each board generates a background using Floyd-Steinberg dithering, a classic algorithm that turns gradients into a pixel style pattern by spreading the error across neighbouring pixels.

Each project is easy to tell apart. The background is abstract, so the task cards stay easy to read. There is very little to set up, and the result is always unique.

Task card with subtasks
Priority

Shows how important a task is, so the most critical work stays visible.

Due date

Used by the calendar and overview to surface time sensitive work.

Subtasks

Counters that show partial progress at a glance.

Description

Extra context when needed. Keep the card title short, put the details here.

It sticks to the main parts of kanban and scrum: columns, priorities, and dates, without extra layouts or custom fields. Projects are easy to recognise because of their generated backgrounds, while the interface stays mostly cards and text.

All three views share the same data. The board shows which step each task is in. The calendar shows when tasks are planned. The overview shows only what is urgent or due soon. This reduces context switching and keeps planning in one place.

Dither Kanban is for people who like the structure of kanban and scrum, but want a tool that stays simple.

React 18 Component architecture. Custom hooks only, no external state library.
TypeScript Full type coverage. Components, hooks, data models.
Tailwind CSS 4 Utility classes with CSS custom properties for tokens.
Supabase Auth and real-time sync. Fully optional.
react-dnd Drag-and-drop between columns.
Floyd-Steinberg Custom in-browser dithering. Runs at project creation.
← Back to work See live project ↗