All Tutorials

Follow this coding tutorial to learn about the new Stream Chat theming API and understand how to customize your Stream chat web app with CSS. Customizing Your Chat Application Creating a chat UI that seamlessly integrates with the rest of your application’s design can elevate you…

This would not have been possible without WebRTC technology. If you’d like to add this engaging feature to your app but aren’t sure where to start, we’ve rounded up our top resources to help you get started. What is WebRTC? Web Real-Time Communications (WebRTC) is an open-source …

Stream’s SwiftUI SDK gives developers a modern way to build beautiful iOS chat messaging apps with stateful components. This tutorial guides you to perform significant customizations for the channel list of Stream Chat SwiftUI apps using views injection. You will discover how to …

Since Google announced Jetpack Compose stable 1.0, many companies are getting started to adopt Jetpack Compose into their projects. According to Google’s What developers are saying, Jetpack Compose increases their productivity and code quality. Jetpack Compose has a dedicated opt…

In this article, you will learn how to build your own real-time Android WhatsApp project with Jetpack Compose and Stream’s versatile Compose Chat SDK. Also, you will learn the overall architecture, each layer, and theming that are used in WhatsApp-Clone-Compose project. Before yo…

Some examples of video collaboration platforms are Frame.io, Wipster, or Vimeo. They are extremely useful for video editing teams collaborating on a video project. There are many benefits to using a video collaboration platform, such as: Increased collaboration and productivity I…

Billions of users access mobile and web applications every day and generate countless hours of content, from live-stream videos to real-time messages and more. For the teams that build and maintain these services, enforcing some level of content moderation is a must. But, how can…

In this article, the third part of the Build a Twitter Clone series, you will add support for tweet reactions (likes and comments), threads, and a notifications page. Part 1 focuses on creating the Twitter layout, authenticating users with Stream, adding the create tweet feature,…

Are you a developer working in an organization? If yes, then you’ve probably used Slack before, or at least know what it is. As one of the leading workplace chat apps, millions of teams have adopted Slack and communicate over the platform every day. But have you ever thought abou…

This tutorial describes how to perform configuration-based theming and customization of your Stream Chat SwiftUI app. It focuses mainly on the basics of theming the default look and feel of user interface elements. The example and code snippets provided should give you a vivid un…

In this article, in the second part of the Build a Twitter Clone series, you will create a Profile Page for users and add the follow-users feature. Part 1 focuses on creating the Twitter layout, authenticating users with Stream, adding the create tweet feature, and displaying the…

In this article, the first part of the Build a Twitter Clone series, you will be creating a Twitter clone, which connects and authenticates a selected user with your Stream app. For this tutorial, you will make the layout and add support for creating tweets in the clone using Str…

Twitter is a social media application that allows users to create tweets (that supports text, media, polls, etc.), react to tweets, retweet tweets, add comments, get notifications of engagements, and follow other users, to name a few. Twitter works with the idea of activity feeds…

The new v5 Compose Chat SDK provides a ReactionsTypes API that supports more complex reactions, like animated emojis or uploaded images, similar to other social media platforms. Note: The Jetpack Compose UI components are now stable. Check out the full announcement here. You can …

With the rise in popularity of applications like the AI companion Replika or language learning apps that offer a way to talk with an AI to learn a new language, you may be asking yourself, “How can I achieve this in my app?” There are different ways to build an AI bot, and there …

The Gmail Spaces in-app messaging feature allows Gmail account users to create spaces for long-term conversations between other users. Using Stream Chat and the React SDK from Stream, you will create a clone of this Gmail feature. We will call this stream-spaces 🚀 Application De…

Chess – a game as old as time – and yet most people disagree whether the king goes on the right or left. Chess has transitioned from the traditional board and made its way to our screens. It makes quite a frequent appearance in chat applications since most people know at least th…

Unread Message Reminders allow you to notify users of unread messages via SMS, push notifications, or email while they are offline. As the latest addition to our Stream Chat feature set, Unread Message Reminders are designed for 1-on-1 chat experiences and are available for all c…

This tutorial takes you through creating a clone of the iOS Messages application’s contacts list. Designing the contacts list will give you the foundations and basic understanding of compositing interfaces in SwiftUI. A follow-up tutorial and its GitHub repository will show you h…

To show you how to integrate CoreSpotlight, we’ll build an app that displays a list of countries. When the user selects a country, a few things will happen: Our app will open a new screen with details about the selected country We will index the selection to the Spotlight API Now…

Apart from the rich feature set, chats need to be very responsive in order to update data correctly based on real-time events, especially in larger chats, such as live streams or group messages. In addition to responsiveness, chats must be quite performant in terms of scrolling, …

We will, very creatively, call our clone Stream-agram. You’ll also learn a lot of Flutter concepts to improve animations, gestures, transitions, and state management. The video linked above walks you through this entire blog post, step by step, with additional code instructions. …

The game of tic tac toe has roots dating back to ancient Egypt in 1300 B.C. Here, developer Pedro Machado, owner of the Youtube channel PedroTech, displays a modern take on the beloved game by adding in-game chat using Stream’s Gaming Chat solution. In just under three hours, Mac…

Authentication is a very important part of any application, so it should be implemented in such a way that it delivers a great user experience while keeping your users’ secrets safe. One solution that works well for users and security is passwordless authentication. What Is Passw…

Vadim Savin is the CEO of notJust Development, an excellent online resource for those seeking to learn how to code. In this tutorial for beginners, Savin demonstrates how to build a Discord clone application with fully-featured messaging powered by Stream’s React Native Chat SDK …

