This is a submission for the Netlify Dynamic Site Challenge: Visual Feast.
What I Built
I built a dynamic photo gallery using Create React App and Netlify Image CDN. On the first load, page images are fetched from the CDN with widths determined by the initial display width. For desktop devices, the initial width of images is derived from the screen width divided by 4, and for mobile devices, it's the full width of the device. Other parameters are omitted for the first render.
Then, users can choose one of the images, and it will open in a fullscreen pop-up (similar to a fullscreen zoom) with an input field for image customization. For this window, the web app makes a request to the CDN and loads the image in its original size. There, users can set the width, height, fit, position, and quality of the image. After hitting the "Get an Image" button, the new image with applied modifications is requested and rendered on the page. Also, users can check requested image URL address.
Format options are excluded because the Netlify Image CDN determines the format of the image automatically depending on the user's browser.
Demo
Image customization window:
Requested custom photo with image URL open:
Platform Primitives
Netlify Image CDN allowed me to decrease the size of requested images by half. In addition to that, the user can make modifications to the image in the UI, which are translated into image URL query parameters. The query parameters are sent to CDN and it returns the image with the desired modifications.
I don't set the requested image format in the query since Netlify CDN can automatically detect accepted image formats from the request header, which is set by the client's browser. This makes the platform compatible with multiple browsers.
To deploy my project, I used Netlify CLI, which allows local deployment. This feature enabled me to test the platform locally and fix any bugs before pushing it to production.
Conclusion
Overall, I had a great experience with all Netlify services. They have clear and detailed documentation, and the deployment process is easy and straightforward. The APIs are very clear and enjoyable to work with. I have used their services to publish my projects before and plan to continue using them in the future.
Thanks to Netlify for conducting such challenges! I enjoyed working on my project and looking forward to participating in more events like this in the future!
Top comments (1)
Cute cat! And great job!