Case studies

.eslintrc.cjs

@@ -234,6 +234,9 @@ module.exports = {
           config: path.join(__dirname, './packages/web/docs/tailwind.config.ts'),
         },
       },
+      rules: {
+        'import/extensions': 'off',
+      },
     },
     {
       files: 'cypress/**',

packages/web/docs/package.json

@@ -2,6 +2,9 @@
   "name": "@hive/docs",
   "type": "module",
   "private": true,
+  "imports": {
+    "#components/*": "./src/components/*"
+  },
   "scripts": {
     "build": "next build && next-sitemap",
     "dev": "next --turbopack",

packages/web/docs/src/app/_meta.ts

@@ -60,6 +60,15 @@ const meta: Record<string, DeepPartial<Item | MenuItem | PageItem>> = {
       typesetting: 'article',
     },
   },
+  'case-studies': {
+    type: 'page',
+    title: 'Case Studies',
+    theme: {
+      sidebar: false,
+      toc: false,
+      breadcrumb: false,
+    },
+  },
   'oss-friends': {
     type: 'page',
     title: 'Our Open Source Friends',

packages/web/docs/src/app/case-studies/(posts)/layout.tsx

@@ -0,0 +1,25 @@
+import { GetYourAPIGameWhite } from '#components/get-your-api-game-white';
+import { cn } from '@theguild/components';
+import { CaseStudiesHeader } from '../case-studies-header';
+import { MoreStoriesSection } from '../more-stories-section';
+import '../case-studies-styles.css';
+import { LookingToUseHiveUpsellBlock } from '../looking-to-use-hive-upsell-block';
+
+// We can't use CSS Modules together with Tailwind,
+// because the class responsible for dark mode gets transformed
+// so `dark:` prefixes don't work.
+const ONE_OFF_CLASS_CASE_STUDIES = 'case-studies';
+
+export default function CaseStudiesLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className={cn(ONE_OFF_CLASS_CASE_STUDIES, 'mx-auto box-content max-w-[90rem]')}>
+      <CaseStudiesHeader className="mx-auto max-w-[--nextra-content-width] pl-6 sm:my-12 md:pl-12 lg:my-24" />
+      <aside className="relative mx-auto max-w-[--nextra-content-width]">
+        <LookingToUseHiveUpsellBlock className="absolute right-2 top-4 max-lg:hidden lg:w-[320px] xl:w-[400px]" />
+      </aside>
+      {children}
+      <MoreStoriesSection />
+      <GetYourAPIGameWhite className="sm:my-24" />
+    </div>
+  );
+}

packages/web/docs/src/app/case-studies/(posts)/sound-xyz/page.mdx

