Apex Infra Homework

Description

This repository contains the frontend code for the Apex Infra Homework, which is a media sharing platform built using TypeScript and React. Your task will be to create IaC to deploy this frontend application to AWS. You can start the app locally using the startup.sh script. The frontend application is designed to work with external backend services and storage systems.

Tasks

• Create IaC in Terraform to deploy the frontend application to AWS
• Ensure that the application is deployed with AWS best practices in mind
• Code changes are out of scope, the developers have not followed best practices during development, thus any alteration could lead to a problematic deployment
• Focus on analyzing the Dockerfiles, Composefile and the provided build scripts to understand the application, along with any other non-source code files
• It is encouraged to use AWS native alternatives for hosting and deployment
• Provide a diagram of the final infrastructure

Notes

• The backend services (API, database, and blob storage) are managed separately and do not need to be deployed as part of this task
• The frontend application expects to communicate with external backend services via API calls
• Focus on creating a robust, scalable frontend deployment infrastructure

Architecture

The customer provided you with the following architectural diagram.

C4Context
    title MediaShare architecture

    Person(user, "User")
    
    Enterprise_Boundary(media_share, "MediaShare"){
    System(blob_storage, "MinIO server")
    System(web, "MediaShare Web")
    SystemDb(db, "Postgres Database")
    System(api, "MediaShare API")
    }

Rel(user, web, "GET /index.html")
Rel(user, api, "API operations")
Rel(web, blob_storage, "serve static content")
Rel(api, db, "Database operations")

Loading

Workflows:

File upload:

sequenceDiagram
    participant User
    participant Web
    participant API
    participant BlobStorage
    participant DB

    User->>API: POST /api/upload-url
    API->>BlobStorage: GET presigned URL
    API->>DB: Insert media item
    BlobStorage-->>API: create presigned URL
    API-->>User: return presigned URL
    User->>BlobStorage: PUT file
    BlobStorage-->>User: 201 Created

Loading

Visit

sequenceDiagram
    participant User
    participant Web
    participant API
    participant BlobStorage

    User->>Web: GET /index.html
    Web->>User: index.html
    User->>API: GET /api/media
    API->>User: media list
    User ->> Web: GET /media/{id}
    Web ->> BlobStorage: ProxyPass
    BlobStorage-->>User: files

Loading

Comment

sequenceDiagram
    participant User
    participant Web
    participant API
    participant DB

    User->>Web: GET /index.html
    Web->>User: index.html
    User->>API: GET /api/media
    API->>User: media list
    User ->> Web: GET /media/{id}
    Web ->> API: GET /api/media/{id}
    API->>DB: Select media item
    DB-->>API: media item
    API-->>User: media item
    User ->> API: POST /api/media/{id}/comments
    API->>DB: Insert comment

Loading