Tutorials (4)

Apple's recent release of Mac Catalyst makes it possible for iOS and macOS apps to share mostly the same native codebase. While in the past, a desktop and mobile cross-platform codebase commonly meant a web app packaged in a portable format, now it can be achieved with native code just as quickly. That means less

In this tutorial, we'll build encrypted chat on iOS using Swift. We'll combine Stream Chat and Virgil Security. Both Stream Chat and Virgil make it easy to create a solution with high security with all the features you expect. These two services allow developers to integrate chat that is zero-knowledge. The application embeds Virgil Security's

As we seek to still connect with friends and family while we all #stayhome, live streaming and video conferencing have become insanely popular. These technologies have always been great tools for connecting with coworkers and loved ones who are not located nearby; however, we are now seeing incredible growth in their use for connecting with

This article is the fourth installment of a tutorial series focused on how to create a full-stack application using Flask, React/Redux and Stream. In this article, we are going to start creating, editing, and fetching collections, or groups of links, for our web application. Be sure to check out the repo to follow along! Getting

💡 An updated version of this tutorial exists! Angular devs can now use our dedicated Angular Chat SDK to build in-app messaging experiences faster than ever. You can still skim the post below for inspiration, but our new official Angular Chat App Tutorial is the place to find up-to-date info and a much simpler approach.

In the third part of our series, we're building group chat into our social application. This allows users to chat with multiple people at the same time. We leverage Stream Chat to do the heavy lifting. This post assumes you've gone through part 1 and part 2. Using our code from part 2, we only

In the second part of our series, we'll implement direct messaging between users by integrating Stream Chat. This post assumes you've followed along with part 1. Leveraging our code from part 1, we'll modify the backend to generate a Stream Chat frontend token so our mobile application can communicate directly with Stream's Chat API. The

In this post, we'll be creating a simple social network with SwiftUI, called Stream Flutter, that allows a user to post messages to followers. The app will allow a user to post a message to their followers and view updates from people they follow. Stream's Activity Feed API, combined with Swift, make it straightforward to

In this series of tutorials, we'll create a simple social network, called The Stream, that allows a user to post messages to followers, chat either 1-on-1 or in groups. Stream's Activity Feed API and Chat API, combined with Swift, makes it straightforward to build this sort of complex interaction, with far less overhead than creating

"Social logins" are a very popular alternative to creating a login and password for a website or application that is new to a user. With "social login", a user makes use of an existing account, like Google or Facebook, to sign up for or log in to another application. This means users don't have to

Since April 2020, all apps that use a third-party or social login service are required to offer Sign in with Apple if they want to be accepted in the App Store. In a previous tutorial, we walked through the process of building a simple clone of Apple's iMessage. In this tutorial, we'll go through the

This article is the third installment of a tutorial series focused on how to create a full-stack application using Flask, React/Redux and Stream. In this article, we are going to finish implementing our authentication flow as well as integrating a basic profile component into our app. Be sure to check out the repo to follow

Group chat can get a bit messy, especially if it’s public and anyone can join. Making a group chat invite-only can help manage the content of the group and the sanity of those in it, in addition to preventing spam users and bots. In this tutorial, we’ll be building an invite-only chat room where only

Messaging apps are becoming more and more popular as a means through which to connect with friends and family. They're convenient and provide an easy and affordable means of communication. A recent study by Statista revealed that the current number of smartphone users in the world today is 3.5 billion; this means 45.12% of the

One of the fastest ways to build applications has always been Ruby on Rails. Ruby on Rails is a feature-packed web development framework that makes it easy for novices and experts alike to easily stand up an application. When you want to add chat to your application, using Stream Chat makes that task just as

Language barriers can hinder growth and build a wall between your business and its potential customers, ultimately limiting your market and costing you money. If a customer reaches out to you by chat in German or Spanish, but you don’t understand the language, wouldn't it be nice to still be able to win them over?!

Flutter is the latest cross-platform UI toolkit (provided by Google) for building Android, iOS, and even desktop apps that is gaining popularity amongst developers. Stream Chat, on the other hand, is an enterprise-grade chat solution that offers extensive APIs and SDKs to power chat on multiple platforms. When they come together, magic happens... 🔮 In

