Wishbone Case Study

How Filestack delivers on Wishbone’s need for thousands of image uploads, facial recognition API for centering and cropping images of faces, and significantly reduced development time

Wishbone is a non-profit fundraising platform that gives high school students the chance to pursue their passions by matching them with different scholarship opportunities. The crowd-sourcing tool sends low-income high school students from New York City, the Bay Area, and Los Angeles to summer programs. Students apply for one of the 550 high quality, accredited summer programs featured on Wishbone.org based on their interests and location. Wishbone is supported by foundations, corporations, program providers, and individual donors through their website.

Wishbone Needed Thousands of Images For User Avatars

Mike Potter of Disrupto is the lead developer for their client, Wishbone.org. He’s been working on Wishbone’s crowdsourcing website for the past 2 years. The site required thousands of images, which could mean spending large amounts of time going through those images and aligning and resizing them properly.

The majority of images that Wishbone needed were avatars of users: students and teachers needed to upload their photos onto the platform. The teachers needed to be on Wishbone acting as advocates for the kids by helping them raise money, sharing links to the campaigns through their network, and trying to recruit donors.

“It’s a classic problem. Every project needs images—or, just about every project,” explains Mike Potter. “If you’re dealing with images, you don’t want to have to build your own backend. No one wants to build their own boilerplate code for images that every site has to have. I wanted to focus on what Wishbone needed to do, and outsource the stuff that’s boilerplate and common. That’s always a win.”

Filestack’s Facial Recognition Feature

Mike Potter heard of Filestack by word-of-mouth through one of his developer friends. He used Filestack on other projects, so now it became his go-to utility for uploading, formatting, resizing and cropping images. Since Filestack already built a back-end for image uploads, it was the obvious choice to use in different areas of the Wishbone site that required different sized avatars.

“When users upload photos, we have a custom uploader and we use the Filestack API to manage that upload,” says Mike. “All the UI stuff is done through a custom control. Filestack is nice, because I really don’t have to maintain my own infrastructure for resizing images. We do dynamic resizing through URL parameters. There’s a facial recognition feature in Filestack where you can indicate what strategy you want to use to resize an image, and it will identify where the faces are and the image will try to center around that.”