Expat Explore Travel

Good teams will always outperform individuals. At Expat, I found a group with total dedication to their craft which allowed me to grow significantly in my role.

More on that later, but for now let’s focus on the project that challenged me the most, search.

• Rebuild using Vue according to design spec.
• Improve load time by employing a lazy load strategy.
• Make search an NPM package to reuse on any page that lists tours.
• Use a backend API service in order to integrate AWS Elasticsearch with a keyword search field.

Search was the very first project assigned to me when joining up with Expat. I had never used Vue so before I could get started I had to complete enough of Udemy’s course, Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex), to have a foundational understanding of the framework. Fortunately, I have some experience with React so I was able to learn quickly. It didn’t hurt that Vue is without a doubt the easiest of the three main JS frameworks to learn and the code is incredibly clean.

Expat's tech stack also includes a custom JS framework and Foundation’s Panini, powered by Handlebars, to create static pages. Combining these three technologies, I rebuilt search to be hosted on AWS S3 and served using AWS CloudFront. This is the control version of the split test currently being run using the VWO platform.

The variant is the result of the evolution of search. A crisp new design with enhanced functionality and usability.

The website features a number of other pages that contain a list of tours so this version of search was to become a NPM package ensuring consistency throughout the website and dramatically reducing dev time for updates. It also meant that we could allow for additional features to be added to these other listing pages, like filters, without extending the project deadline.

One such feature is a keyword search field which provides a list of suggestions that are fetched from AWS Elasticsearch using a backend API service. This required a custom dropdown menu making sure to adhere to best UX practices including allowing users to navigate and select options with the keyboard.

This past year has been a real learning experience for me and I feel fortunate to have been exposed to so many new tools and technologies.

From complex Gulp builds to analytics tracking to data management using headless CMS Contentful to using Serverless middleware to map said data, I have grown as a developer in many ways. While my focus has turned to the frontend I have always been interested in all aspects of development and enjoyed the opportunity to extend my CI/CD knowledge to include Bitbucket and I also got to learn a bit more about AWS CloudFront, setting up behaviours and running the odd invalidation.

Finally, having the opportunity to work in an Agile environment was the cherry on top. Tools like Asana and Slack can really increase productivity tremendously and myself and the team certainly benefited in a big way and continue to go from strength to strength as we embrace remote working.