Text-to-Speech Serverless App — Phase 4: Frontend Integration & Retrieval

Phase 4 closes the loop: users can submit text, wait for processing, and play back the synthesized audio — all from the React frontend.

What I Built

1. Retrieval Lambda — A third Lambda function behind API Gateway. It queries DynamoDB by user ID, validates the Cognito JWT token, and returns the translated text and S3 audio URL.
2. Frontend submission flow — Connected the React form to the submission API. On submit, the frontend sends a POST with the JWT token in the Authorization header. API Gateway validates the token via the Cognito authorizer before the request reaches Lambda.
3. Results panel — Added a retrieval UI: the user clicks "Retrieve Results," the frontend calls the retrieval endpoint, and the response populates a list of translated texts with an HTML5 audio player for each S3 URL.

Full End-to-End Flow

1. Log in → Cognito issues JWT
2. Submit text + language → API Gateway → Lambda → DynamoDB + SNS
3. SNS → Processing Lambda → Translate → Polly → S3 + DynamoDB update
4. Retrieve → Lambda queries DynamoDB → React renders text + audio player

At this point the application is fully functional. Phase 5 transitions the infrastructure to Terraform.