Task Manager

A single-page Angular task manager for creating, assigning, prioritising and tracking tasks against a remote REST API.

Live demo: https://task-manager-livid-mu.vercel.app/

Features

• List tasks with message, assignee, priority and due date
• Create and edit tasks in a modal: message, assignee (loaded from the API's user list), priority (Low / Medium / High) and due date-time
• Delete tasks
• Filter by priority (All / High / Medium / Low)
• Search tasks by message text
• Sort by Newest / Oldest

Tech stack

• Angular 13.2 with Forms (ngModel) and HttpClient
• TypeScript 4.5, RxJS 7.5
• Bootstrap 3.4, jQuery and Font Awesome 4.7 (loaded from CDN in index.html)
• SCSS

Backend

All data comes from an external task API at https://devza.com/tests/tasks/ (list, create, update, delete, listusers). Requests are sent with an AuthToken header. The endpoints and token are configured in src/app/services/api.service.ts.

Getting started

Requires Node.js 12.20+ / 14 / 16 and npm.

npm install
npm start        # ng serve -> http://localhost:4200 (redirects to /task-manager)

Other scripts:

npm run build    # production build in dist/
npm test         # unit tests via Karma

Project structure

src/app/
├── services/api.service.ts      # HTTP calls to the task API
└── task-manager/                # list, filters, search, sort and create/edit modal