Fender Gatsby

Tech Holding migrates Fender web and mobile content from an outdated Ember framework to a new React-based solution.

    Challenges

    • Migrate existing user-facing web content from an unmaintainable, legacy Ember framework & repository into a modern React-based solution.
    • Retain the current content management system, Contentful, that is used by non-technical marketing and eCommerce teams.
    • Collaborate across all reaches of the company including product, marketing, design, SEO/data, & executives.

    Solution

    • Utilize React, GatsbyJS and Contentful integrations to rebuild all of the rendering logic for each Contentful block and page.
    • Follow Fender’s current technical stack and practices for a smooth hand off to the client’s team.

    Benefits

    • Significantly increased site-speed and “time-to-interactive” Lighthouse metrics.
    • Unified tech stack and code practices across all Fender web repositories.
    • Modern codebase enables painless maintenance of a large portion of their online presence for current and new client developers alike.

    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.

    Our Partners

    By using this site, you agree to thePrivacy Policy.