Part three of this tutorial will guide you through creating a splash screen animation, an onboarding animation for an empty messages screen, turn-taking animations in chat messaging, and animating emojis. You’ll use our iOS Chat SDK sample application to get you up and running. S…

You can have a look at the final result of this tutorial in the main branch of the accompanying GitHub repository, and a packaged version of the game with a few additional features in the latest release of the Stream Chat Unreal Plugin. Prerequisites Before you get started, make …

What is SwiftUI? SwiftUI is a user interface toolkit that allows developers to design iOS apps declaratively. With SwiftUI, developers determine what they’d like their user interface to look like and how it should function, and SwiftUI makes it happen as users interact with it. D…

Choosing between UIKit or SwiftUI to be your main implementation framework is a big decision. We will explore some of the characteristics of both frameworks and list their pros and cons. So let’s dive right in and help you determine which approach is best. UIKit vs. SwiftUI: Star…

In part two of this series, you’ll use our iOS Chat SDK sample application to prototype several gestures that you’ll use for refreshing page content, adding seamless swiping and pagination to message lists and photos, revealing in-app actions to messages in message channels, and …

Angular is a UI framework for building mobile and desktop web applications. It is built using TypeScript and can support single-developer projects to enterprise-level applications. You can create amazing client-side applications using HTML, CSS, and Typescript using Angular. At S…

Animated message reactions, like the ones found in iMessage, offer you a way to quickly respond and add your sentiment to a single chat message. In this tutorial, we will focus on making animated message reactions more lively by adding animations to the reaction icons and their c…

To get started, you’ll learn how to customize the chat features you build with Stream’s Compose Chat SDK. Specifically, you’ll work with Stream’s Compose ChatTheme component to define these features so that your app truly looks and feels the way you want it to. You can find all t…

Many chat apps today implement /slash commands for their end-users. When done right, these commands can be both practical and engaging, serving a variety of use cases. For this tutorial, you’ll create a custom /gcal command that will populate your app’s chat channel with your upc…

This tutorial will focus on designing the elements that make up the ChannelListView and ChatsView components. In parts two and three, you’ll build on these components by adding interactions and animations, creating a more seamless chat experience. Resources You can download the X…

Before you dive in, make sure you’ve read Building an Avengers Chat Application for Android (Part 1), where we cover foundational concepts like the app’s architecture, Gradle setup, integrating Stream, and more. Once you’ve caught up, you can dive into part two, where you’ll lear…

Our original implementation to track file upload progress worked, but it had some in-code usability and UX issues that we wanted to clean up. The following account gives an up-close look into the process we had, the problems we encountered, and what we did to improve. Warning: As…

The Stream Chat SDK for Jetpack Compose makes extensive use of slot APIs, which allow you to provide pieces of Composable layout that you can then use within one of the chat components provided by the SDK. For this post, you’ll use the MessageList component and its itemContentpar…

Authentication is a basic necessity when building a messaging app with Stream. It helps secure the messaging environment and also provides a customized experience on a per-user basis. Stream uses JWT (JSON Web Tokens) to authenticate users. Generally, to generate and provide thes…

WebSockets are at the core of every chat app. At Stream, whenever you connect a user to a channel, you create a WebSocket connection. That means for every connected user, there’s at least one connection open. But, did you know it’s possible for a single user to connect multiple t…

The Problem Recently, as a result of Stream’s work on the stream_feed_flutter sample application, it became problematic to not have some kind of "mock” authentication system in place to better test the application. After all, what good is a social feed if there’s only one person …

When designing and prototyping touch interactions for iOS devices, designers typically rely on interaction design tools such as Framer, Origami Studio, Adobe XD, Figma, InVision, Flinto, Principle, and ProtoPie. While there is nothing wrong with these design tools, they create an…

To get started, you’ll learn how to build an Android Avengers messaging application using Kotlin, Coroutines, and Jetpack libraries like Hilt, Room, and Databinding. The app will also implement a model-view-viewmodel (MVVM) architectural pattern. After reading this article, you w…

Building a chat app from scratch can be a difficult, frustrating process that can take months — and that’s just for a bare-bones messaging application with none of the engaging features today’s savvy app users expect. But with Stream’s Chat API, coding doesn’t have to be a huge h…

Specifically, this tutorial will cover: What an AttachmentFactory is Creating a custom AttachmentFactory Customizing Stream Compose UI Components Sending custom files as attachments Adding previews for your custom attachment Note: Stream recently announced their Jetpack Compose U…

Did you know you can integrate Stream’s Android SDK with other open-source libraries? To show you just how easy it is, in this tutorial you’ll leverage data from Stream’s Chat API to power the messaging UI from ChatKit. Specifically, this tutorial will cover: Stream Setup Impleme…

Many chat applications today allow users to send voice notes as messages. In this tutorial, you’ll learn how to send voice notes, or audio attachments, in your Stream Chat Flutter app. By the end, your app will feature a chat experience similar to the shown here. This tutorial wi…

Building a chat app that is both feature-rich and scalable can be difficult and time-consuming. But in just under four hours, this YouTube video by JavaScript Mastery demonstrates how to build and deploy a telemedicine chat app designed for a medical or hospital setting using the…

Stream now offers two separate Android UI implementations that you can use to integrate Stream’s Chat API with your app: Compose UI Components (preferable if you’re using Jetpack Compose) UI Components (preferable if you’re building XML layouts) In almost all cases, you should us…

Whether you are a veteran developer seeking to shore up your Typescript skills or a new coder who is interested in getting an introduction to TypeScript, Stream is proud to sponsor Traversy Media’s recent tutorial, “TypeScript Crash Course 2021.” We’re excited about this video fo…