https://github.com/getstream/stream-feeds-js
https://github.com/getstream/stream-feeds-js
Last synced: 9 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/getstream/stream-feeds-js
- Owner: GetStream
- License: other
- Created: 2024-10-11T20:10:14.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2026-03-02T08:45:22.000Z (13 days ago)
- Last Synced: 2026-03-02T12:41:07.031Z (13 days ago)
- Language: TypeScript
- Size: 61.8 MB
- Stars: 22
- Watchers: 16
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
- Security: SECURITY.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
# 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**
- [Register](https://getstream.io/chat/trial/) to get an API key for Stream Feeds
- [React SDK](./packages/react-sdk#official-react-sdk-for-steram-feeds)
- [React Native SDK](./packages/react-native-sdk#official-react-native-sdk-for-stream-feeds)
- [JavaScript SDK](./packages/feeds-client#official-plain-js-sdk-and-low-level-client-for-stream-feeds)
- [React sample apps](#react-demo-app)
- [React native sample app](./sample-apps/react-native/ExpoTikTokApp/#expo-tiktok-sample-app)
- [Docs](https://getstream.io/activity-feeds/docs/)
## 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:
- [React tutorial](https://getstream.io/activity-feeds/sdk/react/)
- [React Native tutorial](https://getstream.io/activity-feeds/sdk/react-native/)
## 👩‍💻 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=` 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=
API_SECRET=
API_URL=
```
2. Install dependencies: `yarn` (from the repository root)
### Typical use-case
Run these scripts in the following order from `test-data-generator` folder:
```bash
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:
```bash
yarn create-posts --features
```
**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:**
```bash
# 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 Amsterdam** — `location`: lat `52.3676`, lng `4.9041`; text is a fun fact about Amsterdam.
- **2 for Boulder, Colorado** — `location`: 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:**
```bash
# 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](https://nodejs.org/en/download) 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
```