Netlify Dynamic Site Challenge: Building a Device Mockups Generator Web App

Parth Chawande — Wed, 08 May 2024 18:49:35 +0000

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

What I Built

I have built a multiple devices mockup generator. It helps users visualise how their image would like on different devices. It also lets you download the end result which is especially useful for marketers to showcase their product easily.
I have used Edgestore to store the images uploaded by the users then I use the Netlify Image CDN to transform and serve images on demand (no build time 😉).
Finally users can download the final mockup image and use freely.

Demo

You can see the demo here: https://polite-bienenstitch-cc3c05.netlify.app/

Platform Primitives

Using Netlify Image CDN is surprisingly easy, making an request to /.netlify/images with source url of your image and receiving the transformed image feels like magic. It also supports remote urls which is the case in my demo. I also used the transformation options to set the size, fit, format and even the quality.

DEV Community: Parth Chawande

Netlify Dynamic Site Challenge: Building a Device Mockups Generator Web App

What I Built

Demo

Platform Primitives