A modern, high-performance task management interface built with Angular 21. This project is fully containerized with Docker and optimized for production using Nginx as a reverse proxy to bridge cross-environment communication.
| Technology | Purpose |
|---|---|
| Angular 21 | Frontend Framework (Standalone Components) |
| Vitest | High-performance Unit Testing & Mocking |
| Docker | Containerization for consistent environments |
| Nginx | Production Web Server & API Reverse Proxy |
This project implements a sophisticated Cross-Environment Bridge. It allows the Frontend (running in WSL/Linux) to communicate seamlessly with the Backend (running in Windows via Laravel Sail).
- Nginx Reverse Proxy: Configured to route all
/api/*traffic to the backend service, effectively bypassing CORS limitations. - Multi-stage Build: Utilizes Node 20 for building and Nginx Alpine for serving, ensuring a minimal production image footprint.
- Docker Networking: Integrated with external Sail networks to ensure container-to-container connectivity across OS boundaries.
- Dynamic Task Board: Real-time task listing with status indicators (Pending, In Progress, Completed).
- Debounced API Search: High-performance dashboard search that optimizes server load by debouncing API calls.
- Task Attachments: Seamless support for adding and managing file attachments directly within tasks.
- Smart Commenting: A full comment system that automatically toggles visibility based on the task's state.
- Robust Testing: 100% logic coverage using Vitest, featuring advanced global mocks for
localStorageandURLconstructors. - Production Ready: Zero-config deployment via Docker Compose.
- Docker & Docker Compose
- Laravel Backend (Sail) running on the same host
- Clone the repository to your local machine.
- Navigate to the project directory in your WSL terminal:
cd task-manager-frontend - Spin up the containerized environment:
docker compose up --build -d
- Access the application at http://localhost:4200.
- Navigate to the project directory in your WSL terminal:
npm test
Tests include: Authentication flows, Task CRUD operations, and Comment logic.
This project demonstrates expertise in:
- Advanced DevOps: Solving WSL DNS resolution and Docker networking challenges.
- State Management: Handling asynchronous data streams with RxJS in Angular.
- Security: Implementing Nginx headers for secure production serving.
Developed with focus on scalability and clean code.