Customer support live chat is an incredible tool for collecting valuable feedback from your customers and increasing your website engagement rate. With that said, it can take weeks or even months to build a functional, scalable, reliable real-time chat application. Luckily, Stream Chat makes it super easy to create such an app quickly; you can

Are you thinking of building a chat application in Go? You’ve come to the right place! This post will walk you through everything you need to know to make a chat app with the Stream Chat API and will show a working example server that ties all the concepts discussed in this tutorial together. The

Communicating with an AI chatbot can be a frustrating experience. However, with advances in machine learning and artificial intelligence, there is no excuse for not providing a positive experience for chat users. AI assistant advances allow machines and computers to process, understand, and reply to human messages in a genuinely useful way to the human

Note: This blog is archived due to limited compatibility with an old version of the React Native chat SDK. Please check our latest tutorial or our finished Slack clone. React Native has a significant footprint in the mobile development world. And with every new release, it gets better and better in terms of development speed

In this tutorial, we’ll build a functional clone of iMessage using Stream Chat iOS SDK. Building a messaging app used to be difficult; but in this tutorial, you’ll get a chat experience up and running in roughly 20 minutes! If you get lost during this tutorial, you can check: The iMessage Clone GitHub repo The

Apache Cordova is an application development framework that allows you to develop cross-platform apps using web technologies such as HTML, CSS, and JavaScript. Its main advantage over traditional app development workflows is that it allows for the use of a single codebase for Android, iOS, and the browser, which significantly reduces the time and cost

One of the most significant advantages of using Stream to accomplish this feat is that it significantly reduces the time and effort required; Stream's Chat API allows you to build a fully-featured user engagement platform in just a few hours. Source Code Here is a preview of the app we’ll be building. You can clone

This article is the second installment of a tutorial series focused on how to create a full-stack application using Flask, React/Redux and Stream. In this piece, we are going to be starting our authentication flow with registration and user confirmation, as well as getting up and running with React-Redux. Be sure to check out the

As previously mentioned in a blog post by Stream, Pusher recently announced its intention to shut down their real-time messaging service, Chatkit, effective April 23rd, 2020, to narrow its product focus to Channels and Beams. Although Pusher Chatkit fulfilled the basic premise of providing a real-time chat solution, their feature set and capabilities were way

This tutorial will take you through how to create a live chat app that responds in real-time, with the help of Dialogflow and Stream’s Messaging Platform. We’ll be making a chatbot that interprets the intent of a user’s input using Natural Language Processing (NLP) and responds appropriately, giving the information it has gathered. Prerequisites You'll

This article is the first installment of a tutorial series focused on how to create a full-stack application using Flask, React/Redux and Stream. This tutorial is an adaptation of my previous series on creating a Stream-based web app with Flask, so be sure to check it out to understand some of the structure behind it

In this tutorial, we'll build an encrypted chat/messaging example app for Android. To do this, we will combine the Stream Chat Platform and Virgil Security. Stream and Virgil make it easy to build a solution with excellent security by combining all of the features you would expect as a developer when creating a messaging app.

We’ll be leveraging AWS Polly’s natural speech capabilities to implement this feature and Stream's Messaging API for our chat infrastructure and interface. AWS Polly supports dozens of languages and a wide selection of natural-sounding male and female voices. When you send text to AWS Polly's API, it returns the audio to your application as a

The General Data Protection Regulation (GDPR) is an EU data protection law (passed into law in 2018) that determines how companies use and protect EU citizens’ data. While you might feel this doesn’t concern you, it very likely does! As long as you have EU residents making use of your app, you need to follow

In this article, we will be creating a chat application using React and Stream Chat. The app will feature an authorization page for login/signup, followed by a chat view that allows for communication between several authorized users. After creating the chat application, we will deploy it to Heroku, to take it public. The final application

