Wizarding World Web

Tech Holding helps Wizarding World build a new online home, combining old content previously published on Pottermore.com with new, paid premium content and a completely refactored backend architecture.

Tech Holding helps Wizarding World build a new online home, combining old content previously published on...

    Challenges

    • Create a new home for the Wizarding World franchise, along with original JK Rowling content published previously on Pottermore.com.
    • Support frequent updates to content by an editorial team, and future marketing optimization efforts.
    • Support premium content shown to only paid users.
    • Improve the existing monolithic backend architecture.

    Solution

    • A new dynamic server-rendered web platform: WizardingWorld.com
    • A maintainable serverless infrastructure capable of supporting large amounts of requests per day.

    Benefits

    • A beautiful new Wizarding World home on the web, always available to fans of all ages.
    • Precious original content preserved and repurposed for fans to enjoy for years to come.
    • The franchise has a dynamic web platform enabling them to reach their worldwide audience in countless ways.
    • Easier to maintain codebase and infrastructure.

    Web Platform Details

    WizardingWorld.com is the home for Harry Potter and Fantastic Beasts and serves as the official Harry Potter fan club. This web platform was created to be a central place for fans to find out what’s new in the Wizarding World. It also serves as a companion to those around the world discovering Harry Potter and the Wizarding World for the first time. This site serves up to 5 million visitors a month. It has exclusive JK Rowling written material, news articles, quizzes, franchise information such as books, films, fan experiences, a shop, and exclusive members-only behind-the-scenes video content.

    Our Approach

    A state-of-the-art Modern Web Platform

    When we sat down with the stakeholders to pick the tools to use for this project, some primary concerns were brought to the forefront. The site’s content needed to be discoverable. It needed to be dynamic, with some restricted content for paid users only. Like most large audience projects, it needed to be scalable from day one. With larger projects like this one, it’s possible to get bogged down by unexpected changes to the scope, the design, and the execution plan. We needed to choose tools that allowed the different engineering teams to work together in a cohesive way to quickly solve all the various challenges we faced on the fast-paced roadmap. NextJS was chosen because it is a robust and well-supported framework. It helped to simplify the complex implementation of server-rendered React. It’s wise advice to try to avoid frameworks when you can (framework downsides always include: lock-in, bulkiness, limitations). However, due to the scarcity of support for the numerous challenges writing Isomorphic/Universal JavaScript, this framework helped the team “Fall Into The Pit of Success” by using popular tools and walking in the footsteps of other engineers. With the power of the massive open-source community backing it, using NextJS simplified a complex implementation and allowed the team to focus on the details that mattered to the business. Apollo’s GraphQL Server is another core technology we used on this project. The power of the technology really lies in the introspectable self-documenting nature of its schema definition language. The Apollo Client makes data fetching, caching, pagination, and state management possible with little engineering effort. This allows backend engineers and frontend engineers to collaborate very easily as the API requirements are implemented over the course of the project. Also, with the new introduction of Apollo Federation, we were able to convert the implementation from a primarily monolithic backend to a microservice architecture.

    Case Outcomes

    So Many Features, So Little Time

    True to the style of Tech Holding, we were able to think big, start small, and scale fast! Once our product roadmap was defined, the core engineering team set about building the tooling needed while the design and product teams continued to refine the vision. Over the course of the next three months, the team scaled up to include three very large scrum teams working around the clock to build the features needed to create the platform. The first code commit was made on July 1st, 2019, and the new platform was launched on time three short months later on October 1st, 2019.

    Contributing to the Ecosystem

    The backend move to using Apollo Federation proved to be a big challenge that pushed the boundaries of the technology in the context of the AWS Serverless environment we used for deployment. Through direct collaboration with AWS engineers, the team successfully implemented federated microservices and helped improve the ecosystem for future teams to take advantage of. Through hard work and expertise, the team was able to deliver on the promise of a maintainable well-architected AWS infrastructure.

    Summary

    Tech Holding was able to plan, execute, and deliver a world-class, state-of-the-art modern web platform in an amazingly short period of time. Despite the aggressive timeline, the team was able to deliver a maintainable solution, even improving the backend architecture, and eliminating tech debt along the way. We proved to be truly capable of our motto: think big, start small, and scale fast!

    Fender-React Native Shared Code

    Fender partners with Tech Holding to build a personalized user experience for their flagship product, Fender Play, using React Native shared code.

    Fender partners with Tech Holding to build a personalized user experience for their flagship product, Fender Play, using...

    By using this site, you agree to thePrivacy Policy.