Task Management System

A full-stack task management application built with Angular 19, NestJS 11, and TypeORM. Features include organization-based multi-tenancy, role-based access control, real-time task tracking, and a beautiful dark mode interface.

🚀 Features

• Multi-tenancy: Organization-based isolation with hierarchical support
• Role-Based Access Control: OWNER, ADMIN, and VIEWER roles with granular permissions
• Task Management: Drag-and-drop Kanban board with optimistic UI updates
• Priority System: Visual priority indicators (LOW, MEDIUM, HIGH) with color-coded borders
• Real-time Visualization: Animated bar charts with instant reactivity on task status changes
• Dark Mode: System-aware theme with persistent preferences
• Keyboard Shortcuts: Power user features (N - New task, / - Search, T - Toggle theme, ? - Help)
• Search & Filtering: Real-time task filtering by category, priority, and text search
• Audit Logging: Comprehensive activity tracking for compliance
• Demo Users: Pre-seeded demo accounts for quick testing
• Production Ready: Deployed on Fly.io (backend) and Vercel (frontend)

📋 Table of Contents

• Quick Start
• Production Deployment
• Architecture Overview
• Data Model
• Access Control
• Development
• Testing
• Future Considerations

🎯 Quick Start

Prerequisites

• Node.js: >= 20.0.0 (Download)
• npm: >= 10.0.0 (comes with Node.js)

🔄 Automatic Version Checking: This project includes automatic Node.js and npm version verification. When you run npm run dev, it will check your versions and attempt to update npm if needed. See VERSION-MANAGEMENT.md for details.

Installation

1. Clone the repository

   git clone <repository-url>
   cd akalaria-a8c990d8-90ca-4578-9c37-89cd3aebbada

2. Check/Update your versions (optional - runs automatically with npm run dev)

   npm run check-versions

3. Install dependencies

   npm install

   Note: If you encounter dependency resolution errors, try:

   npm install --legacy-peer-deps

4. Start the development servers

   npm run dev

   This starts both the API (port 3000) and Dashboard (port 4200) concurrently.

   Alternative: If npm run dev fails, start servers separately:

   # Terminal 1 - Start API
   npm run dev:backend
   
   # Terminal 2 - Start Dashboard
   npm run dev:frontend

5. Seed demo users (optional)

   # In a new terminal
   curl -X POST http://localhost:3000/api/auth/seed-demo-users
   # Or using PowerShell
   Invoke-RestMethod -Uri "http://localhost:3000/api/auth/seed-demo-users" -Method Post

Demo Accounts

After seeding, you can login with:

Email	Password	Role
owner@demo.com	password123	OWNER
admin@demo.com	password123	ADMIN
viewer@demo.com	password123	VIEWER

Access the Application

• Frontend: http://localhost:4200
• API: http://localhost:3000/api
• API Docs: See API-DOCS.md

� Production Deployment

The application is deployed and accessible at:

• Live Application: https://task-management-dashboard-six-flax.vercel.app
• Backend API: https://task-management-api-winter-violet-148.fly.dev
• Deployment Guide: See DEPLOYMENT.md

Deployment Architecture

• Frontend: Deployed on Vercel with automatic deployments from GitHub
• Backend: Deployed on Fly.io using Docker containers
• Database: SQLite (persistent volume on Fly.io)
• CI/CD: Automatic deployments on push to main branch

Environment Configuration

The application uses environment-based configuration:

• Development: apps/dashboard/src/environments/environment.ts (localhost API)
• Production: apps/dashboard/src/environments/environment.prod.ts (Fly.io API)

Angular's build process automatically swaps environment files based on the --configuration flag.

Version Management

The project includes automatic Node.js and npm version checking:

• Required: Node.js >= 20.0.0, npm >= 10.0.0
• Auto-update: Runs npm run check-versions before dev server starts
• Details: See VERSION-MANAGEMENT.md

This ensures all developers and CI/CD environments use compatible versions.

�🏗️ Architecture Overview

Technology Stack

Frontend (Dashboard)

• Framework: Angular 19 with standalone components
• State Management: Angular Signals (built-in reactive primitives)
• Styling: TailwindCSS with dark mode support
• HTTP Client: RxJS-based HttpClient
• Drag & Drop: Angular CDK
• Build: Nx with esbuild

Backend (API)

• Framework: NestJS 11
• ORM: TypeORM with SQLite
• Authentication: JWT with Passport
• Validation: class-validator & class-transformer
• Security: bcrypt for password hashing

Monorepo Management

