Our Approach

Fender Digital began a large amount of its initial web development using the Ember framework. As their company matured and more solutions were explored, they rapidly began building newer projects using React. With this maturity, it became clear that having a mix of technologies behind different portions of their whole codebase was detrimental to development. Fender decided to include this rework of their public-facing website in a larger project called Site Unification, with the goal of bringing their website under the same technology. Tech Holding was trusted to get ramped up on their tech stack - TypeScript, Styled Components, React Hooks, Cypress - and front-end standards quickly and efficiently in order to begin work as soon as possible. With Tech Holding’s expertise of GatsbyJS and Fender’s current CMS being Contentful, integrating the two was a no-brainer. This would accomplish modernizing the code, maintaining current content management practices, and provide numerous benefits of GatsbyJS - speed, reliability, and static site rendering.

Tools Used

• TypeScript

• GatsbyJS + Contentful

• GraphQL

• React (16.8+, Hooks)

• Styled Components

• Cypress

• Jest

Outcomes

Tech Holding was able to rebuild all of the existing content blocks, feature and blog pages, and implement an entirely new design for their Fender Articles feed. As other teams at Fender, such as Shop (shop.fender.com), and Play (www.fender.com/play), were also part of the Unification project, this required careful considerations of design, release timing, and content management in order to coordinate and roll everything out seamlessly. Using Gatsby for this effort had the added benefit of greatly improved performance and painless server-side rendering. Since Gatsby builds all of its pages before serving any of them, Fender would still be able to serve all of its pre-built content without a hitch if Contentful ever had an outage.