NEW PROJECT – Logo Finder
As part of my React API practice, I built a dirt simple Logo Finder using Clearbit’s Logo API. Simply enter a web domain, and the app will retrieve a logo image.
Objective
This is the third in a series of simple API fetching apps that I’ve built so far this year after the Public API’s List and the Open Library Search. The API for this one is definitely the simplest one yet, almost to a fault, but it did offer an opportunity to use the React 18 onError event for images.
Development
I’ve been relying on Vite’s default project styles for all of these API projects for the sake of expedience, so the Logo Finder doesn’t look like much. There’s a state that catches the user’s input in the search field. That then gets injected into a src attribute to populate the image. If the user’s submission is not a valid domain, or the domain does not have an accessible logo, then the onError event triggers an error message to appear.
The API required attribution this time, so I tacked that on at the end. I didn’t realize it until after I had already uploaded it and started this log. I need to keep a better eye out for copyright requirements in the future.
Hurdles
The first issue with this was that the API was actually simpler than I needed it to be. It’s just an img src with some optional size and format parameters that can be tacked on the end. I didn’t even need to use fetch. I could probably build out some options for modifying those, but I don’t know that it would expose me to any concepts I haven’t used before.
The next issue was detecting whether the src state was a valid domain and prompting the user with an error message if not. I had trouble thinking of a way to test that before the src gets dumped into the img element and displays a broken image. I didn’t know that the onError event was an option so I fiddled with some ugly conditionals before relenting and looking it up. Glad to know there’s an elegant solution built into React.
Takeaways
I initially didn’t plan to do a full post on this project since it was so rudimentary. I kind of started building it before I realized how limited the options were going to be and just rolled on with it. In hindsight I did get a nugget of new knowledge out of it in the img event, and I should just commit to documenting everything anyway. It’s good for posterity and for my own absorption of what I’m learning.