This project was bootstrapped with Create React App.
I simply used CRA as a template to get a nice and simple setup for a basic React App with standard file structure and some base components.
Instead of using conventional CSS I've opted to use Styled Components. I've used it before in the past and found that it helps create self-contained components with declarative styling very easily. Typically other FE's like to use SASS, but I prefer using this library as it means I don't need to worry about a post-processor for my SASS files. For more advanced styling techniques like responsive design I've used conventional CSS stylesheets.
I'm using a library react-debounce-input to implement debouncing for the search functionality of this application. Debouncing is quite common for inputs, especially when changes result in network requests. I'm using debouncing here as a soft form of rate-limiting.
Despite being an open API, the Flickr public feed doesn't seem to support cross-origin requests. One way around this is to use JSONP, however I didn't have much success implementing that for this application.
Instead, I followed the article listed here on more simplistic techniques for dealing with such issues. I've opted with using the second method, which uses a popular public proxy which has CORS support. In an ideal world, I would've made a quick proxy server myself which can relay requests between this client and the Flickr public API.
Please note that this public proxy has had some intermittent issues with availability (see here). If you are experiencing access issues you may need to remove the use of the proxy and install this plugin which bypasses CORS checks just for the purposes of this demonstration.