Bug Fixes and new implementation and Cypress Qase Testing Framework

## Project Overview We have a **[login to view URL] 14 / TypeScript / Tailwind CSS** web application with an **AWS Lambda + API Gateway** backend, backed by **RDS PostgreSQL**. We have majority of code already and need to fix all known bugs, implement some missing features, work on the Lambda API locally, and build a Cypress testing framework integrated with Qase.io. The frontend is hosted on an **Ubuntu EC2 server** behind **nginx** as a reverse proxy, managed by **systemd**. All work must be submitted via **GitHub pull requests**. Figma design file will be provided for reference. --- ## Tech Stack | Layer | Technology | |---|---| | Frontend | [login to view URL] 14 (Pages Router), React 18, TypeScript, Tailwind CSS | | Backend | AWS Lambda, API Gateway (REST + WebSocket) | | Database | AWS RDS PostgreSQL | | Infrastructure | AWS CDK | | Server | Ubuntu EC2, nginx, systemd | | Auth | AWS Cognito + Google OAuth | | Testing | Cypress (open-source) + [login to view URL] | | Local dev | Node.js 20+, npm | --- ## Scope of Work ### 1. Frontend Bug Fixes & Implementations All of the following must be fixed or implemented: **Login / Account** | ID | Issue | Detail | |---|---|---| | L-1 | Login and create account are UI only — no real authentication | Implement full login and create account flows using **AWS Cognito** and **Google OAuth**. Cognito User Pool and Google OAuth app are already configured. Config values will be provided on hire | | L-2 | "Remember Me" saves email but never restores on page load | Read from localStorage on mount | | L-3 | Login submit button disabled style inconsistent | Match `disabled:opacity-50` pattern used elsewhere | | L-4 | Submitting state never resets on failure | User cannot retry without page refresh | **Translate Page** | ID | Issue | Detail | |---|---|---| | T-1 | "From Text" tab shows an Upload File button that does nothing | Remove the Upload File button from text mode entirely | | T-2 | "From Audio / Video" tab is redundant | Remove from Translate page — this functionality belongs in Transcribe & Translate only | | T-3 | "From Image / Document" tab is not implemented | Implement using the existing document-translation Lambda — wire the upload to the backend and display translated output | **Transcribe Page** | ID | Issue | Detail | |---|---|---| | TR-1 | Transcribe & Translate mode does not actually translate | Fix translation step so output includes translated text | | TR-2 | After clicking Translate, upload zone should be replaced by a media playback frame | Once file is processed, swap the drag-and-drop upload area with an embedded audio/video player showing the uploaded file | **Captioning Page** | ID | Issue | Detail | |---|---|---| | C-1 | Captioning Lambda does not exist | Build the captioning Lambda and wire it to the existing frontend Captioning page, or confirm with us whether to scope as mock-only | **AI Interpretation Page** | ID | Issue | Detail | |---|---|---| | AI-1 | Microphone input not working | Implement live mic capture and stream to interpretation service | | AI-2 | End Session does not clear transcript columns | Text from previous session persists into next session | **Text to Speech Page** | ID | Issue | Detail | |---|---|---| | TTS-1 | Text to Speech not working | Implement full TTS flow — input text, select voice, generate and play audio | **General** | ID | Issue | Detail | |---|---|---| | G-1 | Human review flag collected in UI but never sent to API | Wire existing state into the API call | | G-2 | Cypress intercepts always active even against real staging backend | Make conditional on env var | | G-3 | Copy button uses deprecated `[login to view URL]` fallback | Degrade gracefully | --- ### 2. Local Development — Frontend + Lambda - Confirm local frontend and all Lambda functions run correctly on your machine - Lambda connects to **RDS PostgreSQL** — local setup must handle the database connection for local development - You are **not** required to deploy to AWS yourself — we handle all deployments - All required environment variables must be documented in both `frontend/.[login to view URL]` and `backend/.[login to view URL]` including Cognito, Google OAuth, and database config - README must include complete local setup instructions for both frontend and Lambda - README must include **systemd service setup** so the [login to view URL] process survives server restarts on the EC2 instance --- ### 3. Cypress Test Suite Build a complete Cypress suite covering all workflows below. Intercepts must be **conditional on an env var** so the same suite works in both mock mode and against a real deployed backend: ```bash # Mock mode — no backend needed npm run test:e2e # Real backend — pointed at deployed staging CYPRESS_REAL_BACKEND=true CYPRESS_BASE_URL=https://your-staging-url npm run cypress:run ``` ```typescript // Required pattern in cypress/support/[login to view URL] const USE_MOCK = ; beforeEach(() => { if (!USE_MOCK) return; [login to view URL]('POST', '**/translate', { ... }); // etc. }); ``` **Coverage required:** | Suite | What to cover | |---|---| | Smoke | Every page loads, header/footer visible, navigation works | | Translate | Text/Document tabs, language pair, mock translation, copy, human review | | Transcribe | Segmented control, file upload, playback frame after translate, transcribe + translate output | | AI Interpretation | Mic start/stop, mock dialogue, End Session clears text, mute | | TTS | Input, character counter, voice grid, translate toggle, generate and play audio | | Captioning | File upload, format pills, style controls, generate | | Login | Validation, create account, Remember Me restore, password toggle, Google login button, redirect | | Role Selection | Client/Linguist toggle, Continue, localStorage | | Responsive | 375/768/1280 viewports, hamburger menu, no overflow | | Multi-user | Full client flow, linguist role, reviewer console | --- ### 4. [login to view URL] Integration - All test cases documented in our **[login to view URL]** project (credentials provided on hire) - Install and configure the Qase Cypress reporter plugin - Every Cypress test maps to a Qase test case ID - Results sync automatically to Qase dashboard on every run --- ### 5. Staging Verification (Iterative) - You submit a PR with your fixes - **We deploy your branch to the staging server** - You run the Cypress suite against the staging URL we provide - You report results, fix issues, and we repeat until all tests pass on staging including real Cognito authentication and Google OAuth You must be available for **multiple iterative testing rounds**. --- ## Deliverables 1. **GitHub Pull Request** with all fixes and implementations 2. **Updated README** covering: - Local frontend and Lambda setup - Local database connection setup - systemd service setup for the [login to view URL] process - Cypress mock and real backend run instructions - [login to view URL] setup and API key configuration 3. **Complete Cypress suite** — conditional intercepts, Qase reporter wired, all suites passing 4. **Fully populated [login to view URL] project** — all test cases in plain English, mapped to automation 5. **Updated `frontend/.[login to view URL]` and `backend/.[login to view URL]`** including all required config keys 6. **Screenshots** (5 or more) showing Cypress tests running with results visible in the [login to view URL] dashboard

Project ID: 40426765