Bug Fixes and new implementation and Cypress Qase Testing Framework
Budget: $250 – $750 USD
## Project Overview
We have a **Next.js 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 | Next.js 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) + Qase.io |
| 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 `document.execCommand` 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/.env.example` and `backend/.env.example` 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 Next.js 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/e2e.ts
const USE_MOCK = !Cypress.env('REAL_BACKEND');
beforeEach(() => {
if (!USE_MOCK) return;
cy.intercept('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. Qase.io Integration
- All test cases documented in our **Qase.io** 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 Next.js process
- Cypress mock and real backend run instructions
- Qase.io setup and API key configuration
3. **Complete Cypress suite** — conditional intercepts, Qase reporter wired, all suites passing
4. **Fully populated Qase.io project** — all test cases in plain English, mapped to automation
5. **Updated `frontend/.env.example` and `backend/.env.example`** including all required config keys
6. **Screenshots** (5 or more) showing Cypress tests running with results visible in the Qase.io dashboard
We have a **Next.js 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 | Next.js 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) + Qase.io |
| 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 `document.execCommand` 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/.env.example` and `backend/.env.example` 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 Next.js 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/e2e.ts
const USE_MOCK = !Cypress.env('REAL_BACKEND');
beforeEach(() => {
if (!USE_MOCK) return;
cy.intercept('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. Qase.io Integration
- All test cases documented in our **Qase.io** 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 Next.js process
- Cypress mock and real backend run instructions
- Qase.io setup and API key configuration
3. **Complete Cypress suite** — conditional intercepts, Qase reporter wired, all suites passing
4. **Fully populated Qase.io project** — all test cases in plain English, mapped to automation
5. **Updated `frontend/.env.example` and `backend/.env.example`** including all required config keys
6. **Screenshots** (5 or more) showing Cypress tests running with results visible in the Qase.io dashboard