PhotoWatcher is a web app I created to help run a Photo Day for a club I run at my university. Photo Day is an opportunity for students to come and have their photos taken professionally (by myself and my team). We ran the event successfully in the past, but managing the photos was a problem. Memory cards were lost, photos were mixed up, and confusion ensued. To solve the problem for the next photo day, I decided to write an application to manage everything for us. This application was written about 3 days before the event, so the code could definitely be cleaner. It could stand to have some unit testing set up, but it worked perfectly for our event, so I'm calling it a success.

The Event

The system consists of a NodeJS server and several HTML5/JavaScript/jQuery clients. The clients communicate with each other and the server using web sockets. The code is available on GitHub.

I used Adobe Lightroom's tethered shooting mode to automatically download RAW photos from the camera as they were taken. The server watches this folder for new images using watch. When a new image is detected, the server extracts a JPEG preview from the Camera RAW file using rawly. It then notifies all of the clients that a new photo has been uploaded.

Customers are added to the system using a simple web page that collects their name and email address. When a new user is added, all of the other clients are notified via a message through a web socket.

The sign in page

Once a customer is added, the customer's name is selected on the Photographer Console. Photos appear on this screen as they are taken, and are tagged in the database with the currently selected customer's name. The photographer can also tag images as "final" images by clicking the "select" button on each thumbnail.

The photographer console

We wanted to enable the customer to see their photos as they were taken. To do this, we set up another display running a simple viewer. This viewer shows the last photo taken. The display can also show any image by clicking its thumbnail on the Photographer Console. A similar screen was set up outside the "studio" area running a slideshow of the images that had already been taken. This helped draw more customers.

The Customer Preview Screen

Once the event was over, I created an Overview screen that let us view each of the selected photos, download their RAW files, and upload final edited photos. This helped us keep our editors in sync, and prevented them from editing the same photos.

Editor screen

Finally, we created a simple web interface for customers to be able to log in and view their photos. We also set it up so that the email could be provided through a URL query. This allowed us to send custom links to our customers through MailChimp.

Customer Screen

Overall, the system worked amazingly and really streamlined the process. We had 60 customers throughout the day and took more than 250 photos. I am now planning on spending some time creating a more robust and maintainable version of the system for the next photo day. For now, I have posted all of my code on GitHub for others to use/expand/learn from. Here is the link.