Launched in 2009, WhatsApp remains one of the most popular communication platforms in the world, helping friends, family members, and community groups stay connected no matter where they’re located or what devices they’re using. With a powerful set of group chat, direct messaging, and audio/video calling features delivered through a simple and intuitive UI, WhatsApp makes the benefits of cutting-edge communication infrastructure easily accessible to billions of users from all different backgrounds.
The complexity behind that rich feature set also makes WhatsApp a great example to break down and examine as an engineer researching chat and calling functionality. It’s one thing to build a no-frills chat app with simple 1:1 direct messaging for a small group of users — but if we want to mirror WhatsApp’s gold standard with chat features like read receipts, message reactions, link previews, typing indicators, and more, with infrastructure that performs reliably for billions of users across the globe, our list of engineering requirements grows quickly.
With modern developer tools, it’s not necessary to start a project like this from scratch. In this tutorial series, we’ll combine and customize a set of API-based components to create a browser-based app remarkably similar to WhatsApp. Our set of frameworks and technologies will let us deliver results quickly and efficiently, with major engineering headaches removed. All of the tools we’ll use are free to get started with, and several of them offer a free-forever tier for small or non-commercial projects.
In this series, we’ll focus on user authentication, group chats, DMs, and video calling functionality combined in a web UI that resembles WhatsApp. Privacy features like end-to-end encryption (E2EE) also set WhatsApp apart from similar messaging apps. For an overview of adding E2EE, check out our end-to-end encrypted chat tutorial.
We always welcome feedback from fellow developers. Do you know a better way of doing things? Let us know. We are just a message away on X or LinkedIn.
In this article series we will be using a number of fun cloud-based solutions:
- NextJS is a framework built on top of React, providing you with building blocks to create web applications quickly.
- Supabase is used for user authentication. It's very straightforward to set up, and provides a database-as-a-service with a full range of customizable authentication options.
- Vercel is used for deployment. When deploying NextJS code, what better place to deploy than with the actual creator of the framework? There is no platform more dedicated to providing a fast and reliable deployment of a NextJS codebase.
- Stream Chat and Stream Video & Audio provide our in-app communication infrastructure. Using Stream’s SDKs, we can put together most of our user interface using prebuilt components, and plug our code into Stream’s global chat and video edge network.
The code is based on NextJS, using Tailwind. Instead of plain Javascript, we are relying on TypeScript. TypeScript is a superset of JavaScript primarily providing optional static typing, classes and interfaces. IDEs can provide a richer environment for spotting common errors while writing your code.
The project is broken up into three parts, each focused on a different phase of development:
- Part 1: Project Setup, Authentication, and Chat
- Part 2: Adding Video Call Support
- Part 3: Deploying Our Code Using Vercel
All code is available on GitHub as well. Please drop a ⭐️star⭐️ while you are there.
