You could call it the Cinderella of bridges. For over seventy-five years, the San Francisco-Oakland Bay Bridge has served as one of the hardest-working bridges in the U.S. Yet it remained overshadowed by its famous golden sister to the west.

In 2013, the Bay Bridge finally emerged onto the world stage, resplendent in light and transformed by artistic ingenuity. The Bay Lights project, an innovative public artwork, illuminated over 25,000 LEDs strung along the bridge’s suspension cables. Each night, the artwork randomly generated light patterns that animated the grey canvas of the bridge and delighted Bay Area residents and visitors. The Bay Bridge had finally become glamorous.

Photography by James Ewing

Treating the Bay Bridge as a canvas of light was the brainchild of Ben Davis, who reached out to the acclaimed light artist Leo Villareal. Through the support of public agencies, private donors, and citizen engagement, the artist’s vision was installed from 2013-2015. Ben Davis established ILLUMINATE, a nonprofit arts organization, to oversee the artwork’s permitting, installation, fundraising, and operations.

Now, the Bay Bridge is ready for its encore. On January 30, 2016, a more robust, long-term installation of the Bay Lights will debut—just in time for San Francisco’s latest gala event, Super Bowl 50.

Beyond the Bay Lights

To Bay Area residents, The Bay Lights offer a way to connect more deeply to their community. To the team at ILLUMINATE, The Bay Lights represent a beacon of possibility, inspiring other amazing large-scale artworks that could transform city spaces and public consciousness.

Photography by James Ewing

To further this vision, ILLUMINATE wanted to build a conceptual bridge—helping people connect The Bay Lights to the possibility of future public art. Their Shine It Forward program invites people to dedicate one of the artwork’s LEDs to a loved one. By doing so, they not only further personalize their own experience of The Bay Lights, but they also help bring more monumental art to their community.

Beacons of generosity powered by Heroku + Salesforce

One of ILLUMINATE’s corporate supporters is Salesforce. Through the Salesforce Foundation, the organization was able to use the Salesforce Platform to establish a donor system of record. Heroku contributed platform resources and developers to create a donor engagement app running on Heroku to support the Shine It Forward program. The app was primarily created by one developer with occasional input from others on specific features.

Salesforce and Heroku have enabled us to build a robust donor engagement system that we can use to create ongoing relationships—an extremely valuable asset for an arts organization. Ben Davis, Founder & Chief Visionary Officer, ILLUMINATE

The app’s data model was designed to operate directly against ILLUMINATE’s Salesforce objects via Heroku Connect. All website data, such as donations, personalization, and The Bay Lights interaction, is immediately reflected in ILLUMINATE’s existing Salesforce org as opportunities, contacts, and custom objects. This gives the organization a current view of all donor information integrated with their existing operational data.

The strategic use of Heroku Add-ons to develop certain features allowed the app’s developer to stay on track to deliver within a six-week timeframe. Using Filestack, a filepicker widget was embedded that provides an entire file infrastructure, enabling users to upload photos to the app from social media, cloud drives, and other file services. It also provides a cropping interface and multiple resolutions for output in different layouts, as well as pushes to Amazon S3 file storage.

Heroku Add-ons were a huge boon to our project timeline. What might’ve taken weeks, instead was accomplished exquisitely within a matter of hours. Ben Davis, Founder & Chief Visionary Officer, ILLUMINATE

The app also provides a downloadable "certificate of authenticity"—a beautifully designed photo of The Bay Lights with personalized text overlaid. This was implemented using another image processing add-on called Blitline. It took a bit more configuration than Filestack, but it bypassed the need to create a custom buildpack for image processing, which reduced development time by a week.

Other key Heroku Add-ons included: a Heroku Postgres database, Mailgun for email automation of personalized thank you emails and Papertrail for log management.

The Shine It Forward stack

Shine It Forward is comprised of two apps—the donor-facing UI and the API—with a microservices architecture. The organization’s home site, Illuminate.org, was also ported to Heroku so it could be managed alongside the others. Each of the three apps is set up with their own Heroku Pipeline.

The app’s Node.js front-end web service renders a JavaScript application on the server side, which serves the UI to web browsers. It’s built on the React framework with Redux to handle stateful data and Radium for styling. It’s written in ES6/ES2015, and transpiled by Babel both in Node.js and for the web browser.

The backend API is written in Ruby using Pliny, Heroku’s defacto Ruby API library. It’s a JSON REST web service and handles the data and service integration with most of the add-ons and Heroku Connect.

The app is designed as a "universal web app," which means that the app is running on the server as well as in the web browser. If a user turns off JavaScript in the web browser and loads the Shine It Forward app, they’ll actually get fully rendered pages and an instantaneous load experience. This approach also helps services like Facebook scrape and share content, as well as improves Internet archiving and search engine indexing.

Building our app on Heroku has helped us better engage donors by giving them an elegant, sophisticated user experience on any device. Ben Davis, Founder & Chief Visionary Officer, ILLUMINATE

As far as workflow, the developer used Salesforce Sandbox and Change Sets to deploy changes on the Salesforce side, and Heroku Pipelines to deploy Heroku app changes.

App experience

To minimize friction for donors, ILLUMINATE wanted a mobile-first, responsive web app that would perform gracefully across mobile, tablet, and desktop browsers. Using the Shine It Forward app, a donor can dedicate a light in The Bay Lights project to a loved one and memorialize the dedication by uploading a photo and text. The system randomly assigns a light from the available pool, and users can navigate to the light detail page and zoom in on their specific light. A permalink is generated for users to share their dedication on Facebook, Twitter, or other social media sites.

For ILLUMINATE, artistic and technology innovation are the perfect match. Together, they can help inspire generosity, create meaningful art, and build a stronger, engaged community.

You too can Shine It Forward and support more public artwork like The Bay Lights!