DEV Community

Cover image for 🎨 Logo Hunter - Netlify Dynamic Site Challenge
Neo Tang
Neo Tang

Posted on

🎨 Logo Hunter - Netlify Dynamic Site Challenge

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

homescreen

screenshot

screenshot

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}`;

Enter fullscreen mode Exit fullscreen mode

Top comments (3)

Collapse
 
philiphow profile image
Philip How

This is cool. I'm going to check out the Figma plugin. Great work.

Collapse
 
tangweikun profile image
Neo Tang

Hi, Philip, I also submitted Pick You Champion , but I don't why it not showing under the netlifychallenge tags

Collapse
 
tangweikun profile image
Neo Tang

Thank you for your recognition. 🌹🌹🌹