• Tool: Nx 22.3.3
• Structure: Apps (api, dashboard) and Libs (auth, data)
• Benefits: Code sharing, consistent tooling, efficient builds

Architecture Rationale

Why Angular Signals?

• No External State Library: Leverages Angular 19's built-in reactivity
• Fine-grained Updates: Only re-renders what changed
• Type Safety: Full TypeScript support
• Performance: Better than traditional Zone.js change detection
• Simplicity: Less boilerplate than NgRx or Akita

Why NestJS?

• TypeScript-first: End-to-end type safety
• Modular Architecture: Clean separation of concerns
• Dependency Injection: Testable and maintainable code
• Ecosystem: Built-in support for TypeORM, JWT, validation

Why Nx Monorepo?

• Code Sharing: Common models and utilities
• Consistent Tooling: Same build, test, and lint tools
• Task Caching: Faster builds with computation caching
• Scalability: Easy to add new apps and libraries

Project Structure

akalaria-a8c990d8-90ca-4578-9c37-89cd3aebbada/
├── apps/
│   ├── api/                          # NestJS backend
│   │   └── src/
│   │       ├── app/                  # Core app module
│   │       ├── auth/                 # Authentication module
│   │       ├── tasks/                # Task management module
│   │       ├── audit/                # Audit logging module
│   │       ├── entities/             # TypeORM entities
│   │       ├── interceptors/         # HTTP interceptors
│   │       └── main.ts               # Application entry point
│   │
│   └── dashboard/                    # Angular frontend
│       └── src/
│           └── app/
│               ├── components/       # UI components
│               ├── models/           # TypeScript interfaces
│               ├── services/         # Business logic services
│               └── app.config.ts     # App configuration
│
├── libs/
│   ├── auth/                         # Shared auth utilities
│   └── data/                         # Shared data models (Role enum)
│
├── data.db                           # SQLite database
├── audit.log                         # Audit log file
└── package.json                      # Dependencies and scripts

📊 Data Model

Entity Relationship Diagram

┌─────────────────┐       ┌──────────────────────┐       ┌─────────────────┐
│  Organization   │       │  UserOrganization    │       │      User       │
├─────────────────┤       ├──────────────────────┤       ├─────────────────┤
│ id (PK)         │◄─────┤│ organizationId (FK)  │──────►│ id (PK)         │
│ name            │       │ userId (FK)          │       │ email (unique)  │
│ parentOrgId(FK) │       │ role (enum)          │       │ passwordHash    │
│ createdAt       │       │ createdAt            │       │ firstName       │
│ updatedAt       │       └──────────────────────┘       │ lastName        │
└─────────────────┘                 │                    │ createdAt       │
        │                           │                    │ updatedAt       │
        │                           │                    └─────────────────┘
        │                           │                            │
        │                           │                            │
        │                           ▼                            │
        │                 ┌──────────────────┐                  │
        │                 │   AuditLog       │                  │
        │                 ├──────────────────┤                  │
        │                 │ id (PK)          │                  │
        │                 │ userId (FK)      │──────────────────┘
        │                 │ email            │
        │                 │ action           │
        │                 │ resource         │
        │                 │ details          │
        │                 │ timestamp        │
        │                 └──────────────────┘
        │
        │
        ▼
┌─────────────────────────┐
│         Task            │
├─────────────────────────┤
│ id (PK)                 │
│ organizationId (FK)     │
│ title                   │
│ description             │
│ status (enum)           │
│ priority (enum)         │
│ category                │
│ dueDate                 │
│ createdBy (FK)          │
│ createdAt               │
│ updatedAt               │
└─────────────────────────┘

Entity Descriptions

User

Represents system users who can belong to multiple organizations.

• Unique Constraint: Email (prevents duplicate accounts)
• Security: Passwords hashed with bcrypt (10 rounds)
• Relations: Many-to-many with Organizations through UserOrganization

Organization

Represents isolated workspaces for task management.

• Hierarchical: Supports parent-child relationships (future feature)
• Isolation: All tasks scoped to organization
• Created On: User registration (personal org) or manual creation

UserOrganization (Join Table)

Maps users to organizations with their roles.

• Composite Key: (userId, organizationId)
• Role: Enum - OWNER, ADMIN, or VIEWER
• Purpose: Enables multi-tenancy and RBAC

Task

Core entity representing work items.

• Scoped: Always belongs to an organization
• Status: TODO → IN_PROGRESS → DONE (workflow)
• Priority: LOW, MEDIUM, HIGH (visual indicators)
• Audit Trail: createdBy, createdAt, updatedAt

