Week 3 – Frontend Deployment

Goal

Build and deploy a simple landing page for both frontend repos: frontend-<team>-airline and frontend-<team>-travel. You may use AI assistance. I only care that a real page is deployed successfully and that it exposes the required test hooks below.

Required HTML IDs

Include these exact element IDs. I will evaluate your deployed page against them:

• app-title – top page title / airline or travel brand
• from-input – origin field
• to-input – destination field
• depart-input – depart date field
• return-input – return date field
• passengers-input – passengers field
• search-button – search CTA

The page can be visually simple. The important part is that those IDs exist on the deployed page and the page renders without errors.

Workflow Files

Copy these templates from workflow-examples into each frontend repo under .github/workflows/:

• pr.yml
• frontend-deploy-stage.yml
• frontend-deploy-prod.yml

Then update the environment variables in each deploy workflow:

• S3_BUCKET
• CLOUDFRONT_DISTRIBUTION_ID

Use Terraform outputs from infra/terraform/ to find the bucket names and CloudFront distribution IDs.

Deployment Flow

1. Open a pull request to develop in each frontend repo.
2. pr.yml should run your frontend tests.
3. After merging into develop, the stage workflow builds the app, uploads the static bundle to S3, and invalidates CloudFront.
4. Verify the deployed stage URL in the browser.
5. After stage is healthy, open a PR from develop to main/master.
6. When that PR is merged, the prod workflow deploys the same app to the prod S3 bucket + CloudFront distribution.

Validation

Example deployed airline frontend: stage.white-airline.incs1008.com / white-airline.incs1008.com

• Stage airline: https://stage.<team>-airline.incs1008.com
• Stage travel: https://stage.<team>-travel.incs1008.com
• Prod airline: https://<team>-airline.incs1008.com
• Prod travel: https://<team>-travel.incs1008.com

I will validate that your page loads and that the required element IDs are present.

Grading Breakdown