Animal Humane Society Dog Habitat Kiosk

The Animal Humane Society (AHS), in Minneapolis, Minnesota is the leading animal welfare organization in the Upper Midwest, helping 25,000 dogs, cats and critters in need find loving homes each year, while providing a vast array of services to the community, from low-cost spay and neuter services to dog training and rescuing animals from neglectful and abusive situations.

Client Request

AHS recently built a new dog habitat, where up to six dogs can socialize and play together. AHS asked us to create an interface for a 32” touchscreen display just outside the habitat, where visitors will be able to find out more about each dog currently in the habitat. The dog habitat kiosk is in testing with AHS and will be launched in the summer of 2018.

Animal Humane Society Dog Habitat

Solution: React

Our initial approach was to create a separate install of Drupal for the new touchscreen, but quickly realized that would require us to duplicate data from the main AHS website. To avoid this additional step, we decided to build a separate, decoupled application with React as the front end and the existing AHS Drupal site handling the back end.

The AHS Drupal site stores detailed information about all of their animals. The decoupled React site allowed us to create a new front end with quick interactions, using a subset of data that we already had. All that was needed for the display was for AHS to select up to six dogs from this store of data to display on the new touchscreen.

React was the perfect solution to allow us to do that with very little impact on the main AHS website. The React app would consume JSON data. Drupal 8 comes with the RESTful Web Services module in core, which makes it really easy to create a JSON API using views. We created a view displaying the fields of data we needed for each dog, like name, weight, age, photo URL, etc. The web services module creates a path (on the main domain) where our React app can request information.

Separate Admin Interface

TEN7 created a new administration page just for the touchscreen within the AHS website, separate from the main content administration pages. AHS volunteers can easily add a dog to/remove a dog from the touchscreen with just a few clicks, while all other data about each dog is protected.

Animal Humane Society Dog Habitat Kiosk

Touchscreen App

The landing page of the React app on the touchscreen is an image grid of the dogs, currently residing in the dog habitat, and shows any relevant dog status (out for a walk, adoption hold, etc.). Each image can be selected to learn more about an individual dog. Because it’s a single page app, users don’t have to wait for page requests, and the interaction is very quick from page to page.

Animal Humane Society Dog Habitat Kiosk

Animal Humane Society Dog Habitat Kiosk

Final Thoughts

React was a great solution here, and we’re excited to use it for more projects where user interactions are integral to the experience. It’s also a good fit for sites with existing data (like this project) where you just need to add on another feature.

TEN7 has been working with AHS for almost ten years, bringing their progressive ideas to life through technology. We continue to maintain and update their family of websites.

Jason Cote

Front-end Drupal Developer
 
Image
Jason Cote

Jason loves finding innovative solutions to the complicated front-end programming issues we throw at him. He’s that laid-back dude who listens quietly but then spits out a zinger when you’re not expecting it. Jason loves tacos, coffee, biking, camping, and thinks eating weird chip flavors is one of the best things about foreign travel (mustard and pickle potato chips FTW!).