Online photo collage tool

As many of us want to post photo collages in social media, it’s useful to have an online tool to do simple image combinations without needing to open an image processing program. This collage tool will enable the user to upload images and stitch them together in a neat row or a column.

Depending on your familiarity with the technologies used, this project may take anywhere from 16 to 24 hours.

• User is able to upload images without registration
• The user defines if they want to make a horizontal collage or a vertical collage and what border size and color they want.
• When the user clicks on “Make Collage”, the front-end calls the API, which in turn sends a processing job to the task queue. That means, that the images are processed asynchronously while a loading screen is shown to the end-user.
• The front-end can query the backend API to see if the processing has finished.
• The asynchronous processing module resizes the images to the same height for a horizontal collage, and to the same width for a vertical collage. Each image’s aspect ratio should remain the same.
• To make the collage, stitch the resized images together with the user-defined borders.
• Finally, the user is redirected to a page to download the final collage.

The following image shows one way to implement the UI. Feel free to interpret the requirements however you'd like!

For a extra challenge:

• Initially, you may want to store the uploaded images directly in the filesystem of your server. For a truly production-ready, scalable solution, consider third-party distributed storage providers, such as Amazon S3
• To comply with user privacy regulations, have a periodic task that removes old images from storage.

These are the suggested languages, frameworks, libraries, and tools for this project:

• Back-end API: Python (Flask or Django) or Node.js
• For task queue: Celery & rabbitmq or Celery & redis
• For image processing: ImageMagick or scikit-image
• Front-end: React or Vue.js

Other suggestions:

• Back-end, task queue, and front-end can run on the same server in different Docker containers.
• Front-end has three views
  • Upload image and configure collage settings form - can add more images dynamically, maximum number and size of images to be defined by the programmer
  • Work in progress page
  • End result page
• Back-end API has three endpoints
  • Create image processing task - puts the task in the task queue and returns a task id
  • Get status of image processing task by its id - returns either IN_PROGRESS or a collage id
  • Get collage picture by id
• Task queue has one queue and three tasks
  • Resize images
  • Combine images
  • Main task that consists of sequential calls to Resize and Combine

• Using Django and Vue.js
• Using Django and React
• Using S3 for image hosting
• How to Set Up Celery