🎨 Logo Hunter - Netlify Dynamic Site Challenge

#netlifychallenge #devchallenge #webdev #javascript

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

What I Built

Logo Hunter boasts a user-friendly interface that allows visitors to effortlessly find app logos from the App Store. At the same time, it was also released to the Figma plug-in community, designers can click the logo to place it in a Figma file.
The project utilizes Netlify's image CDN to fetch and optimize images dynamically. By applying resizing and format optimization, the project creates visually appealing galleries based on user input. This implementation guarantees efficient image delivery and a smooth user experience.

Demo

🚀 Logo Hunter

🎨 Logo Hunter in Figma

📌 Features

Find any app logo from the App Store by searching with keywords and filtering by country.
Transform the logo by adjusting parameters such as width, height, quality, format, fit, and position in the image URL.
You have the convenience of either downloading or copying the logo
Insert the logo to the Figma file

📸 Screenshots

Platform Primitives

Netlify Image CDN

Integrated Netlify Image CDN to dynamically manipulate images at the time of delivery.
Utilized parameterized transformation by adjusting parameters like width, height, quality, format, fit, and position in the image URL.

  const url =
    'https://uwarp.netlify.app/.netlify/images?url=' +
    artworkUrl512 +
 `&fit=${config.fit}&w=${config.size}&h=${config.size}&fm=${config.format}&q=${config.quality}&position=${config.position}`;