TaskFlow

About Framework

Angular is a powerful TypeScript based, open source framework for building dynamic, modern web applications. TaskFlow is a small task management app created for the learning purposes to explore new things.

What the App Does

TaksFlow allows users to:

• Create new tasks with a simple form
• Organize tasks into different stages: Todo, In Progress, and Completed
• Move tasks between columns using drag-and-drop
• Edit task titles inline
• Delete tasks when they are no longer needed
• Keep tasks saved during the current browser session

Angular Concepts Used

This project applies several important Angular concepts, including:

• Components and templates
• Services and dependency injection
• Signals and computed values
• Reactive forms
• Input and output communication between components
• Event handling and drag-and-drop interactions
• Angular CLI-based project structure

Getting Started

Make sure you have Node.js and npm installed on your machine.

1. Install Angular CLI

npm install -g @angular/cli

2. Install dependencies

npm install

3. Start the development server

npm start

Or, if you prefer the Angular CLI command directly:

ng serve

Then open your browser and go to http://localhost:4200/.

Useful Commands

npm start
npm run build
npm test

Environment Versions

The project was developed and tested with:

• Node.js: 24.18.0
• npm: 11.16.0
• Angular: 22.0.8
• Angular CLI: 22.0.8

Inspiration

This app was inspired by productivity tools like Kanban board/Trello, where tasks are visually organized and tracked through the different stages of progress.

Notes

This project is intentionally simple and focused on learning Angular fundamentals in a hands-on way.

Project Goal

The main goal of this app was to build a simple but useful productivity tool using Angular while practicing core concepts of the framework. The application was designed to feel inspired by popular tools such as Kanban boards and Trello, making task organization more intuitive and engaging.