This segment is the eleventh installment of a tutorial series focused on how to create a full-stack application using Flask and Stream. In this article, we walk through setting up our web app for deployment using Zappa and AWS Lambda. Be sure to check out the Github repo to follow along! This portion of the

Stream's Messaging API allows you to build real-time chat applications that are scalable, fault-tolerant, secure, and fast, so you don’t have to re-invent the wheel by starting from scratch. You’ll take less time to create a robust app (like days to create a real-time chat application with Stream instead of months)!. By the end of

An activity feed is a list of recent actions happening in realtime. In this article, we’ll build a simple feed app powered by GitHub WebHooks and Stream Feeds in JavaScript. The app will track the activities of your GitHub organization or personal repositories. So, we’ll see what is happening right there from our app. For

💡 This blog post describes an outdated approach to using Javascript against our Chat platform. Javascript developers can now use SDKs specific to their tech stack, like our dedicated Angular Chat SDK. It allows you to build chat experiences with ease. You can still refer to the post below for its concepts and ideas, but

This segment is the tenth installment of a tutorial series focused on how to create a full-stack application using Flask and Stream. In this article, we are going to start styling our app and adding cool new features like notification counts and link previews. Be sure to check out the Github repo to follow along!

In this post, we'll explore how to do two things: 1) create live chat message bubbles in Android that are similar to WhatsApp and iMessage and 2) customize Stream Chat's UI Components. We'll customize Stream Chat Android's built-in UI components by plugging in a custom message view. This allows us to focus on the text

Let's create a functional chat interface right in the terminal with Node.js! Although building a chat app is no small task, with the help of Stream's fully featured Chat API, it'll only take a few lines of code, as you'll see. Prerequisites Before proceeding with this tutorial, make sure you have Node.js and Yarn installed

This post is the ninth installment of a tutorial series focused on how to set up a full-stack application using Flask and Stream. This week, we’re going to be creating everything we need to make immersive social experiences for our app using follow relationships! Follow relationships includes the following of users, collections, as well as

How much do you love when you can just jump on a company's website and chat with one of their representatives to take care of your business; no picking up the phone, no waiting days for an email back?? Customer support live chat is a critical tool for every forward-thinking business. In this tutorial, you’ll

In this post, we'll be creating a simple social network, called Stream Flutter, that allows a user to post messages to followers. The app will allow a user to post a message to their followers and chat with them. Stream's Activity Feed API and Chat API combined with Google's Flutter makes it straightforward to build

In this post, we'll be creating a simple social network, called Stream Flutter, that allows a user to post messages to followers. The app will allow a user to post a message to their followers. Stream's Activity Feed API combined with Google's Flutter makes it straightforward to build this sort of complex interaction. All source

In the second part of our series, we'll implement direct messaging between users by integrating the Stream Messaging Platform. This post assumes you've followed along with part 1. Leveraging our code from part 1, we'll modify the backend to generate a Stream Chat frontend token so we can do the rest of the work in

In the third part of our series, we're building group chat into our social application. This allows users to chat with multiple people at the same time. We leverage Stream Chat to do the heavy lifting. This post assumes you've gone through part 1 and part 2. Using our code from part 2, we only

💡 There’s a newer version of this tutorial! Stream now offers a dedicated Angular Chat SDK, paired with a new official Angular Chat App Tutorial. The new SDK drastically simplifies the development process described below. You can still skim this post for inspiration, but please refer to the new resources linked above for consistently up-to-date

This is the eighth installment of a tutorial series focused on how to create a full-stack application using Flask and Stream. In this article, we will be walking through how to retrieve information from the Stream API client-side using Javascript to make an infinite scroll feature for our collections and content. Be sure to check

The PHP backend generates a token for the user and sends it to the front end (JavaScript UI) during login or registration. The token helps connect the front end to the chat API, allowing the user to access the chat interface. Prerequisites To follow along with this tutorial, you need to have a basic understanding

This is the seventh installment of a tutorial series focused on how to create a full-stack application using Flask and Stream. In this article, we will continue to explore creating, updating, and deleting activities by adding content to collections, a group of URLs with available previews. Be sure to check out the Github repo to

