---
title: Little Library
teaser: 'A hackathon project to make a virtual bookshelf.

  '
tags: playbook,books,boston,rails
author: Eric Bailey
published_on: 2019-01-14
---

At the end of the year, thoughtbot sets aside two days for a hackathon called
[Ralphapalooza]. The name is a portmanteau of Ralph, the robot we use for our
logo, and [the term palooza]. During Ralphapalooza, we pitch ideas, form teams,
and create something interesting with our fellow thoughtbotters.

My coworker Elaina suggested taking our Dropbox folder full of ebooks and
creating a small library site for it. It was her hope that it’d help with
discovery of an internal resource chock full of rich information.

Our team consisted of [Elaina Natario], [Adrian Rogowski], [Grant Staublin],
[Steph Viccari], and myself. We kicked things off with a brief meeting to get
consensus on the scope of what we thought we could accomplish in the time
allotted. Responsibilities were then divvied up and a Slack channel was set up
to keep the lines of communication open.

The breakdown of work was:

- Elaina tackled overall visual design and coding of the layout. The rows of
  book covers made for a perfect opportunity to use [CSS Grid]’s [repeat
  function], as well as the new [fractional unit (`fr`)].
- Adrian wrote a clever script that grabbed the first page of every PDF in our
  Books Dropbox folder and converted it into an image, giving us a collection of
  book covers to display.
- Grant assisted Elaina with visual design, and focused on designing the
  display of the site’s search input.
- Steph wrote a Rails app that uses the [Dropbox API] to list available books
  and link users to the relevant Dropbox folder. Her work also included wiring
  up the search functionality.
- To assist with Steph’s efforts, I worked on standardizing the sub-folder’s
  structure. This involved making each folder contain only a single book.
  Multidisciplinary books could potentially live in more than one sub-folder, so
  organizing things by “flattening” them helped reinforce consistency and
  promote discovery.

The project, officially titled Little Library, uses GitHub to manage the project
code, and Heroku to serve it. It is currently cataloguing 243 books, covering a
pretty diverse range of topics.

![Little Library, displaying a search box and rows of book covers and titles.](https://images.thoughtbot.com/blog-vellum-image-uploads/npajwjGTluYK3AwKD13D_little-library.png)

At the conclusion of Ralphapalooza, each team presents what they worked on. We
were thrilled to show our peers a real, live, functioning website! It was also
great to see the other amazing projects, including: a [browser-based musical
instrument], a remote collaboration whiteboard app, an [emoji identification
game], and improvements to our internal search tool.

The end of the hackathon doesn’t mean the end of the project, either. We’ve been
tossing around ideas for new features like per-user public and private tags,
analytics for things like trend analysis and recommendations, and full-text
search of all ebook content.

Personally, I really enjoyed the process. It was a great way to get
better-acquainted with coworkers who I hadn’t had the opportunity to work with
yet. I also thought Elaina’s idea was great—I love the concept of taking
something good, yet potentially overlooked, and elevating it so more people can
appreciate it.

[Adrian Rogowski]: https://twitter.com/AdrianMRogowski
[browser-based musical instrument]: https://thoughtbot.github.io/arpshift/
[CSS Grid]: https://thoughtbot.com/blog/concise-media-queries-with-css-grid
[Dropbox API]: https://www.dropbox.com/lp/developers
[Elaina Natario]: https://twitter.com/elainanatario
[emoji identification game]: https://itunes.apple.com/us/app/thoughtmoji/id1446042925?mt=8
[fractional unit (`fr`)]: https://css-tricks.com/introduction-fr-css-unit/
[Grant Staublin]: https://twitter.com/gcstaublin
[Ralphapalooza]: https://thoughtbot.com/blog/search?utf8=%E2%9C%93&query=ralphapalooza
[repeat function]: https://developer.mozilla.org/en-US/docs/Web/CSS/repeat
[Steph Viccari]: https://twitter.com/SViccari
[the term palooza]: https://www.urbandictionary.com/define.php?term=palooza&defid=1079018