When planning the KPA ticketing app, the first big decision was deciding which technology stack to use

Given the complex and highly-interactive design, we needed something that was going to be developer-friendly while letting us build an application that was highly responsive to user interactions. Nothing’s more frustrating than a slow user interface!

VIA has mostly standardized on ReactJS for smaller interactive user experiences as well as single-page web applications so it seemed like a great fit, even though the ticketing app is just a small (but critical!) piece of a much larger site.

The other advantage to developing the ticketing portion of the site as an almost stand-alone app is that development on the rest of the site could continue in parallel. The more simultaneous work happening, the better!

React’s power comes from the way everything is divided into components which are displayed on a page. Once a component is identified, it becomes trivial to use it in multiple places on a page without having to write a bunch of extra code.

For example, we created a component for a single seat in the list of all available seats. This was great because seats that had been added to the user’s cart had a very similar design, albeit with slightly different data. This component-based architecture let us have all the shared code for that seat layout in a single place, even though it was displayed in multiple locations.

An additional benefit of using components is it makes it easier to allow multiple developers to work on the project at the same time.

The ticketing app was, understandably, quite data heavy. We need to store lists of available seats, seat map data, pricing information, promo codes, shopping cart data, venue information, etc. This data was constantly being updated as people selected seats or filtered based on pricing points or seating sections.

Luckily, this is another use-case where React shines. Leveraging an additional tool called, Redux, we can easily store all of the data used by the site in a single data store. Then we can set up our different components to pull data from that store. When data in the store changes, the components using that data automatically update themselves. All of this changing and updating is blindly fast because React is very good at only updating the components that have actually changed. No need to refresh the entire page!

For example, let’s say the user wants to filter seats to a certain price range. We can build a component which lets them select the prices they want. Those selected prices are fed back into the data store. Then React takes care of updating all of the components that depend on that data. This includes things like updating the seat map and ticket list to hide seats that don’t match the selected filter.Tools aren’t a guarantee of success. Just like a fancy hammer doesn’t mean you can easily build a house. The most important part of a project is the people working on it. Given the huge scope of this project and the aggressive timeline, our expert people using the above tools allowed us to deliver a quality product while sticking to the timeline we set out for ourselves.

Want to know more about our work for Kentucky Performing Arts? Read our case studies on 

the new Kentucky Performing Arts branding

how we translated that branding into the new kentuckyperformingarts.org website

PHP, Javascript & React

Ecommerce

Websites

Using React and Redux to build the Kentucky Performing Arts ticketing experience

Here at VIA, we have many clients that use 

, which is also our preferred eCommerce solution. Over the years, we’ve found a few helpful tips and tricks that make developing for WooCommerce a little bit easier.

By using hooks (actions/filters) you can keep your code changes more streamlined and relatively maintenance-free (when compared to using a template override for one small change). In our process, anytime you use a template override, you have to justify doing that over using a hook.

For example, with the Corona virus causing disruptions, you may want to display a notice on how it will affect shipping above the shipping methods section in the checkout. So instead of making a template and manually adding a paragraph tag above that section, you can use the 

If you do have to use a template override, make sure you make a note in the file what you are adding or removing to it. This will come in handy down the road when you are updating WooCommerce and you have to update template files – if you don’t document the template override changes, it’s way harder to apply the new changes without overriding your changes and spending time comparing the two.

If you don’t have to, don’t use a plugin. While they are super handy and save on development time, if it’s something on the simple side, go ahead and roll your own unless the plugin you are considering is high quality (trusted source, good ratings, up to date).

Recently I reviewed a site that was held together by 44 plugins, the majority being different WooCommerce related plugins and needless to say there were many conflicts and the overall performance was bad. This was a case where 75% of the plugins could have been rolled by the developer at a low cost for better performance and higher quality.

WordPress

WooCommerce Tips

User Experience

UX / UI

Web Design

Frontend Development

Foxhollow Farm 

Custom Dev

Content Strategy

Stave & Thief Society

If you need to sell online, we’ve got you covered. From simple selling strategies to complex subscription models, we’ve built them all. Our clients with ecommerce process tens of thousands of dollars per month through our systems. From Shopify integrations to WooCommerce workhorses to Magento installations and beyond, we’ve built and managed them all, safely and securely.

Ecommerce

Ecommerce: Case Studies

01

Foxhollow Farm

02

Stave & Thief Society

Ecommerce: Blog Posts

Using React and Redux to build the Kentucky Performing Arts ticketing experience

WooCommerce Tips