International Journal of Advanced Research in Computer and Communication Engineering

Abstract: Manual cloud infrastructure management leads to environment inconsistencies, deployment errors, and significant operational overhead. Existing productivity timer applications suffer from poor visual engagement and lack modern deployment practices. This paper presents Focus Timer, a React 19 web application with a glassmorphic interface, adaptive time-of-day theming, and SVG-based circular progress visualization, deployed to AWS ECS Fargate through a fully automated pipeline using Docker and AWS CloudFormation.

The multi-stage Docker build produces a production image of approximately 25 MB. The Vite 7 build generates a gzipped bundle under 50 KB with sub-second page load. CloudFormation templates reproducibly provision an ECS Cluster, IAM Execution Role, and Fargate Task Definition across any AWS region. Automated PowerShell scripts complete the full pipeline from source to running cloud service in under six minutes, eliminating all manual console steps. All 20 functional test cases passed across Chrome, Firefox, Edge, and Safari.

Keywords: React 19, Vite 7, AWS CloudFormation, Docker, ECS Fargate, Infrastructure-as-Code, Glassmorphism, SVG Animations, ECR.

Downloads: | DOI: 10.17148/IJARCCE.2026.15304