Kanban Task Manager - Angular 17

Kanban Task Manager - Angular 17 — featured screenshot

Technologies Used

  1. Angular
  2. CSS
  3. Firebase
  4. Github Actions
  5. HTML
  6. Typescript

Links


This project later evolved into SheetBoard — the same drag-and-drop board, re-engineered in React with each board backed by a Google Sheet instead of browser local storage.

Key Features

  • Built on Angular 17, using its latest features for a modern, responsive UI
  • Angular CDK Drag and Drop for smooth task management
  • Database-free architecture — tasks are stored locally in the browser, keeping data private
  • Intuitive task creation, updating, and deletion

Technologies Used

  • Angular 17 (standalone components, custom directives)
  • Angular Material (Dialog, Snackbar, Icons, Buttons, Cards, Tooltips, CDK Drag and Drop)
  • HTML5 / SCSS
  • TypeScript
  • Local Storage
  • GitHub Actions for CI/CD
  • Firebase Hosting

What makes this project unique? It was built purely for fun over just 2 days, showcasing how quickly Angular 17 can deliver an efficient, enjoyable web app.

I wanted my own task-management tool that was simple, intuitive, and visually appealing. This project let me experiment with Angular 17’s latest features and build something genuinely pleasant to use every day.

Screenshots

Home Screen

Create, update, and delete tasks in a Kanban-style layout — complete with a trash bin for deleted tasks and the ability to export tasks as a JSON file.

Home Screen

Trash Screen

Recover deleted tasks or remove them permanently.

Trash Screen

Drag and Drop

Organize tasks across stages with drag-and-drop.

Drag and Drop Screen

Use the demo button below to try it now. You can also view the source code on GitHub.