One increasingly common feature in chat apps is the ability to send self-destructing messages, also known as "ephemeral" messages. When this feature is enabled, the messaging system automatically erases the content minutes or seconds after the message is sent. This deletion is effective on all the devices that received the message, as well as on

People long for connection, and technology has allowed us to connect with those who aren't physically near in increasingly many ways over the last few decades. With applications like text messaging, and then group messaging, with our music, photos and movies moving to the cloud, we've been able to share more and more across great

In any chat application, one of the most integral features is being able to notify users of new messages. While providing this feature comes with its own set of challenges (listeners, timing, notification types, keeping track of which messages are read, etc.), notifying users of unread messages doesn't have to be challenging. Among the many

This is the sixth installment of a tutorial series focusing on how to create a full-stack application using Flask and Stream. In this post, we will be exploring how to create, update, and delete activities on Stream, as well as enrichment of feed activities. We are going to dive into creating our first user-created objects,

Update: Here is an excellent post on the vision for 2020's tech trends in cloud computing between the CEO of Ionic, Max Lynch, and CEO of Stream, Thierry Schellenbach. There is a massive difference between platforms such as React Native and Flutter compared to Ionic. Ionic believes that the open technology that powers today’s web

In this post, we are going to implement a simple Group Chat application with Vanilla Javascript and Stream Chat! Stream Chat allows you to rapidly ship real-time messaging systems that are reliable and robust, without the overhead cost and time of managing the infrastructure by yourself. And it’s pretty easy to use... You’ll find out

Creating an application is a lot of work! Deploying your application shouldn't be. Every developer has said at one time or another, "it works locally, but I can't get it to work on the server!"; it can take you hours, or even days, to figure out what went wrong and to put a fix in

This is the fifth installment of a tutorial series focusing on how to create a full-stack application using Flask and Stream. In this article will go through setting up a customizable user profile page and an introduction to adding content in Stream, we’ll even toss in a brief section on making a testing module to

Getting Started In any business interaction, it is vital to hold on to records of how you got to where you are. Not only can being able to reference previous transactions and interactions teach you about what you've done, it can help you make informed decisions about what you are going to do. With this

This is the fourth installment of a tutorial series focusing on how to create a full-stack application using Flask and Stream. This is the second part of the User and Permissions set up. This article is going to cover setting up the views and forms to allow users to register, login, and logout, as well

Ionic is an open-source framework that allows you to build and deploy apps that work across multiple platforms, such as iOS, Android, desktop, and the web as a Progressive Web App – all with the same code base. At first, Ionic was built to work with Angular, but with the release of Ionic 4, you

This is the third installment of a tutorial series focusing on how to create a full-stack application using Flask and Stream. Originally, this article was going to cover the creation of the initial database models for your app, as well as handling registration/login and other convenience functions for users, but given the sheer amount of

This is the second installment of a tutorial series focusing on how to create a full-stack application using Flask and Stream. This week we’re going to start digging into the actual construction of our app. In this article, I am going to guide you through setting up the initial files and structure, as well as

For the last little while, I’ve wanted to develop a new kind of social media site. Between the privacy issues, relentless ads, and the pervasiveness of bots on almost every service, I wanted to build something that would allow people to have a new source to discover the newest and most entertaining content and discuss

In this tutorial, we will show you how to process webhooks to send a message to a Slack channel! Here at Stream, we are big fans of Chat. With our chat API, we offer a webhook so that you can relay data to an endpoint of your choice. Webhooks are an excellent way to make

Managing microservices manually can get very complicated and takes the focus away from business logic. API gateways help take care of the various collective management and housekeeping tasks necessary for running microservices. One of the most popular API gateways is Kong. As the illustration below shows, Kong takes care of the tedious tasks involved in

Unlike an API request that's triggered when a request is sent, a webhook gets triggered when certain events occur within the cycle of an application. For example, when a new message is added on Stream Chat, the message.new event sends a payload to the webhook endpoint containing data about the message that was just sent.