@@ -0,0 +1,145 @@
+---
+title: 'Sound.xyz: Scaling GraphQL Infrastructure for Web3 Music Innovation'
+excerpt:
+  'Sound.xyz is revolutionizing the music industry by addressing two critical challenges: the
+  concentration of streaming revenue among top artists and the inadequate compensation per stream.'
+category: Music
+authors:
+  - name: David Greenstein
+    position: Co-Founder
+    avatar: https://avatars.githubusercontent.com/u/30914691?v=4
+---
+
+import { DocsIcon, LargeCallout } from '#components/large-callout'
+import { Lede } from '#components/lede'
+import { SmallAvatar } from '#components/small-avatar'
+import { CallToAction, ContactButton } from '@theguild/components'
+
+<Lede>
+  Sound.xyz is revolutionizing the music industry by addressing two critical challenges: the
+  concentration of streaming revenue among top artists and the inadequate compensation per stream.
+  As they scale their platform to empower artists and build stronger community connections, their
+  technical infrastructure needs have evolved significantly, particularly in API management and
+  service architecture.
+</Lede>
+
+## Background
+
+Sound.xyz was founded with a mission to transform the economics of music streaming. The platform
+aims to address two fundamental problems in the current music industry:
+
+- The extreme concentration of attention, where 90% of streams go to just 1% of artists
+- The unsustainable economics of streaming, where artists earn only $0.003 per stream
+
+The company's vision centers on creating a more equitable music ecosystem that properly values
+artistic content and enables artists to build sustainable careers.
+
+![Sound.xyz: Discover new music and prove you were there first](./sound-xyz.webp)
+
+## Challenges
+
+Sound.xyz implemented a sophisticated GraphQL-based architecture with the following key components:
+
+1. **Scale and Complexity**
+   - Moved from a monolithic structure to a microservices architecture
+   - Enabled independent service scaling and development
+   - Maintained service autonomy while ensuring cohesive API experience
+2. **GraphQL Implementation**
+   - Adopted GraphQL as the primary API layer for all clients
+   - Implemented GraphQL stitching to combine multiple service schemas
+   - Utilized Hive as the central source of truth for the GraphQL gateway
+3. **Schema Management**
+
+   Selected Hive as their GraphQL management platform due to:
+
+   - Existing integration with GraphQL Inspector
+   - Comprehensive schema management capabilities
+   - Built-in analytics and monitoring
+   - Breaking change detection and prevention
+
+## Implementation
+
+Sound.xyz's implementation journey began with a monolithic GraphQL API that served as the foundation
+for their platform. As the platform grew, they systematically decomposed this monolith into
+microservices, implementing GraphQL stitching to maintain a unified API interface. The integration
+of Hive came as a natural progression, building upon their existing GraphQL Inspector implementation
+and providing additional tools for schema management and API monitoring. This phased approach
+allowed them to maintain service stability while gradually transitioning to a more scalable
+architecture.
+
+<div>
+
+> Hive gives us great developer experience and observability over our GraphQL API.
+
+<cite>
+  <SmallAvatar src="https://avatars.githubusercontent.com/u/3156233?v=4" />
+  <span>Vignesh Hirudayakanth</span>
+  <span>Sound.xyz</span>
+</cite>
+
+</div>
+
+## Results and Benefits
+
+The implementation provided Sound.xyz with several key advantages:
+
+1. **Developer Experience**
+   - Unified schema management
+   - Consistent API documentation
+   - Improved development velocity
+2. **Operational Efficiency**
+   - Centralized API monitoring
+   - Automated breaking change detection
+   - Reduced maintenance overhead
+3. **Platform Scalability**
+   - Independent service scaling
+   - Flexible architecture for new features
+   - Improved system reliability
+
+<LargeCallout
+  icon={<DocsIcon />}
+  heading="Automated Breaking Change Detection"
+  variant="secondary"
+  cta={
+    <CallToAction variant="tertiary" href="/docs/management/projects#alerts-and-notifications">
+      Learn More
+    </CallToAction>
+  }
+>
+  Configure and utilize automated breaking change detection to identify and address schema changes
+  before they impact your API consumers. Ensure seamless updates and maintain API reliability with
+  this step-by-step guide.
+</LargeCallout>
+
+## Lessons Learned
+
+Schema Management is Critical: Centralized schema management becomes increasingly important as the
+number of services grows. Tool Selection Matters: Choosing Hive early provided built-in solutions
+for common challenges. Architecture Evolution: Starting with a monolith and gradually transitioning
+to microservices allowed for controlled growth.
+
+<LargeCallout
+  icon={<DocsIcon />}
+  heading="Simplify Your Schema Management"
+  variant="primary"
+  cta={<ContactButton variant="secondary-inverted" />}
+>
+  Effortlessly manage schemas, track versions, and automate change notifications to ensure reliable
+  and scalable GraphQL APIs.
+</LargeCallout>
+
+## Future Considerations
+
+As Sound.xyz continues to grow, they are well-positioned to:
+
+- Scale their microservice architecture further
+- Add new features and services independently
+- Support an expanding developer ecosystem
+- Maintain API stability while innovating rapidly
+
+## Conclusion
+
+Sound.xyz's implementation of a GraphQL-based architecture, managed through Hive, demonstrates how
+modern API management tools can support rapid growth while maintaining stability and developer
+experience. Their approach provides a valuable template for other organizations facing similar
+challenges in scaling their API infrastructure.

