Skip to content

Frontend Architecture and Core Components

Jump to bottom
goldy4719 edited this page Apr 10, 2026 · 3 revisions

This section outlines the React application structure and the integration patterns used to securely communicate with AWS backend services.

Overview

The frontend is built as a single-page application (SPA) using React, structured to prioritize modularity and reusability. It leverages AWS Amplify to manage secure authentication flows and utilizes S3 Pre-signed URLs to handle large file transfers directly between the client and storage, reducing backend overhead.

Set up

  • AWS Amplify Library: Installed via npm install aws-amplify @aws-amplify/ui-react.
  • Environment Variables: Correctly configured aws-exports.js or amplifyconfiguration.json containing User Pool and API Gateway endpoints.
  • IAM Permissions: The Lambda function generating URLs must have s3:PutObject and s3:GetObject permissions.

Implementation / Structure

1. Project Directory Layout:

The project follows a standard modular hierarchy to separate UI logic from business logic:

  • Components: Small, reusable UI elements (e.g., ImageCard, NavBar, UploadButton).
  • Screens: Top-level views representing application states (e.g., LoginScreen, GalleryView, UploadDashboard).
  • Services: Logic for handling external communication, such as API Gateway requests and authentication triggers.
  • Utilities: Helper functions for non-UI tasks like date formatting or global notification triggers.

2. AWS Amplify Integration

Amplify acts as the bridge between the React state and AWS. It is primarily used for:

  • Authentication: Wrapping the application in a Higher-Order Component (HOC) to manage the Cognito login flow and JWT token refreshment.
  • API Management: Providing a signed interface to call API Gateway, ensuring every request includes the necessary Authorization headers.

3. Pre-signed URL Workflow:

To ensure security and performance, the application does not send raw image bytes through Lambda. Instead:

  • GET/PUT Requests: The frontend requests a temporary, time-limited URL from the backend via API Gateway.
  • Direct Upload/Download: The browser uses this URL to upload to or fetch from S3 directly. This prevents Lambda timeout issues with large files.

Clone this wiki locally