Support Operations — Full-Stack Engineering Case Study

The original fictional support-ticket module stores data in memory and resets on reload. That demonstrates interface behavior but cannot show durable application state or server authorization. I added a separate work-order module backed by the Spring API and PostgreSQL, preserving the ticket demonstration.

Angular → typed HTTP services / same-origin development proxy → Spring Security → Spring Boot controllers and services → Spring Data JPA → PostgreSQL.

Angular owns routes, RxJS-based HTTP handling, reactive forms, loading/error states and session presentation. Spring owns authorization, REST validation, filtering, pagination and status changes. JPA maps work-order entities; PostgreSQL is the authoritative store. The development proxy connects the local browser and API through one origin.

The work-order list uses server-driven status/priority filters and pagination. Detail routes retrieve persisted records. A reactive create form checks inputs for usability; independent backend validation protects data integrity and returns field errors for the UI to display.

Typed request/response handling makes the HTTP contract explicit. Loading, empty and error states keep failures understandable. Authenticated local users can create orders and update status, then reload to retrieve the saved data. Failed mutations are not automatically retried because an ambiguous response could hide a completed write.

Automated verification combines Maven/JUnit and Spring Boot tests, real PostgreSQL integration testing with Testcontainers and Angular unit tests. Playwright drives real Chromium against actual Angular, Spring Boot and PostgreSQL; the browser workflow is not mocked.

Acceptance covers creation, validation, status changes, reload/session restoration, inactivity expiration and logout. Independent SQL assertions confirm persistence and rejected-write behavior. Release build/security gates check that local authentication and mutation controls are absent. GitHub Actions runs CI verification across these layers.

The result is a functioning full-stack demonstration with source, architecture and automated evidence. It uses single-user development authentication and has no demonstrated commercial scale. Production Flyway adoption requires separate approval.

The public Angular frontend demonstrates the fictional ticket UI; the newer integrated work-order workflow is available only in the local demonstration. The separate public API exposes GET data and existing Basic-protected write endpoints for API clients.