This article describes how you can build and deploy a React Chat application powered by Stream’s Chat API to Netlify and Heroku. In this case, the React app will be deployed on Netlify, while the accompanying Node server will be deployed to Heroku. At the end of this article, you’ll see just how easy it

Initial Thoughts This tutorial will teach you how to build your own customer support chat experience and create a serverless chatbot! The end result will look much like this: The customer-facing chat experience is shown on the left, and the screen on the right shows the interface for support agents. Here’s a GIF of the

Many applications today inform users about important messages related to their application by sending notifications – this can be via push or web. With a web notification, a user can click on the notification and instantly get back to the application to further act on that piece of content. For Stream Chat applications, one of

Stream's Chat API provides a JS Chat SDK that you can use to build custom messaging solutions for your application. Requests from the SDK are authorized via an access token provided by a backend API. Due to the restriction of having to generate a JWT token on the backend, you will need an API that

React hooks, released in February 2019, have huge benefits when implemented in your application. Whether you've used hooks before or are just learning, this post aims to show you just how simple it is to implement them with Stream Chat. The Basics Using hooks with Stream Chat is as simple as it sounds. Wherever you

Overview Here at Stream, we’re known for our Feeds as a Service as well as our Chat as a Service product. Stream Chat was released out of beta late last year, and we’ve been receiving quite a few inquiries on how to structure a RESTful API to support the backend portion of chat. The backend

In this tutorial, we will build a chat application that’ll allow users to participate in a group discussion similar to how channels work in Slack. We’ll handle user authentication, and management using Auth0's Authentication-as-a-Service solution that allows developers to add authentication to any application without breaking a sweat easily. At the end of this article,

Conversational UI is a user interface that emulates a human to human conversation, while in reality, the human is interacting with a computer program. We’ve often seen this with the integration of AI chatbots and AI assistants. Conversational UI that involves speaking allows you to interact with a voice assistant, while typing allows you to

In this post, we'll be creating a simple social network, called Stream Flutter, that allows a user to post messages to followers. The app will allow a user to post a message to their followers. Stream's Activity Feed API combined with Google's Flutter makes it straightforward to build this sort of complex interaction. All source

In my last tutorial here, we created a chatroom application using Laravel, Vue.js, and Stream Chat. Although we only covered the basics of getting our chatroom up and running, Stream Chat offers a lot of other functionality. In this tutorial, we will explore some of those functionalities, and we’ll be adding them to our chatroom

Wowza provides users with the ability to stream live video. Trusted by over 24,000 organizations to power video streaming, they offer an extremely flexible platform that’s easy to use for even the most novice streamer. This post is still useful, but out of date. Stream now offers a Live Video Streaming API! My team at

As healthcare technology advances, secure real-time telemedicine communication is becoming increasingly crucial to any modern medical application. It's essential to provide the technology experiences customers expect while protecting their privacy and data, like through HIPAA compliant chat. HIPAA is the Health Insurance Portability and Accountability Act which aims to provide and maintain data privacy for

A common point of interest when integrating Stream is how to authenticate users, in addition to generating a token for use on the frontend side of the application. Whether you’re using Stream for feeds or for chat, generating an auth token is actually rather simple, and it’s easy to accomplish in just a few lines

When adding live video to your applications on Stream, we recommend checking out our newly released Video API! Using Stream Video, developers can build live video calling and conferencing, voice calling, audio rooms, and livestreaming from a single unified API, complete with our fully customizable UI Kits across all major frontend platforms. To learn more,

As healthcare technology advances, more patients expect healthcare applications to provide secure real-time communication. This often requires patients to exchange their protected health information (PHI) over in-app chat messaging. To maintain your users’ trust—and to ensure their privacy and data are protected—you must consider HIPAA compliance when building a chat experience. Note: In addition to

Being able to communicate with a group of people in real-time over chat is one of the most powerful features of modern messaging. Real-time messaging with groups of people can have live general discussions across the board as though it were a one-to-one chat, which makes sharing general information fast and easy. In this tutorial,

Unfortunately, there will always be users who tend toward using profanity within chat. As a developer, there will be a time that will come when you need to moderate this type of behavior. There's simply no way you will be able to manually watch all of the chat rooms and ban users because of their

