Repix - Crafting Dynamic Visual Experiences with Netlify's Image CDN and Blobs

This is a submission for the Netlify Dynamic Site Challenge: Visual Feast.

What I Built

I developed a web application called Repix that showcases the power of Netlify's Image CDN and Blobs.

Homepage

The homepage serves as the entry point for users to explore and manage their images. It features a dynamic image gallery that displays thumbnails of all the uploaded images. Users can add up to six images to the gallery and apply a set of Netlify transformations to all the images simultaneously. This feature allows for quick and efficient optimization of multiple images at once. Additionally, users can download the optimized images as a zip file for easy sharing or further processing.

Edit Page

The edit page provides users with a comprehensive set of tools to fine-tune their images. Here, users can edit each image individually by applying various Netlify transformations. The application also offers a selection of image filters that can be applied to enhance the visual appeal of the images. Furthermore, users can rotate the images to achieve their desired orientation. To facilitate sharing and collaboration, the edit page includes a feature that generates a copy-friendly link to the edited image. Users can also download the optimized image directly from this page.

The application leverages Netlify's Image CDN for on-demand image transformations, ensuring that the images are optimized for fast loading and efficient delivery. The use of Netlify Blobs enables seamless storage and retrieval of the uploaded images, along with their associated metadata. Netlify Functions are integrated to handle processing tasks, such as generating zip files for multiple image downloads.

By combining the power of Netlify's Image CDN and Blobs, Repix offers a user-friendly and efficient platform for managing, editing, and sharing images. The application demonstrates the potential of Netlify's services in creating dynamic and visually appealing web experiences.

Demo

URL: REPIX

The image above showcases the homepage interface, allowing users to upload images. Users can select individual images to view and make edits. Additionally, there is an option to apply filters to all uploaded images collectively and download them as a zip file. Currently, the system supports uploading a maximum of six images.

The image above showcases add image dialog. You can add the image either by using splash images url or you can upload a file.(Make sure to upload a file less than 1MB so that Image filters/image rotations take faster while saving as netlify functions timeout after 10.01 seconds for free account. Larger the size, larger the time for saving the image after editing)

Usage of Unsplash URL:

If the URL is https://images.unsplash.com/photo-1444212477490-ca407925329e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fGRvZ3N8ZW58MHx8MHx8fDA%3D, make sure to remove https://images.unsplash.com/ and just keep the reset as https://images.unsplash.com/ is already prepended in the url.

Make sure to edit unsplash images without image filters/rotations as their size is high and will result in netlify timeout.

Remember to click 'Save' after applying transformations, filters, or rotations to the image to preserve the changes. If you've made multiple adjustments to the image and are unsatisfied in the future, you can revert to the original version at any time.

Platform Primitives

I leveraged the Netlify Image CDN to dynamically transform images on demand without affecting build times. By making requests to /.netlify/images with specific query parameters for source assets and desired transformations, I optimized the size and format of images to enhance runtime performance and reliability on my website. The Netlify Image CDN's integration with caching mechanisms ensured that repeated requests for the same transformations were served efficiently from cached assets. Additionally, I benefited from the simplicity of the API, allowing me to easily implement image transformations for both local and remote images. This approach not only streamlined image optimization but also contributed to improving the overall user experience by delivering optimized images tailored to the requesting client's needs.

Netlify Blobs are utilized to store uploaded/edited image data efficiently and facilitate reverting to the original image version, enhancing data management and version control within the application.
There are 3 different stores used to make this application work.

Currently the source code is full of mess. Will share it once I clean it up.