✅ Task Management System

A responsive, component-driven task manager built with Angular, Kendo UI, RxJS and NGXS — clean architecture, real-time search and reusable UI patterns.

Features · Architecture · Data Model · Setup · Structure · Lessons

---

📦 Tech Stack

• ⚙️ Angular 18 — modular architecture with feature modules
• 🎨 Kendo UI for Angular — Grid, ListView, DropDowns, Inputs, Notifications, Loader
• ⚡ RxJS — async pipelines for search and HTTP
• 🧠 NGXS — centralized state (with storage, logger & devtools plugins)
• 🎯 TypeScript · 🧵 SCSS

💡 Key Features & Angular Concepts

🔑 Feature	🧩 Implementation Detail
🗂️ UI Grid / List	Kendo UI Grid & ListView – responsive, paginated task list
🧱 Reusable UI Components	Kendo Grid, DropDown, Labels, Inputs, Card, DateRange, TextArea – wrapped as shared widgets
🔍 Real-time Search	RxJS async pipelining + async pipe for optimized search
🧪 Status-based Filtering	TaskFilterPipe – dynamically filters tasks by status
🎨 Dynamic Styling	StatusColorDirective – applies conditional styling on the status field
📝 Form Validation	Reactive Forms in TaskAddComponent & TaskEditComponent
⏳ Global Loader	LoaderInterceptor – displays a loader on all HTTP requests
🧭 Routing & Navigation	Angular Router: /, /add, /view/:id, /edit/:id
🧠 State Management	NGXS – centralized state with selectors & actions, persisted via the storage plugin
📱 Responsive Design	SCSS with Kendo UI – mobile-friendly, responsive layout

🏗️ Architecture

flowchart LR
    C["Components<br/>list · add · edit · view"] -- "dispatch actions" --> S["NGXS Store<br/>TasksState"]
    S -- "selectors (Observables)" --> C
    S -- "calls" --> SV["TasksService<br/>HttpClient"]
    SV -- "REST" --> API[("Mock REST API<br/>mockapi.io")]
    I["LoaderInterceptor"] -. "wraps every request" .- SV
    S -. "storage plugin" .-> LS[("localStorage")]

Loading

🔁 What happens when you add a task

sequenceDiagram
    participant F as TaskAddComponent (Reactive Form)
    participant St as NGXS Store
    participant Sv as TasksService
    participant L as LoaderInterceptor
    F->>St: dispatch(CreateTask)
    St->>Sv: createTask(task)
    Sv->>L: HTTP POST
    L-->>L: show global loader
    L->>Sv: response
    L-->>L: hide loader
    Sv-->>St: created task
    St-->>F: state updated → grid re-renders via selector

Loading

🗃️ Data Model & API

Every task follows this shape (tasks.model.ts):

Field	Type	Notes
id	string	Generated by the API
title	string	Required
description	string
status	string	Pending · In Progress · Completed
priority	string	Low · Medium · High
startDate / endDate	string	Picked with the Kendo date range
assigned	string	Who owns the task

Status colours applied by StatusColorDirective: 🔴 Pending · 🔵 In Progress · 🟢 Completed

📡 REST endpoints used by TasksService

The demo talks to a mock REST API hosted on mockapi.io (base URL in environment.ts).

NGXS action	HTTP	Endpoint
ReadTasks	GET	/tasks
CreateTask	POST	/tasks
UpdateTask	PUT	/tasks/:id
DeleteTask	DELETE	/tasks/:id

To use your own backend, point tasksApiUrl in environment.ts at any API that returns the same task shape.

🛠️ Setup Instructions

Make sure you have the Angular CLI installed globally. If not, run npm install -g @angular/cli.

1. Clone the repository

   git clone https://github.com/Shariq2003/TMS.git
   cd TMS

2. Install dependencies

   npm install

3. Start the development server

   ng serve

4. Visit the app at http://localhost:4200

⚙️ Configuration

The API base URL lives in one place — src/environments/environment.ts. Change tasksApiUrl there to run TMS against your own backend (it must support GET, POST, PUT /:id and DELETE /:id).

📁 Project Structure

Expand tree

src/
├── environments/environment.ts   # tasksApiUrl (API config)
└── app/
    ├── interceptors/                 # LoaderInterceptor
    ├── shared/widgets/               # Kendo wrappers: button, card, daterange, dropdown,
    │                                 # error, grid, input, label, loader, textarea
    └── tasks/
        ├── components/               # task-list · task-add · task-edit · task-view
        ├── directives/               # StatusColorDirective
        ├── pipes/                    # TaskFilterPipe
        ├── services/                 # tasks · loader · notification
        └── store/                    # NGXS actions · models · states

🙌 Acknowledgements

• 👩‍💻 Yashi – for collaborating across modules and features
• 👨‍🏫 Guddu Sir – for mentoring and reviewing the project architecture
• 👩‍💼 Vijeta Ma'am – for project supervision and strategic feedback

📚 Lessons Learned

This project taught us how to:

• Design modular, maintainable Angular applications
• Use Kendo UI effectively with custom components
• Apply NGXS for clean and scalable state management
• Optimize user experience with loaders, interceptors, and dynamic filters

---

Built with ❤️ by Shariq and team · LinkedIn

⭐ If you like this project, consider giving it a star!