Collaborative Task Management System

Full-Stack Application with Microservices Architecture

A modern, production-ready task management platform built with NestJS microservices, React, and real-time notifications. Features comprehensive task management, user collaboration, and live updates through WebSocket connections.

🌟 Features

🎯 Core Functionality

Complete Task Management - Create, edit, assign, and track tasks with priorities and deadlines
Real-time Collaboration - Live notifications for task updates, assignments, and comments
User Authentication - Secure JWT-based authentication with refresh token rotation
Rich Dashboard - Analytics and metrics with interactive charts showing task activity
Comment System - Team collaboration through task-specific discussions
Audit Trail - Complete history tracking for all task changes

⚡ Real-time Features

WebSocket Notifications - Instant updates when tasks are created, updated, or assigned
Smart Targeting - Notifications sent only to relevant users (assignees, creators)
Toast Notifications - Non-intrusive UI feedback for all actions
Live Dashboard - Real-time metrics and activity charts

🎨 Modern UI/UX

Professional Design - Built with shadcn/ui and Tailwind CSS
Responsive Layout - Optimized for desktop and mobile devices
Interactive Components - Advanced data tables with sorting, filtering, and pagination
Accessible Design - ARIA compliant with keyboard navigation support

🏗️ Architecture

System Overview

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│                 │    │                 │    │                 │
│   Frontend      │    │   API Gateway   │    │   Auth Service  │
│   (React +      │◄──►│   (NestJS)     │◄──►│   (NestJS)     │
│   TanStack)     │    │   Port: 3001    │    │   Port: 3002    │
│   Port: 3000    │    │                 │    │   TCP Service   │
│                 │    │                 │    │                 │
└─────────────────┘    └─────────────────┘    └─────────────────┘
                                │
                                │ HTTP Routing
                                ▼
                       ┌─────────────────┐    ┌─────────────────┐
                       │                 │    │                 │
                       │  Tasks Service  │    │ Notifications   │
                       │   (NestJS)     │◄──►│   Service       │
                       │   Port: 3003    │    │   (NestJS)     │
                       │   TCP Service   │    │   Port: 3004    │
                       │                 │    │   WebSocket     │
                       └─────────────────┘    └─────────────────┘
                                │                       │
                                │                       │
                                ▼                       ▼
┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│                 │    │                 │    │                 │
│   PostgreSQL    │    │    RabbitMQ     │    │   Rate Limiting │
│   Database      │    │   Message Broker│    │   (10 req/sec) │
│   Port: 5432    │    │   Port: 5672    │    │   Throttler     │
│   UUID Support  │    │   Management UI │    │                 │
│                 │    │   Port: 15672   │    │                 │
└─────────────────┘    └─────────────────┘    └─────────────────┘

Communication Patterns

Synchronous Communication - HTTP/TCP for user-facing operations requiring immediate responses
Asynchronous Communication - RabbitMQ for background events and real-time notifications
WebSocket Connections - Real-time bidirectional communication for live updates

🚀 Tech Stack

Backend

NestJS - Progressive Node.js framework with TypeScript
PostgreSQL - Robust relational database with UUID support
RabbitMQ - Message broker for event-driven architecture
TypeORM - Database ORM with migration support
Passport JWT - Authentication strategy with token management
Socket.IO - Real-time WebSocket communication

Frontend

React 19 - Modern UI library with hooks
TanStack Router - Type-safe routing solution
shadcn/ui - High-quality component library
Tailwind CSS - Utility-first CSS framework
TanStack Query - Server state management
React Hook Form + Zod - Form handling with validation
Sonner - Toast notification system

Infrastructure

Docker Compose - Container orchestration
Turborepo - Monorepo build system
TypeScript - End-to-end type safety
Swagger/OpenAPI - API documentation

📋 Quick Start

Prerequisites

Node.js 20+ with pnpm
Docker and Docker Compose
Git

Installation

Clone the repository

git clone https://github.com/your-username/collaborative-task-management.git
cd collaborative-task-management

Install dependencies
```
pnpm install
```
Start infrastructure services
```
docker-compose up -d
```

Set up environment variables

# Copy example environment files
cp apps/auth-service/.env.example apps/auth-service/.env
cp apps/tasks-service/.env.example apps/tasks-service/.env
cp apps/notifications-service/.env.example apps/notifications-service/.env
cp apps/api-gateway/.env.example apps/api-gateway/.env
cp apps/web/.env.example apps/web/.env

Start all services
```
pnpm dev
```

Access the Application

Frontend Application: http://localhost:3000
API Gateway: http://localhost:3001
Swagger Documentation: http://localhost:3001/api/docs
RabbitMQ Management: http://localhost:15672 (guest/guest)

📚 API Documentation

Authentication Endpoints

POST /api/auth/register    # User registration
POST /api/auth/login       # User login
POST /api/auth/refresh     # Token refresh
POST /api/auth/logout      # User logout
GET  /api/auth/me          # Current user info

Task Management

POST   /api/tasks                    # Create task
GET    /api/tasks?page=1&limit=10    # List tasks with pagination
GET    /api/tasks/:id                # Get task by ID
PUT    /api/tasks/:id                # Update task
DELETE /api/tasks/:id                # Delete task
POST   /api/tasks/:id/assign         # Assign users to task
GET    /api/tasks/:id/history        # Task change history