packages/web/docs/src/app/case-studies/(posts)/wealthsimple/page.mdx

@@ -0,0 +1,182 @@
+---
+title: "Building a Unified Financial API: Wealthsimple's Hive Implementation"
+excerpt:
+  'As the company scaled, the need for a robust, flexible, and efficient API architecture became
+  paramount, leading to the adoption of GraphQL with Hive as their central API management solution.'
+category: Finance
+# We would need to go through approval to get author images. I guess we can leave this as is for now.
+authors:
+  - name:
+    position:
+    avatar:
+---
+
+import { DocsIcon, LargeCallout } from '#components/large-callout'
+import { Lede } from '#components/lede'
+import { SmallAvatar } from '#components/small-avatar'
+import { CallToAction, ContactButton } from '@theguild/components'
+
+[Wealthsimple](https://www.wealthsimple.com/en-ca) is one of Canada's fastest growing financial
+institutions and offers a full suite of simple, sophisticated financial products. As the company
+scaled, the need for a robust, flexible, and efficient API architecture became paramount, leading to
+the adoption of GraphQL with Hive as their central API management solution.
+
+## Challenges
+
+The primary challenges that led Wealthsimple to seek a GraphQL solution included:
+
+1. **Service Integration Complexity**
+
+- Managing a distributed architecture with many microservices
+- Need for comprehensive usage analytics beyond basic performance monitoring
+- Coordinating API changes across multiple development teams
+- Ensuring consistent performance regardless of customer profile
+
+2. **Development Workflow**
+
+- Lack of visibility into API usage patterns
+- Difficulty in tracking deprecated field usage
+- No systematic way to validate schema changes
+- Coordinating between multiple client applications (mobile and web)
+
+## Architecture
+
+### GraphQL Gateway
+
+At the heart of the system lies a centralized GraphQL gateway that serves as the primary entry point
+for all client applications. Built with TypeScript and Node.js, this gateway acts as an intelligent
+router, orchestrating requests across the service landscape. The gateway implements
+[schema stitching](https://the-guild.dev/graphql/stitching) to unify microservice schemas into a
+cohesive API surface.
+
+### Service Layer
+
+The underlying service layer comprises domain-specific services, representing different areas of
+Wealthsimple's financial ecosystem. Most services are built in Ruby, with a small subset using other
+technologies. These services use a mixed architecture approach, where some endpoints expose GraphQL
+interfaces while others maintain REST APIs. To seamlessly integrate REST services, the gateway
+utilizes Apollo data sources, ensuring consistent data access patterns. The team has also developed
+specialized components, including a custom Spring bean for reporting usage metrics to GraphQL Hive.
+
+<div>
+  > Hive enables Wealthsimple to build flexible and resilient GraphQL APIs. The GitHub integration
+  provides feedback in a format developers are familiar with and conditional breaking changes enable
+  us to focus our discussion on schema design rather than maintenance. Hive empowers us to
+  confidently evolve our schemas by ensuring seamless API updates, detecting potential breaking
+  changes, and guiding developers.
+</div>
+
+## Implementation
+
+The implementation focused on two key areas:
+
+1. **Usage Analytics Integration**
+
+- Implemented complementary tracking alongside existing Datadog setup
+- Enhanced GraphQL usage monitoring capabilities:
+  - Client-specific query tracking
+  - Detailed operation body analysis
+  - Real-time usage statistics
+
+2. **Schema Validation System**
+
+- Established global policy for schema changes
+- Implemented 30-day field usage monitoring
+- Integrated real-time developer feedback system
+- Set up automated validation checks for breaking changes
+
+## Results & Benefits
+
+The implementation has delivered several significant benefits:
+
+1. **Enhanced Development Workflow**
+
+- Data-driven decision making for schema changes.
+- Prevented potentially breaking changes through usage analysis.
+- Improved developer confidence in schema modifications.
+
+2. **Operational Improvements**
+
+- Better visibility into API usage patterns.
+- Reduced risk of breaking changes.
+- More efficient schema management.
+
+<LargeCallout
+  icon={<DocsIcon />}
+  heading="Comprehensive Query Insights"
+  variant="secondary"
+  cta={
+    <CallToAction variant="tertiary" href="/docs/dashboard/insights">
+      Learn More
+    </CallToAction>
+  }
+>
+  Get a detailed view of all GraphQL operations executed by your consumers, including performance
+  metrics and total counts. Click on any specific query to explore the full list of fields and
+  arguments used in the operation.
+</LargeCallout>
+
+## Lessons Learned
+
+1. **Schema Validation Impact**
+
+   Schema validation has helped Wealthsimple's API development process by enabling data-driven
+   decisions based on actual usage patterns. This shift from guesswork to quantifiable insights has
+   allowed teams to confidently evolve the API while maintaining stability for existing clients.
+
+2. **Integration Considerations**
+
+   Cross-platform integration has positioned Wealthsimple as an active contributor to the
+   open-source community, where they now maintain the official
+   [GraphQL Hive Ruby client](https://github.com/rperryng/graphql-ruby-hive?tab=readme-ov-file#graphql-hive-graphql-ruby-integration).
+   This commitment to open-source development not only supports their own cross-platform needs but
+   also benefits the broader GraphQL ecosystem. Their experience demonstrates the importance of both
+   consuming and contributing to open-source tools while building a robust financial platform.
+
+## Future Plans
+
+1. **Schema Registry Migration**
+
+   Wealthsimple plans to transition away from their existing git-ops system in favor of Hive's
+   comprehensive schema registry feature. This strategic move will modernize their schema management
+   process by providing a centralized, automated system for schema validation and distribution. This
+   migration represents a key step in Wealthsimple's broader initiative to enhance their API
+   infrastructure and developer experience.
+
+2. **Security Infrastructure Enhancement**
+
+   Wealthsimple is implementing
+   [Hive's App Deployments feature](https://the-guild.dev/graphql/hive/docs/schema-registry/app-deployments)
+   to optimize performance and track API usage against app versions. This solution will restrict API
+   access to predefined queries only and implement a query hash system for network optimization.
+
+3. **Gateway Evolution**
+
+   Wealthsimple is improving its API gateway infrastructure by focusing on migrating from their
+   current Apollo server with schema stitching to Hive Gateway. Having already tested
+   [GraphQL Yoga](https://the-guild.dev/graphql/yoga-server) in staging with
+   [promising performance gains](https://the-guild.dev/graphql/yoga-server/docs/comparison#better-runtime-performance),
+   the team is now working on adopting Hive Gateway to enable a gradual transition to
+   [federation](https://the-guild.dev/graphql/hive/federation). This approach will allow teams to
+   maintain ownership of their schemas while enabling a methodical, type-by-type migration from the
+   existing stitched schema setup to a federated architecture.
+
+<LargeCallout
+  icon={<DocsIcon />}
+  heading="Elevate Your GraphQL Journey"
+  variant="primary"
+  cta={<ContactButton variant="secondary-inverted" />}
+>
+  Transform your API infrastructure like Wealthsimple. Whether it's migrating to a centralized
+  schema registry, enhancing security, or evolving your gateway architecture, our tools and
+  expertise can help you achieve your goals efficiently.
+</LargeCallout>
+
+## Conclusion
+
+Wealthsimple's implementation of GraphQL with Hive has proven to be a successful strategic decision,
+providing enhanced visibility, improved development workflows, and a solid foundation for future
+scaling. The company's positive experience with the platform has led to expanded usage plans and
+continued investment in the GraphQL ecosystem. The gradual, thoughtful approach to migration and
+feature adoption has enabled the team to maintain stability while advancing their technical
+capabilities.

packages/web/docs/src/app/case-studies/_meta.ts

@@ -0,0 +1,5 @@
+export default {
+  '*': {
+    display: 'hidden',
+  },
+};