The Reading Room

Background

The Reading Room is a charitable organization that builds flash libraries in Haiti to provide children with access to thousands of books. Kyle knows the founders personally, and they approached him with the idea of a digital library on tablet devices that would help them dramatically expand their organization's reach and impact. They had a proof of concept with PDFs of books stored in folders on a tablet, but they weren't sure how to automate that setup across hundreds of devices.

Kyle proposed a Progressive Web App that would help scale the digital library to as many devices as the organization could get their hands on while maintaining the ability to add more books, features, and even new languages over time. Over the past few years, the digital library has grown to over 3,000 books across French, Haitian Creole, Spanish, and English. The PWA can be downloaded with any combination of desired books for offline use.

Visit the Reading Room

Challenges

Performance Considerations

1. The app must handle a library of thousands of book PDFs that can be extensively filtered by language, topic, author, source, length, reading level, and more.
2. Applying filters should be a snappy experience with new book results populating quickly on each filter change.
3. When a card for a certain book is clicked or tapped, the full book PDF should open instantly in a full-screen view.
4. Opening and closing many different books or applying and removing many different filters should not have any noticeable impact on performance.

Robust Offline Support

1. In offline mode, the app should perform just as smoothly with downloaded books as it does with books fetched over the network while online.
2. The app must also function smoothly on budget devices with lower specs, since those are often what people have access to in developing countries.
3. Internet speeds will often be quite slow for the app's primary audience. There must be a way to control which books are downloaded for offline use so that users don't have to wait hours downloading many books they aren't interested in.

Translation into Four Languages (so far)

1. The primary spoken language in Haiti is Haitian Creole. This is not a widely-spoken language worldwide, so obtaining tranlations and digital books in this language is challenging.
2. The language used in Haitian schools is French, so it is common for Haitian children to speak and read French regularly.
3. Haiti shares an island with the Dominican Republic, where the primary spoken language is Spanish.
4. Many of the groups that support schools in Haiti are based in the United States and Canada, so English is essential for scaling the app and expanding its reach.

Choice of Tech Stack

Performance

1. React: virtual DOM for performant rendering of book results and applying filters without page reload.
2. Redux: state management of applied filters and which book, if any, is currently open.
3. React-PDF: rendering book PDFs inside a full-screen modal with smooth page navigation on click or swipe.
4. React Virtuoso: infinite scroll for up to thousands of book results based on applied filters, only rendering the nearest 10 in the DOM at one time.

Offline

1. Progressive Web App (PWA): single codebase serving website and digital library web app is also installable as a PWA, which streamlines development and enables full offline use with downloaded books.
2. IndexedDB: downloaded books are stored in IndexedDB to allow filters and endless scroll of results to function just as smoothly while offline as they do in online mode.

Multilingual

1. React-Intl/ FormatJS: all text on the website and web app is wrapped in React-Intl components that allow seamless localization based on the user's selected language.
2. Translations are stored in JSON files indexed by ids for each snippet, allowing less technical members of the organization to add or modify translations.