Problem: CodePen’s original activity feed back end needed an overhaul to improve performance, and the team recognized an opportunity to add new and expanded functionality and personalized content recommendations to stay competitive in an evolving social media landscape.
Strategy: After scoping the overhaul project and evaluating Stream Feeds, it became clear that the third-party component solution would provide more advanced functionality at significantly lower cost than in-house development, with a straightforward integration process and enterprise-grade technical support.
Result: CodePen’s Following, Trending, and Activity feeds, all powered by Stream, work together to give users a seamless personalized content discovery experience that rivals today’s leading social platforms.
Founded in 2012, CodePen is the go-to social community where front-end designers and developers gather to write, test, and share code. CodePen’s online text editor makes it easy to build and test components in real time using HTML, CSS, and JavaScript — but it’s the social development aspect that sets CodePen apart from other dev platforms. More than 330,000 CodePen users enjoy an interactive experience that lets them like, share, borrow, remix, and comment on each others’ projects, learning from and collaborating with peers around the globe.
This kind of social experience — complete with several distinct activity feeds and personalized content recommendations based on user behavior — would normally take a massive investment of engineering resources to build and maintain at scale. Not so with the Stream Feeds API, which powers CodePen’s Following, Trending, and Activity feeds. (We recommend creating a free CodePen account and following a few users to unlock a closer look at these feeds in action.) Read on to learn how Stream helps CodePen deliver a modern, AI-driven feed experience that rivals today’s leading mainstream social platforms.
Featured in this case study:
- Stream Activity Feeds API
- Stream Personalization AI
- Stream Notification Feeds
- Stream Feeds Personalization Support
The Problem
In 2020, CodePen knew it wanted to seriously upgrade its existing feeds to personalize the user experience with interesting content. Alex Vazquez, CodePen's co-founder and CTO, chose to integrate Stream for its ability to scale and personalize feeds for thousands of users per day. Stream Feeds gave co-founders Vasquez and Chris Coyier the power to create a modern sophisticated feed to engage users.
The Solution
With a major overhaul required to keep its social experience modern and competitive, CodePen faced a classic build-vs-buy decision: Use internal dev resources to rebuild activity feeds and develop content discovery algorithms from scratch, or replace the feeds back end entirely with Stream.
After evaluating Stream Feeds, it became clear that the third-party component solution would provide more advanced functionality at significantly lower cost than in-house development, with a straightforward integration process and enterprise-grade technical support.
Ultimately, says Coyier, “It was great to be able to rip our old feeds out and avoid doing this project in-house.” With Stream, CodePen was able to go beyond a simple performance upgrade and actually expand the types of feed experiences offered, boosting user engagement along the way.
Why Stream
Here’s the short version of why CodePen decided to integrate Stream Activity Feeds. Find more detail below about the specific problems CodePen solves with Stream.
- Performance upgrade - A slow and buggy Activity feed experience required a back-end overhaul, and Stream’s scalable solution made for a convenient, feature-complete replacement.
- Expanded functionality - CodePen wanted to give users new ways to discover helpful code snippets and other content from outside their existing networks.
- Advanced AI and ML algorithms - It would have been impractical to develop the kinds of content discovery and personalization algorithms used by major social media platforms from scratch, but Stream Feeds include this technology.
- Custom integration support - Stream’s data scientists work closely with the CodePen team to continually refine CodePen’s custom feed experience.
CodePen Activity Feed Use Cases
CodePen users create, edit, share, and remix three foundational types of content: Pens, Projects, and Collections. A Pen is essentially a self-contained code snippet. Pens can be grouped together into Projects with related files and folders, and multiple Pens and Projects can be grouped into a Collection.
CodePen’s social experience centers around how users discover and interact with these three elements — they can browse and search for specific design components, post their own work, and discover new work by fellow creators. The Following, Trending, and Activity feeds in the left side nav, all powered by Stream, work together to support these actions.
Following Feed
As on other popular social platforms, CodePen users follow each other and view updates from the people they follow in a feed. Users accustomed to mainstream social media apps may take this concept for granted, but it can still be surprisingly labor intensive to build and maintain a basic feed that collects updates and presents them chronologically — especially at scale. When it came time to overhaul CodePen’s original Following feed, which had been developed in-house and was beginning to show its age, the CodePen team chose to integrate Stream Feeds instead of pulling internal engineering resources away from other projects.
“Our Stream-powered following feed is a huge improvement in our app.” —Chris Coyier, Co-Founder of CodePen
The CodePen team also knew that in today’s social media landscape, it takes more than a chronological list of updates to keep users engaged and help them find content they’ll love. CodePen’s Following feed lets users toggle between “Recent” and “Top” updates from the creators they follow, with the “Top” selection prioritizing items that have received more likes and comments. Below the suggested content, users now also see a personalized list of “Interesting People to Follow'' generated by Stream’s AI. Things get even more interesting once a user starts interacting with the content in their Following feed, as Stream processes that activity data to surface individualized results in each user’s Trending feed.
Trending Feed with Personalization
When CodePen users like, comment on, or otherwise engage with content from the peers they follow, their activity influences what they’ll see in the Trending feed. CodePen’s Trending feed was once curated manually, displaying Pens and Projects selected by the CodePen team. Now, each user sees a customized collection of trending items they may not have otherwise encountered, from new creators and accounts they don’t yet follow. This “discovery” experience works similarly to Instagram’s Explore feed.
Manual curation doesn’t just take time — it also means that everyone sees the same feed, relying on the assumption that users will share identical interests and preferences with the curators and with each other. Stream’s personalized feeds make it possible to tailor trending results more specifically to the individual, so that two users who follow the exact same list of accounts but interact with those accounts differently will see different content ranked and sorted at the top of their CodePen Trending feeds. And if you love the idea of hand-picked content, don’t worry — Pens with a “Picked by CodePen” label at the top are still selected by humans.
CodePen’s Trending feed is a great example of a discovery feed, displaying activity posts that are not directly available through a user’s immediate network but that might be of interest to them. Content shown on a discovery feed is typically based on what’s trending, activities that match a user’s interests, and content that is popular amongst a user’s extended (friends of friends) network. Interest profiles are based on the types of activities users engage with — if someone likes or comments on a lot of pure CSS posts, for example, Stream’s machine learning algorithm will push more pure CSS posts to the top of that user’s Trending feed. Stream uses an analytics package combined with the personalization offering to automate this experience.
Activity Feed (Notifications)
CodePen’s Activity feed completes the set of expected social functions, showing users a reverse-chronological roundup of who’s interacted with them or their content. When someone follows a user, likes or comments on a user’s content, or adds a user’s content to a Collection, the event displays in that user’s Activity feed. It’s a familiar experience that we almost take for granted, leading some dev teams to mistakenly assume it’s also easy to build. In fact, this type of real-time activity feed experience can be deceivingly difficult to develop and maintain at scale. Stream’s Notification Feed API now underpins the CodePen Activity feed, and Coyier considers it a major improvement:
“Our Activity feed was extremely slow, and it was just a mess to maintain. Now it’s entirely powered by Stream. A massive upgrade.” —Chris Coyier, Co-Founder of CodePen
Integration Process
CodePen chose to break out the Stream Feeds integration process across a few months, starting with existing areas that needed the most attention and then launching new experiences afterward.
First, CodePen’s internal dev team, led by Rachel Smith, implemented the Stream Notification Feed as a direct replacement for the original Activity feed infrastructure. "We were struggling to scale to meet the volume of activity generated by our growing community. It was satisfying to integrate with infrastructure that was ready-made for user activity and notifications, and remove old in-house code in the process," says Smith. That initial demolition process took some time, but afterward, once browser events could be directed right to Stream, things got easier.
Replacement of the Following feed came next, and performance improvements in both areas laid the groundwork to start collecting activity data and build out the personalized Trending feed with support from Stream’s data science team.
This is where Stream Feeds personalization gets fun: The first step is to have a kickoff meeting with your Stream account manager and our entire personalization data science team so we can understand your vision, document which feeds you want personalized, and discuss the data requirements we’ll need in order to create a customized algorithm.
Then, it’s a matter of collecting a few months of user data so our team can create a custom model that boosts your user activity and brand engagement. After v1 of a personalized activity feed is up and running, customers like CodePen meet with Stream’s data science team bi-weekly to ensure the algorithm is functioning they way they envisioned. Here, they can also request new features and tweaks to the feed.
Learn more about the Stream Feeds personalization process in our step-by-step walkthrough→
Future Vision
Almost a year after kicking off their Stream Feeds integration, the CodePen team has no intentions of slowing down. Ultimately, it’s about serving the community: Ongoing improvements to the CodePen social experience mean more front-end specialists of all experience levels will get to discover each other’s work, collaborate, and learn.
One feature CodePen hopes to build soon with Stream technology is the concept of tags, which would represent individual technologies users are interested in. Users would be able to follow tags and view an algorithmically sorted list of popular items that share the same tag — two new ways to easily discover content relevant to their interests. CodePen is also researching improved search functionality, in which a search provider would use Stream rankings to return popular results.
Combined with goals to further optimize the built-in coding environment, these social improvements are part of a roadmap designed to give front-end folks even better access to the tools, information, and community they need to thrive.
Evaluate Stream Feeds for Your Use Case
Did you know that CodePen’s implementation of Stream Feeds in a classic social media use case is just one of many possible applications for our feeds technology? Whether you’re working on a similar project where users follow and interact with each other, or something different like an ecommerce site with personalized shopping suggestions, you can save time and conserve engineering resources by integrating Stream Feeds. Take a quick interactive tour of the API or contact our team of experts to discover how Stream Feeds can help improve app performance and user engagement for your platform.
Ready to start experimenting with your own Stream Activity Feeds integration? Activate your free trial today.
