A full-stack Project Management and Kanban Board application built with Angular and .NET Core 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/
│ ├── ProjectManagement.Business/
│ ├── ProjectManagement.DataAccess/
│ ├── ProjectManagement.Entity/
│ ├── ProjectManagement.sln
│ └── Dockerfile
│
├── frontend/
│ ├── src/
│ │ ├── app/
│ │ │ ├── core/
│ │ │ ├── features/
│ │ │ ├── shared/
│ │ │ └── layouts/
│ │ ├── 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.