audio-ui-cf-s3-lambda-cognito

What it is

This project is a serverless web application that provides two main interfaces: a file manager for CRUD operations on S3 storage and an audio recorder for capturing, chunking, and uploading voice memos. It uses AWS Cognito for user authentication and isolation, ensuring each user's data is stored under their unique ID in S3. The architecture relies on Lambda functions for generating pre-signed URLs and managing metadata, with CloudFront serving the static frontend assets.

Features

• Real-time audio recording with configurable chunked uploads to S3
• Secure file management with user-isolated S3 storage and JWT auth
• Mobile-first responsive UI optimized for iOS touch interactions
• Serverless architecture using Lambda, API Gateway, and CloudFront
• Resumable uploads with retry logic for network instability
• Nested folder navigation and drag-and-drop file support

Quickstart

git clone https://github.com/davidbmar/audio-ui-cf-s3-lambda-cognito.git
cd audio-ui-cf-s3-lambda-cognito
chmod +x step-*.sh
./step-10-setup.sh
./step-20-deploy-lambda.sh
./step-25-update-web-files.sh
./step-45-validation.sh
./step-47-test-apis.sh

Architecture

flowchart TD
    User[User Browser] -->|HTTPS| CF[CloudFront Distribution]
    CF -->|Serves Static Assets| S3Web[S3 Web Bucket]
    User -->|API Requests| AG[API Gateway]
    AG -->|Authorizes| Cognito[AWS Cognito]
    AG -->|Invokes| Lambda[Lambda Functions]
    Lambda -->|Reads/Writes| S3Data[S3 Data Bucket]
    Lambda -->|Generates Pre-signed URLs| S3Data
    User -->|Direct Upload| S3Data

How it's built

The backend consists of Node.js Lambda functions (api/audio.js, api/s3.js, api/memory.js) deployed via shell scripts. The frontend is a React-based SPA using in-browser Babel compilation, served as static HTML/JS files from S3/CloudFront. Infrastructure is managed through a series of numbered shell scripts (step-10 to step-47) that handle AWS CLI commands for setting up Cognito User Pools, Identity Pools, API Gateway, and S3 buckets. Templates are used for web files to inject environment-specific configuration during deployment.

How it runs

sequenceDiagram
    participant U as User
    participant F as Frontend (HTML/JS)
    participant G as API Gateway
    participant L as Lambda (audio.js)
    participant S as S3 Bucket
    
    U->>F: Start Recording
    F->>F: Capture Audio Chunk
    F->>G: Request Pre-signed URL (sessionId, chunkNumber)
    G->>L: Invoke uploadChunk Handler
    L->>L: Validate Cognito Claims & Input
    L->>S: Generate Pre-signed PUT URL
    L-->>G: Return Pre-signed URL
    G-->>F: Return Pre-signed URL
    F->>S: PUT Audio Chunk Directly
    S-->>F: Confirm Upload
    F->>F: Update UI Progress

How to apply & reuse

Clone the repository, configure AWS CLI credentials, and execute the numbered deployment scripts in sequence (step-10 through step-47). After infrastructure deployment, manually create a Cognito user via AWS CLI. Access the application via the provided CloudFront distribution URL for file management or the /audio.html path for recording.

At a glance