Story Editor for NPR Stations

Sketches from a design sprint I led in preparation for this project.

Key Technologies

  • React
  • React Redux
  • CSS Modules
  • Webpack

Code Samples

Background

NPR created this web application so stations could create and publish content directly into a single API — enabling stations to more easily share stories with one another and giving them greater flexibility to display content on websites or apps of their choosing.

I led front end development on two of the application’s components, one for finding, filtering, and sorting stories, the other for playing a story’s primary audio.

Finding, Filtering, and Sorting Stories

Managers need to edit, approve, and publish several stories a day, but finding the stories on their docket isn’t always easy. Often, they don’t have enough information — perhaps just the author’s name or a few keywords — so they waste time searching.

I created a simple and effective UI for displaying and finding stories, tested it with station users, and implemented it using React, Redux, and CSS modules.

The list of stories comes from an API as an array of objects, which I display using a custom 'story list' component that uses (React Bootstrap Table)[https://github.com/AllenFang/react-bootstrap-table]. React Bootstrap Table enabled customization that met many of our needs — for example, I created custom callback functions for displaying and sorting bylines, and for showing contextually relevent information on hover. To create filters that met our requirements, however, we decided to build a new component.

The filtering component manages state with Redux. When a user enables or disables a filter, the component calls a reducer function that updates the state of the filters. For example, if you click on the 'includes audio' filter, the state of the audio filter becomes true. The filter UI responds by displaying the audio filter as enabled and the stories list responds by showing only stories that contain audio.

It's easy for editors to enable/disable filters — and to see which are currently active.

Managing A Story's Primary Audio

Editors told us they wanted an easy way to listen to the primary audio associated with a story, so I designed a clear and economical user interface and created a React component to meet the need.

A zoomed-in portion of the audio player.

The component, which wraps the HTML audio element, enables our application to render only the functionality that editors need and lets us create a custom design to fit with our brand.

content editor screenshot
When creating and editing a story, it's easy for editors to see whether a primary audio file has already been uploaded; to preview it; and to edit or replace it.