Inspiration

I was inspired by Dejim Juang's video: Easily bypass Amazon Web Service API Gateway calls to AWS Lambda functions using MuleSoft

I had some experience working with AWS "serverless" services including Lambda functions so Anypoint Studio's AWS connectors were a good fit for me. As a bonus, Lambda functions and DynamoDB will autoscale based on demand.

Also, given the upcoming holidays, I was thinking it would be cool to give folks an easy way to share photos of their holiday events.

What it does

Photo Upper allows folks to easily share their virtual or in-person event photos with other event attendees. It is essentially a photo booth but everyone's mobile device is the camera.

Event attendees are given a URL or QR code they can scan with their phone's photo app. They are forwarded to the Photo Upper with their event code passed along. On the home page, they can view photos from other attendees or capture and upload their own photos.

When a user selects their own photo a series of events are triggered:

  • The user's browser makes a GET request to a CloudHub hosted Anypoint flow named "getSignedURL". This request translates the get parameters to a JSON "event" and invokes an AWS Node.js Lambda function that returns a pre-signed URL to upload the image to S3.
  • The user's browser then uploads the image they selected directly to the AWS S3 bucket.
  • Once the upload is complete, the browser then makes a POST to another Anypoint flow named process-images. The process-images flow takes the image filename, caption, date, and event code and invokes a "process-images" Lambda function. The process-images Lambda function validates the event code and leverages a Node.js Sharp Lambda Layer to resize the photos to support different size screens. It also writes the image metadata to a DynamoDB table.
  • The browser is then forwarded to the gallery screen that calls another Anypoint flow named getPhotosForEventCode. This flow invokes the photoupper-getphotos Lambda which queries the DynamoDB tables to validate the event and get the current list of photos. The result is returned to the browser, sorted, and the images are displayed with the latest on top so the user can see all the latest photos from the event including their own.

How I built it

I built Photo Upper using Anypoint Studio, Visual Studio Code, Postman, and the browser dev tools. The three Anypoint flows are hosted on CloudHub and leverage Anypoint connectors to directly invoke AWS Lambda functions written in Node.js.

The process-images function uses a Lambda layer to pull in a Node.js Sharp library (libvips) that has been custom compiled for the AWS Lambda Node.js functions. Sharp provides fast image resizing as well as other image manipulation operations.

All the static assets are stored in an S3 bucket as an origin for a Cloudfront distribution. The Cloudfront distribution is the endpoint for photoupper.com and holds the TLS cert.

Challenges I ran into

This was my first time using Anypoint Studio and CloudHub so my learning curve was pretty high!

Accomplishments that we're proud of

The entire project is built on "serverless" technologies. There are no servers that need to be managed (by me).

What we learned

This was my first time using Anypoint Studio as a developer and not just a consumer. I learned how to create basic flows, leverage Anypoint connectors, and deploy APIs to CloudHub. Other key pieces I learned in MuleSoft:

  • TLS configuration
  • CORS configuration
  • Anypoint Debugging
  • DataWeave

What's next for Photo Upper

  • Leverage Amazon Rekognition for photo moderation
  • Individualized access codes so if someone abuses the system their access can be revoked.
  • Themes - I.e., birthdays, weddings, holidays, etc.
  • Photo contest voting
  • Better Anypoint flow integrations
Share this project:

Updates