This is a submission for the Netlify Dynamic Site Challenge: Visual Feast.
What I Built
I develop a web application similar to Pinterest or Pexels that I decided to called MagPies. In this application everyone can explore or browse images, download them in different format (PNG, JPG, WEBP, AVIF), and only the authenticated user can share their photos into the platform. 😍
Based on the challenge requirements, I used the Netlify CDN Image in order to apply some operations on images like:
Resizing the image (width and height)
Changing the quality
Changing the image fit value (cover, fill and contain)
Downloading into different format of image.
All these features are nicely implemented using Rasengan.js my own REACT FRAMEWORK 😁😁 and Tailwind CSS for styling.
Demo
Link of the app: magpies.dilane3.com
Demo video: Video
Some screenshots:
Home
Gallery
Create photo
Profile
Image Preview and transformation
Platform Primitives
To use the Image CDN, I decided to create another simple app using just and html file and hosted it on netlify. As all the websites hosted on netlify benefit from the /.netlify/images edge function to apply all the available transformation on images, I decided to use the website as an API.
Here is the code snippet that I write to integrate the Image CDN into my application.
I started working on the Netlify Blobs in order to save for example:
Recent search query of users
Photo saved by the user
But I didn’t have time to finish it, that because I was dealing during the 4 first days into the integration of my React framework and Netlify in order to host any web application built with Rasengan.js to Netlify… And after 4 days, I find a way by creating a serverless function that respond to any incoming request, this because Rasengan.js is based on a SSR logic.
I’m so glad to having participated to this challenge, it was very nice. I got an opportunity to enhance my React Framework to support Netlify, I learn about how to integrate Netlify Image CDN into apps… sooo good. Thanks a lot.
I hope, what I did will impress you.
