Challenge Overview
The goal here is to build a custom gallery component that will load images from an S3 bucket. It should be implemented as a React component with properties for bucket details and image size preferences.
The UI should be quite simple - a horizonally scrollable image thumbnail list where clicking the thumbnail opens the fullscreen gallery. In the fullscreen view user can move between the images (previous, next). Thumbnail size is configurable via component properties.
The images in the gallery are expected to be really large so loading all the images to display just the thumbnails should be avoided. Only the raw images will be in the bucket and the thumbnails should be generated on the fly. For this we recommend using Cloudinary. Cloudinary would fetch the images from S3, generate the thumbnails on the fly and serve them from a CDN. Later requests to the same image would be returned directly from Cloudinary. You can use the free Cloudinary account for testing. If you have experience with a 3rd party service that you think would better fit the requirements, let us know in the forums.
Loading files list from the bucket can be a separate component so the inner gallery component could be used with static images list (again with cloudinary image handling).
The component will later be used in Drone Service Provider website to display mission results (images) like in the screenshot bellow
For verification, create a simple page that will contain the gallery.
Base code for this challenge is in the imageGallery branch in the repository
NOTE: The review and appeals phases are shortened, pay attention to the timeline
Final Submission Guidelines
Submit a git patch for your changes to the base codeSubmit a short video demonstrating the implemented features
Submit a short verification guide with screenshots (verification guide should be placed in the /verification-docs directory)