All Projects
Frontendintermediate
Angular TaskBoard
Full-featured task board SPA — Angular 17 + NgRx + Reactive Forms + REST API
4–6 hours10 technologies6 guided steps
About This Project
A production-quality task management SPA built with Angular 17. Features a kanban-style board with drag-and-drop columns, reactive forms for task creation, NgRx state management, lazy-loaded routes, HTTP integration with a mock REST API, and route guards for authentication.
What You'll Learn
Build a real SPA with Angular 17 standalone components
Implement NgRx Store end-to-end from actions to effects
Write reactive forms with cross-field validation
Structure a feature-based folder layout for large Angular apps
Use Angular CDK drag-and-drop for interactive UIs
Key Features
✓Kanban board with drag-and-drop columns (Todo / In Progress / Done)
✓Create, edit, and delete tasks with reactive forms and inline validation
✓NgRx Store for board state — actions, reducers, selectors, effects
✓HTTP effects call a json-server REST API for persistence
✓Lazy-loaded feature routes (board, settings, profile)
✓Auth guard protecting the board route — redirects to login
✓OnPush change detection on all components with signals for local state
✓Deferrable views for the task detail panel
Project Structure
directory tree
src/app/
├── core/
│ ├── guards/auth.guard.ts
│ ├── interceptors/auth.interceptor.ts
│ └── services/auth.service.ts
├── shared/
│ ├── components/button/
│ └── pipes/truncate.pipe.ts
└── features/
├── board/
│ ├── board.routes.ts
│ ├── store/ (actions, reducer, selectors, effects)
│ ├── components/task-card/
│ └── components/task-form/
└── auth/
└── login/Setup Guide
1
Clone the repository
Clone and install dependencies
bash
git clone https://github.com/learnixo/angular-taskboard cd angular-taskboard npm install
2
Start the mock API
json-server serves task data on port 3000
bash
npm run api
3
Start the Angular dev server
App runs on localhost:4200
bash
ng serve
Running the Project
1
Login
Use demo credentials: demo@example.com / password123
2
Create a task
Click '+ New Task', fill in the reactive form, and save. Watch NgRx DevTools to see the action flow.
3
Drag tasks between columns
Drag a task card to a different column — the status updates immediately via NgRx optimistic update.
Project Info
CategoryFrontend
Difficultyintermediate
Setup time4–6 hours
Technologies10 tools
Tech Stack
Angular 17TypeScriptNgRx StoreNgRx EffectsAngular RouterReactive FormsRxJSAngular CDK (DragDrop)TailwindCSSjson-server (mock API)
Prerequisites
- Completed the Angular course through the NgRx lesson
- Node.js 18+ and Angular CLI installed