Ultimate Random Animal Generator

Avoiding spaghetti-code while fitting 12+ A​PIs into a single project!

One of the #100Devs assignments was to improve upon a template shown during training of a Dog API, but upon seeing the various other animal-image APIs, I decided to fit every one into this single project!

I had a number of goals when starting the project:

• Ability to filter returned animals by Species and API source
• URL sync​ronization - allowing users to share the results and form state by simply copying the URL.

and while writing up, was presented by Twitch Chat an additional feature: the ability to select how many images to fetch at once, randing from 1 to 4.

Singleton Inheritance

Of course while some APIs coincidentally were identical in everything but URL, many has differences from the response shape, the existance of random endpoints, to the presense of unique IDs and such!

So I decided to create a single class AnimalSource, with various helper and abstract methods for everything from localStorage caching to using a CORs proxy. Each API then simply extended this class and implemented at most two methods.

Finally was the UI to handle all these Singleton Instances, which did take a fair amount of logic, first from selecting the proper pool of species and/or sources based on the <select> values, handling multiple image errors without locking the application up, and keeping it all sync​ronized in the URL as hash parameters.