Wallpaper Gallery Application

A serverless web application built on AWS for uploading, storing, and browsing wallpaper images. This application demonstrates modern cloud architecture using AWS services including S3, Lambda, DynamoDB, and API Gateway.

Architecture Overview

The application follows a serverless architecture pattern with the following components:

• Frontend: Static website hosted on S3
• API: RESTful API using API Gateway and Lambda functions
• Storage: Images stored in S3, metadata in DynamoDB
• Authentication: AWS Cognito Identity Pool (configured in Lambda functions)

Features

• 📸 Image Upload: Upload wallpaper images with metadata
• 🗂️ Categorization: Organize wallpapers by categories
• 📋 Gallery View: Browse and view all uploaded wallpapers
• 🔒 Secure Storage: Images stored securely in AWS S3
• ⚡ Serverless: No server management required
• 🌐 CORS Enabled: Cross-origin resource sharing configured

Project Structure

├── architecture.drawio.svg     # System architecture diagram
├── template.yaml              # AWS SAM template for infrastructure
├── README.md                 # This documentation
├── lambda/                   # Lambda function source code
│   ├── list_function/        
│   │   └── app.py           # Lists wallpapers from DynamoDB
│   └── update_wallpaper_table/
│       └── app.py           # Handles image upload to S3 and DynamoDB
└── website/                 # Frontend static files
    ├── index.html           # Main landing page
    ├── list.html           # Gallery view page
    ├── list.js            # Gallery functionality
    ├── styles.css         # Application styling
    ├── upload.html        # Upload page
    └── upload.js          # Upload functionality

AWS Services Used

• Amazon S3:
  • Website hosting for static files
  • Image storage with CORS configuration
• AWS Lambda:
  • Serverless compute for API endpoints
  • Python 3.11 runtime
• Amazon DynamoDB:
  • NoSQL database for wallpaper metadata
  • Pay-per-request billing
• Amazon API Gateway:
  • RESTful API with CORS support
  • Automatic scaling
• AWS Cognito Identity Pool:
  • User authentication and authorization

API Endpoints

GET /wallpapers

• Description: Retrieve list of all wallpapers
• Lambda Function: list_function
• Returns: JSON array of wallpaper objects

POST /wallpapers

• Description: Upload new wallpaper
• Lambda Function: update_wallpaper_table
• Payload:

  {
    "name": "string",
    "category": "string",
    "filename": "string",
    "file": "base64_encoded_image"
  }

Prerequisites

• AWS CLI configured with appropriate permissions
• AWS SAM CLI installed
• Python 3.11
• Node.js (for local development)

Deployment

1. Clone the repository

   git clone <repository-url>
   cd developing-on-aws-v2

2. Configure parameters (optional)

   Edit the default bucket names in template.yaml:

   Parameters:
     WebsiteBucketName:
       Default: your-unique-website-bucket-name
     WallpaperBucketName:
       Default: your-unique-wallpaper-bucket-name

3. Build and deploy with SAM

   sam build
   sam deploy --guided

4. Upload website files to S3

   aws s3 sync website/ s3://your-website-bucket-name/

5. Configure Cognito Identity Pool

   Create a Cognito Identity Pool and update the Lambda environment variables:

   aws lambda update-function-configuration \
     --function-name <list-function-name> \
     --environment Variables="{TABLE_NAME=wallpaper-gallery,IDENTITY_POOL_ID=your-identity-pool-id}"

Configuration

Environment Variables

List Function:

• TABLE_NAME: DynamoDB table name
• IDENTITY_POOL_ID: Cognito Identity Pool ID

Update Function:

• TABLE_NAME: DynamoDB table name
• BUCKET_NAME: S3 bucket for wallpaper storage

CORS Configuration

Both S3 buckets are configured with CORS to allow cross-origin requests from the web application.

Local Development

1. Start SAM local API

   sam local start-api

2. Serve static files

   cd website
   python -m http.server 8080

3. Update API endpoint in JavaScript files to point to http://localhost:3000

Security Considerations

• All S3 buckets use appropriate CORS policies
• Lambda functions use IAM roles with minimal required permissions
• DynamoDB access is restricted through IAM policies
• Cognito Identity Pool provides temporary credentials

Troubleshooting

Common Issues

1. CORS Errors: Ensure CORS is properly configured in both API Gateway and S3
2. Permission Denied: Check IAM roles and policies for Lambda functions
3. Image Upload Fails: Verify base64 encoding and file size limits
4. DynamoDB Access: Ensure table exists and Lambda has proper permissions

Logs

Check CloudWatch Logs for Lambda function execution details:

aws logs describe-log-groups --log-group-name-prefix /aws/lambda/

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

For questions or issues, please create an issue in the repository or contact the development team.

---

Note: This application is designed for educational purposes to demonstrate AWS serverless architecture patterns.