CloudDrive: Serverless Personal Cloud with Audio Recording

What it is

CloudDrive is a serverless web application that provides secure personal cloud storage and high-quality audio recording capabilities. It leverages AWS Cognito for authentication, S3 for user-isolated storage, Lambda for backend logic, and CloudFront for global content delivery. The system features a responsive React-based frontend optimized for mobile devices, supporting drag-and-drop file management and real-time chunked audio uploads with resumable capabilities.

Features

• Real-time audio recording with configurable chunked uploads and retry logic
• Secure file management with CRUD operations, folder navigation, and drag-and-drop
• User-isolated S3 storage enforced by Cognito JWT authentication and IAM policies
• EventBridge integration publishing structured events for all file operations
• Mobile-first responsive UI optimized for iOS with native action sheets
• Serverless deployment using numbered shell scripts for reliable infrastructure setup

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-001-preflight-check.sh
./step-010-setup.sh
./step-020-deploy.sh
./step-025-update-web-files.sh
./step-030-create-user.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 -->|Publishes Events| EB[EventBridge Bus]
    Lambda -->|Generates Pre-signed URLs| S3Data
    User -->|Direct Upload Chunks| S3Data

How it's built

The backend consists of Node.js Lambda functions handling API requests via API Gateway. Authentication is managed by AWS Cognito User Pools and Identity Pools, with IAM roles restricting S3 access to user-specific prefixes. The frontend is a static Single Page Application (SPA) served via CloudFront, using in-browser Babel compilation for development ease. Audio recording utilizes the MediaRecorder API, splitting streams into configurable chunks that are uploaded directly to S3 using pre-signed URLs generated by Lambda. All file operations trigger structured events to an EventBridge bus for potential orchestration.

How it runs

sequenceDiagram
    participant U as User
    participant F as Frontend (SPA)
    participant A as API Gateway
    participant L as Lambda
    participant S3 as S3 Bucket
    participant EB as EventBridge

    U->>F: Start Audio Recording
    F->>F: Capture Media Chunk
    F->>A: Request Pre-signed URL (sessionId, chunkNumber)
    A->>L: Invoke uploadChunk Handler
    L->>L: Validate Cognito Claims
    L->>S3: Generate Pre-signed PUT URL
    L-->>A: Return Pre-signed URL
    A-->>F: Return Pre-signed URL
    F->>S3: PUT Chunk Data Directly
    S3-->>F: Confirm Upload
    F->>F: Update UI Progress
    Note over L,EB: Optional: Trigger Event on Completion
    L->>EB: Publish File Operation Event

How to apply & reuse

This project serves as a robust template for building secure, serverless media applications. It demonstrates best practices for handling large file uploads via chunking, implementing user-isolated storage patterns in S3, and integrating event-driven architectures with EventBridge. Developers can reuse the deployment scripts, Lambda handlers for S3 interactions, and the frontend audio recording logic for voice memo apps, interview recorders, or secure personal backup solutions.

At a glance