Comments & Collaboration

POST   /api/tasks/:taskId/comments              # Create comment
GET    /api/tasks/:taskId/comments?page=1&limit=10  # List comments

Real-time Notifications

GET    /api/notifications?page=1&limit=10       # List notifications
PUT    /api/notifications/:id/read              # Mark as read
PUT    /api/notifications/read-all             # Mark all as read

WebSocket Connection: ws://localhost:3004

const socket = io("http://localhost:3004");
socket.emit("authenticate", {
  userId: "user-uuid",
  token: "jwt-access-token",
});
socket.on("notification", (notification) => {
  // Handle real-time notification
});

🔧 Development

Project Structure

├── apps/
│   ├── api-gateway/          # HTTP gateway and routing
│   ├── auth-service/         # Authentication microservice
│   ├── tasks-service/        # Task management microservice
│   ├── notifications-service/ # Real-time notifications
│   └── web/                  # React frontend application
├── packages/
│   ├── types/                # Shared TypeScript types
│   ├── utils/                # Common utilities
│   ├── exceptions/           # Shared exception classes
│   ├── tsconfig/             # TypeScript configurations
│   └── eslint-config/        # ESLint rules
└── docker-compose.yml        # Infrastructure services

Available Scripts

# Development
pnpm dev              # Start all services in development mode
pnpm build            # Build all packages and applications
pnpm lint             # Run ESLint across all workspaces
pnpm test             # Run tests in all packages
pnpm type-check       # TypeScript type checking
pnpm clean            # Clean build artifacts

# Individual services
cd apps/auth-service && pnpm start:dev     # Auth service only
cd apps/tasks-service && pnpm start:dev    # Tasks service only
cd apps/notifications-service && pnpm start:dev  # Notifications only
cd apps/web && pnpm dev                    # Frontend only

🏢 Architecture Decisions

Microservices Design

Separation of Concerns - Each service handles a specific domain
Independent Scaling - Services can be scaled based on demand
Technology Flexibility - Different services can use different technologies
Fault Isolation - Failures in one service don't affect others

Communication Strategy

HTTP/TCP for Synchronous - Immediate responses for user actions
RabbitMQ for Events - Asynchronous processing for background tasks
WebSocket for Real-time - Live updates without polling

Security Implementation

JWT Authentication - Stateless authentication with refresh tokens
Rate Limiting - Protection against abuse (10 req/sec)
UUID Primary Keys - Enhanced security and privacy
Input Validation - Comprehensive validation with class-validator

🌍 Deployment

Production Considerations

Environment Variables - All secrets managed through environment configuration
Database Migrations - Automated schema updates with TypeORM
Health Checks - Built-in health monitoring for all services
Logging - Structured logging for observability
Error Handling - Comprehensive error management with proper HTTP status codes

Docker Deployment

# Production build
docker-compose -f docker-compose.prod.yml up -d

# Scale specific services
docker-compose -f docker-compose.prod.yml up -d --scale tasks-service=3

📊 Features Showcase

Dashboard Analytics

Real-time Metrics - Live task completion rates and team productivity
Interactive Charts - Task activity over time with filtering options
Key Performance Indicators - Total tasks, completion rates, overdue alerts

Task Management

Rich Editor - Full-featured task creation with priorities and deadlines
Assignment System - Multi-user task assignment with notifications
Status Tracking - Visual progress indicators and status updates
History Audit - Complete audit trail for all changes

Collaboration Tools

Real-time Comments - Team discussions on individual tasks
Live Notifications - Instant updates for all team members
User Management - Team member profiles and permissions

🤝 Contributing

This project demonstrates modern full-stack development practices including:

Microservices Architecture with proper service boundaries
Event-Driven Design using message queues
Real-time Communication with WebSocket
Type Safety across the entire stack
Modern React Patterns with hooks and context
Professional UI/UX with component libraries
Comprehensive Testing strategies
Production-Ready deployment configuration

📄 License

This project is open source and available under the MIT License.

Built with ❤️ using modern technologies and best practices for scalable web applications.

Name		Name	Last commit message	Last commit date
Latest commit History 84 Commits
apps		apps
packages		packages
.dockerignore		.dockerignore
.gitignore		.gitignore
README.md		README.md
README_pt_br.md		README_pt_br.md
docker-compose.yml		docker-compose.yml
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
turbo.json		turbo.json

Folders and files

Latest commit

History

Repository files navigation

Collaborative Task Management System

🌟 Features

🎯 Core Functionality

⚡ Real-time Features

🎨 Modern UI/UX

🏗️ Architecture

System Overview

Communication Patterns

🚀 Tech Stack

Backend

Frontend

Infrastructure

📋 Quick Start

Prerequisites

Installation

Access the Application

📚 API Documentation

Authentication Endpoints

Task Management

Comments & Collaboration

Real-time Notifications

🔧 Development

Project Structure

Available Scripts

🏢 Architecture Decisions

Microservices Design

Communication Strategy

Security Implementation

🌍 Deployment

Production Considerations

Docker Deployment

📊 Features Showcase

Dashboard Analytics

Task Management

Collaboration Tools

🤝 Contributing

📄 License

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages