TaskFlow: Kanban Task Manager with MEAN Stack and JWT Authentication

1 Oct, 2026

TaskFlow is a full-stack Kanban task manager built on the MEAN stack (MongoDB, Express.js, Angular and Node.js). It lets people organise work into boards, lists and cards, drag tasks between columns and keep everything private behind JWT authentication.

A complete, production-style MEAN stack example: secure authentication, a clean REST API, optimistic drag and drop and a responsive dark interface.

Key features

Boards, lists and cards

Create boards for each project, add lists such as To do, In progress and Done, and manage tasks as cards with titles, descriptions and due dates.

Drag and drop

Move cards between lists with the Angular CDK. The interface updates instantly and the new order is saved to MongoDB in the background.

JWT authentication

Sign up and log in with hashed passwords. Short-lived access tokens protect every API route and an HTTP interceptor attaches them automatically.

Labels, filters and search

Tag cards with colour labels and filter or search a board to find the right task in seconds.

Responsive dark UI

Built with Tailwind CSS so boards stay readable and usable on phones, tablets and wide desktop screens.

Validation everywhere

Input is validated in Angular forms and again on the server, so bad data never reaches the database.

How it works

A user registers or logs in and the Express API returns a signed JWT.
The Angular app stores the token and a route guard keeps private pages behind a login.
Boards, lists and cards are loaded from REST endpoints backed by Mongoose models.
Dragging a card updates the local state first, then sends a small PATCH request with the new list and position.
The API checks ownership on every request, so users only ever see their own boards.

Architecture and design decisions

The project follows a clear separation between the Angular client and the Express API, which keeps each side easy to test and deploy on its own.

Feature modules in Angular for auth, boards and shared components, loaded lazily to keep the first page fast.
Mongoose schemas for users, boards and cards with indexes on the fields used by queries.
Middleware for authentication, validation and centralised error handling in Express.
Position ordering stored as numbers so reordering a card changes one document, not the whole list.

Tech stack

MongoDBDatabase
Express.jsAPI framework
AngularFrontend
Node.jsRuntime
TypeScriptLanguage
JWTAuthentication
MongooseData modelling
Tailwind CSSStyling
Angular CDKUI toolkit

What this project demonstrates

TaskFlow shows how to design a secure, well structured MEAN stack application from the data model to the user interface: token-based authentication, ownership checks, an API contract the client can rely on and a smooth drag and drop experience.