How did Trello help get puppies adopted?

Earlier this year Nicole’s building was blessed with 10 puppies. It was a tad bit difficult to get them forever homes as the pups were Indian Pariah’s and not pedigrees. We decided to get an online presence on Twitter, Facebook, Instagram and our very own website to help boost the adoption process. I decided to handle the website while Nicole took over social media.

Bruno, Jones, Houdini, Bunny, Lennon, Lulu, Adobee, Honey, Mouse and Luna.

We sketched out the logo, design and the website(static) was up in a day on Jan 2nd, 2017 (Yes! I’ve procrastinated writing this post for a while). I used bootstrap as it was quick and styled the cards similar Polaroid pictures. The first thing I added was Google Analytics. It gave us great insights of our visitors. We had many learning’s in first two weeks of operation as there was a decent amount traffic for the website due to social media posts by ScoopWhoop and FilterCopy.

We realised that we needed to curate content on the website quick without needing code deployments(since the website was static). Also, we noticed that only the puppies at the beginning of the page were getting clicked. So the Polaroids needed constant rearranging to get each pup some attention.(As people tend to just browse so first glance and website )


Being an avid Trello fan, we were using it to manage the entire project. I realised that our website was pretty much like a Trello Board where each litter was a list and each card was a pup. Thus was born our website’s back-end & curation platform.

What? You don’t know what Trello is? 
Trusted by millions of people from all over the world, Trello is the easy, free, flexible, and visual way to manage your projects and organise anything.

Steps for integrating Trello:
1. Followed the instructions here. Got an application key, added the client.js 
2. Create 2 public boards(Production & Staging).
3. Used the API to get board details.

On receiving the API response I just ng-repeat’ed the nested structure. Tada! The Trello board was masked into our very own website with puppies all over.

How Trello helped?
- Gave us a great Project Management Tool,
- A Curation Interface (For sorting them puppies, for labelling them puppies, etc),
- An Android App(Trello’s) to curate content on the go,
- Storage for the puppy media and
- Quick API responses

Trello vs adoptthempuppies.in

Where else can this hack be used?
- Basic Listing apps
- Blog’s 
Trello has basically made a LaaS(Lists as a Service). Be creative I’m sure you can think of many more use cases.

Few tweaks that you can add

  • Card Image in lists API itself: 
    In order to get a list of attachments for the card, you need to call the Trello cards API endpoint. That would mean more API calls(1 API call per pup). Instead, I copied the download link** of the attachment and added it to the card description as markdown which I then parsed out. Card title, description and a few other properties are available in the lists endpoint itself.
    ** Used the download link as I had compressed the images to a few kb’s (for faster load time) and on upload Trello converted them to PNG’s with a slightly higher file size.
  • Markdown support utilised for pumping in some HTML:
    I used the markdown ability of the Trello card’s description to inject a lot of basic HTML so sections in the website could be handled in the lists itself. Checkout the Trello board to understand better.
  • Staging Board:
    Created a staging board where once a card/list was well drafted all I had to do was Move list/card to the production board.

Future Plans for #adoptthempuppies?
Make more time to get litters/pups to go on the website. Rope in some volunteers to help support.

Do check us out at www.adoptthempuppies.in