Now an Then Screens
Decoupling Drupal

When Wonderful Machine approached Zivtech, was a functioning prototype built in Meteor with a Mongo database. Our team reviewed the code and found that it was clean, but the site acted more as a proof of concept as opposed to a stable foundation to build upon. 

We chose to build a decoupled Drupal 8 site with React as the front-end framework. Drupal would allow for easy management of user accounts, tutorials, ads, and search capabilities. On the frontend, React’s speed would allow for seamless timeline scrolling and a better user experience. It was critical that users have a fast experience when scrolling through timelines and that the experience could scale to potentially host a timeline of millions of pictures. 

Now An Then user account
Scrolling Timeline

The prototype timeline display had some issues keeping up with user interactions, particularly when navigating the timeline scroller. The goal of the new timeline display was to eliminate loading delays and scrolling jumps so that the interface always responds to user interactions without the feeling of delay. 

We wanted to provide a smooth experience while scrolling, so the regular infinite scroll was not exactly an ideal solution. Instead, we decided to work with subsets of 15 images loaded initially, loading the next subset at a half past scroll in any direction (and unmounting the subset on the further opposite). We also had to have the date scroller respond to the timeline both when dragging it, clicking anywhere on its axis, or on scrolling through the timeline.

Now an then timeline
Building a Scalable Platform

Wonderful Machine also wanted to develop additional features, framed as NowAnThen Pro, which would direct users to purchase images or allow a brand to use the site to feature a product timeline. The pro version would have its own database and search index, but share most of the same codebase with the initial site.

In addition to all the features of NowAnThen, Pro required a number of additional features: a URL on photos to link to the original website for license information; a photographer field that displays as a link to search results that show all photos by the photographer; a free-tagging field for the ability to associate photos with events; a different main menu that can be managed by site admins. The Pro version also only allows the admin to add photos. Users can create an account and make custom timelines, but their timelines can only include “grabbed” photos. 

Now An Then