A full-stack Project Management and Kanban Board application built with Angular and .NET 8 Web API. The system enables administrators to manage projects and tasks while allowing developers to track their assigned work through an interactive Kanban board.
ProjectManagementPortal/
│
├── backend/
│ ├── ProjectManagement.API/ # ASP.NET Core Web API
│ ├── ProjectManagement.Business/ # Business Logic & Services
│ ├── ProjectManagement.DataAccess/ # EF Core, Repositories & DbContext
│ ├── ProjectManagement.Entity/ # Entities, DTOs & Enums
│ ├── ProjectManagement.sln
│ └── Dockerfile
│
├── frontend/
│ ├── src/
│ │ ├── app/
│ │ │ ├── core/ # Guards, Interceptors & Services
│ │ │ ├── features/ # Feature Modules/Components
│ │ │ ├── shared/ # Shared Components & Utilities
│ │ │ └── layouts/ # Layout Components
│ │ ├── assets/
│ │ └── environments/
│ ├── package.json
│ └── angular.json
│
├── docs/
│ ├── TaskManagementPortal.postman_collection.json
│ └── api-tests.http
│
└── README.md
- JWT Authentication & Authorization
- Role-Based Access Control (Admin / Developer)
- Project CRUD Operations
- Task CRUD Operations
- Kanban Board
- Drag & Drop Task Status Updates
- Project Member Assignment
- Dashboard Statistics
- Form Validation
- Toast Notifications
- Responsive UI
Admin
- Full Project CRUD
- Full Task CRUD
- Assign developers to projects
- Assign developers to tasks
- View all projects
Developer
- View assigned projects
- View assigned tasks
- Update task status
- Cannot create, edit or delete projects
- Angular 17+
- TypeScript
- Standalone Components
- Angular Router
- Lazy Loading
- RxJS
- Reactive Forms
- Angular CDK Drag & Drop
- HTTP Interceptor
- Route Guards
- Tailwind CSS
- Standalone Component Architecture
- Feature-based folder structure
- Lazy-loaded routes
- JWT Authentication
- BehaviorSubject-based state management
- Async Pipe usage
- Custom Form Validators
- Responsive UI
- Toast notifications
- Loading indicators
- Empty state components
- ASP.NET Core 8 Web API
- Entity Framework Core
- SQL Server
- JWT Authentication
- Mapster
- Serilog
- Docker
The backend follows a classic N-Tier Architecture.
API
│
Business
│
DataAccess
│
Entity
- Layered Architecture
- Generic Repository Pattern
- Service Layer
- DTO Mapping with Mapster
- Repository Pattern
- Role-Based Authorization
- Global Exception Handling
- Structured Logging (Serilog)
- Automatic Seed Data
- Docker Support
- .NET 8 SDK
- Node.js (18.19+ or 20+)
- Angular CLI 17+
- SQL Server (or LocalDB)
Navigate to the API project.
cd backend/ProjectManagement.APIConfigure your connection string inside:
appsettings.json
Run the API.
dotnet runThe database is automatically created and seeded using EnsureCreated().
Swagger is available at:
https://localhost:7176/swagger
Navigate to the backend directory.
cd backendBuild Docker image.
docker build -t project-management-api .Run container.
docker run -d -p 8080:8080 --name pm-api project-management-apiSwagger:
http://localhost:8080/swagger
Navigate to frontend.
cd frontendInstall packages.
npm installRun application.
npm startor
ng serveApplication:
http://localhost:4200
The project includes multiple ways to test the API.
/swagger
docs/
└── TaskManagementPortal.postman_collection.json
Import the collection into Postman.
markdowns/
└── api-tests.http
The application automatically seeds test data.
Email: admin@test.com
Password: test1234
Email: dev@test.com
Password: test1234
Additional developer accounts are also generated during seeding.
Serilog writes logs to:
logs/
└── log-.txt
Logs are rolled daily.
The backend includes a production-ready Dockerfile.
Build:
docker build -t project-management-api .Run:
docker run -d -p 8080:8080 project-management-api- JWT authentication is required for protected endpoints.
- The database is automatically created and seeded on first run.
- The frontend API URL can be configured through the Angular environment files.
- The project is intended as a technical assessment demonstrating clean architecture principles, maintainability, and modern full-stack development practices.