DEV Community

Parth Chawande
Parth Chawande

Posted on

1

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

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.

Image description

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

AWS GenAI Live!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️