Activity Feed
A social activity aggregator that unifies content from 10+ data sources into a cohesive feed experience across all Outside brands.
The Challenge
Outside Inc. wanted to create a unified social experience that aggregates content from across its ecosystem. The activity feed needed to combine:
- Editorial articles from 20+ brands
- User-generated posts and photos
- Athletic event registrations and results
- Trail conditions from Trailforks
- GPS tracks from Gaia GPS
- Videos from the Watch platform
- Pinkbike mountain biking content
The challenge was building a feed that feels cohesive despite the diversity of content sources, while supporting social features like follows, reactions, and comments.
Architecture
The Activity Feed aggregates data from multiple sources through the Apollo Federation Gateway:
┌─────────────────────────────────────────────────────────────┐
│ Activity Feed │
│ (Next.js App) │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ Apollo Federation Gateway │
└─────────────────────────────────────────────────────────────┘
│ │ │ │ │ │
▼ ▼ ▼ ▼ ▼ ▼
┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐
│Editorial│ │JWPlayer│ │ User │ │Athlete │ │ Gaia │ │Trailforks
│Subgraph│ │Subgraph│ │ Posts │ │ Reg │ │ GPS │ │ API │
└────────┘ └────────┘ └────────┘ └────────┘ └────────┘ └────────┘Technical Approach
Unified Content Model
All content types implement a common interface for consistent rendering. This abstraction allows the feed to render diverse content types—articles, user posts, events, tracks, and videos—with consistent UI patterns while maintaining type-specific fields and behaviors.
Feed Composition
The feed uses a compound component pattern for flexibility, allowing each feed item to be composed of modular pieces: author information, content (which varies by type), and action buttons for reactions, comments, and sharing.
User-Generated Content
The UGC system supports rich text posts with @mentions and media uploads. A Tiptap-based editor provides the composition experience, supporting formatted text, user mentions, images, and links.
Social Graph
The follow system supports multiple profile types including users, authors, brands, and creators. Users can follow any profile type to customize their feed content and see updates from people and brands they care about.
Data Fetching Strategy
TanStack Query manages data fetching with infinite scroll support. The feed uses cursor-based pagination with optimistic UI updates for reactions and comments, ensuring the interface feels responsive even during network operations.
Key Features
Multi-Brand Support
The feed adapts to each brand's visual identity through CSS custom properties, allowing the same component code to render appropriately styled content across all Outside properties.
Privacy Controls
Users control the visibility of their posts with options for public, followers-only, or private visibility. The feed respects these settings when determining what content to show each viewer.
Content Moderation
Posts are filtered based on moderation status, with appropriate handling for hidden or flagged content while always showing users their own posts.
Trail Integration
Trailforks data provides trail conditions, difficulty ratings, and ride statistics, giving outdoor enthusiasts context about where activities took place.
Outcomes
The Activity Feed successfully:
- Unified disparate content — 10+ data sources rendered in a cohesive experience
- Enabled social features — Follows, reactions, and comments across all content types
- Scaled across brands — Single implementation serves all Outside properties
- Improved engagement — Users spend more time exploring related content
- Supported UGC — Community members contribute their own stories and experiences
The feed now serves as the homepage experience for Outside properties, providing a personalized view of outdoor content tailored to each user's interests and activities.