AuditLog

Immutable record of all system actions.

• Purpose: Compliance, debugging, security monitoring
• Storage: Both database and file system (audit.log)
• Retention: Indefinite (consider rotation policy)

Data Flow Example

Creating a Task:

1. User authenticates → JWT includes organizations array
2. Frontend sends POST /api/tasks with task data
3. JwtAuthGuard validates token → extracts user from payload
4. TasksController receives request + authenticated user
5. TasksService validates user has permission in organization
6. Task created with organizationId from user's first org
7. AuditLog entry created (userId, action, resource)
8. Response sent with created task

🔐 Access Control

Role-Based Access Control (RBAC)

The system implements organization-scoped RBAC with three roles:

Role Hierarchy

OWNER (Full Control)
  ↓
ADMIN (Management)
  ↓
VIEWER (Read-Only)

Permission Matrix

Feature	OWNER	ADMIN	VIEWER
View tasks	✅	✅	✅
Create tasks	✅	✅	❌
Edit tasks	✅	✅	❌
Delete tasks	✅	✅	❌
Manage users	✅	✅	❌
Org settings	✅	❌	❌
Delete org	✅	❌	❌

Implementation Details

JWT Payload Structure

{
  sub: "user-uuid",
  email: "user@example.com",
  organizations: [
    { orgId: "org-uuid", role: "OWNER" }
  ],
  iat: 1234567890,
  exp: 1234567890
}

Guard Implementation

@UseGuards(JwtAuthGuard)  // Validates JWT and extracts user
export class TasksController {
  @Post()
  async create(@Request() req, @Body() dto) {
    // req.user contains { userId, email, organizations }
    // Service layer validates organization membership
    return this.tasksService.create(req.user, dto);
  }
}

Organization Scoping

• All queries filtered by user's organizations
• Tasks only visible within user's organizations
• Cross-organization data leakage prevented by default

Security Measures

1. Password Security

   • Bcrypt hashing with 10 rounds
   • Passwords never returned in API responses
   • No password reset (future feature)

2. JWT Security

   • Tokens expire after 1 hour (configurable)
   • Secret stored in environment variable
   • httpOnly cookies recommended for production

3. Input Validation

   • class-validator decorators on all DTOs
   • Email format validation
   • Required field enforcement

4. Audit Trail

   • All API calls logged with user context
   • Interceptor captures request metadata
   • File-based logging for external analysis

Multi-Tenancy

Organization Isolation:

• Each user can belong to multiple organizations
• Tasks scoped to single organization
• No cross-organization queries allowed
• New users get personal organization on registration

Future Enhancement:

• Organization invitations
• User role management
• Cross-organization task sharing
• Organization hierarchies (departments)

🛠️ Development

Available Scripts

# Development
npm run dev              # Start both API and Dashboard concurrently
npm run dev:backend      # Start API only (port 3000)
npm run dev:frontend     # Start Dashboard only (port 4200)

# Building
npm run build:api        # Build API for production
nx build dashboard       # Build Dashboard for production

# Testing
npm test                 # Run all tests
npm run test:api         # Run API tests only
npm run test:dashboard   # Run Dashboard tests only
npm run test:coverage    # Run tests with coverage report

# Code Quality
nx lint api              # Lint API code
nx lint dashboard        # Lint Dashboard code

🧪 Testing

The project includes comprehensive test coverage across all critical components:

Test Coverage Summary

• API Tests: 29 tests covering authentication, RBAC, and business logic
• Dashboard Tests: 31 tests covering components and services
• Overall: 60 total tests with 100% pass rate

Test Suites

Authentication & Authorization (apps/api/src/auth/)

• auth.service.spec.ts: 9 tests
  • User validation and password verification
  • JWT token generation
  • User registration with organization creation
  • Duplicate email handling
• auth.controller.spec.ts: 8 tests
  • Login endpoint validation
  • Register endpoint validation
  • Profile retrieval
  • Organization creation

Role-Based Access Control (apps/api/src/tasks/)

• tasks.service.spec.ts: 17 tests
  • OWNER permissions: Full CRUD access
  • ADMIN permissions: Create, update, and delete tasks
  • VIEWER permissions: Read-only access with proper error handling
  • Organization hierarchy: Parent-child organization access
  • Edge cases: Users without organizations

Frontend (apps/dashboard/)

• dashboard.component.spec.ts: UI component tests
  • Task filtering by status and priority
  • Drag-and-drop functionality
  • Visual styling and priority classes
