Skip to content

GetStream/stream-feeds-js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

808 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Stream Feeds for JavaScript, React and React Native

Bring users together through personalized feeds, threaded discussions, and real-time updates that make every interaction feel meaningful.

Quick Links

What is Stream?

Stream allows developers to rapidly deploy scalable feeds, chat messaging and video with an industry leading 99.999% uptime SLA guarantee.

Stream's Activity Feed V3 SDK enables teams of all sizes to build scalable activity feeds. The best place to get started is to follow one of the tutorials:

👩‍💻 Free for Makers 👨‍💻

Stream is free for most side and hobby projects. To qualify, your project/company needs to have < 5 team members and < $10k in monthly revenue. Makers get $100 in monthly credit for feeds for free.

💡 Supported Features 💡

Here are some of the features we support:

  • For-You feed: Most modern apps combine a “For You” feed with a regular “Following” feed. With activity selectors you can:
    • surface popular activities
    • show activities near the user
    • match activities to a user’s interests
    • mix-and-match these selectors to build an engaging personalized feed.
  • Comments: Voting, threading, images, URL previews, @mentions & notifications. Basically all the features of Reddit style commenting systems.
  • Advanced feed features: Activity expiration • visibility controls • feed visibility levels • feed members • bookmarking • follow-approval flow • stories support.
  • Activity filtering: Filter activity feeds with almost no hit to performance
  • Search & queries: Activity search, query activities, and query feeds endpoints.
  • Modern essentials: Permissions • OpenAPI spec • GDPR endpoints • realtime WebSocket events • push notifications • “own capabilities” API.

React demo app

Deployed version: https://feeds-react-tutorial-getstreamio.vercel.app/

Prerequisites:

  • Install dependencies: yarn
  • Build React SDK: yarn build:client and yarn build:react-sdk
  • Create a .env file in sample-apps/react-demo:
NEXT_PUBLIC_API_KEY=your_api_key_here
API_SECRET=your_API_secret

After the above steps run the following command in sample-apps/react-demo:

yarn dev

You can provide user_id=<user id> query param when opening the app, or provide nothing, and let the application generate a user for you.

Test Data Generator

The test-data-generator directory contains scripts to populate your Stream Feeds app with sample data for testing and development purposes.

Setup

  1. Create a .env file in test-data-generator/ with your credentials:
STREAM_API_KEY=<Stream API key>
API_SECRET=<Stream API secret>
API_URL=<Optional, Stream API URL>
  1. Install dependencies: yarn (from the repository root)

Typical use-case

Run these scripts in the following order from test-data-generator folder:

yarn create-users
yarn create-follows
# Optional, for hashtag feeds (run before create-posts when using --features hashtags).
yarn create-hashtag-group
# Adjust what features you need
yarn create-posts --features link,hashtags,attachment,mention,poll,reaction,comment,bookmark,repost
# Optional, only useful if you have story feeds
yarn create-stories
# Optional, if you want premium posts too
yarn create-premium-membership
yarn create-premium-members
yarn create-premium-posts
# Optional, adds 4 location-tagged posts (2 Amsterdam, 2 Boulder) with fun facts
yarn create-location-posts

Available Scripts

Run these commands from the test-data-generator/ directory:

Script Command Description
Create Users yarn create-users Creates users and their feeds
Create Follows yarn create-follows Sets up follow relationships between users
Create Posts yarn create-posts Generates sample activities/posts
Create Stories yarn create-stories Creates sample stories
Create hashtag group yarn create-hashtag-group Creates hashtag feed group (current_feed selector, public default visibility) and the hashtag:getstream_io feed with public visibility (for use with the hashtags create-posts feature)
Download Images yarn download-images Downloads sample images for posts
Create premium membership yarn create-premium-membership Creates premium membership level
Create premium members yarn create-premium-members Adds premium members to randomly selected user feeds
Create premium posts yarn create-premium-posts Updates a few posts of user feeds with premium members to premium members only
Create location posts yarn create-location-posts Creates 4 activities (2 for Amsterdam, 2 for Boulder, CO) with location (lat, lng) and fun-fact text, added to randomly selected users' user feeds

Create Posts Feature Flags

The create-posts script supports a --features flag to control which features are included in the generated posts:

yarn create-posts --features <feature1,feature2,...>

Available features:

Feature Description
link Adds random URLs to posts
hashtags When used with link: adds #getstream_io to text and hashtag:getstream_io to feeds (run create-hashtag-group first)
attachment Uploads and attaches 1-3 images to posts
mention Adds @mentions to other users
poll Creates and attaches polls to posts
reaction Adds 1-5 reactions from random users
comment Adds 1-5 comments from random users
bookmark Bookmarks posts by random users
repost Creates reposts of existing activities

Examples:

# Create basic posts without any features
yarn create-posts

# Create posts with polls and reactions
yarn create-posts --features poll,reaction

# Create posts with links and hashtags (run create-hashtag-group first)
yarn create-posts --features link,hashtags

# Create posts with all content features
yarn create-posts --features link,hashtags,attachment,mention,poll,reaction,comment,bookmark,repost

Note: Each feature has a probability of being included (not every post will have every enabled feature). Link and attachment are mutually exclusive per post. The hashtags feature only applies when a link is added to a post.

Create location posts

The create-location-posts script creates 4 activities and adds each to a randomly selected user's user feed:

  • 2 for Amsterdamlocation: lat 52.3676, lng 4.9041; text is a fun fact about Amsterdam.
  • 2 for Boulder, Coloradolocation: lat 40.015, lng -105.2705; text is a fun fact about Boulder.

Each activity has location set (lat, lng) and post text set to a fun fact about the city. If present, one image per post is read from test-data-generator/images/location/amsterdam/ or test-data-generator/images/location/boulder/ (.jpg, .jpeg, or .png), uploaded to Stream, and attached to the activity. Run after create-users (and optionally after create-posts).

Download Images flags

The download-images script downloads 100 sample images (from picsum.photos) into test-data-generator/images/. By default it skips images that already exist.

Flag Description
--replace=N or --replace N Force re-download of specific image(s). N can be a single index (1–100) or comma-separated indices (e.g. --replace=1,5,10).

Examples:

# Re-download only image 42
yarn download-images --replace=42

# Re-download images 1, 5 and 10
yarn download-images --replace 1,5,10

Local Setup

Prerequisites

You'll need to have node 22 installed on your computer

Install dependencies

In the repository root run the following command to install all dependencies of all packages in this monorepo:

yarn

Build and run JS client

cd packages/feeds-client
yarn build
# or
yarn start

About

No description, website, or topics provided.

Resources

License

Security policy

Stars

Watchers

Forks

Packages

 
 
 

Contributors

Languages