A responsive, component-driven Task Management System built using Angular, Kendo UI, RxJS, and NGXS to streamline task workflows with clean architecture, real-time search, and reusable UI patterns.
- ⚙️ Angular
- 🎨 Kendo UI
- ⚡ RxJS
- 🧠 NGXS
- 🎯 TypeScript
- 🧵 SCSS
| 🔑 Feature | 🧩 Implementation Detail |
|---|---|
| 🗂️ UI Grid / List | Kendo UI Grid & ListView – responsive, paginated task list |
| 🧱 Reusable UI Components | Kendo Grid, DropDown, Labels, Inputs – modular & reusable |
| 🔍 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 status field |
| 📝 Form Validation | Reactive Forms in TaskAddComponent & TaskEditComponent |
| ⏳ Global Loader | LoaderInterceptor – displays loader on all HTTP requests |
| 🧭 Routing & Navigation | Angular Router: /, /add, /view/:id, /edit/:id |
| 🧠 State Management | NGXS – centralized state with selectors & actions |
| 📱 Responsive Design | SCSS with Kendo UI – mobile-friendly, responsive layout |
- 👩💻 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
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.
To run this project locally, follow these steps:
- Clone the repository
git clone https://github.com/Shariq2003/TMS.git
cd TMS- Install dependencies
npm install- Start the development server
ng serve- Visit the app in your browser
http://localhost:4200
Make sure you have Angular CLI installed globally. If not, run:
npm install -g @angular/cli
Happy coding! ✨