Building a Real-Time WhatsApp Web Clone with NextJS, Supabase, and Tailwind
In this article series, we will explore what it takes to build a web-based chat app resembling WhatsApp.
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.
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 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.
- WhatsApp Web Clone Part 3: Deploying Our Code
- WhatsApp Web Clone Part 1: User Authentication & Chat
- Build Video Calling for Your Android WhatsApp Clone With Jetpack Compose
- Google Calendar Integration For Video Calling
- Adding Snapchat-Like Filters to a Video Calling App in SwiftUI
- Build a Zoom-Like Video Conferencing App Using SwiftUI