Quick and active customer service is an integral part of any company or organization, especially those that conduct most of their business online. Quality customer service goes beyond merely fielding comments and questions from customers. The types of interactions your team has with your clients have a direct impact on how your customers perceive, use,

Chatbots allows ecommerce sites to provide more to their customers without the need for human intervention. Conversational experience is a powerful way to sell more on your ecommerce site. With the popularity of

Chat messaging is everywhere today. We can talk to customer support personnel through a web app that allows them to see our request and respond in real-time. We can interact with our friends and family, no matter where we are, through apps like WhatsApp and Facebook. There are multitudes of instant messaging apps, for many

Building a real-time chat messaging application can be daunting and time-consuming for project and development teams. One reason is that the backend and frontend infrastructures must handle many aspects, like security and scalability. To build the Python app, we will use Stream's API for chat to handle WebSocket connections and other heavy lifting using Go,

Create a React Native Chat App with Gifted Chat

When building a chat application, your head tends to spin in terms of what functionality you need. When building in-house, this process can turn into a nightmare.Thankfully, there are companies out there such as Stream that provide chat as a service as an API. In this tutorial, we will explore how to build a real-time

Is your chat going global? Worry less about the language barrier when you pair Amazon Translate with our real-time messaging API. When powering a chat product in a global environment, multilingual support should be top-of-mind. Doing so allows you to ensure that the communication barrier between yourself and the user on the other end is

Most tasks are repetitive and time-consuming. What if we could use a bot to help in doing the tasks instead? This will hugely increase productivity. Chatbots are fantastic for this.  In this tutorial, I’ll walk you through steps to adding a chatbot to your Stream Chat app using Dialogflow and Vue. At the end of

The other week, I set out to write a tutorial on how to integrate real-time Stream Chat in React Native. It wasn’t long before I started adding other dependencies such as Gifted Chat for the UI and Serverless for token generation server-side. I even had a bit of fun by integrating an autoresponder with facts

The Stream Chat API allows you to quickly and easily build powerful Android messaging applications and features — from a simple one to one messenger to building a full-scale Slack-like community. Stream Chat also supports Push Notifications out of the box and implementing them into your own React Native Chat app is a breeze. In this tutorial,

When we first built Stream, the platform was intended to be a pure back-end integration, allowing companies to build complex feed structures in a matter of minutes to hours rather than days or months. Since the inception of Stream, the platform has grown to be much more than a back-end solution; Stream now offers front-end

The Story Behind Aviato With our recent announcement about the React Native Components for activity feeds, we wanted to showcase them with a project that was not only functional but also fun to build. For those of you that haven’t seen HBO’s comedy sitcom Silicon Valley, Aviato is an application that is inspired by that

Stream enables you to listen to fee changes in near real-time using SQS, webhooks or websockets. In this tutorial, we will discuss how to use AWS SQS & Lambda to respond to feed updates. While websockets are the preferred method to listen to changes, SQS notifications have a special spot in the feed infrastructure. Stream

At Stream, we build a lot of showcase and example applications to show off the awesome features that our service has to offer. For nearly all of our applications, we host them on an instance – usually DigitalOcean or AWS EC2. While maintaining your codebase and keeping it relevant is difficult, we’ve found that the

Are you ready to elevate your React and Redux skills to the next level? Look no further than Cabin — an immersive tutorial series designed to empower developers with the knowledge and expertise needed to build feature-rich, scalable social network applications. Whether you're a seasoned developer or just starting your journey with React and Redux,

In this tutorial, we will make a Twitter clone using Django and Stream, a hosted API for newsfeed development. By the end, you'll see how easy is to power your newsfeeds with Stream. For brevity, we leave out some basic Django-specific code and recommend referring to the Github project for the complete runnable source code.

In today's digital age, staying updated with the latest news, articles, and podcasts can feel like a daunting task. With an abundance of information scattered across various platforms, managing and consuming content efficiently has become more important than ever. Enter Winds – an innovative open-source application powered by Stream that redefines how we engage with