TaskFlow UI

A module-based Angular task management application that demonstrates a clean, scalable component architecture with user selection, task management, and localStorage-backed persistence. This project was built as a learning exercise to explore Angular fundamentals and best practices while serving as a portfolio-ready example.

Features

• User selection with dynamic task loading
• Create and manage tasks for individual users
• Persist tasks using localStorage
• Reusable, component-driven UI
• Module-based Angular architecture
• Clean and responsive interface
• Built with TypeScript and Angular

Tech Stack

• Angular
• TypeScript
• HTML5
• CSS3

Project Structure

src/
└── app/
    ├── header/
    ├── user/
    ├── tasks/
    ├── shared/
    ├── app.component.*
    └── app.module.ts

Getting Started

Prerequisites

• Node.js (v20 or later recommended)
• npm

Installation

Clone the repository:

git clone https://github.com/<your-username>/module-based-taskflow-ui.git
cd module-based-taskflow-ui

Install dependencies:

npm install

Start the development server:

ng serve

Open your browser and navigate to:

http://localhost:4200

Learning Objectives

This project demonstrates:

• Angular Components
• Angular Modules
• Property and Event Binding
• Component Communication (@Input and @Output)
• Services and Dependency Injection
• TypeScript Fundamentals
• State Persistence with localStorage
• Scalable Project Organization

Future Enhancements

• Edit and delete tasks
• Task priorities and due dates
• Search and filtering
• Dark mode
• Responsive mobile layout
• Backend integration with REST APIs
• User authentication

License

This project is licensed under the MIT License.