VIX-Chevron-Up

Wagtail Catalogue Application

A Wagtail & React product catalogue application

  • App Development
  • Website Development

One of the more recent projects undertaken at VIX has been one that has pushed our team to learn new technologies, eat lots of pizza and ultimately create products that have been very well received by the customer.

As the first phase comes to an end for the Wagtail Catalogue, we thought we’d provide a write-up of the challenge itself and the approach that was taken.

Technical Challenges

The first challenge that was brought to us by the client was that the applications had to work both online and offline. At first thought it might seem like this is an easy undertaking, but the purpose of the project was to have a catalogue of products available to view and proceed to order with new lines/products added daily.

The second challenge was that of how the client would be able to add new products to the application.

The third challenge was the functionality of the user facing application itself - users needed to be able to search, filter, favourite and eventually order the products from within the application.

We decided to tackle these challenges using Wagtail to power our content store, React Native for iOS and React + Electron for both desktop applications (MacOS and Windows).

Our Approach

Wagtail

The first of the three pieces of software used, Wagtail, is the open source Content Management System (CMS) of choice that we have all embraced at VIX. For the use case in question it gave us the opportunity to create a database of products which the client didn't have to hand. Wagtail had provided us with an uncomplicated way to store, update and manage the data for thousands of products all in one place.

React Native

React Native (RN) is a technology that we previously had no prior experience of and is still relatively new. The main benefit of using React Native was that we could develop a mobile application using only JavaScript. This allowed us to utilise the existing skillsets of our team more than having to write something in Object C or Swift for iOS and Java for Android.

JavaScript would also allow us to port large sections of our functionality over to the desktop versions of our application. To maximise the portability of this code we decided to adopt React on desktop too, however its not possible to create a native desktop application using React alone.

For bespoke digital projects we offer a custom projects retainer which includes user research and development through to support and hosting. Take a look at how we can deliver your bespoke digital project on time and within budget.

React + Electron

Electron is an open-source framework that allows you to create native desktop applications using web technologies like JavaScript, HTML and CSS. Using Electron allowed us to use large chunks of the code developed for our mobile application in our native desktop applications.

Mailgun

One last thing we used that's worth mentioning is Mailgun.Mailgun is a service that allows you to read, send and track emails using an API. We decided it was best to use a prebuilt service for sending mails through our app instead of developing a custom mail handler for time saving reasons and also because it comes with built in analytics and metrics which the client can view and get vital information about the performance of the applications.On the application side since we just interact with Mailgun's API we didn't need any special code to interact with the native mail clients on each individual device, just a basic https request with our desired payload and some information that lets Mailgun know what the destination email should be (usually depending on the users country).

Project Summary

In summary, the Wagtail Catalogue project has been a challenging but enjoyable experience for the team at VIX and we look forward to creating more apps in the future with the newly acquired skill sets.