Back to projects

NTG - Preact Movie Listing

The Neighborhood Theater Group (NTG) is a collective of theaters in Milwaukee, WI.

The problem

Their site is created in Adobe Muse. Because there is no dynamic backend to Muse sites, they needed to update the new films and show times on their site manually.

Updating a ton of films and times every week by hand sounds tedious, so we came up with a way to automate these updates!

The plan

NTG uses a movie ticketing service called Omniweb, which provides their customers an XML file of the current movie listings and times. The plan was to parse this weekly-updated XML file for new information and dynamically create the movie listing.

We could then embed this little app in their Muse site and make everyone's life easier!

Parsing XML vs JSON

This project was unique to me as it is the first time I was using XML as a data source, as opposed to a JSON REST API. I learned a lot about parsing XML, and how to interact with XML data, which is pretty similar to working with the DOM, but with a few caveats.

Neighborhood Theater Group Preact Movie Listing
A film entry generated from the XML

Tools for the job

React and Preact frameworks
React and Preact

For this project I created my own webpack build process and used React to generate a list of the current movies and their respective showtimes.

After getting everything working in React, I realized that we were not using a lot of the framework's more advanced features and that we could improve performace and save on bytes by making the switch to Preact.

Working on this project was invaluable to me is that it showed me just how easy it is to port a React app to Preact, which is a much lighter React alternative. If you want a quick drop-in solution, you just need to do a quick npm install --save preact preact-compat, and tweak your imports and webpack configs, as detailed in this Preact guide.

Great job! 👍

scroll up