TAC — The Arnold Companies is among the largest fuel wholesalers and aviation service providers in the country. Steady growth, positive financial results and a diverse industry base consistently make TAC one of the top private companies in the US. TAC is made up of many separate brands under one corporate identity, including TAC Energy, TAC Air and Keystone Aviation.
With TAC’s old website built as stand-alone sites that linked to each other on a WordPress foundation, the user experience was over-complicated and required too many steps for visitors to find what they were looking for. Being WordPress-based, it did not allow for clear information architecture to promote the different business lines within the portfolio.
Through a structured RFP process to identify a partner in re-thinking the customer experience and content management system, interactive agency Simple Media and Cosmic JS were selected. Other platform options included WordPress, Drupal, and Joomla.
Focused on building with a mobile-first approach and consolidating the chaos of the existing number of brand sites to bring harmony to the four brands and ease-of-use in content management, TAC found an outstanding and simple solution in Cosmic JS.
To learn more about the development, Brandon Reid, Lead Developer on the project breaks down the stack:
Development Team: “TAC’s backend is powered by Node, Next.js, and Express. Next.js is used for server side rendering capabilities for SEO optimization as well as site routing. Next.js also makes it easy to integrate with Babel and Webpack since they are built right in. The team used Next.js routing API to rendering page templates for pages that have the same design layouts. TAC’s frontend is powered by React.js and the world’s most popular react UI framework, Material UI. In order to use Material UI with SSR, the team had to wrap the site in a JSSProvider and use CSSBaseline. For development they used Eslint as a linter for a cleaner and more consistent codebase.
Since TAC uses ES6 JavaScript, the team had to also implement a very small amount of polyfill to transpile ES6 to ES5 in order for the site to work with IE11. Some notable node modules used were:
- React-Image-Gallery for the image galleries across the site
- React-Masonry-Component for the newsroom
- Fetch for API requests
- For email services/API the team used Nodemailer and Mailgun
TAC’s development team started building the site by using Cosmic’s React Starter, which helped them get jump-started right away. Building TAC started with implementing all globals for the site (Header, Footer, Favicon, etc), so the developers quickly created some JavaScript request functions to pull data from the Cosmic JS Buckets using Cosmic’s Node API. The team added those global components to the sites main _app layout, so every page would be wrapped and rendered with those globals. From there they analyzed what pages would have reusable components across multiple pages or the site, and created component views for those pages based off their analysis.
TAC was then able to efficiently knock out page designs and implement object types in the Cosmic JS bucket on the fly. As TAC got closer to site launch, they noticed compatibility issues with IE11 and had to come up with a solution. At first, they were going to do a browser sniff in the codebase to display something that would work on IE. Instead, the team implemented Babel and some polyfills to solve their compatibility issues.”
“Our goal in this project was not to reinvent the brands, but to simplify the communication and process for website content management. Cosmic JS has allowed us to become current in our presentation and relevant in our content push. Plus, the site is easier to use for visitors and staff alike.”
— Tad Perryman, VP of Marketing, TAC — The Arnold Companies