• auth.service.spec.ts: Authentication service integration
• task.service.spec.ts: Task management operations

Running Tests

# Run all tests
npm test

# API tests only
npx nx test api

# Dashboard tests only
npx nx test dashboard

# Watch mode for development
npx nx test api --watch

# Coverage report
npm run test:coverage

Key Testing Features

• Isolated Unit Tests: Mock repositories and services for fast execution
• RBAC Coverage: All role combinations tested (OWNER, ADMIN, VIEWER)
• Permission Testing: Comprehensive verification of access control rules
• Organization Hierarchy: Multi-level organization structure validation
• Error Handling: Proper exception testing for unauthorized access

Environment Setup

Create .env file in the root (if needed):

JWT_SECRET=your-secret-key-here
DATABASE_PATH=./data.db
AUDIT_LOG_PATH=./audit.log

Database

SQLite is used for simplicity and portability.

Migrations: Not currently implemented (auto-sync enabled)

• For production, disable synchronize and use TypeORM migrations

Location: ./data.db in project root

Seeding:

curl -X POST http://localhost:3000/api/auth/seed-demo-users

🧪 Testing

Test Coverage

Current Status: 31/31 tests passing

API Tests (Jest)

• Unit tests for services and controllers
• Mock dependencies with Jest
• Run: npm run test:api

Dashboard Tests (Jest + Angular Testing Library)

• Component tests
• Service tests
• Run: npm run test:dashboard

Running Tests

# All tests
npm test

# With coverage
npm run test:coverage

# Watch mode
nx test api --watch
nx test dashboard --watch

🔮 Future Considerations

Short-term Enhancements

1. Organization Management

   • Invite users to organizations
   • Transfer ownership
   • Organization settings page
   • User management UI

2. Task Features

   • Task assignments (assign to specific users)
   • Task comments/discussion
   • File attachments
   • Task templates
   • Recurring tasks

3. Notifications

   • Email notifications for task updates
   • In-app notification center
   • Push notifications (PWA)

4. Search & Filtering

   • Advanced search with operators
   • Saved filters
   • Full-text search (upgrade to PostgreSQL)

Mid-term Improvements

1. Performance

   • Implement pagination for task lists
   • Virtual scrolling for large datasets
   • Redis caching layer
   • Database indexing optimization

2. Security

   • Password reset flow
   • Two-factor authentication (2FA)
   • Session management
   • Rate limiting
   • CSRF protection

3. Scalability

   • Migrate to PostgreSQL
   • Database read replicas
   • Horizontal API scaling
   • CDN for static assets

4. Developer Experience

   • API documentation with Swagger
   • E2E tests with Playwright
   • CI/CD pipeline
   • Docker containerization

Long-term Vision

1. Real-time Collaboration

   • WebSocket integration
   • Live task updates
   • Presence indicators
   • Collaborative editing

2. Advanced Analytics

   • Task completion metrics
   • Team productivity dashboards
   • Custom reports
   • Data export

3. Integrations

   • Calendar sync (Google Calendar, Outlook)
   • Slack/Teams notifications
   • GitHub issue sync
   • Third-party app marketplace

4. Mobile Experience

   • Native mobile apps (React Native)
   • Offline support
   • Mobile-optimized UI

Technical Debt

1. Database Migrations: Currently using TypeORM auto-sync
2. Error Handling: Standardize error responses
3. Logging: Structured logging with log levels
4. Configuration: Environment-based config management
5. Documentation: API documentation with Swagger/OpenAPI

📝 License

MIT

👥 Contributing

This is a demonstration project for a coding interview. For production use, consider the future enhancements listed above.

---

Built with ❤️ using Angular, NestJS, and Nx

You can use npx nx list to get a list of installed plugins. Then, run npx nx list <plugin-name> to learn about more specific capabilities of a particular plugin. Alternatively, install Nx Console to browse plugins and generators in your IDE.

Learn more about Nx plugins » | Browse the plugin registry »

Learn more about Nx on CI

Install Nx Console

Nx Console is an editor extension that enriches your developer experience. It lets you run tasks, generate code, and improves code autocompletion in your IDE. It is available for VSCode and IntelliJ.

Install Nx Console »

Useful links

Learn more:

• Learn more about this workspace setup
• Learn about Nx on CI
• Releasing Packages with Nx release
• What are Nx plugins?

And join the Nx community:

• Discord
• Follow us on X or LinkedIn
• Our Youtube channel
• Our blog