TaskFlow - Angular 18+ Demo Application

A task management application demonstrating Angular 18+ features, RxJS patterns, and clean architecture.

Features

• View Tasks: Display all tasks with completion status and category badges
• Add Task: Create new tasks with title and category (Work, Personal, Shopping, Other)
• Complete Task: Toggle task completion with visual feedback
• Delete Task: Remove tasks from the list
• Filter Tasks: Filter by All, Active, or Completed
• Task Statistics: Real-time count of total, completed, and active tasks

Architecture

RxJS Implementation

• BehaviorSubject for reactive state management
• combineLatest for deriving filtered tasks and statistics
• map, filter, tap, catchError operators
• takeUntilDestroyed() for automatic cleanup
• async pipe for automatic subscription management

Component Structure

• Container Component: TaskListComponent - manages state via service
• Presentational Components: TaskItemComponent, TaskFilterComponent, TaskStatsComponent
• UI Components: AddTaskDialogComponent, LoadingSpinnerComponent, ErrorMessageComponent, EmptyStateComponent

State Management

• Service-based reactive state with BehaviorSubject
• Unidirectional data flow: Service → Component → Template

How to Run

Prerequisites

• Node.js 18+
• npm 9+

Installation

cd taskflow
npm install

Development Server

ng serve

Navigate to http://localhost:4200/

Build

ng build

Build artifacts stored in dist/taskflow/

Project Structure

src/app/
├── core/
│   ├── models/         # TypeScript interfaces (Task, TaskCategory, etc.)
│   └── services/       # TaskService with RxJS streams
├── features/
│   └── tasks/
│       ├── components/ # Presentational components
│       └── containers/ # Smart/container components
└── shared/
    └── components/     # Reusable UI components

Tech Stack

• Angular 18+ (standalone components)
• TypeScript 5.x
• RxJS 7.x
• Angular CLI 21.x

License

MIT