TaskManager

A clean, single-page task manager built with Angular 22 (standalone components, new @if/@for control-flow syntax) — add, edit, filter, and search tasks, track progress with a signature animated ring, and switch between light and dark themes. All data persists locally, so your tasks are still there when you come back.

Features

• Full task CRUD — add tasks with a title, due date, and priority (low / medium / high); edit in place; delete instantly.
• Smart filtering & search — filter by All / Active / Completed, or search tasks live by title.
• Overdue detection — tasks past their due date are flagged automatically.
• Progress ring — an animated SVG ring shows overall completion percentage at a glance, alongside quick stats (total / active / completed).
• Dark mode — toggle between light and dark themes; the choice is remembered between visits.
• Persistent storage — tasks and theme preference are saved to localStorage, so nothing is lost on refresh.

Tech stack

Angular 22 (standalone components, new control-flow syntax) · TypeScript · Bootstrap 5 (layout/utilities) · Bootstrap Icons · localStorage for persistence.

Project structure

src/
  app/
    components/
      task-list/     main task list component (logic, template, styles)
    models/
      task.ts         Task interface (id, title, completed, priority, dueDate)

Getting started

Install dependencies:

npm install

Start the dev server:

npm start

Then open http://localhost:4200.

Building for production

npm run build

Build artifacts are output to dist/.