DEV Community: Oluwabusayo Jacobs

Build a YouTube Live Clone with Next.js, Clerk, and TailwindCSS - Part Two

Oluwabusayo Jacobs — Fri, 12 Dec 2025 18:00:58 +0000

In part one of this two-part series, we focused on building the foundation of our YouTube Live clone by:

Configuring Prisma for our database
Adding authentication with Clerk
Integrating Stream into the app
Building the home page

In this second part, we’ll build the pages for creating and watching livestreams with the Stream React Video SDK. We’ll also add a live chat functionality to the livestreams with the React Chat SDK.

You can view the live demo and access the complete source code on GitHub.

Building the Reactions System (Likes/Dislikes)

To get started, we’ll implement a reaction system similar to YouTube that lets viewers engage with livestreams. This requires a custom hook to manage the frontend state and an API route to handle database persistence via Prisma.

Building the `useReactions` Hook

The useReactions hook manages the fetch logic and handles optimistic UI updates. This ensures the interface responds instantly when a user clicks a button, updating the numbers immediately while the server processes the request in the background.

Create a file named useReactions.tsx in your hooks directory with the following code:

'use client';
import { useEffect, useState } from 'react';

type MyReaction = 'LIKE' | 'DISLIKE' | null;

export function useReactions(livestreamId: string) {
  const [likes, setLikes] = useState(0);
  const [dislikes, setDislikes] = useState(0);
  const [myReaction, setMyReaction] = useState<MyReaction>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let alive = true;
    (async () => {
      const res = await fetch(`/api/livestreams/${livestreamId}/reactions`, {
        cache: 'no-store',
      });
      const data = await res.json();
      if (!alive) return;
      setLikes(data.likes);
      setDislikes(data.dislikes);
      setMyReaction(data.myReaction);
      setLoading(false);
    })();
    return () => {
      alive = false;
    };
  }, [livestreamId]);

  const send = async (type: 'LIKE' | 'DISLIKE') => {
    // optimistic update
    const prev = { likes, dislikes, myReaction };
    if (type === 'LIKE') {
      if (myReaction === 'LIKE') {
        setLikes(likes - 1);
        setMyReaction(null);
      } else if (myReaction === 'DISLIKE') {
        setDislikes(dislikes - 1);
        setLikes(likes + 1);
        setMyReaction('LIKE');
      } else {
        setLikes(likes + 1);
        setMyReaction('LIKE');
      }
    } else {
      if (myReaction === 'DISLIKE') {
        setDislikes(dislikes - 1);
        setMyReaction(null);
      } else if (myReaction === 'LIKE') {
        setLikes(likes - 1);
        setDislikes(dislikes + 1);
        setMyReaction('DISLIKE');
      } else {
        setDislikes(dislikes + 1);
        setMyReaction('DISLIKE');
      }
    }

    try {
      const res = await fetch(`/api/livestreams/${livestreamId}/reactions`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ type }),
      });
      if (!res.ok) throw new Error('Failed');
      const data = await res.json();
      setLikes(data.likes);
      setDislikes(data.dislikes);
      setMyReaction(data.myReaction);
    } catch {
      // revert on error
      setLikes(prev.likes);
      setDislikes(prev.dislikes);
      setMyReaction(prev.myReaction);
    }
  };

  return {
    likes,
    dislikes,
    myReaction,
    like: () => send('LIKE'),
    dislike: () => send('DISLIKE'),
    loading,
  };
}

In the code above:

The useEffect fetches the initial reaction counts and the user's current status when the component mounts.
The send function immediately updates local state (likes, dislikes) based on the user's action (e.g., removing a like, switching from dislike to like) before the API request completes.
If the API request fails, the catch block reverts the state to the prev values to ensure the UI remains consistent with the database.

Creating the Reactions API Route

Next, let’s create the backend endpoint to handle these requests.

Create a file at app/api/livestreams/[livestreamId]/reactions/route.ts with the following code:

import { NextResponse } from 'next/server';
import { auth } from '@clerk/nextjs/server';

import prisma from '@/lib/prisma';

export async function GET(
  _req: Request,
  { params }: { params: Promise<{ livestreamId: string }> }
) {
  const { userId } = await auth();
  const { livestreamId } = await params;

  const [likes, dislikes, mine] = await Promise.all([
    prisma.reaction.count({ where: { livestreamId, type: 'LIKE' } }),
    prisma.reaction.count({ where: { livestreamId, type: 'DISLIKE' } }),
    userId
      ? prisma.reaction.findUnique({
          where: { userId_livestreamId: { userId, livestreamId } },
          select: { type: true },
        })
      : null,
  ]);

  return NextResponse.json({
    likes,
    dislikes,
    myReaction: mine?.type ?? null,
  });
}

export async function POST(
  req: Request,
  { params }: { params: Promise<{ livestreamId: string }> }
) {
  const { userId } = await auth();
  if (!userId) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }

  const { livestreamId } = await params;
  const { type } = (await req.json()) as { type: 'LIKE' | 'DISLIKE' };

  if (type !== 'LIKE' && type !== 'DISLIKE') {
    return NextResponse.json({ error: 'Invalid type' }, { status: 400 });
  }

  // If user clicks the same reaction again, remove it. If different, upsert.
  const existing = await prisma.reaction.findUnique({
    where: { userId_livestreamId: { userId, livestreamId } },
  });

  if (existing && existing.type === type) {
    await prisma.reaction.delete({
      where: { userId_livestreamId: { userId, livestreamId } },
    });
  } else {
    await prisma.reaction.upsert({
      where: { userId_livestreamId: { userId, livestreamId } },
      create: { userId, livestreamId, type },
      update: { type },
    });
  }

  // Return fresh counts and state
  const [likes, dislikes, mine] = await Promise.all([
    prisma.reaction.count({ where: { livestreamId, type: 'LIKE' } }),
    prisma.reaction.count({ where: { livestreamId, type: 'DISLIKE' } }),
    prisma.reaction.findUnique({
      where: { userId_livestreamId: { userId, livestreamId } },
      select: { type: true },
    }),
  ]);

  return NextResponse.json({
    likes,
    dislikes,
    myReaction: mine?.type ?? null,
  });
}

Here, we create a function for GET requests to fetch reactions and for POST requests to create or update a reaction.

Building the Livestream Studio

The livestream studio is the command center for the broadcaster. This is where users create a stream, retrieve their OBS stream keys, and manage the broadcast.

Creating the Livestream Layout

We’ll start with the layout, which initializes the stream session. It ensures that when a user visits the studio, a Call exists, and the chat channel is ready.

Create a livestreaming/layout.tsx file in the (home) directory and add the following code:

'use client';
import { ReactNode, useEffect, useState } from 'react';
import {
  Call,
  StreamCall,
  useStreamVideoClient,
} from '@stream-io/video-react-sdk';
import { nanoid } from 'nanoid';
import { useUser } from '@clerk/nextjs';
import { useChatContext } from 'stream-chat-react';

import Spinner from '@/components/Spinner';
import { joinCall } from '@/lib/utils';

interface LivestreamLayoutProps {
  children: ReactNode;
}

const LivestreamLayout = ({ children }: LivestreamLayoutProps) => {
  const [livestream, setLivestream] = useState<Call>();
  const [isLoading, setIsLoading] = useState(true);

  const { user, isLoaded } = useUser();
  const videoClient = useStreamVideoClient()!;
  const { client: chatClient, setActiveChannel } = useChatContext();

  useEffect(() => {
    const setupLivestream = async () => {
      try {
        const { calls } = await videoClient.queryCalls({
          filter_conditions: {
            type: { $eq: 'livestream' },
            created_by_user_id: { $eq: user?.id },
            ongoing: { $eq: true },
          },
          limit: 1,
        });

        let call: Call;

        if (calls.length > 0) {
          call = calls[0];
          setLivestream(call);
        } else {
          const callId = nanoid();
          call = videoClient.call('livestream', callId);

          await call.create({
            data: {
              members: [{ user_id: user?.id as string, role: 'host' }],
              custom: { name: `${user?.fullName} Live Stream` },
              settings_override: {
                backstage: {
                  enabled: true,
                },
              },
            },
          });

          setLivestream(call);
        }

        await joinCall(call);

        const channel = chatClient.channel('livestream', call.id);
        if (channel.cid) {
          await channel.watch();
        } else {
          await channel.create();
        }

        setActiveChannel(channel);
      } catch (error) {
        console.error('Error creating or fetching call:', error);
      } finally {
        setIsLoading(false);
      }
    };

    if (isLoaded) {
      setupLivestream();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isLoaded]);

  if (isLoading) {
    return (
      <div className="flex flex-1 h-[calc(100svh-56px)] items-center justify-center">
        <Spinner />
      </div>
    );
  }

  return <StreamCall call={livestream}>{children}</StreamCall>;
};

export default LivestreamLayout;

In the code above:

The useEffect queries for an existing active stream to prevent duplicate sessions. If none is found, it creates a new one.
We call the joinCall(call) function to connect to the session.
We explicitly enable backstage: { enabled: true }. This puts the stream in a "waiting room" state, allowing the host to configure their software (like OBS) before officially going live to the public.
The component joins the call and sets up the Stream Chat channel, then wraps the children in <StreamCall> to provide the necessary SDK context to the page.

Building the Livestream Studio Page

The livestream studio page lets the host view their preview, retrieve their RTMP stream keys, and end the broadcast.

Navigate to the livestreaming directory and create a page.tsx file with the following:

'use client';
import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import {
  useCall,
  useCallStateHooks,
  useStreamVideoClient,
} from '@stream-io/video-react-sdk';
import clsx from 'clsx';

import Button from '@/components/Button';
import Public from '@/components/icons/Public';
import TextField from '@/components/TextField';
import Spinner from '@/components/Spinner';
import LivePlayer from '@/components/LivePlayer';
import { useHostParticipant } from '@/hooks/useHostParticipant';
import { useReactions } from '@/hooks/useReactions';

const LiveStreaming = () => {
  const videoClient = useStreamVideoClient()!;
  const livestream = useCall()!;
  const router = useRouter();

  const {
    useCallEndedAt,
    useIsCallLive,
    useCallCustomData,
    useCallIngress,
    useCallSession,
  } = useCallStateHooks();
  const { likes } = useReactions(livestream.id);
  const endedAt = useCallEndedAt();
  const isLive = useIsCallLive();
  const ingress = useCallIngress();
  const customData = useCallCustomData();
  const host = useHostParticipant();
  const session = useCallSession();

  const streamUrl = ingress?.rtmp?.address ?? '';
  const streamKey = videoClient.streamClient.tokenManager.getToken() ?? '';
  const livestreamTitle = customData?.name ?? '';
  const participants = session?.participants ?? [];

  const copyStreamUrl = () => {
    navigator.clipboard.writeText(streamUrl).catch((err) => {
      console.error('Could not copy text: ', err);
    });
  };

  const copyStreamKey = () => {
    navigator.clipboard.writeText(streamKey).catch((err) => {
      console.error('Could not copy text: ', err);
    });
  };

  useEffect(() => {
    const goLive = async () => {
      await livestream?.goLive();
    };

    if (host?.hasVideo) {
      goLive();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [host?.hasVideo]);

  const endLivestream = async () => {
    try {
      await livestream?.endCall();
      router.push('/');
    } catch (error) {
      console.error('Error ending livestream:', error);
    }
  };

  return (
    <div className="flex flex-1 flex-col lg:flex-row basis-[0.000000001px] h-[calc(100svh-56px)]">
      {/* Main Section */}
      <div className="relative flex flex-1 basis-[0.000000001px]">
        <div className="w-full flex flex-col flex-1 basis-[0.000000001px] p-6 min-[860px]:min-w-[860px] gap-4">
          {/* Summary Panel */}
          <div className="flex flex-col bg-brand-bg border border-outline-color rounded-xl overflow-hidden xl:h-[290px]">
            {/* Top section */}
            <div className="flex flex-col lg:flex-row grow">
              <div className="relative flex items-center justify-center bg-[#0D0D0D] min-[480px]:min-w-[424px] h-[216px] lg:h-full overflow-hidden">
                {!isLive && (
                  <div className="flex flex-col items-center gap-4 text-center text-sm">
                    <Spinner color="white" />
                    <span>Connect streaming software to go live</span>
                    <span>
                      Viewers will be able to find your stream once you go live
                    </span>
                  </div>
                )}
                {!endedAt && isLive && <LivePlayer />}
              </div>
              <div className="flex flex-1 px-6 pt-6 pb-6 xl:pb-0 xl:max-h-[216px] gap-10">
                <div className="flex flex-1 flex-col gap-3">
                  <div className="overflow-hidden align-top">
                    <div className="text-xs text-gray tracking-[.011em]">
                      Title
                    </div>
                    <div className="text-lg truncate">{livestreamTitle}</div>
                  </div>
                  <div className="overflow-hidden align-top">
                    <div className="text-xs text-gray tracking-[.011em]">
                      Category
                    </div>
                    <div className="text-base truncate">{'People & Blogs'}</div>
                  </div>
                  <div className="overflow-hidden align-top">
                    <div className="text-xs text-gray tracking-[.011em]">
                      Privacy
                    </div>
                    <div className="inline-flex items-center text-base truncate">
                      <div className="pr-1.5">
                        <Public />
                      </div>
                      {'Public'}
                    </div>
                  </div>
                  <div className="flex items-center gap-6">
                    <div className="overflow-hidden align-top">
                      <div className="text-xs text-gray tracking-[.011em]">
                        Viewers waiting
                      </div>
                      <div className="text-base truncate">
                        {participants.length}
                      </div>
                    </div>
                    <div className="overflow-hidden align-top">
                      <div className="text-xs text-gray tracking-[.011em]">
                        Likes
                      </div>
                      <div className="text-base truncate">{likes}</div>
                    </div>
                  </div>
                </div>
                <div className="mt-1.5 pr-2.5">
                  <Button>Edit</Button>
                </div>
              </div>
            </div>
            {/* Bottom section */}
            <div className="px-6 h-12 flex items-center shrink border-t border-t-outline-color gap-6">
              <div
                className={clsx(
                  'w-3 h-3 rounded-full',
                  isLive ? 'bg-green-400' : 'bg-[#B7B7B7]'
                )}
              />
              <div className="max-w-3/4 truncate tracking-normal">
                {!isLive &&
                  'Start sending us your video from your streaming software to go live'}
                {!endedAt && isLive && 'Streaming now'}
              </div>
            </div>
          </div>
          {/* Livestream Controls */}
          <div className="flex flex-1 flex-col min-h-[342px] basis-[0.000000001px] bg-brand-bg border border-outline-color rounded-xl overflow-hidden">
            <div className="w-full flex flex-col flex-1 basis-[0.000000001px]">
              <div className="h-12 flex items-center px-6 border-b border-b-outline-color">
                <div className="relative inline-flex items-center justify-center h-full align-middle ml-2 mr-8 cursor-pointer">
                  <span className="font-medium truncate">Stream settings</span>
                  <div className="absolute bottom-0 w-full h-0.5 bg-foreground" />
                </div>
                <div className="relative inline-flex items-center justify-center h-full align-middle ml-2 mr-8 cursor-pointer">
                  <span className="text-gray font-medium truncate">
                    Analytics
                  </span>
                </div>
                <div className="relative inline-flex items-center justify-center h-full align-middle ml-2 mr-8 cursor-pointer">
                  <span className="text-gray font-medium truncate">
                    Stream health
                  </span>
                </div>
              </div>
              <div className="flex flex-col gap-4 p-6">
                <div className="text-gray font-medium tracking-normal">
                  Stream key
                </div>
                <div className="flex items-center gap-4">
                  <TextField
                    label="Stream key (paste in encoder)"
                    variant="secondary"
                    value={streamKey}
                    readOnly
                  />
                  <Button
                    variant="plain"
                    className="border border-spec-button hover:bg-hover-button"
                    onClick={copyStreamKey}
                  >
                    Copy
                  </Button>
                </div>
                <div className="flex items-center gap-4">
                  <TextField
                    label="Stream URL"
                    variant="secondary"
                    value={streamUrl}
                    readOnly
                  />
                  <Button
                    variant="plain"
                    className="border border-spec-button hover:bg-hover-button"
                    onClick={copyStreamUrl}
                  >
                    Copy
                  </Button>
                </div>
                <div className="w-fit mt-4">
                  <Button onClick={endLivestream}>End livestream</Button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      {/* Chat */}
      <div className="my-0 lg:my-6 lg:mr-6">
      </div>
    </div>
  );
};

export default LiveStreaming;

A lot is going on here, so let’s break it down:

We utilize multiple Stream SDK hooks (useCallEndedAt, useIsCallLive, useCallIngress, etc.) to get real-time information about the stream's status and data. It also uses the custom useReactions hook to display the number of likes.
The useEffect watches the host?.hasVideo status. When video input is detected from the host's streaming software (like OBS), it automatically calls livestream?.goLive() to transition the session from backstage to live.
We retrieve the streamUrl (RTMP address) from useCallIngress and the secure streamKey from the videoClient.streamClient.tokenManager.getToken().
We provide dedicated Copy buttons for the stream URL and key, and an End livestream button which calls livestream?.endCall() and redirects the user to the home page.
We add a circle indicator that uses the isLive state to dynamically change color (green for live, grey for inactive).

Building the Live Chat

Creating the `LiveChat` Component

The LiveChat component is the primary container for the chat UI. It uses the chat context (provided by the LivestreamLayout) to render a messaging feed for the livestream.

Create a LiveChat.tsx in the components folder and add the following code:

import {
  Channel,
  MessageInput,
  MessageList,
  useChatContext,
  Window,
} from "stream-chat-react";
import { useUser } from "@clerk/nextjs";

import Button from "./Button";
import ChevronDown from "./icons/ChevronDown";
import MoreVert from "./icons/MoreVert";

const LiveChat = () => {
  const { isSignedIn } = useUser();
  const { channel } = useChatContext();

  const NullComponent = () => null;

  return (
    <div id="channel" className="h-full">
      <Channel
        channel={channel}
        AttachmentSelector={NullComponent}
        DateSeparator={NullComponent}
      >
        <div className="flex flex-1 basis-[0.000000001px] px-6 h-[unset] lg:px-0 xl:min-w-[400px] sm:max-w-[400px] shrink-0">
          <div className="flex flex-col flex-1 border border-outline-color rounded-xl overflow-hidden">
            <div className="h-12 p-2 flex items-center justify-between border-b border-b-outline-color">
              <div className="flex items-center gap-1 mx-1 cursor-pointer">
                <span className="text-foreground font-medium ml-3">
                  Top chat
                </span>
                <ChevronDown />
              </div>
              <Button icon={MoreVert} variant="plain"></Button>
            </div>
            <div className="flex grow h-[600px] xl:h-auto py-2">
              <Window>
                <MessageList />
              </Window>
            </div>
            {isSignedIn && (
              <div className="py-2.5 px-6 border-t border-t-outline-color max-h-[104px]">
                <MessageInput
                  additionalTextareaProps={{
                    placeholder: "Chat...",
                  }}
                />
              </div>
            )}
          </div>
        </div>
      </Channel>
    </div>
  );
};

export default LiveChat;

Here we implement several essential features:

The component is wrapped in the Stream Chat Channel component, which provides the context for all child components.
We pass NullComponent to props like AttachmentSelector and DateSeparator to disable those default UI elements.
We specify our own CustomMessage component to be rendered for each entry in the MessageList.
The MessageList is rendered inside a Window component to handle the virtualized scrolling of messages.
The MessageInput component is only rendered if the user is signed in (isSignedIn from Clerk), preventing anonymous users from chatting.

Next, we need to place this component into our livestream dashboard. Update your livestreaming/page.tsx file to include the LiveChat:

...
import LiveChat from '@/components/LiveChat';
...

const LiveStreaming = () => {
  ...

  return (
    <div className="flex flex-1 flex-col lg:flex-row basis-[0.000000001px] h-[calc(100svh-56px)]">
      {/* Main Section */}
      ...
      {/* Chat */}
      <div className="my-0 lg:my-6 lg:mr-6">
        <LiveChat />
      </div>
    </div>
  );
};

export default LiveStreaming;

Customizing the Chat Appearance

At this stage, the chat works, but it uses the default Stream SDK styling, which conflicts with our dark theme. To fix this, we need to override specific CSS classes to make the backgrounds transparent and align the input box with our design.

Add the following overrides to your globals.css file:

...

#channel .str-chat__channel {
  background: transparent;
  width: 100%;
}

#channel .str-chat__channel .str-chat__container,
#channel .str-chat__main-panel-inner {
  display: contents;
}

#channel .str-chat__channel .str-chat__container .str-chat__main-panel {
  display: contents;
  min-width: auto;
}

#channel .str-chat__list,
#channel .str-chat__empty-channel,
#channel .str-chat__message-input {
  background: transparent;
}

#channel .str-chat__message-input {
  padding: 0;
}

#channel .str-chat__message-textarea-container {
  background: var(--color-spec-button);
  font-size: 14px;
  border: none;
}

#channel .rta__textarea.str-chat__textarea__textarea.str-chat__message-textarea::placeholder {
  color: var(--color-foreground);
  font-size: 14px;
}

#channel .rta__textarea.str-chat__textarea__textarea.str-chat__message-textarea {
  color: var(--color-foreground);
  font-size: 14px;
}

#channel .str-chat__list {
  display: flex;
  flex-direction: column;
  justify-content: end;
}

#channel .str-chat__li:hover {
  background: var(--color-spec-button);
}

.str-video__participant-view {
  margin: 0 auto;
}

@media (max-width: 768px) {
  :root {
    --card-width: calc(100% / 2 - var(--grid-item-margin) - .01px);
    --grid-items-per-row: 2;
  }
}

@media (max-width: 560px) {
  :root {
    --card-width: calc(100% - var(--grid-item-margin) - .01px);
    --grid-items-per-row: 1;
  }
}

Creating the `CustomMessage` Component

With the layout styled, we need to customize the individual messages. This component will allow us to visually distinguish between regular users and the streamer (host).

In the components directory, create a CustomMessage.tsx file:

import { useChatContext, useMessageContext } from 'stream-chat-react';
import clsx from 'clsx';

import Avatar from './Avatar';

const CustomMessage = () => {
  const { channel } = useChatContext();
  const { message } = useMessageContext();

  const isStreamer = channel?.data?.created_by?.id === message.user?.id;

  return (
    <div
      data-message-id={message.id}
      className="flex items-start gap-4 text-sm px-2.5 py-1 cursor-pointer"
    >
      <div className="w-6 h-6 shrink-0">
        <Avatar
          size={24}
          name={message?.user?.name}
          image={message?.user?.image}
        />
      </div>
      <div className="pt-[1px]">
        <div
          className={clsx(
            'inline-flex h-5 rounded-xs mr-2 px-1 py-0.5',
            isStreamer ? 'bg-amber-300' : 'bg-transparent'
          )}
        >
          <span
            className={clsx(
              'text-xs font-bold',
              isStreamer ? 'text-black' : 'text-gray'
            )}
          >
            {message?.user?.name}
          </span>
        </div>
        <span className="text-[13px] text-foreground break-words overflow-hidden">
          {message.text}
        </span>
      </div>
    </div>
  );
};

export default CustomMessage;

In the code above:

We use the useMessageContext hook to access the specific message data.
We calculate the isStreamer boolean by comparing the message author's ID with the channel creator's ID.
We use clsx to conditionally apply an amber background (bg-amber-300) and black text if the message comes from the streamer.

Next, we need to add the component to our live chat. Update the LiveChat to include the CustomMessage component:

...
import CustomMessage from "./CustomMessage";
...

const LiveChat = () => {
  ...

  return (
    <div id="channel" className="h-full">
      <Channel
        ...
      >
        <div className="flex flex-1 basis-[0.000000001px] px-6 h-[unset] lg:px-0 xl:min-w-[400px] sm:max-w-[400px] shrink-0">
          <div className="flex flex-col flex-1 border border-outline-color rounded-xl overflow-hidden">
            ...
            <div className="flex grow h-[600px] xl:h-auto py-2">
              <Window>
                <MessageList Message={CustomMessage} />
              </Window>
            </div>
            ...
          </div>
        </div>
      </Channel>
    </div>
  );
};

export default LiveChat;

Creating the `CustomSendButton` Component

To ensure our chat input matches the rest of the application's design, we replace the default Stream SDK send button with our own button component.

In the components directory, create a CustomSendButton.tsx file:

import { SendButtonProps } from 'stream-chat-react';

import Button from './Button';
import Send from './icons/Send';

const CustomSendButton = ({ sendMessage, ...other }: SendButtonProps) => {
  return (
    <div className="ml-2.5 [&>button]:h-9 [&>button]:w-9">
      {/* @ts-expect-error send message */}
      <Button icon={Send} variant="plain" onClick={sendMessage} {...other} />
    </div>
  );
};

export default CustomSendButton;

In the code above:

The component accepts the sendMessage function from the Stream Chat SDK props.
It renders our custom Button component using the Send icon.
The onClick handler is wired directly to sendMessage, preserving the SDK's core functionality while giving us complete control over the styling.

Next, let’s add the button to the LiveChat component:

...
import CustomSendButton from "./CustomSendButton";
...

const LiveChat = () => {
  ...

  return (
    <div id="channel" className="h-full">
      <Channel
        ...
        SendButton={CustomSendButton}
      >
        ...
      </Channel>
    </div>
  );
};

export default LiveChat;

And with that, the livestream studio is complete! The host can now start a stream, manage the broadcast, and chat with viewers.

Building the LiveStream Page

Now let's create the viewer page that allows users to subscribe to channels and engage with livestreams.

Creating the Subscription API Routes

To manage channel subscriptions, we need two API routes: one to handle actions (subscribe/unsubscribe/count) and another to check the current user's status.

Create a file at app/api/subscriptions/[channelId]/route.ts with the following snippet:

import { auth } from '@clerk/nextjs/server';
import { NextResponse } from 'next/server';

import prisma from '@/lib/prisma';

export async function POST(
  _: Request,
  { params }: { params: Promise<{ channelId: string }> }
) {
  const { userId } = await auth();
  const { channelId } = await params;
  if (!userId)
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });

  await prisma.subscription.upsert({
    where: {
      subscriberId_channelId: {
        subscriberId: userId,
        channelId,
      },
    },
    update: {},
    create: { subscriberId: userId, channelId },
  });

  return NextResponse.json({ ok: true });
}

export async function DELETE(
  _: Request,
  { params }: { params: Promise<{ channelId: string }> }
) {
  const { userId } = await auth();
  const { channelId } = await params;
  if (!userId)
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });

  await prisma.subscription.delete({
    where: {
      subscriberId_channelId: {
        subscriberId: userId,
        channelId,
      },
    },
  });

  return NextResponse.json({ ok: true });
}

export async function GET(
  _: Request,
  { params }: { params: Promise<{ channelId: string }> }
) {
  const { channelId } = await params;
  const count = await prisma.subscription.count({
    where: { channelId },
  });

  return NextResponse.json({ count });
}

This API exposes three key actions:

POST (Subscribe): We use upsert to handle the subscription. If the subscription already exists, it does nothing; if not, it creates it. This prevents errors if a user clicks "Subscribe" multiple times.
DELETE (Unsubscribe): We remove the record matching the composite key of subscriberId (the user) and channelId.
GET (Count): We return the total count of subscriptions for the channel, which is publicly available information.

Next, we need a route that allows the frontend to quickly check if the currently logged-in user is subscribed to the channel they are viewing.

Create a file at app/api/subscriptions/[channelId]/status/route.ts with the following code:

import { NextResponse } from 'next/server';
import { auth } from '@clerk/nextjs/server';

import prisma from '@/lib/prisma';

export async function GET(
  _req: Request,
  { params }: { params: Promise<{ channelId: string }> }
) {
  const { userId } = await auth();
  const { channelId } = await params;

  // If not signed in, treat as not subscribed
  if (!userId) {
    return NextResponse.json({ subscribed: false });
  }

  const sub = await prisma.subscription.findUnique({
    where: {
      subscriberId_channelId: {
        subscriberId: userId, // Clerk user id
        channelId, // Channel owner Clerk id
      },
    },
    select: { channelId: true },
  });

  return NextResponse.json({ subscribed: Boolean(sub) });
}

In the code above:

We use auth() from Clerk to identify the user securely.
If the user is not authenticated, we immediately return { subscribed: false }.
We query the Subscription table for a record matching the current user and the channel.
We return a simple boolean indicating whether that record exists.

Putting it All Together

Let’s put all the components together to create our viewer page.

Create a file at /(home)/live/[livestreamId]/page.tsx and add the following code:

'use client';
import { use, useEffect, useState } from 'react';
import {
  Call,
  StreamCall,
  useCallStateHooks,
  useStreamVideoClient,
} from '@stream-io/video-react-sdk';
import { useChatContext } from 'stream-chat-react';
import clsx from 'clsx';

import Avatar from '@/components/Avatar';
import Button from '@/components/Button';
import Chat from '@/components/icons/Chat';
import Clip from '@/components/icons/Clip';
import Download from '@/components/icons/Download';
import Dislike from '@/components/icons/Dislike';
import DislikeFilled from '@/components/icons/DislikeFilled';
import Like from '@/components/icons/Like';
import LikeFilled from '@/components/icons/LikeFilled';
import LiveChat from '@/components/LiveChat';
import LivePlayer from '@/components/LivePlayer';
import More from '@/components/icons/More';
import Share from '@/components/icons/Share';
import Spinner from '@/components/Spinner';
import { getLivestreamStartedAt, joinCall } from '@/lib/utils';
import { useReactions } from '@/hooks/useReactions';

interface ViewLivestreamProps {
  params: Promise<{
    livestreamId: string;
  }>;
}

const ViewLivestream = ({ params }: ViewLivestreamProps) => {
  const { livestreamId } = use(params);
  const { client: chatClient, setActiveChannel } = useChatContext();
  const videoClient = useStreamVideoClient()!;
  const [loading, setLoading] = useState(true);
  const [livestream, setLivestream] = useState<Call>();
  const [subCount, setSubCount] = useState(0);
  const [isUserSubscribed, setIsUserSubscribed] = useState(false);
  const {
    likes,
    myReaction,
    like,
    dislike,
    loading: reacting,
  } = useReactions(livestreamId);

  const livestreamTitle = livestream?.state.custom.name ?? '';
  const livestreamOwner = livestream?.state.createdBy;
  const streamStartedAt = getLivestreamStartedAt(livestream?.state.startedAt);

  useEffect(() => {
    const loadLivestream = async () => {
      try {
        const livestream = videoClient.call('livestream', livestreamId);
        await joinCall(livestream);

        const channel = chatClient.channel('livestream', livestream.id);
        if (channel.cid) {
          await channel.watch();
        } else {
          await channel.create();
        }

        setLivestream(livestream);
        setActiveChannel(channel);

        await getSubscriptionCount(livestream.state.createdBy?.id as string);
        await getUserSubscriptionStatus(
          livestream.state.createdBy?.id as string
        );
      } catch (error) {
        console.error('Error joining livestream:', error);
      } finally {
        setLoading(false);
      }
    };

    const getSubscriptionCount = async (channelId: string) => {
      try {
        const res = await fetch(`/api/subscriptions/${channelId}`);
        const data = await res.json();

        setSubCount(data.count);
      } catch (error) {
        console.error('Error fetching subscription count:', error);
      }
    };

    const getUserSubscriptionStatus = async (channelId: string) => {
      try {
        const res = await fetch(`/api/subscriptions/${channelId}/status`);
        const data = await res.json();

        setIsUserSubscribed(data.subscribed);
      } catch (error) {
        console.error('Error fetching user subscription status:', error);
      }
    };

    loadLivestream();

    return () => {
      livestream?.leave();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const subscribeToChannel = async () => {
    try {
      const channelId = livestream?.state.createdBy?.id;
      const res = await fetch(`/api/subscriptions/${channelId}`, {
        method: isUserSubscribed ? 'DELETE' : 'POST',
      });
      const data = await res.json();
      if (data.ok) {
        setIsUserSubscribed(!isUserSubscribed);
        setSubCount((prev) => prev + (isUserSubscribed ? -1 : 1));
      }
    } catch (error) {
      console.error('Error subscribing to channel:', error);
    }
  };

  if (loading) {
    return (
      <div className="flex flex-1 h-[calc(100svh-56px)] justify-center items-center">
        <Spinner />
      </div>
    );
  }

  return (
    <StreamCall call={livestream}>
      <div className="relative flex flex-col items-center gap-8 pr-3 lg:flex-row lg:items-start lg:gap-0 lg:pb-0 flex-1 h-full justify-between">
        <div className="flex flex-col w-full items-center">
          <div className="relative w-full h-[56.25vw] max-h-[calc(100vh-169px)] min-h-[480px] bg-black overflow-x-clip">
            <LivePlayer />
          </div>
          <div className="flex flex-1 flex-col px-6 mt-3 mb-6 min-w-full max-w-[1225px]">
            <h1 className="text-xl font-bold truncate">{livestreamTitle}</h1>
            <div className="flex flex-col md:flex-row items-start gap-4 md:gap-0 mt-3">
              <div className="flex w-fit max-w-full mr-8 flex-initial items-center">
                <div className="flex gap-3">
                  <Avatar
                    size={40}
                    fontSize={20}
                    name={livestreamOwner?.name}
                    image={livestreamOwner?.image}
                  />
                  <div className="flex flex-col mr-6">
                    <p className="font-semibold leading-4">
                      {livestreamOwner?.name}
                    </p>
                    <p className="text-gray text-sm font-semibold">
                      {subCount} subscriber{subCount === 1 ? '' : 's'}
                    </p>
                  </div>
                </div>
                {livestreamOwner?.id !== chatClient.userID && (
                  <Button
                    className="bg-foreground text-background hover:bg-foreground/50"
                    onClick={subscribeToChannel}
                  >
                    {isUserSubscribed ? 'Unsubscribe' : 'Subscribe'}
                  </Button>
                )}
              </div>
              <div className="flex flex-grow flex-shrink items-center justify-end gap-2">
                <div className="flex items-center bg-spec-button rounded-full pr-3 pl-4 gap-1 [&>button]:w-9 [&>button]:h-9">
                  <Button
                    icon={myReaction === 'LIKE' ? LikeFilled : Like}
                    onClick={like}
                    disabled={reacting}
                    className="relative rounded-r-none"
                    variant="plain"
                  >
                    <div className="-ml-9">{likes > 0 ? likes : ''}</div>
                  </Button>
                  <div
                    className={clsx('h-6 w-[1px] bg-gray', likes > 0 && 'ml-2')}
                  />
                  <Button
                    icon={myReaction === 'DISLIKE' ? DislikeFilled : Dislike}
                    onClick={dislike}
                    disabled={reacting}
                    className="relative rounded-l-none"
                    variant="plain"
                  />
                </div>
                <Button icon={Share}>Share</Button>
                <div className="hidden md:contents">
                  <Button icon={Download}>Download</Button>
                </div>
                <Button icon={Clip}>Clip</Button>
                <div className="[&>button]:w-9 [&>button]:h-9">
                  <Button icon={More} />
                </div>
              </div>
            </div>
            <div className="flex flex-col md:flex-row mt-3 gap-3">
              <div className="flex flex-col w-full bg-spec-button p-3 rounded-xl gap-1">
                <div className="inline-flex gap-2">
                  <Watching />
                  <span className="text-sm font-bold">
                    Started streaming {streamStartedAt?.toLocaleString()}
                  </span>
                </div>
                <div className="truncate text-sm text-gray font-medium italic">
                  No description has been added to this video.
                </div>
                <span className="text-sm font-medium">...more</span>
              </div>
              <div className="flex flex-col w-full bg-spec-button p-3 rounded-xl gap-3 cursor-pointer">
                <h2 className="text-sm font-semibold">Live chat replay</h2>
                <div className="flex items-center gap-3">
                  <Button icon={Chat} variant="plain" className="w-6 h-6" />
                  <span className="text-sm font-semibold grow">
                    See what others said about this video while it was live.
                  </span>
                  <div className="shrink-0">
                    <Button size="sm">Open panel</Button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="sticky top-14 h-[calc(100vh-58px)] pb-8 lg:pb-0 w-full md:w-auto">
          <LiveChat />
        </div>
      </div>
    </StreamCall>
  );
};

const Watching = () => {
  const { useCallSession } = useCallStateHooks();
  const session = useCallSession();
  const participants = session?.participants || [];
  return (
    <span className="text-sm font-bold">
      {participants.length} watching now
    </span>
  );
};

export default ViewLivestream;

In the code above:

When the component mounts, the useEffect hook triggers a parallel fetch. It joins the video call using joinCall, connects to the LiveChat channel, and hits our API endpoints to get the current subscriber count and status.
The subscribeToChannel function manages the subscription state. It toggles between POST and DELETE requests based on the current status and performs an optimistic update, changing the UI instantly before the server confirms the action to make the app feel faster.
We utilize the useReactions hook to power the Like and Dislike buttons. The buttons are temporarily disabled (disabled={reacting}) while an API request is in flight to prevent spamming.
The entire UI is wrapped in <StreamCall>. This is crucial because child components like LivePlayer and Watching rely on the context to access the active call state.
The UI adapts to the user's state: we show an "Unsubscribe" button if they are already following the channel, and display filled icons if they have already liked or disliked the stream.
Finally, we use a helper utility, getLivestreamStartedAt, to parse the raw timestamp provided by the Stream backend. This ensures we can safely display the start time or calculate elapsed time without cluttering the component's logic.

Now that we are using getLivestreamStartedAt, let’s implement the helper function in lib/utils.ts:

// ...

export const getLivestreamStartedAt = (startedAtInit: Date | undefined) => {
  if (!startedAtInit) return '';
  const startedAt = new Date(startedAtInit);
  const now = new Date();
  const diff = now.getTime() - startedAt.getTime();
  const diffHours = Math.floor(diff / (1000 * 60 * 60));
  const diffMinutes = Math.floor(diff / (1000 * 60));

  if (diffMinutes < 1) {
    return 'just now';
  }
  if (diffMinutes < 60) {
    return `${diffMinutes} minute${diffMinutes === 1 ? '' : 's'} ago`;
  }
  if (diffHours < 24) {
    return `${diffHours} hour${diffHours === 1 ? '' : 's'} ago`;
  }
  const date = startedAt.toLocaleDateString(undefined, {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
  });

  return `on ${date}`;
};

And that’s it! You’ve successfully built a fully functional YouTube Live clone from the ground up.

Conclusion

With this final step, we've successfully built a YouTube Live clone with livestreaming and chat features using Stream Video and Chat SDKs.

We've covered a lot in this two-part series, from laying the foundation with Prisma, Clerk, and the home page to building the interactive livestream studio and the viewer page.

I encourage you to explore Stream SDKs further and extend your app even more. You could add features such as recording, moderation tools, custom emojis, and more.

Feel free to view the live demo and GitHub repository to see everything in action and explore the code.

Build a YouTube Live Clone with Next.js, Clerk, and TailwindCSS - Part One

Oluwabusayo Jacobs — Fri, 12 Dec 2025 17:56:55 +0000

Ever wondered how livestream platforms broadcast real-time video to thousands of viewers?

In this two-part series, you'll learn how to build a YouTube Live clone using Next.js, TailwindCSS, and Stream. We'll build the app UI with TailwindCSS, set up authentication with Clerk, and use Prisma to model and persist the app data. Then we'll integrate the Stream Video and Audio SDK for livestreaming, and include a live chat for each stream using the Stream Chat SDK.

By the end, you'll have a functional app that mirrors YouTube Live's core features.

In this first part, we'll set up the project, add authentication, and build the home page.

You can view the live demo and access the complete source code on GitHub.

Let’s get started!

Prerequisites

Before we begin, make sure you have these prerequisites:

Basic understanding of React.
Node.js and npm are installed on your machine.
Familiarity with TypeScript, Next.js, and TailwindCSS.

Setting up the Next.js Project

Let’s begin by setting up our Next.js project. We’ll use a starter template that includes all the initial setup and basic assets. To clone the template, run the following commands in your terminal:

# Clone the repository
git clone github.com/TropicolX/youtube-live-clone.git

# Navigate into the project directory
cd youtube-live-clone

# Check out the starter branch
git checkout starter

# Install the dependencies
npm install

Setting Up the Database

To build an app like YouTube Live, we need to track which users subscribe to which channels and how they react to livestreams (such as liking or disliking). We'll set up a database for this and use Prisma to work with it.

What is Prisma?

Prisma is an open-source ORM that simplifies creating a database schema and running queries. It allows you to manage databases easily without writing SQL code directly.

Installing Prisma

Let's start by installing Prisma and its dependencies:

npm install prisma@6.19.0 --save-dev
npm install @prisma/client@6.19.0 sqlite3

The @prisma/client library helps us interact with the database, and we’ll use SQLite for this project during development.

Next, let's initialize Prisma:

npx prisma init

This command sets up Prisma and creates a new .env file for your database settings.

Setting Up the Database Schema

Now, let's define our database schema for the YouTube Live clone. Open the prisma/schema.prisma file and add the following:

datasource db {
  provider = "sqlite"
  url      = "file:./dev.db"
}

generator client {
  provider = "prisma-client-js"
}

model Subscription {
  subscriberId String
  channelId    String
  createdAt    DateTime @default(now())
  @@id([subscriberId, channelId])
}

enum ReactionType {
  LIKE
  DISLIKE
}

model Reaction {
  userId       String
  livestreamId String
  type         ReactionType
  createdAt    DateTime @default(now())
  @@id([userId, livestreamId])            // one reaction per user per livestream
  @@index([livestreamId, type])           // fast counts per type
}

This schema covers the main ways users interact in the app. Here’s what each part does:

Subscription: This model records which user is subscribed to which channel. The composite primary key @@id([subscriberId, channelId]) ensures that a user cannot subscribe to the same channel more than once.
ReactionType: This enum specifies the reactions to a livestream: LIKE or DISLIKE.
Reaction: This model stores user likes or dislikes for livestreams. Each user can react once per stream. The index [livestreamId, type] speeds up the calculation of reaction counts.

Configuring the Database Connection

Next, let's set up our database connection. Navigate to the .env file in your root directory and add the following:

DATABASE_URL=file:./dev.db

This uses SQLite for local development. When you're ready for production, switch to PostgreSQL or MySQL.

Running Prisma Migrations

To create the database tables based on our schema, run the following command:

npx prisma migrate dev --name init

After running the migration, run the following command:

npx prisma generate

This generates a Prisma client with TypeScript types that match your schema, so you can run queries with type safety.

Setting Up Prisma Client in Code

To use the Prisma client in our project, create a new prisma.ts file in the lib directory with the following code:

import { PrismaClient } from '@prisma/client';

let prisma: PrismaClient;

if (process.env.NODE_ENV === 'production') {
  prisma = new PrismaClient();
} else {
  // @ts-expect-error global.prisma is used in development
  if (!global.prisma) {
    // @ts-expect-error global.prisma is used in development
    global.prisma = new PrismaClient();
  }
  // @ts-expect-error global.prisma is used in development
  prisma = global.prisma;
}

export default prisma;

Here, we ensure only one Prisma client instance is available at a time. During development, we store it globally to prevent connection exhaustion from hot reloading.

User Authentication with Clerk

What is Clerk?

Clerk is a user management tool that helps you add authentication and user profiles to your app without building them yourself.

We’ll use Clerk in our YouTube Live clone to handle authentication.

Setting Up a Clerk Account

To get started with Clerk, create an account on their website. Navigate to Clerk’s sign-up page and create an account using your email or a social login option.

Creating a Clerk App

Once you sign in, you’ll need to create an application for your project:

Navigate to the dashboard and click "Create application".
Name your application “Youtube Live Clone”.
Under “Sign in options,” select “Email”, “Username”, and “Google”.
Click "Create application" to complete the setup.

Once you’ve created your app, you'll be redirected to the app overview page. Here, you’ll find your Clerk API keys. Save these keys, as you’ll need them later.

Next, we need to ensure that users provide a first and last name during the sign-up process:

Go to the "Configure" tab in your dashboard.
Select the “User model” tab under the “User & authentication” section.
Locate the "First and last name" and “Require first and last name” options and toggle them on.
Click “Save” to save the changes.

Installing Clerk in Your Project

Next, let's add Clerk to your Next.js project:

Install the Clerk Next.js SDK by running the command below:
```
npm install @clerk/nextjs
```
Create a .env.local file and add the following environment variables:
```
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
```
Replace your_clerk_publishable_key and your_clerk_secret_key with the keys from your clerk app's overview page.

Update your app/layout.tsx file like this:

import type { Metadata } from 'next';
import { ClerkProvider } from '@clerk/nextjs';

import './globals.css';

export const metadata: Metadata = {
  title: 'YouTube Live clone',
  description: 'A YouTube Live clone built with Next.js and Stream.',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body className="text-foreground bg-background tracking-tight antialiased">
          {children}
        </body>
      </html>
    </ClerkProvider>
  );
}

In this code, we wrap the app layout with ClerkProvider so we can use Clerk’s features throughout the app.

Creating the Sign-Up and Sign-In Pages

Next, we need to create the sign-up and sign-in pages for our app. We can do this using Clerk’s <SignUp /> and <SignIn /> components that handle all authentication logic and the UI for their respective pages.

To set up the pages in your app:

Add these routes to your .env.local file:
```
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
```
This tells the <SignUp /> and <SignIn /> components where they're mounted in your app.

Create a sign-up page at app/sign-up/[[...sign-up]]/page.tsx, and add the following code:

'use client';
import { SignUp } from '@clerk/nextjs';

export default function Page() {
  return (
    <div className="w-svw h-svh flex items-center justify-center">
      <SignUp />
    </div>
  );
}

Create a sign-in page at app/sign-in/[[...sign-in]]/page.tsx and add the code below:

'use client';
import { SignIn } from '@clerk/nextjs';

export default function Page() {
  return (
    <div className="w-svw h-svh flex items-center justify-center">
      <SignIn />
    </div>
  );
}

Create a middleware.ts file in the src directory with the following code:

import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';

const isPublicRoute = createRouteMatcher([
  '/',
  '/live/(.*)',
  '/sign-in(.*)',
  '/sign-up(.*)',
  '/api/(.*)',
]);

export default clerkMiddleware(async (auth, request) => {
  if (!isPublicRoute(request)) {
    await auth.protect();
  }
});

export const config = {
  matcher: [
    // Skip Next.js internals and all static files, unless found in search params
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    // Always run for API routes
    '/(api|trpc)(.*)',
  ],
};

In this code, we use clerkMiddleware() to let some routes stay public, while keeping the rest protected.

With these steps completed, your sign-in and sign-up pages should be fully functional.

Setting Up Stream

We'll use Stream's React SDK for Video and React Chat SDK to build the livestream and chat features in our YouTube Live clone.

Creating your Stream Account

To get started with Stream, you need to create an account:

Navigate to Stream’s sign-up page and create a new account using your email or a social login.
Once you sign up, you'll be requested to provide additional information. Select the "Chat Messaging" and "Video and Audio" options, as we need these tools for our app.
Finally, click "Complete Signup" to continue.

After completing the steps above, you’ll be redirected to your Stream dashboard.

Creating a New Stream App

Next, you need to create a Stream app for your project:

In your Stream dashboard, click "Create App" in the top right corner.
Fill in the modal form:
- Enter a name like "youtube-live-clone" or any other name of your choice.
- Select the region nearest to you for the best performance.
- Leave the environment set to "Development".
Click "Create App".

Once you create your app, navigate to the "App Access Keys" section and copy the keys there. You’ll need them to connect Stream to your project.

Configuring User Permissions

To allow users and guests to perform certain actions in your stream application, you need to set up the necessary permissions in your Stream dashboard.

Navigate to the “Roles & Permissions” tab under “Video & Audio” and follow these steps:

Select the "user" role and choose the "livestream" scope.
Click the “Edit” button and select the following permissions:
- Update Call
- Update Call Settings
Save and confirm the changes.

This lets users create livestreams with their custom settings.

Next, we want to allow guests (users who are not signed in) to view livestreams:

Select the "guest" role and choose the "livestream" scope.
Click the “Edit” button and select the following permissions:
- Join Backstage
- Join Call
- Join Ended Call
- Read Call
Save your changes to finish.

Installing the Stream SDKs

To begin using Stream in your Next.js project, you need to install several SDKs:

Run the following command to install the necessary packages:

npm install @stream-io/video-react-sdk stream-chat-react stream-chat

Add your Stream API keys to your .env.local file:
```
NEXT_PUBLIC_STREAM_API_KEY=your_stream_api_key
STREAM_API_SECRET=your_stream_api_secret
```
Replace your_stream_api_key and your_stream_api_secret with the keys from the “App Access Keys” section.

Import Stream’s CSS stylesheets into your app/layout.tsx file:

... 
import '@stream-io/video-react-sdk/dist/css/styles.css';
import 'stream-chat-react/dist/css/v2/index.css';
import './globals.css';
...

Building the Home Page

Now that Clerk and Stream are set up, let's build the home page feed. This is where users will see all the current livestreams.

Building the Header

The header will appear at the top of the home layout. It will help users navigate the app and also access their profile settings.

Go to the components directory and create a Header.tsx file with the following code:

'use client';
import Link from 'next/link';
import { SignInButton, UserButton, useUser } from '@clerk/nextjs';

import Avatar from './Avatar';
import Button from './Button';
import Bell from './icons/Bell';
import Logo from './icons/Logo';
import Plus from './icons/Plus';
import Mic from './icons/Mic';
import Search from './icons/Search';
import User from './icons/User';
import MoreVert from './icons/MoreVert';

const Header = () => {
  const { isSignedIn, user } = useUser();
  return (
    <header className="sticky top-0 z-40 w-full px-5 sm:px-10 h-14 flex items-center justify-between bg-frosted-glass backdrop-blur-[48px]">
      <Link href="/" className="flex items-center">
        <Logo />
      </Link>
      <div className="flex items-center shrink-1 basis-[732px] gap-3.5">
        <div className="hidden md:flex flex-1 h-10 ml-10">
          <input
            type="search"
            className="w-full pl-4 pr-1 ml-8 rounded-l-full bg-search-bar border border-search-bar-border border-r-0 focus:ring-[#1c62b9] focus:border-[#1c62b9] focus:outline-0"
            placeholder="Search"
          />
          <button className="min-w-16 flex items-center justify-center cursor-pointer bg-spec-button rounded-r-full border border-search-icon-border">
            <Search />
          </button>
        </div>
        <div className="hidden xl:block">
          <Button icon={Mic} />
        </div>
      </div>
      <div className="flex gap-2 items-center justify-end w-[203.5px] ml-4">
        {isSignedIn && (
          <>
            <Link href="/livestreaming">
              <Button icon={Plus}>Create</Button>
            </Link>
            <Button icon={Bell} variant="plain" />
            <div className="relative h-8 w-8 sm:ml-5">
              <div className="opacity-0">
                <UserButton />
              </div>

              <div className="absolute left-0 top-0 flex items-center justify-center pointer-events-none z-20">
                <Avatar
                  name={user?.fullName || 'U'}
                  image={user.hasImage ? user.imageUrl : undefined}
                  size={32}
                />
              </div>
            </div>
          </>
        )}
        {!isSignedIn && (
          <>
            <Button icon={MoreVert} variant="plain" />
            <SignInButton>
              <Button
                icon={User}
                className="bg-transparent hover:bg-hover-blue hover:border-hover-blue text-blue border border-hover-button"
              >
                Sign in
              </Button>
            </SignInButton>
          </>
        )}
      </div>
    </header>
  );
};

export const HeaderLoading = () => {
  return (
    <div className="sticky top-0 z-40 w-full px-10 h-14 flex items-center justify-between bg-frosted-glass backdrop-blur-[48px]">
      <div className="w-25 h-5" />
      <div className="flex items-center shrink-1 basis-[732px] gap-3.5">
        <div className="flex flex-1 h-10 ml-10">
          <input
            type="search"
            className="w-full pl-4 pr-1 ml-8 rounded-l-full bg-search-bar border border-search-bar-border border-r-0 focus:ring-[#1c62b9] focus:border-[#1c62b9] focus:outline-0"
            placeholder="Search"
          />
          <button className="min-w-16 flex items-center justify-center cursor-pointer bg-spec-button rounded-r-full border border-search-icon-border" />
        </div>
        <div className="h-9 w-9 rounded-full bg-skeleton animate-pulse" />
      </div>
      <div className="flex gap-4 items-center justify-end w-[203.5px]">
        <div className="h-9 w-9 rounded-full bg-skeleton animate-pulse" />
        <div className="h-9 w-9 rounded-full bg-skeleton animate-pulse" />
        <div className="h-9 w-9 rounded-full bg-skeleton animate-pulse" />
      </div>
    </div>
  );
};

export default Header;

Here, we create the <Header /> component along with its skeleton UI. We also use the following Clerk modules:

useUser: This hook provides access to the user’s current data. We extract the isSignedIn and user states from the hook to check if the user is signed in and to retrieve their information, respectively.
<UserButton/>: This component renders an avatar that opens a dropdown menu with options to manage their account settings. Since we want to display our custom <Avatar /> while still using the dropdown menu, we set the <UserButton />'s opacity to 0.
<SignInButton />: This component wraps our custom button and serves as a link to the sign-in page.

Building the Home Layout

Next, let’s build out our home layout. This layout wraps all pages that need access to Stream’s livestream and chat features.

Create a layout.tsx file in the (home) directory and add the following code:

'use client';
import { ReactNode, useEffect, useState } from 'react';
import { OwnUserResponse, StreamChat } from 'stream-chat';
import { Chat } from 'stream-chat-react';
import { useUser } from '@clerk/nextjs';
import {
  StreamVideo,
  StreamVideoClient,
  User,
} from '@stream-io/video-react-sdk';
import { nanoid } from 'nanoid';

import { HeaderLoading } from '@/components/Header';
import Header from '@/components/Header';

interface HomeLayoutProps {
  children: ReactNode;
}

export const GUEST_ID = `guest_${nanoid(15)}`;

const tokenProvider = async (userId: string) => {
  const response = await fetch('/api/token', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ userId: userId || GUEST_ID }),
  });
  const data = await response.json();
  return data.token;
};

const API_KEY = process.env.NEXT_PUBLIC_STREAM_API_KEY as string;
const GUEST_USER: User = { id: GUEST_ID, type: 'guest', name: 'Guest' };

const HomeLayout = ({ children }: HomeLayoutProps) => {
  const { user, isLoaded, isSignedIn } = useUser();
  const [loading, setLoading] = useState(true);
  const [chatClient, setChatClient] = useState<StreamChat>();
  const [videoClient, setVideoClient] = useState<StreamVideoClient>();

  useEffect(() => {
    const setUpStream = async () => {
      try {
        const chatClient = StreamChat.getInstance(API_KEY);
        let streamUser: User | OwnUserResponse;
        if (isSignedIn) {
          const clerkUser = user!;
          streamUser = {
            id: clerkUser.id,
            name: clerkUser.fullName!,
            image: clerkUser.hasImage ? clerkUser.imageUrl : undefined,
            custom: {
              username: clerkUser.username!,
            },
          };
        } else {
          streamUser = GUEST_USER;
        }

        const customProvider = async () => {
          const token = await tokenProvider(streamUser.id);
          return token;
        };

        if (!chatClient.user) {
          if (isSignedIn)
            await chatClient.connectUser(streamUser, customProvider);
          else await chatClient.connectAnonymousUser();
        }

        setChatClient(chatClient);
        const videoClient = StreamVideoClient.getOrCreateInstance({
          apiKey: API_KEY,
          user: streamUser,
          tokenProvider: customProvider,
        });
        setVideoClient(videoClient);
      } catch (error) {
        console.error('Error setting up Stream:', error);
      } finally {
        setLoading(false);
      }
    };

    if (isLoaded) setUpStream();

    return () => {
      if (!isSignedIn) {
        chatClient?.disconnectUser();
        videoClient?.disconnectUser();
      }
    };
  }, [user, videoClient, chatClient, isSignedIn, isLoaded]);

  if (loading || !isLoaded) return <HeaderLoading />;

  return (
    <Chat client={chatClient!} theme="str-chat__theme-dark">
      <StreamVideo client={videoClient!}>
        <Header />
        {children}
      </StreamVideo>
    </Chat>
  );
};

export default HomeLayout;

There’s a lot going on here, so let’s break it down:

We create a tokenProvider function that fetches a user token from a /api/token endpoint. This token is required to log in the user to Stream.
We also generate a GUEST_ID and GUEST_USER for signed-out users so they can use a guest account for Stream.
We define a setupStream function that creates the chatClient and videoClient instances.
We ensure the user is disconnected from the clients when the component is unmounted.
While the client is connecting, we render the <HeadingLoading /> component.
Once connected, we wrap the <Header /> and children in Stream’s <Chat /> and <StreamVideo /> components. These components take in their respective client instances and provide the data to all other components in the layout.

Creating the Token API Route

Next, let’s create the route for the /api/token endpoint we referenced earlier.

Create a /api/token directory in the app folder, then add a route.ts file with the following:

import { StreamChat } from 'stream-chat';

const API_KEY = process.env.NEXT_PUBLIC_STREAM_API_KEY!;
const SECRET = process.env.STREAM_API_SECRET!;

export async function POST(request: Request) {
  const client = StreamChat.getInstance(API_KEY, SECRET);

  const body = await request.json();

  const userId = body?.userId;

  if (!userId) {
    return Response.error();
  }

  const token = client.createToken(userId);

  const response = {
    userId: userId,
    token: token,
  };

  return Response.json(response);
}

Here, we create and return an auth token for a user based on the provided userId.

Creating the Stream Card Component

The StreamCard component represents a single livestream tile in the app feed.

In the components directory, create a StreamCard.tsx file with the following code:

/* eslint-disable @next/next/no-img-element */
import Link from 'next/link';

import Avatar from './Avatar';
import LiveBadge from './LiveBadge';

interface StreamCardProps {
  channelImage: string;
  channelName: string;
  thumbnail: string;
  title: string;
  views: number;
  id: string;
}

const channelImageSize = 36;

const StreamCard = ({
  id,
  channelImage,
  channelName,
  thumbnail,
  title,
  views,
}: StreamCardProps) => {
  const href = id.length === 1 ? '#' : `/live/${id}`;
  return (
    <div className="flex flex-col w-(--card-width) mx-2 cursor-pointer">
      <Link href={href} className="contents">
        <div className="relative aspect-video rounded-xl overflow-hidden">
          <img
            src={thumbnail}
            alt={title}
            className="w-full h-full object-cover"
          />
          <div className="absolute bottom-2.5 right-2.5 ml-1">
            <LiveBadge />
          </div>
        </div>
        <div className="flex mt-3 gap-3">
          <div className="shrink-0">
            <Avatar
              size={channelImageSize}
              name={channelName}
              image={channelImage}
            />
          </div>
          <div className="flex flex-col pr-6">
            <h3 className="leading-5 line-clamp-2 font-bold">{title}</h3>
            <p className="text-sm text-gray font-medium truncate">
              {channelName}
            </p>
            <p className="text-sm text-gray font-medium truncate">
              {Intl.NumberFormat('en', { notation: 'compact' }).format(views)}{' '}
              watching
            </p>
          </div>
        </div>
      </Link>
    </div>
  );
};

export default StreamCard;

In the code above:

We define a conditional href that points to a placeholder (#) for mock data, or to the livestream page (/live/${id}) otherwise.
We render the StreamCard UI, including the channel name, channel avatar, livestream thumbnail, and view count.

Creating the Livestreams Container

Next, let’s create the Livestreams component. This component is responsible for fetching, organizing, and rendering the list of livestreams, including a featured stream at the top of the feed.

Create a Livestreams.tsx file in the components folder and add the following code:

import { useRouter } from 'next/navigation';
import { Call, StreamCall } from '@stream-io/video-react-sdk';

import Button from './Button';
import StreamCard from './StreamCard';
import LivePlayer from './LivePlayer';
import Avatar from './Avatar';
import LiveBadge from './LiveBadge';
import { mockStreams } from '@/lib/mockData';

interface LivestreamsProps {
  feed: Call[];
}

const Livestreams = ({ feed }: LivestreamsProps) => {
  const router = useRouter();
  const firstLivestream = feed[0];
  const homeFeed = firstLivestream
    ? [...feed.slice(1), ...mockStreams]
    : mockStreams;

  const goToLivestream = async () => {
    await firstLivestream.leave();
    router.push(`/live/${firstLivestream.id}`);
  };

  return (
    <div className="flex flex-col w-full gap-8">
      {firstLivestream && (
        <div
          onClick={goToLivestream}
          className="relative w-full h-[490px] rounded-2xl overflow-hidden bg-black cursor-pointer"
        >
          <div className="absolute top-0 right-0 left-auto pl-10 ml-6 w-[871px] max-w-[unset] h-full bg-linear-(--promo-gradient) z-20" />
          <div className="absolute top-0 left-0 pl-10 ml-6 w-[871px] max-w-[unset] h-full bg-linear-(--promo-gradient) z-20 flex flex-col justify-center items-start gap-2">
            <h1 className="text-4xl font-bold">
              {firstLivestream.state.custom.name}
            </h1>
            <div className="flex items-center gap-3">
              <Avatar
                size={24}
                name={firstLivestream.state.createdBy?.name || 'Streamer'}
                image={firstLivestream.state.createdBy?.image || undefined}
              />
              <span className="text-sm text-gray font-bold">
                {firstLivestream.state.createdBy?.name || 'Streamer'}
              </span>
              <LiveBadge />
            </div>
            <span className="text-sm text-gray">
              {firstLivestream.state.session?.participants.length} watching
            </span>
            <Button
              variant="plain"
              className="bg-foreground text-background w-fit mt-2"
            >
              Watch Live
            </Button>
          </div>
          <div className="absolute top-0 right-0 left-auto w-[871px] max-w-[unset] h-full flex items-center justify-center bg-black">
            <StreamCall call={firstLivestream}>
              <LivePlayer />
            </StreamCall>
          </div>
        </div>
      )}
      <div className="flex flex-col gap-4">
        <div className="w-full flex items-center justify-between ml-2">
          <h2 className="text-2xl font-extrabold">Live Now</h2>
          <Button className="bg-transparent hover:bg-[#263850] hover:border-[#263850] text-[#3ea6ff] border border-transparent">
            View all
          </Button>
        </div>
        <div className="flex flex-wrap [&>div:nth-child(n+4)]:mt-6 gap-4 sm:gap-0 items-end lg:items-start">
          {homeFeed.map((stream) => (
            <StreamCard
              key={stream.id}
              id={stream.id}
              title={stream.state.custom.name}
              channelName={stream.state.createdBy?.name as string}
              channelImage={stream.state.createdBy?.image as string}
              thumbnail={stream.state.thumbnails?.image_url as string}
              views={stream.state.participantCount || 0}
            />
          ))}
        </div>
      </div>
    </div>
  );
};

export default Livestreams;

Here’s what’s going on in the code above:

The component uses feed[0] to get the firstLivestream (the featured stream) and removes it from the array when constructing the main homeFeed for the grid.
The homeFeed array is populated with the remaining live streams and mockStreams data.
The goToLivestream function ensures the featured call is left (await firstLivestream.leave()) before routing to the dedicated stream page.
We conditionally render the large featured player section using firstLivestream && (...).
A LivePlayer component is rendered within a StreamCall context for the featured stream, allowing it to display the video feed.
The component maps over the homeFeed array to render the grid of StreamCard components.

Building the `useHostParticipant` Hook

The useHostParticipant hook is a custom utility that identifies the primary broadcaster (the host) in the current live stream.

Create a hooks directory in the src folder, create a file named useHostParticipant.tsx and add the following code:

import {
  hasAudio,
  hasScreenShare,
  hasVideo,
  publishingVideo,
  useCallStateHooks,
  type StreamVideoParticipant,
} from '@stream-io/video-react-sdk';

export interface ParticipantTrackFlags {
  hasVideo: boolean;
  hasAudio: boolean;
  hasScreenShare: boolean;
}

export function useHostParticipant():
  | (StreamVideoParticipant & ParticipantTrackFlags)
  | null {
  const { useParticipants } = useCallStateHooks();
  const participants = useParticipants({ sortBy: publishingVideo });
  const host = participants.find((p) => p.roles.includes('host'));

  if (!host) {
    return null;
  }

  return {
    ...host,
    hasVideo: hasVideo(host),
    hasAudio: hasAudio(host),
    hasScreenShare: hasScreenShare(host),
  };
}

In the code above:

We define the ParticipantTrackFlags interface to extend the base participant object with track status properties (hasVideo, hasAudio, hasScreenShare).
We use useCallStateHooks to get the useParticipants hook, which retrieves all participants and sorts them by publishingVideo.
The host is identified by searching for a participant whose roles array explicitly includes 'host'.
The hook returns the host object, spreading its original properties and adding the track flags determined by Stream SDK helper functions.

Implementing the Live Player Component

The LivePlayer component renders the main video feed and includes an interactive, custom control bar that appears when the user hovers over the player area. It uses the useHostParticipant hook to ensure it displays the host's primary feed. We also referenced it earlier in our Livestreams component.

Create a LivePlayer.tsx file in the components directory and add the following code:

import {
  ParticipantView,
  type StreamVideoParticipant,
} from '@stream-io/video-react-sdk';
import { useState } from 'react';
import clsx from 'clsx';

import Button from './Button';
import Pause from './icons/Pause';
import SkipNext from './icons/SkipNext';
import VolumeUp from './icons/VolumeUp';
import Subtitles from './icons/Subtitles';
import Settings from './icons/Settings';
import PIP from './icons/PIP';
import Crop from './icons/Crop';
import Fullscreen from './icons/Fullscreen';
import {
  ParticipantTrackFlags,
  useHostParticipant,
} from '@/hooks/useHostParticipant';

export default function LivePlayer() {
  const host = useHostParticipant();
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div
      className="w-full h-full"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {host ? (
        <>
          <div className="absolute top-0 left-0 w-full h-full object-cover">
            <ParticipantView
              participant={host}
              trackType={
                host.hasScreenShare ? 'screenShareTrack' : 'videoTrack'
              }
              ParticipantViewUI={null}
              VideoPlaceholder={null}
            />
          </div>
          <Overlay participant={host} />
        </>
      ) : (
        <div className="w-full h-full flex items-center justify-center bg-black">
          <span className="text-white">No active livestream</span>
        </div>
      )}

      <div
        className={clsx(
          'absolute bg-linear-(--bottom-fade-gradient) w-full h-full',
          isHovered
            ? 'opacity-100 transition-opacity duration-200'
            : 'opacity-0 transition-opacity duration-200'
        )}
      />
      <div
        className={clsx(
          'absolute bottom-0 left-0 px-2 pb-1 w-full flex flex-col items-start justify-between gap-1',
          isHovered
            ? 'opacity-100 transition-opacity duration-200'
            : 'opacity-0 transition-opacity duration-200'
        )}
      >
        <div className="relative bg-red-500 w-full h-[3px] rounded-md">
          <div className="absolute right-0 -top-0.5 w-2 h-2 rounded-full bg-red-500" />
        </div>
        <div className="flex items-center justify-between w-full">
          <div className="flex items-center gap-1">
            <Button icon={Pause} variant="plain" size="sm" />
            <Button icon={SkipNext} variant="plain" size="sm" />
            <Button icon={VolumeUp} variant="plain" size="sm" />
            <div className="flex items-center gap-2">
              <div className="w-2 h-2 rounded-full bg-red-500" />
              <span className="text-sm text-white font-medium">Live</span>
            </div>
          </div>
          <div className="flex items-center gap-1">
            <Button icon={Subtitles} variant="plain" size="sm" />
            <Button icon={Settings} variant="plain" size="sm" />
            <Button icon={PIP} variant="plain" size="sm" />
            <Button icon={Crop} variant="plain" size="sm" />
            <Button icon={Fullscreen} variant="plain" size="sm" />
          </div>
        </div>
      </div>
    </div>
  );
}

function Overlay(props: {
  participant: StreamVideoParticipant & ParticipantTrackFlags;
}) {
  const hasNoTracks =
    !props.participant.hasVideo &&
    !props.participant.hasAudio &&
    !props.participant.hasScreenShare;

  if (hasNoTracks)
    return (
      <>
        <div className="absolute top-0 left-0 w-full h-full">
          {/* eslint-disable-next-line jsx-a11y/alt-text, @next/next/no-img-element */}
          <img
            src={props.participant.image}
            className="w-full h-full object-contain"
          />
        </div>
        <div className="absolute left-0 bottom-0 w-full p-4 bg-black/20 backdrop-blur-sm text-left">
          <div>
            <span>{`Live stream offline`}</span>
          </div>
        </div>
      </>
    );
  return null;
}

In the code above:

The component uses useState to track isHovered and attaches onMouseEnter and onMouseLeave handlers to control the state.
The mainstream view uses ParticipantView to display the host's video and prioritize the screenShareTrack if available.
The control bar's visibility is managed with the clsx utility, which applies opacity-100 or opacity-0 conditionally based on the isHovered state with a smooth transition.
The inner Overlay component checks the host's media flags (from useHostParticipant) and displays the host's image and an "Live stream offline" message if no video, audio, or screen share tracks are active.
The control bar renders multiple Button components with icons for common video controls (e.g., Pause, Volume, Fullscreen).

Putting it All Together

Let’s put all the components together to create our home page.

Update the page.tsx file inside the (home) directory with the following code:

'use client';
import Image from 'next/image';
import { useEffect, useState } from 'react';
import { Call, useStreamVideoClient } from '@stream-io/video-react-sdk';

import Livestreams from '@/components/Livestreams';
import Spinner from '@/components/Spinner';
import { joinCall } from '@/lib/utils';

const liveImageUrl =
  'https://yt3.googleusercontent.com/JBRD2aGs76cb1XRqw9hmHcof1OqDHLCq4PAi4jPXb6Xli6Fgk71yAwptfAZuyksVXo822FRE=s72-c-c0x00ffffff-no-rwa';

export default function Home() {
  const [feed, setFeed] = useState<Call[]>([]);
  const [loading, setLoading] = useState(true);
  const videoClient = useStreamVideoClient()!;

  useEffect(() => {
    const fetchLivestreams = async () => {
      try {
        const result = await videoClient.queryCalls({
          filter_conditions: {
            type: { $eq: 'livestream' },
            backstage: { $eq: false },
            ongoing: { $eq: true },
          },
        });
        const firstLivestream = result.calls[0];
        if (firstLivestream) {
          await joinCall(firstLivestream);
          setFeed([firstLivestream, ...result.calls.slice(1)]);
          return;
        }

        setFeed([]);
      } catch (error) {
        console.error('Error fetching livestreams:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchLivestreams();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  if (loading)
    return (
      <div className="h-[calc(100svh-56px)] flex flex-1 items-center justify-center">
        <Spinner />
      </div>
    );

  return (
    <div>
      <main className="px-12 pb-10 flex flex-col gap-[32px] row-start-2 items-start">
        <div className="flex items-center gap-4">
          <Image src={liveImageUrl} width={72} height={72} alt="Live" />
          <h1 className="text-4xl font-extrabold">Live</h1>
        </div>
        <Livestreams feed={feed} />
      </main>
    </div>
  );
}

In the code above:

We use the useStreamVideoClient hook to access the video client necessary for data interaction.
The useEffect hook runs once on mount to fetch the live stream data using videoClient.queryCalls.
The query uses filter_conditions to retrieve only calls where type is 'livestream', backstage is false, and the stream is ongoing.
If a stream is found, we call the joinCall utility function to join the first stream (the featured stream) with muted devices, then update the feed state.
The component displays a Spinner component while the loading state is true.

Next, let’s add the utility module we imported earlier. Create a utils.ts file in the lib directory with the following code:

import { Call } from '@stream-io/video-react-sdk';

export const joinCall = async (call: Call) => {
  const defaultDeviceAction = 'disable';
  const callSetupPromises = [
    call.microphone.disableSpeakingWhileMutedNotification(),
    call.camera[defaultDeviceAction](),
    call.microphone[defaultDeviceAction](),
  ];

  Promise.all(callSetupPromises);
  await call.join();
};

Here, we add a joinCall function that does the following:

Takes a Stream call as an argument.
Sets the defaultDeviceAction to 'disable'.
Creates and invokes an array of promises to disable the camera, microphone, and the "speaking while muted" notification.
Joins the call using call.join().

And with that, we've created our livestream feed!

Conclusion

So far, we’ve set up our YouTube Live clone from the ground up:

Configured Prisma for our database
Added authentication with Clerk
Integrated Stream and built the home page

With all the foundation in place, we’re ready to move on to the fun stuff.

In Part Two, we’ll build the pages where users can create and watch livestreams, and add live chat.

Stay tuned!

Build a Signal Clone with React Native and Stream - Part Two

Oluwabusayo Jacobs — Mon, 04 Aug 2025 13:17:47 +0000

In part one of this two-part series, we focused on setting up our project, building the tab layout, and creating the home screens for our Signal clone. We also covered:

Integrating user authentication with Clerk
Installing Stream’s Chat SDK to support chat messaging

In this second part, we’ll add screens that complete the chat experience, such as editing your profile, starting a new conversation, creating group chats, or finding someone by their username.

We’ll also build a fully functional chat screen with real-time messaging using the Stream React Native Chat SDK and implement a call screen using the Stream React Native Video and Audio SDK, enabling users to have real-time voice and video conversations.

You can download the APK and IPA builds or access the full code on GitHub.

Let’s get started!

Building the Modal Screens

At this point, users can sign up and view chats, but we’re still missing some essential features:

Users can’t edit their profile
There’s no way to start a new chat or create a group

To solve this, we’ll introduce a (modal) group that provides separate screens for these actions.

Updating the Home Layout

First, let’s update the (home)/_layout.tsx file to include the (modal) group:

...

const HomeLayout = () => {
  ...

  return (
    <OverlayProvider>
      <Chat client={chatClient!}>
        <Stack>
          <Stack.Screen
            name="(modal)"
            options={{
              presentation: 'modal',
              headerShown: false,
            }}
          />         
          ...
        </Stack>
      </Chat>
    </OverlayProvider>
  );
};

export default HomeLayout;

Creating the Modal Layout

Next, let’s set up the modal layout.

Inside the (home) directory, create a (modal) folder, then add a _layout.tsx file to it with the following code:

import { Feather } from '@expo/vector-icons';
import { Stack, useRouter } from 'expo-router';

import Button from '@/components/Button';

const ModalLayout = () => {
  const router = useRouter();
  return (
    <Stack
      screenOptions={{
        headerBackground: () => null,
        headerTintColor: 'black',
        headerBackButtonDisplayMode: 'minimal',
        headerTitleAlign: 'center',
      }}
    >
      <Stack.Screen
        name="profile"
        options={{
          title: 'Profile',
          headerLeft: () => (
            <Button
              variant="plain"
              onPress={() => router.back()}
              className="right-4"
            >
              <Feather name="chevron-left" size={32} />
            </Button>
          ),
        }}
      />
      <Stack.Screen
        name="new-message"
        options={{
          title: 'New Message',
          headerLeft: () => (
            <Button variant="text" onPress={() => router.back()}>
              Cancel
            </Button>
          ),
        }}
      />
      <Stack.Screen
        name="new-group"
        options={{
          title: 'Select Members',
        }}
      />
      <Stack.Screen
        name="find-by-username"
        options={{
          title: 'Find by Username',
        }}
      />
    </Stack>
  );
};

export default ModalLayout;

Here, we set up a Stack navigator for our modal screens. We also apply a centered, transparent header to all screens, while the profile and new-message screens receive custom header buttons.

Building the Profile Screen

Now that we've added our modal layout, let’s work on the first modal screen: the profile screen.

The profile screen will allow users to:

Upload or remove a profile image
Edit their first and last names
Edit their username

We'll also ensure any profile updates are synced with Clerk and Stream, so the user's details remain consistent across the app.

First, let's create a component to handle the profile image.

In the components directory, create an ImageInput.tsx file and add the following code:

import { Feather } from '@expo/vector-icons';
import * as ImagePicker from 'expo-image-picker';
import { useEffect } from 'react';
import { Alert, Pressable } from 'react-native';

import Avatar from './Avatar';

interface ImageInputProps {
  name?: string;
  imageUri: string | null;
  onChangeImage: (file: ImagePicker.ImagePickerAsset | null) => void;
}

function ImageInput({ name, imageUri, onChangeImage }: ImageInputProps) {
  useEffect(() => {
    requestPermission();
  }, []);

  const requestPermission = async () => {
    try {
      const { granted } =
        await ImagePicker.requestMediaLibraryPermissionsAsync();
      if (!granted)
        alert('You need to enable permission to access the library');
    } catch (error) {
      console.error('Error requesting media library permissions:', error);
    }
  };

  const handlePress = () => {
    if (!imageUri) selectImage();
    else
      Alert.alert('Delete', 'Are you sure you want to delete this image?', [
        {
          text: 'Yes',
          onPress: () => onChangeImage(null),
        },
        { text: 'No' },
      ]);
    return;
  };

  const selectImage = async () => {
    try {
      const result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ['images'],
        quality: 1,
      });

      if (!result.canceled) {
        onChangeImage(result.assets[0]);
        return;
      }
    } catch (error) {
      console.error('Error selecting image:', error);
    }
  };

  return (
    <Pressable onPress={handlePress} className="items-center justify-center">
      <Avatar
        imageUrl={imageUri!}
        size={100}
        fontSize={40}
        name={name || 'User'}
        placeholderType={name ? 'text' : 'icon'}
      />
      {imageUri && (
        <Feather
          color="#ffffff78"
          name="edit-2"
          size={40}
          className="absolute"
        />
      )}
    </Pressable>
  );
}

export default ImageInput;

The ImageInput component uses Expo's ImagePicker to let users select an image for their profile.

Here’s how it works:

When the component mounts, it calls requestPermission to ask the user for access to their media library.
The component returns a Pressable that wraps around an Avatar. If an avatar image exists, an edit icon is displayed over the image to indicate it’s clickable.
When the user taps the image:
- If no image exists, it opens the media library so the user can select one.
- If an image does exist, it shows a confirmation alert asking if the user wants to delete it.

Next, let’s build our profile screen. Create a profile.tsx file in the (modal) folder with the following code:

import { useClerk, useUser } from '@clerk/clerk-expo';
import clsx from 'clsx';
import { ImagePickerAsset } from 'expo-image-picker';
import { useState } from 'react';
import { Text, TextInput, View } from 'react-native';
import { useChatContext } from 'stream-chat-expo';

import Button from '@/components/Button';
import ImageInput from '@/components/ImageInput';
import Screen from '@/components/Screen';
import TextField from '@/components/TextField';
import useUserForm from '@/hooks/useUserForm';
import { getError } from '@/lib/utils';

const ProfileScreen = () => {
  const { user } = useUser();
  const { client } = useChatContext();
  const clerk = useClerk();
  const usernameParts = user?.username?.split('_')!;
  const initialFormValues = {
    firstName: user?.firstName!,
    lastName: user?.lastName!,
    username: usernameParts[0],
    usernameNumber: usernameParts[1],
  };
  const defaultImage: ImagePickerAsset = {
    uri: user?.hasImage ? user?.imageUrl : '',
    width: 100,
    height: 100,
  };

  const {
    firstName,
    lastName,
    username,
    usernameNumber,
    numberError,
    onChangeFirstName,
    onChangeLastName,
    onChangeUsername,
    onChangeNumber,
  } = useUserForm(initialFormValues);
  const [profileImage, setProfileImage] =
    useState<ImagePickerAsset>(defaultImage);
  const [loading, setLoading] = useState(false);

  const submitDisabled =
    loading || !username || !usernameNumber || !firstName || !lastName;

  const updateProfile = async () => {
    try {
      setLoading(true);
      const finalUsername = `${username}_${usernameNumber}`;
      const result = await user?.update({
        firstName,
        lastName,
        username: finalUsername,
      });
      await client.upsertUser({
        id: result?.id!,
        name: result?.fullName!,
        username: result?.username!,
      });

      const updateUserImage = async (data: string | null) => {
        try {
          const imageResult = await clerk.user?.setProfileImage({
            file: data,
          });
          await client.upsertUser({
            id: result?.id!,
            image: imageResult ? imageResult.publicUrl! : undefined,
          });
        } catch (error) {
          console.error('Error updating user image:', error);
        }
      };

      if (profileImage.uri) {
        const response = await fetch(profileImage.uri);
        const blob = await response.blob();
        const reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onloadend = async () => {
          const base64data = reader.result as string;
          await updateUserImage(base64data);
        };
      } else {
        await updateUserImage(null);
      }

      alert('Profile updated successfully!');
    } catch (error) {
      getError(error);
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <Screen
      viewClassName="pt-3 px-4 items-center gap-6"
      loadingOverlay={loading}
    >
      <View className="items-center gap-3">
        <ImageInput
          name={user?.fullName!}
          imageUri={profileImage.uri}
          onChangeImage={(asset) =>
            setProfileImage(asset ?? { ...defaultImage, uri: '' })
          }
        />
        <Text className="text-sm text-gray-400">
          {username ? `${username}_${usernameNumber}` : 'Choose your username'}
        </Text>
      </View>
      <View className="gap-3">
        <TextField
          value={firstName}
          placeholder="First name"
          onChangeText={onChangeFirstName}
        />
        <TextField
          value={lastName}
          placeholder="Last name"
          onChangeText={onChangeLastName}
        />
        <View className="relative">
          <TextField
            autoCapitalize="none"
            value={username}
            placeholder="Username"
            onChangeText={onChangeUsername}
            className="pr-12"
          />
          <View className="absolute right-3 top-3 flex-row gap-2">
            <View className="w-0.5 h-5 bg-gray-300" />
            <TextInput
              keyboardType="number-pad"
              maxLength={2}
              value={usernameNumber}
              onChangeText={onChangeNumber}
              className="w-5 h-5 android:w-8 android:h-12 android:bottom-3.5"
            />
          </View>
          <Text
            className={clsx(
              'pl-2 pt-2 text-xs',
              numberError ? 'text-red-500' : 'text-gray-500'
            )}
          >
            {numberError ||
              'Usernames are always paired with a set of numbers.'}
          </Text>
        </View>
      </View>
      <Button onPress={updateProfile} disabled={submitDisabled}>
        Save
      </Button>
    </Screen>
  );
};

export default ProfileScreen;

The ProfileScreen handles:

Initializing form values from Clerk's current user object.
Displaying the firstName, lastName, and username form fields and managing their states using the useUserForm hook.
Managing image selection using the ImageInput component and converting the chosen image into a base64 string during upload.

Once the user taps “Save,” their profile is updated on both Clerk and Stream.

Building a Hook to Manage Contacts

We need access to a user's contact list to develop features like starting a new chat or group conversation. In our app, contacts refer to people our signed-in user has previously interacted with via DMs.

To simplify how we fetch and filter these contacts, we'll build a reusable hook called useContacts.

In the hooks folder, create a useContacts.tsx file with the following code:

import { useEffect, useRef, useState } from 'react';
import { StreamChat, UserResponse } from 'stream-chat';

const useContacts = (
  client: StreamChat,
  setUsers?: (contacts: UserResponse[]) => void,
  fetchContacts: boolean = true
) => {
  const [contacts, setContacts] = useState<UserResponse[]>([]);
  const [loadingContacts, setLoadingContacts] = useState(true);
  const debounceTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
  const cancelled = useRef(false);

  useEffect(() => {
    const getAllUsers = async () => {
      try {
        setLoadingContacts(true);
        const userId = client.userID!;
        const channels = await client.queryChannels({
          type: 'messaging',
          member_count: 2,
          members: { $in: [userId] },
        });

        const dmChannels = channels.filter((channel) =>
          channel.id?.startsWith('!members')
        );

        const contacts = dmChannels
          .map((channel) => {
            const members = Object.values(channel.state.members || {});
            return (
              members.find((m) => m.user_id !== client.userID)?.user || null
            );
          })
          .filter(Boolean) as UserResponse[];

        setContacts(contacts);
        if (setUsers) {
          setUsers(contacts);
        }
      } catch (error: any) {
        console.error('Error fetching contacts:', error);
      } finally {
        setLoadingContacts(false);
      }
    };
    if (fetchContacts) getAllUsers();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const debounceSearch = (
    text: string,
    reset: () => void,
    filterFn: (query: string) => Promise<void> | void
  ) => {
    const query = text.trimStart();

    if (!query) {
      if (debounceTimeout.current) clearTimeout(debounceTimeout.current);
      cancelled.current = true;
      reset();
      return;
    }

    cancelled.current = false;

    if (debounceTimeout.current) clearTimeout(debounceTimeout.current);
    debounceTimeout.current = setTimeout(async () => {
      if (cancelled.current) return;
      await filterFn(query);
    }, 200);
  };

  return {
    contacts,
    loadingContacts,
    debounceSearch,
  };
};

export default useContacts;

This hook handles three main responsibilities:

Fetching Contacts Automatically: On mount, the hook queries all direct message (DM) channels the current user is a part of and extracts the other members as contact suggestions. It filters for channels with two members (member_count: 2) and checks for channel IDs that follow the !members pattern, which we use for DM channels.
Tracking Loading State: While the contacts are being fetched, loadingContacts is set to true.
Search with Debouncing: The debounceSearch function allows us to handle user searches (e.g., filtering contacts) without spamming requests on every keystroke. It introduces a 200ms delay and is passed to a callback that executes the search logic.

Building the New Message Screen

Now that we have our useContacts hook in place, let’s put it to use by building a New Message screen. This screen allows users to either:

Start a new conversation with someone they've previously chatted with
Navigate to the route for creating a new group chat
Navigate to the route for searching users by their username

Before we create our screen, we need a component to display a user's avatar and name in a list.

Create a UserCard.tsx file in the components folder and add the following code:

import { Text, View } from 'react-native';
import { UserResponse } from 'stream-chat';

import Avatar from './Avatar';
import Button from './Button';

interface UserCardProps {
  onPress?: () => void;
  user: UserResponse;
  children?: React.ReactNode;
}

const UserCard = ({ children, onPress, user }: UserCardProps) => {
  // @ts-expect-error - names
  const name = user.name || `${user.first_name} ${user.last_name}`;

  return (
    <Button
      variant="plain"
      onPress={onPress}
      className="bg-white flex-row items-center gap-2 py-3 px-4 rounded-xl"
    >
      <View className="h-10 w-10">
        <Avatar name={name} imageUrl={user?.image} size={40} />
      </View>
      <View>
        <Text className="text-base leading-5">{name}</Text>
      </View>
      {children}
    </Button>
  );
};

export default UserCard;

In the code above:

The UserCard accepts a UserResponse from Stream, along with an optional onPress callback.
The name is inferred from the user.name field or constructed from first_name and last_name.
When clicked, it triggers the passed-in callback, which is used to initiate a chat.

Next, let’s create the new message screen. Create a new-message.tsx file in the (modal) folder and add the following code:

import { Entypo, Feather, MaterialIcons } from '@expo/vector-icons';
import { Link, useRouter } from 'expo-router';
import { Text, View } from 'react-native';
import { useChatContext } from 'stream-chat-expo';

import Button from '@/components/Button';
import Screen from '@/components/Screen';
import Spinner from '@/components/Spinner';
import UserCard from '@/components/UserCard';
import useContacts from '@/hooks/useContacts';

const NewMessageScreen = () => {
  const router = useRouter();
  const { client } = useChatContext();
  const { contacts, loadingContacts } = useContacts(client);

  const onSelectUser = async (userId: string) => {
    const channel = client.getChannelByMembers('messaging', {
      members: [client.userID!, userId],
    });
    router.dismissTo({
      pathname: '/chat/[id]',
      params: { id: channel.id! },
    });
  };

  return (
    <Screen viewClassName="pt-1 px-4">
      <View className="w-full">
        <Link href="/new-group" asChild>
          <Button
            variant="plain"
            className="bg-white flex-row items-center justify-between rounded-t-lg pt-0.5"
          >
            <View className="px-4">
              <MaterialIcons name="people-outline" size={24} color="black" />
            </View>
            <View className="flex-row flex-grow items-center justify-between gap-2 border-b border-gray-200">
              <Text>New Group</Text>
              <View className="p-2">
                <Entypo name="chevron-small-right" size={24} color="gray" />
              </View>
            </View>
          </Button>
        </Link>
        <Link href="/find-by-username" asChild>
          <Button
            variant="plain"
            className="bg-white flex-row items-center justify-between rounded-b-lg pb-0.5"
          >
            <View className="px-4">
              <Feather name="at-sign" size={24} color="black" />
            </View>
            <View className="flex-row flex-grow items-center justify-between gap-2">
              <Text>Find by Username</Text>
              <View className="p-2">
                <Entypo name="chevron-small-right" size={24} color="gray" />
              </View>
            </View>
          </Button>
        </Link>
      </View>
      {loadingContacts && (
        <View className="flex items-center justify-center py-4">
          <Spinner />
        </View>
      )}
      {!loadingContacts && contacts.length > 0 && (
        <View className="flex flex-col gap-2 mt-4">
          {contacts.map((contact) => (
            <UserCard
              key={contact.id}
              user={contact}
              onPress={() => onSelectUser(contact.id)}
            />
          ))}
        </View>
      )}
    </Screen>
  );
};

export default NewMessageScreen;

Here’s what happens in this screen:

At the top, we show two buttons:
- New Group takes the user to the group creation flow.
- Find by Username allows searching for users not in your existing contacts.
While the contact list is being fetched, a spinner is shown.
Once loaded, the contact list is shown using the UserCard component. Tapping a user:
- Attempts to retrieve a DM channel with just that user.
- Navigates the user directly into the chat screen using the channel ID.

Find by Username Screen

Sometimes we want to start a conversation with someone new, even if they aren’t in our contact list yet. To achieve this, we’ll build a screen that allows users to look up others by their usernames and initiate a chat.

First, let’s ensure our app can display individual chat views.

In your (home)/_layout.tsx file, add the route for the chat screen:

...

const HomeLayout = () => {
  ...

  return (
    <OverlayProvider>
      <Chat client={chatClient!}>
        <Stack>       
          ...
          <Stack.Screen
            name="chat/[id]"
            options={{
              headerShown: false,
            }}
          />
        </Stack>
      </Chat>
    </OverlayProvider>
  );
};

export default HomeLayout;

Next, create a new chat folder in the (home) directory, then create a [id].tsx file with the following snippet:

import { useLocalSearchParams } from 'expo-router';
import { Text } from 'react-native';

import Screen from '@/components/Screen';

const ChatScreen = () => {
  const { id: channelId } = useLocalSearchParams<{ id: string }>();

  return (
    <Screen className="flex-1 bg-white" viewClassName="pb-safe">
      <Text>{channelId}</Text>
    </Screen>
  );
};

export default ChatScreen;

For now, it simply displays the channel ID passed through the route. We'll come back and improve this later.

Next, let’s build out the screen where users can search by username.

In the (modal) folder, create a find-by-username.tsx file and add the following code:

import { useRouter } from 'expo-router';
import { useState } from 'react';
import { View } from 'react-native';
import { UserResponse } from 'stream-chat';
import { useChatContext } from 'stream-chat-expo';

import Screen from '@/components/Screen';
import Spinner from '@/components/Spinner';
import TextField from '@/components/TextField';
import UserCard from '@/components/UserCard';
import useContacts from '@/hooks/useContacts';

const FindByUsernameScreen = () => {
  const { client } = useChatContext();
  const router = useRouter();
  const [username, setUsername] = useState('');
  const [user, setUser] = useState<UserResponse | null>(null);
  const [loading, setLoading] = useState(false);

  const { debounceSearch } = useContacts(client, undefined, false);

  const resetUser = () => {
    setUser(null);
  };

  const search = async (query: string) => {
    try {
      setLoading(true);
      const { users } = await client.queryUsers({
        username: { $eq: query },
      });

      if (users.length > 0) {
        setUser(users[0]);
      }
    } catch (error: any) {
      console.error('Error fetching user:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleUserSearch = async (text: string) => {
    setUsername(text);
    debounceSearch(text, resetUser, search);
  };

  const onSelectUser = async (userId: string) => {
    const channel = client.getChannelByMembers('messaging', {
      members: [client.userID!, userId],
    });

    if (channel.id) {
      router.dismissTo({
        pathname: '/chat/[id]',
        params: { id: channel.id },
      });
    } else {
      await channel.create();
      router.dismissTo({
        pathname: '/chat/[id]',
        params: { id: channel.data?.id! },
      });
    }
  };

  return (
    <Screen viewClassName="pt-1 px-4 gap-4">
      <TextField
        id="username"
        placeholder="Username"
        value={username}
        onChangeText={(value) => handleUserSearch(value)}
        autoCapitalize="none"
      />
      {loading && (
        <View className="flex items-center justify-center py-4">
          <Spinner />
        </View>
      )}
      {!loading && user && (
        <UserCard user={user} onPress={() => onSelectUser(user.id)} />
      )}
    </Screen>
  );
};

export default FindByUsernameScreen;

In the code above:

We render a TextField to search for usernames.
Using the debounceSearch method from our useContacts hook, we prevent requesting on every keystroke.
On valid input, we call client.queryUsers with the username filter and update the user state accordingly.
If the user taps on a UserCard, we check if a channel already exists with the user. If not, we create one and navigate to it.

New Group Screen

Next, let’s add a New Group screen that allows users to create group chats with multiple members.

To do this, we’ll need two things:

Checkboxes so users can select multiple contacts
A way to generate unique group IDs for each chat

We can achieve this by using both expo-checkbox and expo-crypto. Run this command to install them:

npx expo install expo-checkbox expo-crypto

Next, create a new file named UserCheckbox.tsx in your components folder and add the following code:

import Checkbox from 'expo-checkbox';
import { View } from 'react-native';
import { UserResponse } from 'stream-chat';

import UserCard from './UserCard';

interface UserCheckboxProps {
  user: UserResponse;
  checked: boolean;
  onValueChange: (value: boolean) => void;
}

const UserCheckbox = ({ user, checked, onValueChange }: UserCheckboxProps) => {
  return (
    <UserCard onPress={() => onValueChange(!checked)} user={user}>
      <View className="flex items-center ml-auto">
        <Checkbox
          id={user.id}
          value={checked}
          onValueChange={onValueChange}
          className="size-4 rounded border-2 border-color-borders-input"
        />
      </View>
    </UserCard>
  );
};

export default UserCheckbox;

This component wraps the UserCard we built earlier and adds a checkbox on the right. When a user taps the card or the checkbox, it toggles a selection.

Next, create a new-group.tsx file in the modal folder, and add the following code:

import { getRandomBytesAsync } from 'expo-crypto';
import { useRouter } from 'expo-router';
import { useMemo, useState } from 'react';
import { ActivityIndicator, View } from 'react-native';
import { UserResponse } from 'stream-chat';
import { useChatContext } from 'stream-chat-expo';

import Button from '@/components/Button';
import Screen from '@/components/Screen';
import Spinner from '@/components/Spinner';
import TextField from '@/components/TextField';
import UserCheckbox from '@/components/UserCheckbox';
import useContacts from '@/hooks/useContacts';

const NewGroupScreen = () => {
  const { client } = useChatContext();
  const router = useRouter();
  const [creatingGroup, setCreatingGroup] = useState(false);
  const [query, setQuery] = useState('');
  const [groupName, setGroupName] = useState('');
  const [users, setUsers] = useState<UserResponse[]>([]);
  const [selectedUsers, setSelectedUsers] = useState<string[]>([]);

  const { contacts, loadingContacts, debounceSearch } = useContacts(
    client,
    setUsers
  );

  const resetUsers = () => {
    setUsers(contacts);
  };

  const search = (query: string) => {
    const users = contacts.filter((user) => {
      // @ts-expect-error - name
      const name = user.name || `${user.first_name} ${user.last_name}`;
      return (
        user.username?.toLowerCase().includes(query.toLowerCase()) ||
        name.toLowerCase().includes(query.toLowerCase())
      );
    });
    setUsers(users);
  };

  const handleUserSearch = (text: string) => {
    setQuery(text);
    debounceSearch(text, resetUsers, search);
  };

  const leave = () => {
    setCreatingGroup(false);
    setGroupName('');
    setQuery('');
    setSelectedUsers([]);
    router.dismissTo('/chats');
  };

  const createNewGroup = async () => {
    if (!groupName) {
      alert('Please enter a group name.');
      return;
    }
    if (selectedUsers.length === 0) {
      alert('Please select at least one user.');
      return;
    }

    setCreatingGroup(true);

    try {
      const bytes = await getRandomBytesAsync(7);
      const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';
      const id = Array.from(bytes)
        .map((b) => alphabet[b % alphabet.length])
        .join('');
      const group = client.channel('messaging', id, {
        members: [...selectedUsers, client.userID!],
        // @ts-expect-error - name
        name: groupName,
      });

      await group.create();
      leave();
    } catch (error) {
      console.error(error);
      alert('Error creating group');
    } finally {
      setCreatingGroup(false);
    }
  };

  const onSelectUser = (userId: string, value: boolean) => {
    setSelectedUsers((prevSelectedUsers) => {
      if (value) {
        return [...prevSelectedUsers, userId];
      } else {
        return prevSelectedUsers.filter((id) => id !== userId);
      }
    });
  };

  const sortedUsers = useMemo(
    () =>
      users.sort((a, b) => {
        const nameA = a.name;
        const nameB = b.name;
        return nameA?.localeCompare(nameB!)!;
      }),
    [users]
  );

  return (
    <Screen viewClassName="pt-1 px-4 gap-4">
      <TextField
        id="groupName"
        label="Group Name"
        placeholder="Group Name"
        value={groupName}
        onChangeText={(value) => setGroupName(value)}
      />
      <TextField
        id="users"
        label="Add Members"
        placeholder="Who would you like to add?"
        value={query}
        onChangeText={(value) => handleUserSearch(value)}
        autoCapitalize="none"
      />
      {loadingContacts && (
        <View className="flex items-center justify-center py-4">
          <Spinner />
        </View>
      )}
      {!loadingContacts && users.length > 0 && (
        <View className="flex flex-col gap-2 mt-2">
          {sortedUsers.map((user) => (
            <UserCheckbox
              key={user.id}
              user={user}
              checked={selectedUsers.includes(user.id)}
              onValueChange={(value) => onSelectUser(user.id, value)}
            />
          ))}
        </View>
      )}
      <Button
        className="mt-auto"
        onPress={createNewGroup}
        disabled={creatingGroup}
      >
        {!creatingGroup && 'Create group'}
        {creatingGroup && <ActivityIndicator />}
      </Button>
    </Screen>
  );
};

export default NewGroupScreen;

Here’s how it works:

The screen renders two input fields using the TextField component:
- Group Name: Users must enter a name for the group. This is required before the group can be created.
- Add Members: This field allows users to search for contacts by username or name. As the user types, a debounced search is performed using the useContacts hook.
The list of users is filtered based on the search input and rendered below the input fields.
Each user is displayed using the UserCheckbox component.
When the user taps on a contact or toggles the checkbox, it updates the selectedUsers array by either adding or removing the user’s ID.
When the “Create group” button is pressed:
- The createNewGroup function runs.
- It checks that a group name is provided and at least one user is selected.
- A random group ID is generated using expo-crypto.
- A new Stream channel of type messaging is created with the selected users and the current user as members.
- The app then navigates back to the chat list using router.dismissTo('/chats').

Building the Chat Screen

With our modal screens in place, we can start working on the chat screen. This is where users will see their messages, type replies, and initiate calls.

Firstly, create a ChannelTitle.tsx file in the components folder and add the following code:

import { Text } from 'react-native';
import { Channel } from 'stream-chat';
import { useChannelPreviewDisplayName } from 'stream-chat-expo';

interface ChannelTitleProps {
  channel: Channel;
  className?: string;
}

const ChannelTitle = ({
  channel,
  className = 'text-base font-bold',
}: ChannelTitleProps) => {
  const channelName = useChannelPreviewDisplayName(channel);
  return <Text className={className}>{channelName}</Text>;
};

export default ChannelTitle;

We’ll use this component to display the channel’s title in the chat screen.

Next, update the chat/[id].tsx file with the following code:

import Feather from '@expo/vector-icons/Feather';
import Ionicons from '@expo/vector-icons/Ionicons';
import { useLocalSearchParams, useRouter } from 'expo-router';
import { useEffect, useState } from 'react';
import { View } from 'react-native';
import { Channel as ChannelType } from 'stream-chat';
import {
  Channel,
  MessageInput,
  MessageList,
  useChatContext,
} from 'stream-chat-expo';

import Button from '@/components/Button';
import ChannelTitle from '@/components/ChannelTitle';
import PreviewAvatar from '@/components/PreviewAvatar';
import Screen from '@/components/Screen';
import ScreenLoading from '@/components/ScreenLoading';

const ChatScreen = () => {
  const { id: channelId } = useLocalSearchParams<{ id: string }>();
  const { client: chatClient } = useChatContext();
  const router = useRouter();

  const [channel, setChannel] = useState<ChannelType>();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const loadChannel = async () => {
      const channel = chatClient.channel('messaging', channelId);
      await channel.watch();

      setChannel(channel);
      setLoading(false);
    };

    if (chatClient && !channel) loadChannel();
  }, [channelId, channel, chatClient]);

  if (loading) {
    return <ScreenLoading />;
  }

  return (
    <Screen className="flex-1 bg-white" viewClassName="pb-safe">
      <View className="pl-1 pr-4 pb-1 flex flex-row items-center justify-between w-full h-10">
        <View className="flex flex-row items-center gap-4">
          <Button variant="plain" onPress={() => router.back()}>
            <Ionicons name="chevron-back" size={24} color="black" />
          </Button>
          <PreviewAvatar channel={channel!} size={28} fontSize={14} />
          <ChannelTitle channel={channel!} />
        </View>
        <View className="flex flex-row items-center gap-6">
          <Button variant="plain">
            <Feather name="video" size={24} color="black" />
          </Button>
          <Button variant="plain">
            <Feather name="phone" size={22} color="black" />
          </Button>
        </View>
      </View>
      <Channel
        channel={channel!}
        keyboardVerticalOffset={60}
        keyboardBehavior="padding"
        hasCommands={false}
        reactionListPosition="bottom"
      >
        <MessageList />
        <MessageInput />
      </Channel>
    </Screen>
  );
};

export default ChatScreen;

In the code above:

We extract the channel ID from the route using useLocalSearchParams.
We initialize the Stream channel instance with client.channel(...) and call the watch method to fetch messages and events.
While the channel is loading, we show a ScreenLoading component.
Once the channel is loaded, we render a header that:
- Contains a back button to return to the previous screen.
- Shows the chat avatar and title using PreviewAvatar and ChannelTitle.
- Includes two plain buttons to initiate video or audio calls (though they’re just UI here for now)
For our messages, we render the following Stream components:
- MessageList: Displays the list of chat messages.
- MessageInput: Shows the input field for sending messages.
- These two components are wrapped inside the Channel provider, which manages the chat context.

Customizing the Channel UI

Now that we have our chat screen set up, let’s enhance its look and feel.

Enabling Audio Recording

We want to enable audio recording only when the input is empty and no images are selected. To do that, we’ll create a CustomMessageInput component.

Create a CustomMessageInput.tsx file in the components directory and add the following code:

import { TextComposerState } from 'stream-chat';
import {
  MessageInput,
  useAttachmentManagerState,
  useMessageComposer,
  useStateStore,
} from 'stream-chat-expo';

const textComposerStateSelector = (state: TextComposerState) => ({
  text: state.text,
});

const CustomMessageInput = () => {
  const { textComposer } = useMessageComposer();
  const { text } = useStateStore(textComposer.state, textComposerStateSelector);
  const { attachments } = useAttachmentManagerState();

  const audioRecordingEnabled = !text && attachments.length === 0;
  return <MessageInput audioRecordingEnabled={audioRecordingEnabled} />;
};

export default CustomMessageInput;

Here’s what’s happening:

We use the useMessageComposer hook to access the current text input state.
We also check for any selected attachments using useAttachmentManagerState.
If there’s no text and no attachments, we enable the audio recording option in the MessageInput component.

Now, update the chat screen to use this component instead of the default MessageInput:

...
import {
  Channel,
  MessageList,
  useChatContext,
} from 'stream-chat-expo';
...
import CustomMessageInput from '@/components/CustomMessageInput';
...

const ChatScreen = () => {
  ...

  return (
      ...
      <Channel
        ...
      >
        <MessageList />
        <CustomMessageInput />
      </Channel>
      ...
  );
};

export default ChatScreen;

Adding a Message List Header

Next, we want a custom header to always be visible in the chat, even if the conversation has no messages yet.

Create a MessageListHeader.tsx file in the components folder and add the following code:

import { MaterialIcons } from '@expo/vector-icons';
import { Text, View } from 'react-native';
import {
  useChannelContext,
  useChannelPreviewDisplayName,
} from 'stream-chat-expo';

import { checkIfDMChannel } from '../lib/utils';
import ChannelTitle from './ChannelTitle';
import PreviewAvatar from './PreviewAvatar';

const MessageListHeader = () => {
  const { channel } = useChannelContext();
  const channelName = useChannelPreviewDisplayName(channel);
  const isDMChannel = checkIfDMChannel(channel);

  const text = isDMChannel
    ? `This conversation is just between ${channelName} and you`
    : 'This conversation is just between the members of this channel';

  return (
    <View className="items-center gap-3 mt-14 mb-8">
      <PreviewAvatar channel={channel!} size={80} fontSize={40} />
      <ChannelTitle channel={channel} className="text-2xl font-semibold" />
      <View className="w-[280px] items-start justify-center inline-flex flex-row px-6 py-4 bg-white rounded-xl border-[2px] border-gray-100 shadow shadow-gray-100">
        <MaterialIcons name="people-outline" size={18} color="black" />
        <Text className="text-center">{text}</Text>
      </View>
    </View>
  );
};

export default MessageListHeader;

To render this header in the chat screen, we’ll pass it to the Channel component’s EmptyStateIndicator prop and the MessageList’s FooterComponent prop.

Update the chat/[id].tsx file with the following code:

...
import MessageListHeader from '@/components/MessageListHeader';
...

const ChatScreen = () => {
  ...

  return (
      ...
      <Channel
        ...
        EmptyStateIndicator={MessageListHeader}
      >
        <MessageList FooterComponent={MessageListHeader} />
        <CustomMessageInput />
      </Channel>
      ...
  );
};

export default ChatScreen;

Custom Buttons

Next, let’s override the default attach and send buttons to better match our UI. To achieve this, we'll use the useMessageInputContext hook provided by Stream. This hook allows access to essential messaging actions, such as toggling the attachment picker or sending a message.

Create an AttachButton.tsx file in the components folder with the following code:

import { Feather } from '@expo/vector-icons';
import clsx from 'clsx';
import { AttachButtonProps, useMessageInputContext } from 'stream-chat-expo';

import Button from './Button';

const AttachButton = ({ disabled }: AttachButtonProps) => {
  const { toggleAttachmentPicker, selectedPicker } = useMessageInputContext();
  const isActive = selectedPicker === 'images';

  return (
    <Button
      variant="plain"
      disabled={disabled}
      onPress={toggleAttachmentPicker}
      className={clsx(
        'p-0.5 rotate-[0deg]',
        isActive && 'bg-gray-600 rounded-full rotate-[45deg]'
      )}
    >
      <Feather name="plus" size={24} color={isActive ? 'white' : 'black'} />
    </Button>
  );
};

export default AttachButton;

Here we create a custom attach button that uses the toggleAttachmentPicker function from the useMessageInputContext hook to open and close the attachment selection UI. We also check whether the attachment picker is active using the selectedPicker state from the same hook.

Next, create a SendButton.tsx file in the components folder with the following snippet:

import { Feather } from '@expo/vector-icons';
import clsx from 'clsx';
import {
  useAttachmentManagerState,
  useMessageComposer,
  useMessageInputContext,
  useStateStore,
} from 'stream-chat-expo';

import { TextComposerState } from 'stream-chat';
import Button from './Button';

const textComposerStateSelector = (state: TextComposerState) => ({
  text: state.text,
});

const SendButton = () => {
  const { sendMessage } = useMessageInputContext();
  const { textComposer } = useMessageComposer();
  const { text } = useStateStore(textComposer.state, textComposerStateSelector);
  const { attachments } = useAttachmentManagerState();

  if (!text && attachments.length === 0) return null;

  return (
    <Button
      variant="plain"
      onPress={sendMessage}
      className={clsx('p-0.5 bg-primary rounded-full')}
    >
      <Feather name="arrow-up" size={24} color="white" />
    </Button>
  );
};

export default SendButton;

Here, we extract text, attachments, and the sendMessage function from the their respective hooks.

We only show a send button if text or an attachment is ready to send. When the user clicks the button, we run the sendMessage function.

Finally, let’s register these new custom buttons within the Channel component to replace Stream’s default buttons:

...
import AttachButton from '@/components/AttachButton';
import SendButton from '@/components/SendButton';
...

const ChatScreen = () => {
  ...

  return (
      ...
      <Channel
        ...
        AttachButton={AttachButton}
        SendButton={SendButton}
      >
        ...
      </Channel>
      ...
  );
};

export default ChatScreen;

Customizing the Message Avatar

Next, we’ll customize the avatar used in messages to maintain a consistent visual style across our app. To do this, we'll replace Stream’s default avatar component with our own.

Create a new file called MessageAvatar.tsx in the components folder and add this snippet:

import { View } from 'react-native';
import { useMessageContext, useTheme } from 'stream-chat-expo';

import Avatar from './Avatar';

const MessageAvatar = () => {
  const { alignment, lastGroupMessage, message, showAvatar } =
    useMessageContext();
  const {
    theme: {
      messageSimple: {
        avatarWrapper: { container, leftAlign, rightAlign, spacer },
      },
    },
  } = useTheme();

  const visible =
    typeof showAvatar === 'boolean' ? showAvatar : lastGroupMessage;

  if (!visible) return <View style={spacer} />;

  return (
    <View style={[alignment === 'left' ? leftAlign : rightAlign, container]}>
      <Avatar
        size={28}
        name={message?.user?.name!}
        fontSize={14}
        imageUrl={message?.user?.image}
        placeholderType="text"
      />
    </View>
  );
};

export default MessageAvatar;

Here’s what the code does:

Stream’s useMessageContext hook gives us information about the current message, such as who sent it, whether to show the avatar, and where it’s aligned (left or right).
The useTheme hook lets us access style values like spacing and alignment from the current theme.
We check whether the avatar should be visible because showAvatar is explicitly true, or because it’s the last message in a group.
If it’s visible, we render your custom Avatar component, positioning it based on whether the message is incoming or outgoing.

If the avatar isn’t needed, we return an empty spacer to keep the alignment consistent.

Next, update the chat/[id].tsx file to register the new message avatar:

...
import MessageAvatar from '@/components/MessageAvatar';
...

const ChatScreen = () => {
  ...

  return (
      ...
      <Channel
        ...
        MessageAvatar={MessageAvatar}
      >
        ...
      </Channel>
      ...
  );
};

export default ChatScreen;

Customizing Stream Components Using Themes

Most Stream components allow you to change their appearance using a built-in theming system. Stream uses a default theme that sets basic styles like colors, spacing, and fonts.

If you want to customize certain elements, you can provide a partial theme that only changes the specified elements. Anything you don't specify will use Stream's default styles.

For example, to make your messages stand out in the chat, you can create a partial theme that changes only the appearance of your messages, such as background and text colors.

In the chat screen (chat/[id].tsx), create a myMessageTheme object and apply it to the Channel component as shown below:

...
import {
  ...
  DeepPartial,
  Theme,
} from 'stream-chat-expo';
...

const myMessageTheme: DeepPartial<Theme> = {
  messageSimple: {
    content: {
      senderMessageBackgroundColor: '#175dee',
      markdown: {
        text: {
          color: 'white',
        },
      },
    },
  },
};

const ChatScreen = () => {
  ...

  return (
      ...
      <Channel
        ...
        myMessageTheme={myMessageTheme}
      >
        ...
      </Channel>
      ...
  );
};

export default ChatScreen;

In the code above, we define:

senderMessageBackgroundColor: Changes the background color of your sent messages.
markdown.text.color: Changes the text color within your messages.

We can define a partial theme and pass it to the Chat provider for broader styling changes across the app, such as modifying the channel list UI or adjusting message spacing.

In the (home) folder, update the _layout.tsx file with the following code:

...
import {
  Chat,
  DeepPartial as ChatDeepPartial,
  Theme as ChatTheme,
  OverlayProvider,
} from 'stream-chat-expo';
...

const chatTheme: ChatDeepPartial<ChatTheme> = {
  colors: {
    white_snow: 'white',
  },
  channelPreview: {
    container: {
      borderBottomWidth: 0,
      paddingLeft: 0,
    },
    title: {
      fontWeight: '500',
    },
    unreadContainer: {
      backgroundColor: '#2c6bed',
    },
  },
  messageList: {
    contentContainer: {
      justifyContent: 'flex-end',
      flexGrow: 1,
    },
  },
  inlineDateSeparator: {
    container: {
      backgroundColor: 'transparent',
    },
    text: {
      color: '#6B7280',
      fontSize: 12,
      fontWeight: '600',
    },
  },
  messageSimple: {
    content: {
      receiverMessageBackgroundColor: '#e9e9e9',
      textContainer: {
        paddingHorizontal: 10,
      },
    },
  },
  messageInput: {
    container: {
      borderTopWidth: 0,
    },
    inputBoxContainer: {
      backgroundColor: '#eeeeef',
      borderRadius: 20,
      paddingHorizontal: 0,
      paddingVertical: 6,
      borderColor: '#eeeeef',
    },
    audioRecordingButton: {
      micIcon: {
        fill: 'black',
        width: 24,
        height: 24,
        style: {
          marginHorizontal: 2,
        },
      },
    },
  },
};

const HomeLayout = () => {
  ...

  return (
    <OverlayProvider>
      <Chat client={chatClient!} style={chatTheme}>
        ...
      </Chat>
    </OverlayProvider>
  );
};

export default HomeLayout;

Here, we defined custom styles for several key components.

Adding Video and Audio Calling

Now that we have messaging in place, let’s add support for real-time video and audio calls using the Stream Video SDK.

Installing Stream Video SDK

Run the following command to install all the required packages:

npx expo install @stream-io/video-react-native-sdk \
  @stream-io/react-native-webrtc \
  @config-plugins/react-native-webrtc \
  react-native-incall-manager \
  react-native-svg \
  @react-native-community/netinfo \
  expo-build-properties

Next, update your app.json file to include the required plugins and settings:

{
  "expo": {
    ...
    "plugins": [
      ...
      "expo-dev-client",
      [
        "expo-build-properties",
        {
          "android": {
            "minSdkVersion": 24
          }
        }
      ],
      [
        "@stream-io/video-react-native-sdk",
        {
          "iOSEnableMultitaskingCameraAccess": true,
          "androidPictureInPicture": true
        }
      ],
      [
        "@config-plugins/react-native-webrtc",
        {
          "cameraPermission": "$(PRODUCT_NAME) requires camera access in order to capture and transmit video",
          "microphonePermission": "$(PRODUCT_NAME) requires microphone access in order to capture and transmit audio"
        }
      ]
    ],
    ...
  }
}

Setting Up a Development Build

Expo Go doesn't support custom native modules that aren’t included by default. Since Stream Video SDK relies on native code (such as camera and microphone modules), we must create a custom development client. Here’s how to set this up:

Install the Expo Dev Client:

Run this command to enable your app to include custom native modules:
```
npx expo install expo-dev-client
```
Install EAS CLI:

This CLI tool is used to build and configure development clients. Install it globally:
```
npm i -g eas-cli
```
Log in to Expo:

Connect your project to your Expo account:
```
eas login
```
If you don’t have an Expo account yet, you can create one on their website.
Initialize EAS in your project:

This creates an eas.json file for configuring builds:
```
eas init
```
Configure native build settings:

Set up your app for both development and production builds:
```
eas build:configure
```
Run the app on your device or simulator:

Finally, build and launch your app using the custom development client:

For iOS:
```
npx expo run:ios
```
For Android:
```
npx expo run:android
```
If you run into any build errors, try clearing your node_modules and reinstalling:
```
rm -rf node_modules
npm install
npx expo run:ios  # or run:android
```
This usually resolves issues caused by mismatched dependencies or native module linking.

With our development build up and running, we can begin setting up the SDK.

Initializing the Stream Video Client

To make video calls work throughout the app, we must wrap our navigation stack in the StreamVideo provider.

Open the _layout.tsx file in the (home) directory, and update it with the following code:

...
import {
  StreamVideo,
  StreamVideoClient,
} from '@stream-io/video-react-native-sdk';
...

const HomeLayout = () => {
  ...
  const [videoClient, setVideoClient] = useState<StreamVideoClient>();

  useEffect(() => {
    ...

    const setUpStream = async () => {
      try {
        ...
        const videoClient = StreamVideoClient.getOrCreateInstance({
          apiKey: API_KEY,
          user: chatUser,
          tokenProvider: customProvider,
        });
        setVideoClient(videoClient);
      } catch (error) {
        console.error('Error setting up Stream:', error);
      } finally {
        setLoading(false);
      }
    };

    if (user) setUpStream();

    return () => {
      if (!isSignedIn) {
        chatClient?.disconnectUser();
        videoClient?.disconnectUser();
      }
    };
  }, [user, videoClient, chatClient, isSignedIn, router]);

  if (loading) return <ScreenLoading />;

  return (
    <OverlayProvider>
      <Chat client={chatClient!}>
        <StreamVideo client={videoClient!}>
          <Stack>       
            ...
            <Stack.Screen
              name="call/[id]"
              options={{
                headerShown: false,
                animation: 'none',
              }}
            />
          </Stack>
        </StreamVideo>
      </Chat>
    </OverlayProvider>
  );
};

export default HomeLayout;

In the code above, we:

Initialize the Stream Video client using the same user and token provider as the chat client.
Store the videoClient in a local state and ensure it's only created after the user is loaded.
Wrap our existing navigation stack in the StreamVideo provider, just like we did for Chat.
Add a route for call/[id] inside the navigation stack.
Ensure that both the chat client and video client are disconnected if the user is not signed in.

Adding Call Functionality to the Chat Screen

Next, let’s update the chat screen to allow users to initiate video or audio calls.

In the chat folder, open your [id].tsx file and update it with the following changes:

...
import { useCalls } from '@stream-io/video-react-native-sdk';
...

const ChatScreen = () => {
  ...
  const [activeCall] = useCalls();

  useEffect(() => {
    ...
  }, [channelId, channel, chatClient]);

  const startAudioCall = async () => {
    router.navigate({
      pathname: `/call/[id]`,
      params: { id: channelId, updateCall: 'true' },
    });
  };

  const startVideoCall = async () => {
    router.navigate({
      pathname: `/call/[id]`,
      params: { id: channelId, updateCall: 'true', video: 'true' },
    });
  };

  const callIsActive = !!activeCall && activeCall?.id !== channelId;

  if (loading) {
    ...
  }

  return (
    <Screen className="flex-1 bg-white" viewClassName="pb-safe">
      <View className="pl-1 pr-4 pb-1 flex flex-row items-center justify-between w-full h-10">
        ...
        <View className="flex flex-row items-center gap-6">
          <Button
            variant="plain"
            onPress={startVideoCall}
            disabled={callIsActive}
          >
            <Feather name="video" size={24} color="black" />
          </Button>
          <Button
            variant="plain"
            onPress={startAudioCall}
            disabled={callIsActive}
          >
            <Feather name="phone" size={22} color="black" />
          </Button>
        </View>
      </View>
      ...
    </Screen>
  );
};

export default ChatScreen;

In this update:

We use the useCalls hook to check for an ongoing call, which helps prevent users from joining or initiating multiple calls simultaneously.
The startAudioCall and startVideoCall functions navigate the user to the /call/[id] route. This is where we'll later build the actual call screen.
The id param represents the call ID. It’s used to identify which call corresponds to which chat.
We pass updateCall: 'true' so the user initiating the call can update its state and metadata as needed.
If it’s a video call, we also pass video: 'true' to make that intent clear in the call screen setup logic.
The buttons are added to the top-right of the chat header and disabled if another call is already active (and not from this chat).

Building the Call Layout

Now, let’s define what happens when a call is started or received.

Create a call/[id] folder in the (home) directory, and then add a _layout.tsx file with the following code:

import {
  Call,
  MemberRequest,
  StreamCall,
  useStreamVideoClient,
} from '@stream-io/video-react-native-sdk';
import { Stack, useGlobalSearchParams, useRouter } from 'expo-router';
import { useEffect, useState } from 'react';
import { useChatContext } from 'stream-chat-expo';

import ScreenLoading from '@/components/ScreenLoading';
import { checkIfDMChannel } from '@/lib/utils';

const CallLayout = () => {
  const { id, updateCall, video } = useGlobalSearchParams();
  const router = useRouter();
  const [call, setCall] = useState<Call>();
  const videoClient = useStreamVideoClient();
  const { client: chatClient } = useChatContext();

  useEffect(() => {
    const startCall = async () => {
      const channel = chatClient.channel('messaging', id);
      await channel.watch();
      const _call = videoClient?.call('default', id as string);
      const isDMChannel = checkIfDMChannel(channel);
      const members = Object.values(channel?.state.members!).map<MemberRequest>(
        (member) => ({
          user_id: member.user?.id as string,
          name: member.user?.name as string,
          role: isDMChannel ? 'admin' : undefined,
        })
      );
      const callConfig = {
        custom: {
          triggeredBy: chatClient.user?.id,
          members,
        },
        settings_override: {
          video: {
            enabled: true,
            camera_default_on: video === 'true',
            target_resolution: {
              width: 2560,
              height: 1440,
            },
          },
        },
      };

      await _call?.getOrCreate({
        ring: true,
        data: {
          members,
          ...callConfig,
        },
      });

      if (updateCall === 'true') {
        await _call?.update(callConfig);
      }

      if (!isDMChannel && updateCall === 'true') {
        try {
          await _call?.join({ maxJoinRetries: 3 });
        } catch {
          router.back();
        }
      }

      setCall(_call);
    };

    startCall();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  if (!call) {
    return <ScreenLoading />;
  }

  return (
    <StreamCall call={call}>
      <Stack
        screenOptions={{
          headerShown: false,
        }}
      />
    </StreamCall>
  );
};

export default CallLayout;

In this code above:

We grab the call ID, updateCall, and video flags from the URL params.
We use the useStreamVideoClient hook to access the Stream Video client and useChatContext to retrieve the current chat client instance.
Initializes a video call using videoClient.call(...).
We map through the channel members and convert them to the format expected by Stream Video.
We configure the call with:
- Custom data: triggeredBy and members
- Settings: We set up the video feature, like enabling it and setting the default camera state based on whether video === 'true'.
We use the getOrCreate function to start the call and ring the participants.
If updateCall === 'true', it means the user is the one who initiated the call, so we update the call’s metadata.
For group chats, if the user is initiating the call, we automatically attempt to join it. If joining fails, we navigate back to the previous screen.
Finally, we wrap the screen stack in the StreamCall component to provide the call context.

Configuring Call Permissions

To ensure users can update calls, we need to configure permissions in the Stream dashboard:

Navigate to the "Roles & Permissions" tab under "Video & Audio."
Select the "user" role and the "default" scope.
Click the “Edit” button and select the "Update Call" permission.
Save your changes.

Building the Call Screen

With our call layout and permissions set up, let’s move on to the actual call interface, which handles video and audio calls.

But before we dive into the call screen, we’ll need a small custom component to tweak the default video button styling.

Create a ToggleVideo.tsx file inside your components folder with the following code:

import { ToggleVideoPublishingButton } from '@stream-io/video-react-native-sdk';
import { View } from 'react-native';

const ToggleVideo = () => {
  return (
    <View className="w-12 h-12 rounded-full items-center justify-center bg-[#373737] p-4">
      <ToggleVideoPublishingButton />
    </View>
  );
};

export default ToggleVideo;

Next, let’s create the actual call screen.

Create an index.tsx file in the call/[id] directory and add the following code:

import { useUser } from '@clerk/clerk-expo';
import {
  CallContent,
  CallingState,
  DeepPartial,
  HangUpCallButton,
  IncomingCall,
  OutgoingCall,
  RingingCallContent,
  StreamTheme,
  Theme,
  ToggleCameraFaceButton,
  ToggleAudioPublishingButton as ToggleMic,
  useCall,
  useCallStateHooks,
} from '@stream-io/video-react-native-sdk';
import { useGlobalSearchParams, useRouter } from 'expo-router';
import { useEffect } from 'react';
import { View } from 'react-native';

import ToggleVideo from '@/components/ToggleVideo';

const svgContainerStyle = {
  backgroundColor: '#373737',
  width: 48,
  height: 48,
  borderRadius: 24,
};

// @ts-expect-error
const theme: DeepPartial<Theme> = {
  colors: {
    buttonSecondary: '#373737',
    buttonWarning: '#373737',
  },
  joinCallButton: {
    container: svgContainerStyle,
  },
  acceptCallButton: {
    container: svgContainerStyle,
  },
  rejectCallButton: {
    container: svgContainerStyle,
  },
  toggleAudioPublishingButton: {
    svgContainer: svgContainerStyle,
  },
  toggleCameraFaceButton: {
    svgContainer: svgContainerStyle,
  },
  hangupCallButton: {
    svgContainer: {
      ...svgContainerStyle,
      backgroundColor: '#eb5545',
    },
  },
  participantVideoFallback: {
    container: {
      backgroundColor: '#1c1c1ecf',
    },
  },
};

const CallScreen = () => {
  const { updateCall } = useGlobalSearchParams();
  const { user } = useUser();
  const call = useCall();
  const router = useRouter();
  const { useCallCallingState, useCallCustomData } = useCallStateHooks();
  const callingState = useCallCallingState();
  const customData = useCallCustomData();
  const isCallTriggeredByMe =
    customData.triggeredBy === user?.id || updateCall === 'true';

  useEffect(() => {
    if (callingState === CallingState.LEFT) {
      router.back();
    }
  }, [callingState, router, call]);

  if (
    [CallingState.RINGING, CallingState.JOINING, CallingState.IDLE].includes(
      callingState
    )
  ) {
    return (
      <StreamTheme style={theme}>
        <View className="flex-1 bg-black">
          <View className="flex-1 bg-white">
            {!isCallTriggeredByMe && <IncomingCall />}
            {isCallTriggeredByMe && <OutgoingCall />}
          </View>
        </View>
      </StreamTheme>
    );
  }

  return (
    <StreamTheme style={theme}>
      <View className="flex-1 bg-black">
        <View className="flex-1 pt-safe bg-white">
          <RingingCallContent
            CallContent={(props) => (
              <CallContent
                {...props}
                layout="spotlight"
                onHangupCallHandler={async () => {
                  await call?.endCall();
                }}
                CallControls={(props) => (
                  <View className="bg-[#1c1c1e] w-full h-[110px] pt-7 flex-row justify-center gap-4 rounded-t-2xl">
                    <ToggleCameraFaceButton />
                    <ToggleVideo />
                    <ToggleMic />
                    <HangUpCallButton
                      onHangupCallHandler={props.onHangupCallHandler}
                    />
                  </View>
                )}
              />
            )}
          />
        </View>
      </View>
    </StreamTheme>
  );
};

export default CallScreen;

Let’s go over what’s happening in this screen:

We create a custom theme to override styles for various Stream UI elements like buttons and fallback views.
We use useCallStateHooks to access the current call state and any custom metadata attached to the call.
- useCallCallingState tells us what stage the call is in (ringing, idle, joining, connected, or left).
- useCallCustomData lets us access any extra data added to the call, like who initiated it.
We check if the user triggered the call using the triggeredBy and updateCall values. This way, we know whether to render the OutgoingCall or IncomingCall UI.
If the call ends (CallingState.LEFT), we navigate back to the previous screen using router.back().
If the call is still in progress but not yet accepted (ringing or joining), we show either IncomingCall or OutgoingCall depending on who started it.
Once connected, we render CallContent and pass in a custom control layout with buttons to:
- Toggle camera face
- Toggle video
- Mute/unmute mic
- Hang up

Listening For Calls

The final step is to listen for incoming calls and automatically redirect the user to the /call/[id] screen.

Open your tabs/_layout.tsx file and add this logic:

...
import { useCalls } from '@stream-io/video-react-native-sdk';
import { Tabs, useRouter } from 'expo-router';
...

const TabsLayout = () => {
  const router = useRouter();
  const calls = useCalls().filter((call) => call.ringing);

  const ringingCall = calls[0];
  const isCallCreatedByMe =
    ringingCall?.state?.custom.triggeredBy === ringingCall?.currentUserId;

  useEffect(() => {
    if (isCallCreatedByMe) return;
    if (ringingCall) {
      router.navigate({
        pathname: `/call/[id]`,
        params: {
          id: ringingCall.id,
        },
      });
    }
  }, [ringingCall, isCallCreatedByMe, router]);

  return (
    ...
  );
};

export default TabsLayout;

Here’s what’s going on:

We use Stream’s useCalls hook to check for active calls in the app.
We filter out only those in the ringing state.
If the current user didn't trigger the call, we navigate them to the /call/[id] screen so they can answer it.

And that’s a wrap!

Conclusion

In this two-part series, we’ve built a complete Signal clone using React Native and Stream's Chat and Video SDKs. We implemented real-time messaging, audio and video calling, and added essential features like profile editing and group chat creation.

While this tutorial has a strong foundation, there’s still room to take things further. For instance, you could:

Add push notifications for incoming messages and calls.
Build custom in-app stories or message reactions.
Build out a complete calls screen to show the user’s recent calls.

Stream’s SDKs are packed with powerful features, so don’t hesitate to dive into their documentation and keep experimenting.

You can also check out the GitHub repo for this project and explore the code.

Happy building!

Build a Signal Clone with React Native and Stream - Part One

Oluwabusayo Jacobs — Mon, 04 Aug 2025 13:12:11 +0000

Ever wondered how popular messaging apps like Signal manage features such as real-time chat, voice calls, and video chat? In this tutorial, we'll build our own Signal-inspired messaging app using React Native, with Clerk handling authentication and Stream powering real-time chat and calls.

In this first part, we’ll focus on setting up the project and laying the foundation. Specifically, we’ll:

Set up a new Expo project
Integrate user authentication using Clerk
Install and configure the Stream React Native Chat SDK
Build out the core layout of the app

In the second part, we’ll implement a functional chat screen and add audio and video calling to our app using Stream’s React Native Video and Audio SDK.

If you’re interested in seeing how real-time chat and video can be implemented in a React Native app, this guide will walk you through everything step by step.

You can download the app to see it in action or check out the complete source code on GitHub.

Let’s get started!

Prerequisites

To get the most out of this tutorial, you should have a basic understanding of the following:

React Fundamentals: You should know how to utilize components, hooks, and manage state in React. You should also be familiar with React Native’s core components.
Node.js & npm: Make sure you have Node.js and npm installed on your machine, as they’re required to run the project.
TypeScript & TailwindCSS Basics: We'll be using both throughout the tutorial. A general understanding of TypeScript syntax and Tailwind’s utility classes will help you follow along more smoothly.

Project Setup

Let’s start by setting up the project with Expo and Nativewind.

Expo provides a set of tools to help build native apps faster. It will serve as the framework for our React Native app.

Nativewind, on the other hand, will allow us to style our app using Tailwind CSS.

Creating an Expo Project

Run the following command to create your Expo project:

npx create-expo-app@latest signal-clone

This creates a new Expo project named signal-clone with a boilerplate setup.

Your project structure should look like the image below:

Let’s clean things up a bit and remove everything we won’t need:

Delete the (tabs) folder and all files in the app directory.
Inside the hooks folder, delete all files.
In the components directory, delete everything except HapticTab.tsx.
You can also remove the entire ui folder if it exists.

Installing Nativewind

Next, set up Nativewind for your project by following the steps below:

Install Nativewind and dependencies:

npm install nativewind react-native-reanimated@~3.17.4 react-native-safe-area-context@5.4.0 clsx
npm install -D tailwindcss@^3.4.17 prettier-plugin-tailwindcss@^0.5.11

Set up Tailwind CSS:

Run the following to create a tailwind.config.js file:
```
npx tailwindcss init
```

Edit your tailwind.config.js file with the following code:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./app/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,ts,tsx}'],
  presets: [require('nativewind/preset')],
  theme: {
    extend: {
      colors: {
        primary: '#2c6bed',
      },
    },
  },
  plugins: [],
};

Create a global.css file in the root directory and add the following code:
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Add the Babel preset:

Create a babel.config.js file and add the following snippet:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
  };
};

Create your Metro configuration:

Create a metro.config.js file in the root of your project with the following code:

const { getDefaultConfig } = require('expo/metro-config');
const { withNativeWind } = require('nativewind/metro');

const config = getDefaultConfig(__dirname);

module.exports = withNativeWind(config, {
  input: './global.css',
  inlineRem: 16,
});

Add Nativewind type definitions:

Create a nativewind-env.d.ts file in your project directory and add the following directive:
```
/// <reference types="nativewind/types" />
```

Testing the Setup

Let’s test our setup by creating our first screen and running the development server to see the results.

Create a _layout.tsx file in the app folder with the following code:

import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

import '../global.css';

const RootLayout = () => {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <Stack>
        <Stack.Screen name="index" options={{ headerShown: false }} />
      </Stack>
      <StatusBar style="auto" />
    </GestureHandlerRootView>
  );
};

export default RootLayout;

This creates our root layout with basic gesture support and a stack navigation.

Next, create an index.tsx file in the app directory and add the following code:

import { Text, View } from 'react-native';

const WelcomeScreen = () => {
  return (
    <View className="flex-1 items-center justify-center bg-white">
      <Text className="text-lg font-semibold text-primary">
        Welcome to Signal!
      </Text>
    </View>
  );
};

export default WelcomeScreen;

Lastly, run the development server with the command below:

npx expo start

Once you run the command above, the server will start, and you’ll see a QR code in the terminal.

Next, install the Expo Go app on your iOS or Android device. This app lets you preview and test your project directly on your phone. You can also set up Expo Go on an Android or iOS emulator.

Once you install the app, scan the QR code to open it on your device. For Android, select the Expo Go > Scan QR code option. For iOS, use the default camera app.

If you follow the above steps, you should be able to launch the welcome screen successfully!

Download assets

To finish up your project setup, you’ll need to add the assets from the archive below:

📁
Download assets archive

After downloading the archive, unzip it and replace the default assets in the signal-clone/assets/images directory.

Your assets/images directory should look like the image below:

Building the Welcome Screen

So far, our welcome screen only returns a simple welcome message. Let’s improve it by adding a few key components:

Screen component

The screen component will serve as the container for our screens.

Create a Screen.tsx file in the components directory and add the following snippet:

import clsx from 'clsx';
import { ActivityIndicator, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

interface ScreenProps {
  children: React.ReactNode;
  className?: string;
  viewClassName?: string;
  loadingOverlay?: boolean;
}

const Screen = ({
  children,
  className,
  viewClassName,
  loadingOverlay = false,
}: ScreenProps) => {
  return (
    <>
      <SafeAreaView className={clsx('flex-1 android:pt-3', className)}>
        <View className={clsx('flex-1', viewClassName)}>{children}</View>
      </SafeAreaView>
      {loadingOverlay && (
        <View className="absolute inset-0 bg-black/40 items-center justify-center z-50">
          <ActivityIndicator color="white" />
        </View>
      )}
    </>
  );
};

export default Screen;

The Screen component wraps our content in a SafeAreaView to keep it within safe screen boundaries. It also accepts optional class names for styling and an optional loadingOverlay prop to show a loading screen.

AppImage component

The AppImage will be a simple image component that can accept Tailwind styles. This component will display a splash image on the welcome screen.

Create an AppImage.tsx file in the components directory with the following code:

import { Image, ImageProps } from 'expo-image';
import { cssInterop } from 'nativewind';

cssInterop(Image, {
  className: {
    target: 'style',
  },
});

const AppImage = (props: ImageProps) => {
  return <Image {...props} />;
};

export default AppImage;

Here, we wrap and return Expo’s Image component with Nativewind’s cssInterop so it can accept Tailwind className styles.

Button component

The button will enable users to perform actions within our UI. We’ll also use it in our welcome screen to display a call-to-action that takes the user to the next step.

Create a Button.tsx file in the components folder and add the following code:

import clsx from 'clsx';
import { Text, TouchableOpacity } from 'react-native';

interface ButtonProps extends React.ComponentProps<typeof TouchableOpacity> {
  onPress?: () => void;
  children: React.ReactNode;
  className?: string;
  variant?: 'plain' | 'default' | 'text';
}

const Button = ({
  onPress,
  children,
  className,
  variant = 'default',
  ...otherProps
}: ButtonProps) => {
  if (variant === 'plain')
    return (
      <TouchableOpacity
        className={clsx('w-fit h-fit', className)}
        onPress={onPress}
        {...otherProps}
      >
        {children}
      </TouchableOpacity>
    );

  return (
    <TouchableOpacity
      className={clsx(
        variant === 'default' &&
          'bg-blue-600 rounded-[13px] justify-center items-center px-4 py-4 w-full',
        variant === 'text' && 'bg-transparent justify-center items-center',
        otherProps.disabled && 'opacity-50',
        variant !== 'text' && className
      )}
      onPress={onPress}
      {...otherProps}
    >
      <Text
        className={clsx(
          variant === 'default' && 'text-[17px] font-medium text-white',
          variant === 'text' && 'text-sm text-black',
          variant === 'text' && className
        )}
      >
        {children}
      </Text>
    </TouchableOpacity>
  );
};

export default Button;

In the code above, the Button component accepts three variants (default, plain, and text) for different styling options, and uses TouchableOpacity to handle user interactions with visual feedback.

Building the Welcome Screen

With our components in place, let’s build out our complete welcome screen.

Head to the index.tsx file and update it with the following code:

import { useRouter } from 'expo-router';
import { Text, View } from 'react-native';

import AppImage from '@/components/AppImage';
import Button from '@/components/Button';
import Screen from '@/components/Screen';

const WelcomeScreen = () => {
  const router = useRouter();

  return (
    <Screen
      className="bg-white"
      viewClassName="px-10 pb-10 w-full items-center justify-end gap-16"
    >
      <AppImage
        source={require('@/assets/images/onboarding_splash_Normal.png')}
        className="w-[85%] h-[55%]"
        contentFit="cover"
      />
      <View className="flex items-center gap-4">
        <View className="flex w-full items-center">
          <Text className="text-center text-[28.5px] font-semibold">
            Take privacy with you.
          </Text>
          <Text className="w-[210px] text-center text-[28.5px] font-semibold">
            Be yourself in every message.
          </Text>
        </View>
        <Text className="text-base text-gray-500">Terms & Privacy Policy</Text>
      </View>
      <Button onPress={() => router.navigate('/sign-up')}>Continue</Button>
    </Screen>
  );
};

export default WelcomeScreen;

This new WelcomeScreen displays a splash image, a few short texts, and a call-to-action button redirecting the user to a new screen.

Adding User Authentication with Clerk

If the user clicks the “Continue” button on our welcome screen right now, they’d be taken to a sign-up screen that doesn’t exist yet. Before working on this screen, we must implement user authentication within our app. This is where Clerk comes in.

What is Clerk?

Clerk is a user management platform. It provides tools that enable developers to easily implement authentication systems and user profiles without building them from scratch.

We’ll use Clerk in our Signal clone to handle authentication, user profiles, and sessions, so we can focus on building the actual chat experience.

Setting Up a Clerk Account

To get started with Clerk, first create an account on their website. Go to Clerk’s sign-up page and sign up using your email or a social login option.

Creating a Clerk Project

Once you sign in, you’ll need to create a project for your app. You can do this by following the steps below:

Go to the dashboard and click "Create application".
Name your application “Signal clone”.
Under “Sign in options,” ensure Email is selected.
Click "Create application" to complete the setup.

Once the project is created, you'll be redirected to the app overview page. Here, you will find your Publishable Key. Save this key, as it will be helpful later.

Next, we need to ensure that users provide a first and last name, and a username, during the sign-up process. Follow the steps below to enable this feature:

Go to your dashboard's "Configure" tab.
Find the “Username” option and enable it, then disable the “Allow user name for sign-in” option.
Locate the "First and last name" option and toggle it on.
Click “Continue” to save the changes.

Installing Clerk in Your Project

Next, let's install Clerk into your Expo project:

Install Clerk’s Expo SDK by running the following command:
```
npm install @clerk/clerk-expo
```
Create a .env.local file in the root of your project and add your Clerk Publishable Key:
```
EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
```
Replace your_clerk_publishable_key with the key from your Clerk project dashboard.

To get the user and authentication data throughout our app, we must wrap our main layout with the Clerk’s <ClerkProvider /> component.

Navigate to the app/_layout.tsx file and update it with the following code:

import { ClerkProvider } from '@clerk/clerk-expo';
...

const PUBLISHABLE_KEY = process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY;

const RootLayout = () => {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <ClerkProvider publishableKey={PUBLISHABLE_KEY}>
        <Stack>
          <Stack.Screen name="index" options={{ headerShown: false }} />
          <Stack.Screen name="(auth)" options={{ headerShown: false }} />
        </Stack>
        <StatusBar style="auto" />
      </ClerkProvider>
    </GestureHandlerRootView>
  );
};

export default RootLayout;

We also add an (auth) stack to the layout, which we’ll work on later.

Clerk stores the active user's session token in memory by default. In Expo apps, the recommended way to store sensitive data, such as tokens, is by using expo-secure-store, which encrypts the data before storing it. To use a token cache:

Run the following command to install the libraries:
```
npm install expo-secure-store
```

Update the root layout to use the secure token cache:

...
import { tokenCache } from '@clerk/clerk-expo/token-cache';
...

const RootLayout = () => {
  return (
    ...
      <ClerkProvider tokenCache={tokenCache} publishableKey={PUBLISHABLE_KEY}>
        ...
      </ClerkProvider>
    ...
  );
};

export default RootLayout;

Let’s automatically redirect users to a /chats route if they’re already signed in.

Open app/index.tsx and update it like this:

import { useUser } from '@clerk/clerk-expo';
import { Redirect, useRouter } from 'expo-router';
...

const WelcomeScreen = () => {
  const { isLoaded, isSignedIn } = useUser();
  const router = useRouter();

  if (!isLoaded) return null;

  if (isSignedIn) {
    return <Redirect href="/chats" />;
  }

  return (
    ...
  );
};

export default WelcomeScreen;

Create an (auth) folder in the app directory. This folder represents the route group for our sign-up and sign-in screens. In the (auth) group, create a _layout.tsx file with the following code:

import { useAuth } from '@clerk/clerk-expo';
import { Redirect, Stack } from 'expo-router';

const AuthLayout = () => {
  const { isSignedIn } = useAuth();

  if (isSignedIn) {
    return <Redirect href={'/chats'} />;
  }

  return (
    <Stack screenOptions={{ headerShown: false }}>
      <Stack.Screen name="sign-in" />
      <Stack.Screen name="sign-up" />
    </Stack>
  );
};

export default AuthLayout;

Creating the Sign-Up and Sign-In Screens

With Clerk installed, let’s create our sign-up and sign-in screens.

These screens will use three new modules to handle the user form logic:

TextField: This component will serve as the primary text input for our application.
useUserForm: This custom hook will manage and update the state for our user forms.
utils: This module will provide utility functions throughout our app.

Let’s start with the TextField component. Create a TextField.tsx file in the components directory and add the following code:

import clsx from 'clsx';
import { DimensionValue, Text, TextInput, View } from 'react-native';

interface TextFieldProps extends React.ComponentProps<typeof TextInput> {
  width?: DimensionValue;
  label?: string;
}

const TextField = ({
  label,
  width = '100%',
  className,
  ...otherProps
}: TextFieldProps) => {
  return (
    <View
      style={{ width }}
      className="relative px-4 flex-row bg-white items-center justify-between rounded-xl py-3 android:py-0 border border-white"
    >
      {label && (
        <View>
          <Text className="w-[108px] font-medium">{label}</Text>
        </View>
      )}
      <TextInput
        className={clsx(
          'flex-1 placeholder:text-gray-400 text-black',
          className
        )}
        {...otherProps}
      />
    </View>
  );
};

export default TextField;

Next, let’s create our custom hook. In the hooks folder, create a useUserForm.tsx file with the following code:

import { useState } from 'react';

interface InitialValues {
  firstName?: string;
  lastName?: string;
  username?: string;
  usernameNumber?: string;
  numberError?: string;
  emailAddress?: string;
  password?: string;
}

const defaultValues: InitialValues = {
  firstName: '',
  lastName: '',
  username: '',
  usernameNumber: '',
  numberError: '',
  emailAddress: '',
  password: '',
};

const useUserForm = (initialValues = defaultValues) => {
  const [firstName, setFirstName] = useState(initialValues.firstName || '');
  const [lastName, setLastName] = useState(initialValues.lastName || '');
  const [username, setUsername] = useState(initialValues.username || '');
  const [usernameNumber, setUsernameNumber] = useState(
    initialValues.usernameNumber || ''
  );
  const [numberError, setNumberError] = useState(
    initialValues.numberError || ''
  );
  const [emailAddress, setEmailAddress] = useState(
    initialValues.emailAddress || ''
  );
  const [password, setPassword] = useState(initialValues.password || '');

  const onChangeUsername = (text: string) => {
    setUsername(text);
    if (!usernameNumber) {
      const randomNumber = String(Math.floor(Math.random() * 99) + 1).padStart(
        2,
        '0'
      );
      setUsernameNumber(randomNumber);
      setNumberError('');
    }
  };

  const onChangeNumber = (number: string) => {
    if (number === '00') return;
    setUsernameNumber(number);

    const isNumber = /^\d+$/.test(number);
    const isValid = isNumber && number.length === 2;

    if (!isValid) {
      setNumberError('Invalid username, enter a minimum of 2 digits');
    } else {
      setNumberError('');
    }
  };

  const onChangeFirstName = (text: string) => {
    setFirstName(text);
  };

  const onChangeLastName = (text: string) => {
    setLastName(text);
  };

  const onChangeEmailAddress = (text: string) => {
    setEmailAddress(text);
  };

  const onChangePassword = (text: string) => {
    setPassword(text);
  };

  return {
    firstName,
    lastName,
    username,
    usernameNumber,
    numberError,
    emailAddress,
    password,
    onChangeNumber,
    onChangeUsername,
    onChangeFirstName,
    onChangeLastName,
    onChangeEmailAddress,
    onChangePassword,
  };
};

export default useUserForm;

The useUserForm hook accepts the initialValues prop and uses it to initialize the following states:

firstName and lastName: These states make up the full name of the user. They are updated via the onChangeFirstName and onChangeLastName handlers respectively.
emailAddress and password: These states represent the auth credentials for the user. They are updated through the onChangeEmail and onChangePassword functions.
username, usernameNumber, and numberError: These states help derive the full username of the user. In Signal, usernames are paired with a two-digit number as a privacy safeguard. This number is represented by the usernameNumber. The username and usernameNumber states also come with the following change handlers:
- onChangeUsername: Updates the username and generates a random usernameNumber if it’s not already set.
- onChangeNumber: Updates the usernameNumber and runs a simple validation. It also sets the numberError to display a helpful message if the validation fails.

The userUserForm hook then returns all current states and the change handlers for each field.

Next, let’s create our utility module. Create a lib folder, and then add a utils.ts file with the following code:

export const getError = (err: any) => {
  const errors = err.errors as { longMessage: string }[];
  const errorMessage = errors
    .map((error, index) => `${index + 1}. ${error.longMessage}`)
    .join('\n');
  alert(errorMessage);
};

This function accepts an error object from a Clerk API request and displays the error messages using an alert.

With our modules set up, let’s create our screens.

Starting with the sign-up screen, create a sign-up.tsx file in the (auth) folder and add the following code:

import { useSignUp } from '@clerk/clerk-expo';
import clsx from 'clsx';
import { Link, useRouter } from 'expo-router';
import { useState } from 'react';
import { Text, TextInput, View } from 'react-native';

import Button from '@/components/Button';
import Screen from '@/components/Screen';
import TextField from '@/components/TextField';
import useUserForm from '@/hooks/useUserForm';
import { getError } from '@/lib/utils';

const SignUpScreen = () => {
  const { isLoaded, signUp, setActive } = useSignUp();
  const router = useRouter();
  const {
    firstName,
    lastName,
    username,
    usernameNumber,
    numberError,
    emailAddress,
    password,
    onChangeFirstName,
    onChangeLastName,
    onChangeUsername,
    onChangeNumber,
    onChangeEmailAddress,
    onChangePassword,
  } = useUserForm();
  const [pendingVerification, setPendingVerification] = useState(false);
  const [code, setCode] = useState('');
  const [loading, setLoading] = useState(false);

  const onSignUpPress = async () => {
    if (!isLoaded || numberError) return;
    setLoading(true);
    try {
      const finalUsername = `${username}_${usernameNumber}`;
      await signUp.create({
        firstName,
        lastName,
        username: finalUsername,
        emailAddress: emailAddress.toLowerCase(),
        password,
      });
      await signUp.prepareEmailAddressVerification({ strategy: 'email_code' });
      setPendingVerification(true);
    } catch (err) {
      getError(err);
    } finally {
      setLoading(false);
    }
  };

  const onVerifyPress = async () => {
    if (!isLoaded) return;
    setLoading(true);
    try {
      const signUpAttempt = await signUp.attemptEmailAddressVerification({
        code,
      });

      if (signUpAttempt.status === 'complete') {
        await setActive({ session: signUpAttempt.createdSessionId });
        router.replace('/chats');
      } else {
        console.error(JSON.stringify(signUpAttempt, null, 2));
      }
    } catch (err) {
      getError(err);
    } finally {
      setLoading(false);
    }
  };

  if (pendingVerification) {
    return (
      <Screen viewClassName="pt-10 px-4 gap-4" loadingOverlay={loading}>
        <View className="gap-3">
          <Text className="text-center text-3xl font-semibold">
            Verify email address
          </Text>
          <Text className="text-center text-base text-gray-500">
            Enter the code we sent to {emailAddress.toLowerCase()}
          </Text>
          <Button
            variant="text"
            className="text-base text-blue-600"
            onPress={() => setPendingVerification(false)}
          >
            Wrong email?
          </Button>
        </View>
        <TextField
          value={code}
          placeholder="Enter your verification code"
          keyboardType="numeric"
          onChangeText={(code) => setCode(code)}
        />
        <Button onPress={onVerifyPress}>Verify</Button>
      </Screen>
    );
  }

  return (
    <Screen viewClassName="pt-10 px-4 gap-4" loadingOverlay={loading}>
      <View className="gap-3">
        <Text className="text-center text-3xl font-semibold">Sign up</Text>
        <Text className="text-center text-base text-gray-500">
          Create an account to get started
        </Text>
      </View>
      <View className="gap-3">
        <TextField
          value={firstName}
          placeholder="First name"
          onChangeText={onChangeFirstName}
        />
        <TextField
          value={lastName}
          placeholder="Last name"
          onChangeText={onChangeLastName}
        />
        <View className="relative">
          <TextField
            autoCapitalize="none"
            value={username}
            placeholder="Username"
            onChangeText={onChangeUsername}
            className="pr-12"
          />
          <View className="absolute right-3 top-3 flex-row gap-2">
            <View className="w-0.5 h-5 bg-gray-300" />
            <TextInput
              keyboardType="number-pad"
              maxLength={2}
              value={usernameNumber}
              onChangeText={onChangeNumber}
              className="w-5 h-5 android:w-8 android:h-12 android:bottom-3.5"
            />
          </View>
          <Text
            className={clsx(
              'pl-2 pt-2 text-xs',
              numberError ? 'text-red-500' : 'text-gray-500'
            )}
          >
            {numberError ||
              'Usernames are always paired with a set of numbers.'}
          </Text>
        </View>
        <TextField
          autoCapitalize="none"
          value={emailAddress}
          placeholder="Email address"
          onChangeText={onChangeEmailAddress}
        />
        <TextField
          value={password}
          placeholder="Password"
          secureTextEntry={true}
          onChangeText={onChangePassword}
        />
      </View>
      <Button onPress={onSignUpPress}>Continue</Button>
      <View className="flex-row gap-[3px]">
        <Text>Already have an account?</Text>
        <Link href="/sign-in">
          <Text className="text-blue-600">Sign in</Text>
        </Link>
      </View>
    </Screen>
  );
};

export default SignUpScreen;

The sign-up screen renders two forms:

Initial Form: This is the form provided to the user to fill out their details. In this form:
- We use the TextField component to render the form fields for the user registration.
- We also render a Text element below the username field that displays either a helper message or the numberError when the usernameNumber is invalid.
- The form state is managed using the useUserForm hook.
- When the user clicks “Continue”, the onSignupPress function is called. This function creates a finalUsername by combining the username and usernameNumber with an underscore. Then, using Clerk’s signUp object from the useSignUp hook, it registers the user with signUp.create() and sends a verification email using signUp.prepareEmailAddressVerification().
Verification Form: After the sign-up is successful, the user is redirected to the verification form and prompted to enter the email verification code. Once the user clicks “Verify”, the onVerifyPress function is called. This function uses the signUp.attemptEmailAddressVerification() method to verify the user’s email based on the code provided. If successful, it runs the setActive() function (from the useSignUp hook) to create an active session and then redirects the user to /chats.

Next, create a sign-in.tsx file in the (auth) folder, then add the following code:

import { useSignIn } from '@clerk/clerk-expo';
import { Link, useRouter } from 'expo-router';
import { useState } from 'react';
import { Text, View } from 'react-native';

import Button from '@/components/Button';
import Screen from '@/components/Screen';
import TextField from '@/components/TextField';
import useUserForm from '@/hooks/useUserForm';
import { getError } from '@/lib/utils';

const SignInScreen = () => {
  const { signIn, setActive, isLoaded } = useSignIn();
  const router = useRouter();

  const { emailAddress, password, onChangeEmailAddress, onChangePassword } =
    useUserForm();
  const [loading, setLoading] = useState(false);

  const onSignInPress = async () => {
    if (!isLoaded) return;
    setLoading(true);
    try {
      const signInAttempt = await signIn.create({
        identifier: emailAddress,
        password,
      });

      if (signInAttempt.status === 'complete') {
        await setActive({ session: signInAttempt.createdSessionId });
        router.replace('/chats');
      } else {
        alert('State incomplete');
      }
    } catch (err) {
      getError(err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <Screen viewClassName="pt-10 px-4 gap-4" loadingOverlay={loading}>
      <View className="gap-3">
        <Text className="text-center text-3xl font-semibold">Sign in</Text>
        <Text className="text-center text-base text-gray-500">
          Enter your email address and password to sign in.
        </Text>
      </View>
      <TextField
        autoCapitalize="none"
        value={emailAddress}
        placeholder="Enter email"
        onChangeText={onChangeEmailAddress}
      />
      <TextField
        value={password}
        placeholder="Enter password"
        secureTextEntry={true}
        onChangeText={onChangePassword}
      />
      <Button onPress={onSignInPress}>Continue</Button>
      <View className="flex-row gap-[3px]">
        <Text>Don&apos;t have an account?</Text>
        <Link href="/sign-up">
          <Text className="text-blue-600">Sign up</Text>
        </Link>
      </View>
    </Screen>
  );
};

export default SignInScreen;

In this code, we:

Render two TextField components for the user’s email address and password.
Use the useUserForm hook to manage the form field states.
Run the onSignInPress function when the user clicks “Continue”. This function utilizes the useSignIn hook to:
- Attempt a sign-in using the signIn.create() method.
- If the sign-in process was successful, use the setActive() function to set the created session as active and then redirect the user.

Now that we have Clerk and our auth screens set up, let’s move on to setting up Stream Chat.

Setting Up Stream Chat

What is Stream?

Stream is a platform that provides APIs and SDKs to help build real-time messaging, video calling, and activity feeds. We'll use Stream's React Native SDK for Video and React Native Chat SDK to implement video calling and chat messaging features in our Signal clone.

Creating your Stream Account

The first step to using Stream is to create a Stream account:

Sign Up: Go to Stream’s sign-up page and create a new account using your email or a social login.
Complete Your Profile:

* Once you sign up, you'll be prompted to provide additional information, such as your role and industry.

* Select the **"Chat Messaging"** and **"Video and Audio"** options, as our app needs these features.

    ![Stream sign up options](https://cdn.hashnode.com/res/hashnode/image/upload/v1726664432078/966254af-e0b3-4a54-b395-52667e6374b7.png?align=%22left%22 align="left")

* Click **"Complete Signup"**.

After completing the steps above, you will be redirected to your Stream dashboard.

Creating a New Stream Project

Next, follow the steps below to create a new app for your project:

Click "Create App" in the top right corner of your Stream dashboard.
Configure Your App:

* **App Name**: Enter a name like "**signal-clone**" or any other name available.

* **Region**: Select the closest region to you to ensure you get the best performance.

* **Environment**: Set it to "**Development**".

* Click "**Create App**" to complete the process.

Installing Stream Chat

To begin using Stream Chat in your Expo project, follow these steps:

Run the following command to install the necessary packages for Stream Chat:

npx expo install stream-chat stream-chat-expo @react-native-community/netinfo expo-image-manipulator react-native-gesture-handler react-native-reanimated react-native-svg expo-video expo-av expo-sharing expo-haptics expo-clipboard expo-document-picker expo-image-picker expo-media-library @op-engineering/op-sqlite

Add your Stream API keys to your .env.local file:
```
EXPO_PUBLIC_STREAM_API_KEY=your_stream_api_key
STREAM_API_SECRET=your_stream_api_secret
```
Replace your_stream_api_key and your_stream_api_secret with the keys from the “App Access Keys” section in your Stream dashboard.

Configure the app permissions in your project’s app.json file:

{
  "expo": {
    ...
    "plugins": [
      ...
      [
        "expo-av",
        {
          "microphonePermission": "$(PRODUCT_NAME) would like to use your microphone for voice recording."
        }
      ],
      [
        "expo-video",
        {
          "supportsBackgroundPlayback": true,
          "supportsPictureInPicture": true
        }
      ],
      [
        "expo-image-picker",
        {
          "cameraPermission": "$(PRODUCT_NAME) would like to use your camera to share image in a message.",
          "photosPermission": "$(PRODUCT_NAME) would like to use your device gallery to attach image in a message."
        }
      ],
      [
        "expo-media-library",
        {
          "photosPermission": "$(PRODUCT_NAME) would like access to your photo gallery to share image in a message.",
          "savePhotosPermission": "$(PRODUCT_NAME) would like to save photos to your photo gallery after downloading from a message."
        }
      ]
    ],
    ...
  }
}

This code adds the necessary permissions to the Info.plist on iOS devices.

Add the react-native-reanimated plugin to your babel.config.js file in your application folder:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ['babel-preset-expo', { jsxImportSource: 'nativewind' }],
      'nativewind/babel',
    ],
    plugins: ['react-native-reanimated/plugin'],
  };
};

With Stream Chat installed, let’s create the home layout for our Signal clone.

Building the Home Layout and Initializing Stream

The home layout will contain all screens a signed-in user can view. These screens will also need access to Stream, so we’ll initialize the Stream client within the layout file.

We need to set up a few things before we start building the layout.

First, let’s add a new (home) stack to the root layout. Open your app/_layout.tsx file and update it like so:

...

const RootLayout = () => {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <ClerkProvider tokenCache={tokenCache} publishableKey={PUBLISHABLE_KEY}>
        <Stack>
          ...
          <Stack.Screen name="(home)" options={{ headerShown: false }} />
        </Stack>
        <StatusBar style="auto" />
      </ClerkProvider>
    </GestureHandlerRootView>
  );
};

export default RootLayout;

Next, let’s work on a few components. While the Stream client is connecting, we'll need to show the user a loading screen.

Create a Spinner.tsx file in the components directory with the following snippet:

import { ActivityIndicator } from 'react-native';

interface SpinnerProps {
  color?: string;
}

const Spinner = ({ color = '#2c6bed' }: SpinnerProps) => {
  return <ActivityIndicator color={color} />;
};

export default Spinner;

Next, create a ScreenLoading.tsx file in the same folder with the following code:

import Screen from './Screen';
import Spinner from './Spinner';

const ScreenLoading = () => {
  return (
    <Screen className="bg-white" viewClassName="items-center justify-center">
      <Spinner />
    </Screen>
  );
};

export default ScreenLoading;

With our components ready, we can begin building our layout.

Create a (home) folder in the app directory, and then add a _layout.tsx file with the following code:

import { useUser } from '@clerk/clerk-expo';
import { Stack, useRouter } from 'expo-router';
import { useEffect, useState } from 'react';
import { StreamChat } from 'stream-chat';
import { Chat, OverlayProvider } from 'stream-chat-expo';

import ScreenLoading from '@/components/ScreenLoading';

const tokenProvider = async (userId: string) => {
  const response = await fetch('/token', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ userId }),
  });
  const data = await response.json();
  return data.token;
};

const API_KEY = process.env.EXPO_PUBLIC_STREAM_API_KEY as string;

const HomeLayout = () => {
  const router = useRouter();
  const { user, isSignedIn } = useUser();
  const [loading, setLoading] = useState(true);
  const [chatClient, setChatClient] = useState<StreamChat>();

  useEffect(() => {
    if (!isSignedIn) {
      router.replace('/sign-in');
    }

    const customProvider = async () => {
      const token = await tokenProvider(user!.id);
      return token;
    };

    const setUpStream = async () => {
      try {
        const chatClient = StreamChat.getInstance(API_KEY);
        const clerkUser = user!;
        const chatUser = {
          id: clerkUser.id,
          name: clerkUser.fullName!,
          image: clerkUser.hasImage ? clerkUser.imageUrl : undefined,
          username: clerkUser.username!,
        };

        if (!chatClient.user) {
          await chatClient.connectUser(chatUser, customProvider);
        }

        setChatClient(chatClient);
      } catch (error) {
        console.error('Error setting up Stream:', error);
      } finally {
        setLoading(false);
      }
    };

    if (user) setUpStream();

    return () => {
      if (!isSignedIn) {
        chatClient?.disconnectUser();
      }
    };
  }, [user, chatClient, isSignedIn, router]);

  if (loading) return <ScreenLoading />;

  return (
    <OverlayProvider>
      <Chat client={chatClient!}>
        <Stack>
          <Stack.Screen
            name="(tabs)"
            options={{
              headerShown: false,
            }}
          />
        </Stack>
      </Chat>
    </OverlayProvider>
  );
};

export default HomeLayout;

There’s a lot going on here, so let’s break it down:

We create a tokenProvider function that fetches a user token from a /token endpoint. This token is required to authenticate and log in the user to Stream.
We use the isSignedIn state from Clerk’s useUser hook to check if a user is signed in. If not, we redirect them to the sign-in screen.
We define a setupStream function that creates a Stream client instance, connects the user to Stream, and then stores the client instance in the chatClient state.
We ensure the user is disconnected from the client when the component is unmounted.
While the client is connecting, we render the ScreenLoading component.
Once connected, we wrap our app in Stream’s <OverlayProvider> and <Chat> components:
- The OverlayProvider allows users to interact with modals, message actions, and other UI elements provided by Stream.
- The Chat component takes in the chatClient, which provides the Stream context to all other components.
Finally, we return a Stack navigator with a single (tabs) screen, which we’ll work on later.

Next, let’s create the route for the /token endpoint.

First, open your app.json file and update it with the following:

{
  "expo": {
    ...
    "web": {
      ...
      "output": "server",
      ...
    },
    ...
  }
}

This setting tells Expo to output a server bundle, which is required for API routes to work.

In Expo, API Routes can be defined by creating files in the app directory with the +api.ts extension.

For our /token route, create a token+api.ts file in the same directory with the following code:

import { StreamChat } from 'stream-chat';

const API_KEY = process.env.EXPO_PUBLIC_STREAM_API_KEY!;
const SECRET = process.env.STREAM_API_SECRET!;

export async function POST(request: Request) {
  const client = StreamChat.getInstance(API_KEY, SECRET);

  const body = await request.json();

  const userId = body?.userId;

  if (!userId) {
    return Response.error();
  }

  const token = client.createToken(userId);

  const response = {
    userId: userId,
    token: token,
  };

  return Response.json(response);
}

Here we generate a user token based on the provided userId and return it in a response.

💡
This web server setup is meant for development only. Stream’s React Native Video & Audio SDK does not currently support Expo’s web platform, so using this code in a production or release build will cause it to crash. For production environments, create your own backend server with an endpoint that generates a user token, and direct your fetch requests to that endpoint instead.

With our home layout set up, let’s build the tab screens.

Building the Tab Screens

The Signal app features three main tabs:

Chats: where conversations happen
Calls: for viewing recent calls
Stories: for short status updates

We’ll replicate this tab layout in our Signal clone. However, this tutorial will only cover the Chats screen in detail to keep things focused, while the Calls and Stories tabs will have placeholder UIs.

Building the Tabs layout

To get started, create a (tabs) folder in your (home) directory. Inside the folder, create a _layout.tsx file and add the following code:

import { Ionicons } from '@expo/vector-icons';
import FontAwesome from '@expo/vector-icons/FontAwesome';
import MaterialIcons from '@expo/vector-icons/MaterialIcons';
import { Tabs } from 'expo-router';

import { HapticTab } from '@/components/HapticTab';

const TabsLayout = () => {
  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: 'black',
        tabBarButton: HapticTab,
        tabBarStyle: {
          backgroundColor: 'white',
          borderTopColor: 'white',
        },
        headerTransparent: true,
        headerTitleAlign: 'center',
      }}
    >
      <Tabs.Screen
        name="chats"
        options={{
          title: 'Chats',
          tabBarIcon: ({ color }) => (
            <Ionicons name="chatbubble-sharp" size={24} color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="calls"
        options={{
          title: 'Calls',
          tabBarIcon: ({ color }) => (
            <FontAwesome name="phone" size={28} color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="stories"
        options={{
          title: 'Stories',
          tabBarIcon: ({ color }) => (
            <MaterialIcons name="web-stories" size={28} color={color} />
          ),
        }}
      />
    </Tabs>
  );
};

export default TabsLayout;

This sets up our tab navigation and assigns icons to each tab.

Creating the Chats Screen

To understand how we’ll be building the chats screen, we first need to explain how channels work in Stream. Channels in Stream are objects that contain:

Messages exchanged between users.
A list of people watching the channel.
An optional list of members.

We’ll use these channels to represent group chats and DMs in our Signal clone.

Let’s start by creating the modules we’ll need for our screen.

Create an Avatar.tsx file in the components directory and add the following code:

import { Ionicons } from '@expo/vector-icons';
import { Text, TextStyle, View } from 'react-native';
import AppImage from './AppImage';

interface AvatarProps {
  name: string;
  imageUrl?: string;
  size?: number;
  fontSize?: TextStyle['fontSize'];
  fontWeight?: TextStyle['fontWeight'];
  placeholderType?: 'text' | 'icon';
}

const Avatar = ({
  imageUrl,
  size = 40,
  name,
  fontSize = 20,
  fontWeight = '500',
  placeholderType = 'text',
}: AvatarProps) => {
  if (imageUrl)
    return (
      <View
        className="relative flex shrink-0 overflow-hidden rounded-full"
        style={{ width: size, height: size }}
      >
        <AppImage
          source={{ uri: imageUrl }}
          className="w-full h-full"
          alt="name"
          contentFit="cover"
        />
      </View>
    );

  return (
    <View
      style={{
        width: size,
        height: size,
        backgroundColor: '#d8e8f0',
      }}
      className="shrink-0 rounded-full aspect-square flex flex-row items-center justify-center overflow-hidden"
    >
      {placeholderType === 'text' && (
        <Text
          style={{
            fontSize,
            fontWeight,
          }}
          className="leading-[2] text-[#086da0] uppercase"
        >
          {name ? name[0] : ''}
        </Text>
      )}
      {placeholderType === 'icon' && (
        <Ionicons name="people-outline" size={fontSize} color="#086da0" />
      )}
    </View>
  );
};

export default Avatar;

This component displays a user’s avatar. If the user has an image, it renders it. If not, it shows either the first letter of their name or an icon.

Next, create an AppMenu.tsx file in the components folder and add the following snippet:

import { useClerk, useUser } from '@clerk/clerk-expo';
import { Feather } from '@expo/vector-icons';
import { useRouter } from 'expo-router';
import { useRef, useState } from 'react';
import { Modal, Pressable, StyleSheet, Text, View } from 'react-native';

import { getError } from '../lib/utils';
import Avatar from './Avatar';
import Button from './Button';

const AppMenu = () => {
  const { signOut } = useClerk();
  const router = useRouter();
  const { user } = useUser();
  const [menuVisible, setMenuVisible] = useState(false);
  const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
  const avatarRef = useRef<View>(null);

  const toggleMenu = () => {
    if (menuVisible) {
      setMenuVisible(false);
      return;
    }
    if (avatarRef.current) {
      avatarRef.current.measure((_x, _y, _width, height, pageX, pageY) => {
        setMenuPosition({ top: pageY + height + 8, left: pageX - 8 });
        setMenuVisible(true);
      });
    }
  };

  const goToProfile = () => {
    setMenuVisible(false);
    router.push('/profile');
  };

  const handleSignOut = async () => {
    setMenuVisible(false);
    try {
      await signOut();
      router.replace('/');
    } catch (err) {
      getError(err);
    }
  };

  return (
    <>
      <Button variant="plain" ref={avatarRef} onPress={toggleMenu}>
        <Avatar
          imageUrl={user?.imageUrl}
          size={28}
          fontSize={12}
          name={user?.fullName!}
        />
      </Button>
      <Modal
        transparent
        visible={menuVisible}
        animationType="fade"
        onRequestClose={() => setMenuVisible(false)}
      >
        <Pressable
          style={StyleSheet.absoluteFill}
          onPress={() => setMenuVisible(false)}
        >
          <View
            style={{ top: menuPosition.top, left: menuPosition.left }}
            className="absolute bg-white rounded-lg shadow-md shadow-gray-100 min-w-[250px]"
          >
            <Button
              variant="plain"
              className="flex-row items-center justify-between py-2 px-3 border-b border-gray-200"
              onPress={goToProfile}
            >
              <Text>Profile</Text>
              <Feather name="user" size={20} color="black" />
            </Button>
            <Button
              variant="plain"
              className="flex-row items-center justify-between py-2 px-3"
              onPress={handleSignOut}
            >
              <Text className="text-red-600">Sign Out</Text>
              <Feather name="log-out" size={20} color="red" />
            </Button>
          </View>
        </Pressable>
      </Modal>
    </>
  );
};

export default AppMenu;

Here's what the AppMenu component does:

Displays the user’s avatar using the Avatar component, positioned using a ref to calculate where the menu should appear on the screen.
Toggles a custom dropdown menu (built with Modal) that appears below the avatar.
Inside the menu, there are two options:
- Profile: Navigates the user to the profile screen.
- Sign Out: Logs the user out using Clerk and redirects to the home screen.

Next, navigate to the lib folder and update the utils.ts file with the following code:

import type { Channel } from 'stream-chat';

export const getError = (err: any) => {
  ...
};

export const checkIfDMChannel = (channel: Channel) => {
  return !!channel?.id?.startsWith('!members');
};

Here we define a checkIfDMChannel function to determine if a channel is a direct message (DM) between two users. We do this by checking if the channel ID starts with the substring !members. Channels with this ID pattern are referred to as ‘distinct channels,’ and only one of them can exist between their specified members. This makes them the perfect way to implement DMs in our app.

Next, create a PreviewAvatar.tsx file in the components directory with the following code:

import {
  ChannelAvatarProps,
  useChannelPreviewDisplayAvatar,
} from 'stream-chat-expo';

import { checkIfDMChannel } from '@/lib/utils';
import Avatar from './Avatar';

export interface PreviewAvatarProps extends ChannelAvatarProps {
  size?: number;
  fontSize?: number;
}

const PreviewAvatar = ({
  channel,
  size = 44,
  fontSize = 20,
}: PreviewAvatarProps) => {
  const isDMChannel = checkIfDMChannel(channel);
  const displayAvatar = useChannelPreviewDisplayAvatar(channel);
  const placeholderType = isDMChannel ? 'text' : 'icon';

  return (
    <Avatar
      size={size}
      name={displayAvatar.name!}
      fontSize={fontSize}
      imageUrl={isDMChannel ? displayAvatar.image : undefined}
      placeholderType={placeholderType}
    />
  );
};

export default PreviewAvatar;

The PreviewAvatar component is used to display the appropriate avatar for a channel.

Here’s how it works:

It detects whether the channel is a direct message (DM) using the checkIfDMChannel function we created.
If it's a DM, it displays the other user’s avatar.
If it’s a group or team channel, it defaults to showing an icon instead.
It uses the useChannelPreviewDisplayAvatar hook from stream-chat-expo to get the display name and avatar.
The actual rendering is done by the Avatar component.

With our modules set up, let’s move on to the chats screen.

In the (tabs) folder, create a chats.tsx file and add the following code:

import Feather from '@expo/vector-icons/Feather';
import { Link, useRouter } from 'expo-router';
import { View } from 'react-native';
import { Channel } from 'stream-chat';
import { ChannelList, useChatContext } from 'stream-chat-expo';

import AppMenu from '@/components/AppMenu';
import Button from '@/components/Button';
import PreviewAvatar from '@/components/PreviewAvatar';
import Screen from '@/components/Screen';
import ScreenLoading from '@/components/ScreenLoading';

const ChatsScreen = () => {
  const { client } = useChatContext();
  const router = useRouter();

  const goToChannel = (channel: Channel) => {
    router.navigate({
      pathname: '/chat/[id]',
      params: { id: channel.id! },
    });
  };

  return (
    <Screen className="bg-white" viewClassName="px-4">
      <View className="flex flex-row items-center justify-between w-full h-10">
        <AppMenu />
        <View className="flex flex-row items-center gap-4">
          <Button variant="plain">
            <Feather name="camera" size={20} />
          </Button>
          <Link href="/new-message" asChild>
            <Button variant="plain" className="pl-4 py-1">
              <Feather name="edit" size={18} />
            </Button>
          </Link>
        </View>
      </View>
      <ChannelList
        filters={{
          type: 'messaging',
          members: { $in: [client.userID!] },
        }}
        sort={{ last_message_at: -1 }}
        onSelect={goToChannel}
        LoadingIndicator={ScreenLoading}
        PreviewAvatar={PreviewAvatar}
      />
    </Screen>
  );
};

export default ChatsScreen;

Here we render a top nav that contains the AppMenu and an edit button that links to /new-message where users can start a new chat. We also list all the user’s channels using Stream’s ChannelList component. This component is given the following props:

filters: We set this to only show messaging channels that include the logged-in user.
sort: We use this prop to sort the channels by the latest message.
onSelect: When a channel is tapped, we run the goToChannel function. This function dynamically routes the user to a chat screen for that channel using its ID.
LoadingIndicator: We pass our custom ScreenLoading component to show when the ChannelList is loading.
PreviewAvatar: We pass our custom PreviewAvatar component.

Our app currently doesn’t have any existing channels, so the ChannelList returns an empty state indicator.

Creating the Calls and Stories Screens

Next, let’s create the calls and stories screen with placeholder UIs.

Create a calls.tsx file in the (tabs) folder with the following code:

import { Feather } from '@expo/vector-icons';
import { Text, View } from 'react-native';

import AppMenu from '@/components/AppMenu';
import Button from '@/components/Button';
import Screen from '@/components/Screen';

const CallsScreen = () => {
  return (
    <Screen className="bg-white" viewClassName="px-4 items-start">
      <View className="flex flex-row items-center justify-between w-full h-10">
        <AppMenu />
        <View className="flex flex-row items-center gap-8">
          <Button variant="plain">
            <Feather name="phone" size={20} color="black" />
          </Button>
        </View>
      </View>
      <Button
        variant="plain"
        className="flex flex-row items-center justify-center gap-4 mt-4"
      >
        <Feather name="link" size={20} color="black" />
        <Text className="font-semibold">Create a Call Link</Text>
      </Button>
      <View className="flex-1 w-full flex-col items-center justify-center mt-8">
        <Text className="font-semibold">No recent calls</Text>
        <Text className="text-sm text-gray-600">
          Get started by calling a friend
        </Text>
      </View>
    </Screen>
  );
};

export default CallsScreen;

Next, create a stories.tsx file in the same folder and add the following code:

import { useUser } from '@clerk/clerk-expo';
import { Feather } from '@expo/vector-icons';
import { Text, View } from 'react-native';

import AppMenu from '@/components/AppMenu';
import Avatar from '@/components/Avatar';
import Button from '@/components/Button';
import Screen from '@/components/Screen';

const StoriesScreen = () => {
  const { user } = useUser();

  return (
    <Screen className="bg-white" viewClassName="px-4 pt-1">
      <View className="flex flex-row items-center justify-between w-full h-8">
        <AppMenu />
        <View className="flex flex-row items-center gap-8">
          <Button variant="plain">
            <Feather name="camera" size={20} color="black" />
          </Button>
        </View>
      </View>
      <Button variant="plain" className="flex-row items-center gap-3 mt-4">
        <View className="relative w-10 h-10">
          <Avatar
            imageUrl={user?.imageUrl}
            size={40}
            fontSize={16}
            name={user?.fullName!}
          />
          <View className="absolute -bottom-1 -right-1 w-[22px] h-[22px] rounded-full border-[3px] border-white bg-blue-600 flex items-center justify-center">
            <Feather name="plus" size={14} color="white" />
          </View>
        </View>
        <View>
          <Text className="font-semibold">My Stories</Text>
          <Text className="text-xs text-gray-500">Tap to add</Text>
        </View>
      </Button>
    </Screen>
  );
};

export default StoriesScreen;

And with that, we’ve successfully built our tab screens!

Conclusion

At this point, we’ve successfully set up our core navigation, integrated secure user authentication with Clerk, and prepared Stream’s React Native Chat SDK to handle chat functionality in our app.

In part two, we’ll build upon this foundation by creating a fully interactive chat experience, complete with real-time messaging, audio and video calls, and screens for managing user profiles and initiating conversations.

Stay tuned!

Building a Slack Clone with Next.js and TailwindCSS - Part Three

Oluwabusayo Jacobs — Sun, 16 Feb 2025 12:03:48 +0000

In the previous part, we added real-time messaging, rich text formatting, reactions, and file uploads to our Slack clone using the Stream React Chat SDK.

In this final part of our series, we’ll add video-calling capabilities to our Slack clone using the Stream React Video and Audio SDK. By the end of this part, users will be able to initiate and join video calls, similar to the "Huddle" feature in Slack.

Check out the live demo and the GitHub repository to see the final product.

Let’s get started!

Creating a Call Using the Huddle Button

First, we need a way for users to start and stop video calls easily. Let's create a button for this purpose, which we'll call the HuddleToggleButton.

Go to the components directory, and create a HuddleToggleButton.tsx file with the following code:

import { useCallback, useContext } from 'react';
import {
  Call,
  CallingState,
  OwnCapability,
  useCall,
  useCallStateHooks,
} from '@stream-io/video-react-sdk';
import { useUser } from '@clerk/nextjs';
import clsx from 'clsx';

import { AppContext } from '../app/client/layout';
import CaretDown from './icons/CaretDown';
import Headphones from './icons/Headphones';
import { isEqual } from 'lodash';

interface HuddleToggleButton {
  currentCall: Call | undefined;
}

const HuddleToggleButton = ({ currentCall }: HuddleToggleButton) => {
  const { user } = useUser();
  const { workspace, channel, setChannelCall } = useContext(AppContext);
  const call = useCall();
  const { useCallCallingState, useParticipantCount } = useCallStateHooks();
  const callingState = useCallCallingState();
  const participantCount = useParticipantCount();

  const callActive = callingState === CallingState.JOINED;
  const callAvailable =
    participantCount > 0 && callingState !== CallingState.JOINED;

  const leaveCall = useCallback(async (call: Call) => {
    const canEndCall = call?.permissionsContext.hasPermission(
      OwnCapability.END_CALL
    );
    if (canEndCall) {
      await call?.endCall();
    } else {
      await call?.leave();
    }
  }, []);

  const createCall = useCallback(async () => {
    try {
      if (
        currentCall &&
        currentCall.state.callingState === CallingState.JOINED
      ) {
        await leaveCall(currentCall);
      }

      const currentMembers = workspace?.memberships.map((m) => ({
        user_id: m.userId,
        role: m.role!,
      }));

      const customData = {
        channelId: channel?.id,
        channelName: channel?.name,
        createdBy: user?.fullName,
        createdByUserImage: user?.imageUrl,
      };

      if (call?.permissionsContext.hasPermission(OwnCapability.UPDATE_CALL)) {
        if (!isEqual(call?.state.custom, customData)) {
          await call?.update({
            custom: customData,
          });
        }

        if (!isEqual(call?.state.members, currentMembers)) {
          await call?.updateCallMembers({
            update_members: currentMembers,
          });
        }
      }

      await call?.getOrCreate({
        ring: true,
        data: {
          custom: customData,
          members: currentMembers,
        },
      });

      await call?.join();
      setChannelCall(call!);
    } catch (error) {
      console.error(error);
    }
  }, [
    channel,
    call,
    setChannelCall,
    currentCall,
    leaveCall,
    user,
    workspace?.memberships,
  ]);

  const toggleCall = useCallback(async () => {
    if (callActive) {
      await leaveCall(call!);
    } else {
      await createCall();
    }
  }, [call, callActive, createCall, leaveCall]);

  return (
    <div
      className={clsx(
        'w-[59px] hidden sm:flex items-center ml-2 rounded-lg h-7 border border-[#797c814d] text-[#e8e8e8b3]',
        callActive && 'bg-[#259b69] border-[#259b69]',
        callAvailable && 'bg-[#063225] border-[#00553d]'
      )}
    >
      <button
        onClick={toggleCall}
        className={clsx(
          'px-2 h-[26px] rounded-l-lg',
          callActive && 'hover:bg-[#259b69]',
          callAvailable && 'hover:bg-[#10392d]',
          !callActive && !callAvailable && 'hover:bg-[#25272b]'
        )}
      >
        <Headphones
          color={
            callActive || callAvailable ? 'var(--primary)' : 'var(--icon-gray)'
          }
        />
      </button>
      <div
        className={clsx(
          'h-5 w-[1px] bg-[#797c814d]',
          callActive && 'bg-white',
          callAvailable && 'bg-[#00553d]'
        )}
      />
      <button
        className={clsx(
          'w-5 h-[26px] rounded-r-lg',
          callActive && 'hover:bg-[#259b69]',
          callAvailable && 'hover:bg-[#10392d]',
          !callActive && !callAvailable && 'hover:bg-[#25272b]'
        )}
      >
        <CaretDown
          color={
            callActive || callAvailable ? 'var(--primary)' : 'var(--icon-gray)'
          }
        />
      </button>
    </div>
  );
};

export default HuddleToggleButton;

In the component above, we update the current state of the call, including creating a new call, updating the call details, joining the call, or leaving the call using the following functions:

createCall(): This function creates a new call by setting the required data, including channel details and workspace members. If there's an existing call, it first leaves that call.
toggleCall(): This function toggles the state between joining and leaving the call, depending on whether the user is already in an active call.

We also use the useCallCallingState and useParticipantCount hooks to keep track of the current call state. The button updates its appearance and behavior based on whether a call is ongoing, available, or inactive.

Next, let's integrate the HuddleToggleButton into the channel page.

Navigate to /client/[workspaceId]/[channelId]/page.tsx and update it as follows:

...
import HuddleToggleButton from '@/components/HuddleToggleButton';
...

const Channel = ({ params }: ChannelProps) => {
  ...
  return (
    <div
      ...
    >
      {/* Toolbar */}
      <div className="pl-4 pr-3 h-[49px] flex items-center flex-shrink-0 justify-between">
        ...
        <div className="flex flex-none ml-auto items-center">
          <button
            className={...}
          >
            ...
          </button>
          {channelCall && (
            <StreamCall call={channelCall}>
              <HuddleToggleButton currentCall={currentCall} />
            </StreamCall>
          )}
          {!channelCall && (
            <div className="w-[59px] flex items-center ml-2 rounded-lg h-7 border border-[#797c814d] text-[#e8e8e8b3]">
              <button className="px-2 h-[26px] hover:bg-[#25272b] rounded-l-lg">
                <Headphones color="var(--icon-gray)" />
              </button>
              <div className="h-5 w-[1px] bg-[#797c814d]" />
              <button className="w-5 h-[26px] hover:bg-[#25272b] rounded-r-lg">
                <CaretDown color="var(--icon-gray)" />
              </button>
            </div>
          )}
          <button className="...">
            <MoreVert className="..." />
          </button>
        </div>
      </div>
      {/* Tab Bar */}
      ...
      {/* Chat */}
      ...
    </div>
  );
};

export default Channel;

Here, we integrate the HuddleToggleButton component with the channel toolbar. We also wrap it with the StreamCall component to manage the call state.

Implementing a Custom Hook for Huddles

With the huddle button in place, let's move on to creating a custom hook for our huddle feature. This hook will help manage different aspects of a call, such as toggling the microphone, camera, and screen sharing. It will also track the current state of the call, like whether the user is joining, speaking, or sharing their screen.

Create a new file in the hooks directory called useHuddle.tsx and add the following code:

import {
  CallingState,
  hasScreenShare,
  isPinned,
  OwnCapability,
  useCall,
  useCallStateHooks,
} from '@stream-io/video-react-sdk';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';

const useHuddle = () => {
  const call = useCall();
  const {
    useCallCallingState,
    useCallCustomData,
    useCameraState,
    useMicrophoneState,
    useScreenShareState,
    useParticipants,
  } = useCallStateHooks();
  const callingState = useCallCallingState();
  const customData = useCallCustomData();
  const {
    microphone,
    optimisticIsMute: isMicrophoneMute,
    hasBrowserPermission: hasMicrophonePermission,
  } = useMicrophoneState();
  const {
    camera,
    optimisticIsMute: isCameraMute,
    hasBrowserPermission: hasCameraPermission,
  } = useCameraState();
  const { screenShare } = useScreenShareState();
  const participants = useParticipants();
  const [participantInSpotlight] = participants;

  const [width, setWidth] = useState(0);
  const huddleRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!huddleRef.current) return;
    const resizeObserver = new ResizeObserver((entries) => {
      for (const entry of entries) {
        setWidth(entry.contentRect.width);
      }
    });
    resizeObserver.observe(huddleRef.current);

    return () => {
      resizeObserver.disconnect();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [huddleRef.current]);

  const leaveCall = useCallback(async () => {
    const canEndCall = call?.permissionsContext.hasPermission(
      OwnCapability.END_CALL
    );

    if (canEndCall) {
      await call?.endCall();
    } else {
      await call?.leave();
    }
  }, [call]);

  const isSpeakerLayout = useMemo(() => {
    if (participantInSpotlight) {
      return (
        hasScreenShare(participantInSpotlight) ||
        isPinned(participantInSpotlight)
      );
    }
    return false;
  }, [participantInSpotlight]);

  const toggleMicrophone = async () => {
    try {
      await microphone.toggle();
    } catch (error) {
      console.error(error);
    }
  };

  const toggleCamera = async () => {
    try {
      await camera.toggle();
    } catch (error) {
      console.error(error);
    }
  };

  const toggleScreenShare = async () => {
    try {
      await screenShare.toggle();
    } catch (error) {
      console.error(error);
    }
  };

  const buttonsDisabled = callingState === CallingState.JOINING;

  return {
    call,
    callingState,
    screenShare,
    customData,
    isMicrophoneMute,
    hasMicrophonePermission,
    isCameraMute,
    hasCameraPermission,
    leaveCall,
    toggleMicrophone,
    toggleCamera,
    toggleScreenShare,
    width,
    huddleRef,
    buttonsDisabled,
    isSpeakerLayout,
  };
};

export default useHuddle;

In the code above:

Managing Call States: The useHuddle hook uses several hooks from @stream-io/video-react-sdk to manage different aspects of a call. It tracks the current call state, such as the CallingState, whether the user is muted, if screen sharing is active, and if the user has permission to perform specific actions.
Toggling Microphone, Camera, and Screen Share: The toggleMicrophone, toggleCamera, and toggleScreenShare functions allow users to control their microphone, camera, and screen sharing during calls.
Spotlight Layout: The isSpeakerLayout variable helps determine whether the spotlight layout should be used. This typically happens if one participant shares their screen or is pinned.
Leave or End Call: The leaveCall function allows the user to leave the call. If the user has the required permission, they can also end the call for all participants.

Building and Showing a Call

So far, users can create and join calls, but now we want to add the UI for the calls themselves. In this section, we'll integrate the huddle UI components, allowing users to manage video calls within a workspace, similar to Slack's huddle feature.

Creating the Call Control Button

The first component we need is a call control button. This button will toggle features during a call, like muting the microphone, turning the camera on or off, and more.

Create a new CallControlButton.tsx file in the components directory, and add the following code:

import clsx from 'clsx';
import { IconButtonProps } from './IconButton';

type CallControlButtonProps = Omit<IconButtonProps, 'variant'> & {
  active?: boolean;
};

const CallControlButton = ({
  active = false,
  className,
  icon,
  onClick,
  title,
}: CallControlButtonProps) => {
  return (
    <button
      title={title}
      className={clsx(
        'w-9 h-9 rounded-full inline-flex items-center justify-center',
        active && 'bg-[#e0e0e0] hover:bg-[#e0e0e0] [&_path]:fill-[#101214]',
        !active &&
          'bg-[#f8f8f840] [&_path]:fill-[#e0e0e0cc] hover:bg-[#696a6b] [&_path]:hover:fill-white',
        className
      )}
      onClick={onClick}
    >
      {icon}
    </button>
  );
};

export default CallControlButton;

The CallControlButton component adjusts its styles based on whether it is active or not. The button changes its background color and hover behavior to indicate the active state, helping users visually understand the button's current state.

Customizing the Participant View

The main component we’ll use in our video layouts is Stream’s ParticipantView component. This component displays the participant’s video, plays their audio, shows their information, and provides action buttons for controls like pinning or muting.

However, the ParticipantView default UI doesn't match our design, so we'll override it by creating our own custom UI using the ParticipantViewUI prop.

Create a new file in the components directory called ParticipantViewUI.tsx and add the following code:

import {
  ComponentProps,
  ForwardedRef,
  forwardRef,
  ReactNode,
  useState,
} from 'react';
import {
  DefaultParticipantViewUIProps,
  DefaultScreenShareOverlay,
  hasAudio,
  hasScreenShare,
  MenuToggle,
  ParticipantActionsContextMenu,
  SpeechIndicator,
  ToggleMenuButtonProps,
  useParticipantViewContext,
} from '@stream-io/video-react-sdk';
import clsx from 'clsx';

import Keep from './icons/Keep';
import MicrophoneOff from './icons/MicrophoneOff';
import MoreVert from './icons/MoreVert';

const ParticipantViewUI = () => {
  const { participant, trackType } = useParticipantViewContext();
  const [showMenu, setShowMenu] = useState(false);

  const { isLocalParticipant, isSpeaking } = participant;
  const isScreenSharing = hasScreenShare(participant);
  const hasAudioTrack = hasAudio(participant);

  if (isLocalParticipant && isScreenSharing && trackType === 'screenShareTrack')
    return (
      <>
        <DefaultScreenShareOverlay />
        <ParticipantDetails />
      </>
    );

  return (
    <>
      <ParticipantDetails />
      {/* Speech Ring */}
      <div
        className={clsx(
          isSpeaking &&
            hasAudioTrack &&
            'ring-[3px] ring-[#fff] shadow-[0_0_8px_5px_#fff]',
          `absolute left-0 top-0 w-full h-full rounded-xl`
        )}
      />
      {/* Menu Overlay */}
      <div
        onMouseOver={() => {
          setShowMenu(true);
        }}
        onMouseOut={() => setShowMenu(false)}
        className={`absolute z-[1] left-0 top-0 w-full h-full rounded-xl bg-transparent`}
      />
      {/* Menu */}
      <div
        onMouseOver={() => setShowMenu(true)}
        className={clsx(
          'z-[999] absolute top-2 right-2',
          showMenu ? 'opacity-100' : 'opacity-0'
        )}
      >
        <MenuToggle
          strategy="fixed"
          placement="bottom-start"
          ToggleButton={OtherMenuToggleButton}
        >
          <ParticipantActionsContextMenu />
        </MenuToggle>
      </div>
    </>
  );
};

const ParticipantDetails = ({}: Pick<
  DefaultParticipantViewUIProps,
  'indicatorsVisible'
>) => {
  const { participant } = useParticipantViewContext();
  const { pin, name, userId, isSpeaking, isDominantSpeaker } = participant;
  const hasAudioTrack = hasAudio(participant);
  const pinned = !!pin;

  return (
    <>
      <div className="z-1 absolute left-2 bottom-2 w-full pr-4 flex items-end justify-between cursor-default select-none">
        <span
          className={clsx(
            'flex items-center h-7 gap-1 py-1 px-2 rounded-full text-[13px] leading-[1.38463] font-bold',
            isSpeaking ? 'bg-[#fff] text-[#212428]' : 'bg-[#212428] text-white'
          )}
        >
          {!hasAudioTrack && (
            <span>
              <MicrophoneOff size={20} />
            </span>
          )}
          {hasAudioTrack && isSpeaking && (
            <div className="w-6.5 h-6.5 flex items-center justify-center bg-primary rounded-full">
              <SpeechIndicator />
            </div>
          )}
          <span>{name || userId}</span>
        </span>
        {pinned && (
          <div className="w-8 h-8 flex items-center justify-center bg-[#fff] rounded-lg">
            <Keep />
          </div>
        )}
      </div>
    </>
  );
};

const Button = forwardRef(function Button(
  {
    icon,
    onClick = () => null,
    ...rest
  }: {
    icon: ReactNode;
    onClick?: () => void;
  } & ComponentProps<'button'> & { menuShown?: boolean },
  ref: ForwardedRef<HTMLButtonElement>
) {
  return (
    <button
      onClick={(e) => {
        e.preventDefault();
        onClick?.(e);
      }}
      {...rest}
      ref={ref}
      className="h-8 w-8 rounded-lg flex items-center justify-center bg-[#fff] hover:bg-[#fff] border-[#fff]"
    >
      {icon}
    </button>
  );
});

const OtherMenuToggleButton = forwardRef<
  HTMLButtonElement,
  ToggleMenuButtonProps
>(function ToggleButton(props, ref) {
  return (
    <Button {...props} title="More options" ref={ref} icon={<MoreVert />} />
  );
});

export default ParticipantViewUI;

The ParticipantViewUI is divided into several components:

Participant Details: The ParticipantDetails component shows details for each participant, such as their name and audio status, making it easy to identify who is currently speaking or pinned.
Speech Indicator and Speech Ring: The SpeechIndicator component gives a clear visual cue to users when a participant is speaking. We also included a speech ring effect highlighting the participant's video when speaking.
Screen Sharing: The DefaultScreenShareOverlay is used when a participant is sharing their screen, providing a visual indication to other participants.
Context Menu: The menu allows participants to perform actions such as pinning or muting themselves or another participant.

Building the Huddle UI

With the main call controls and participant view in place, it's time to create the huddle interface. This UI will contain the video feed layout and call controls and ensure the interface responds dynamically to different situations, like toggling between the sidebar and modal views.

Create a new file in the components directory called HuddleUI.tsx and add the following code:

import {
  StreamTheme,
  PaginatedGridLayout,
  SpeakerLayout,
} from '@stream-io/video-react-sdk';
import clsx from 'clsx';

import CallControlButton from './CallControlButton';
import Desktop from './icons/Desktop';
import Emoji from './icons/Emoji';
import IconButton from './IconButton';
import Microphone from './icons/Microphone';
import MicrophoneOff from './icons/MicrophoneOff';
import MoreVert from './icons/MoreVert';
import OpenInWindow from './icons/OpenInWindow';
import ParticipantViewUI from './ParticipantViewUI';
import PopBack from './icons/PopBack';
import Signal from './icons/Signal';
import UserAdd from './icons/UserAdd';
import Video from './icons/Video';
import VideoOff from './icons/VideoOff';
import useHuddle from '../hooks/useHuddle';

interface HuddleUIProps {
  isModalOpen?: boolean;
  setIsModalOpen: (isOpen: boolean) => void;
  isSidebar?: boolean;
}

const HuddleUI = ({
  isSidebar = false,
  isModalOpen = false,
  setIsModalOpen,
}: HuddleUIProps) => {
  const {
    customData,
    isMicrophoneMute,
    isCameraMute,
    hasMicrophonePermission,
    hasCameraPermission,
    leaveCall,
    toggleMicrophone,
    toggleCamera,
    toggleScreenShare,
    width,
    huddleRef,
    buttonsDisabled,
    screenShare,
    isSpeakerLayout,
  } = useHuddle();

  const enableScreenShare = async () => {
    try {
      setIsModalOpen(true);
      await screenShare.enable();
    } catch (error) {
      console.error(error);
    }
  };

  const windowToggle = () => {
    if (isSidebar) {
      setIsModalOpen(true);
    } else {
      setIsModalOpen(false);
    }
  };

  return (
    <StreamTheme className={clsx('huddle', isSidebar && 'huddle--sidebar')}>
      <div
        className={clsx(
          'w-full',
          isSidebar && 'absolute pr-4 bottom-2 left-2',
          !isSidebar && 'block'
        )}
      >
        <div
          ref={huddleRef}
          className={clsx(
            'bg-theme-gradient flex flex-col w-full rounded-xl',
            isSidebar && 'max-w-[340px] max-h-[340px]',
            !isSidebar && 'h-full'
          )}
        >
          <div className="flex flex-col px-1 items-center justify-center">
            <div className="flex my-2 pr-2 w-full items-center justify-start">
              <div className="flex items-center mr-auto">
                <div className="ml-1 mr-1">
                  <Signal />
                </div>
                <button className="w-full flex items-center text-[14.8px] hover:underline">
                  <span className="break-all whitespace-break-spaces line-clamp-1">
                    {isModalOpen && isSidebar
                      ? 'Viewing in another window'
                      : customData?.channelName}
                  </span>
                </button>
              </div>
              <IconButton
                icon={
                  isModalOpen ? (
                    <PopBack />
                  ) : (
                    <OpenInWindow className="fill-icon-gray group-hover:fill-white" />
                  )
                }
                className="w-[30px] h-[30px]"
                onClick={windowToggle}
                disabled={isModalOpen && isSidebar}
              />
            </div>
          </div>
          {((!isModalOpen && isSidebar) || (isModalOpen && !isSidebar)) && (
            <div
              className={clsx(
                'grow shrink-0 mx-1 relative flex items-center justify-center overflow-hidden',
                isSidebar && 'h-[240px]',
                !isSidebar && 'h-[calc(45svw-100px)] max-h-[620px]'
              )}
            >
              <div className="relative z-10 flex items-center justify-center w-full">
                {(!isSpeakerLayout || (isSpeakerLayout && isSidebar)) && (
                  <PaginatedGridLayout
                    groupSize={isSidebar ? 2 : 6}
                    ParticipantViewUI={ParticipantViewUI}
                  />
                )}
                {isSpeakerLayout && !isSidebar && (
                  <SpeakerLayout
                    ParticipantViewUIBar={ParticipantViewUI}
                    ParticipantViewUISpotlight={ParticipantViewUI}
                    participantsBarLimit={3}
                    participantsBarPosition="bottom"
                  />
                )}
              </div>
              <div className="absolute w-full h-full overflow-hidden rounded-lg">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src="https://a.slack-edge.com/27f87ff/img/huddles/gradient_01.png"
                  alt="huddle-background"
                  className="w-full h-full object-cover"
                />
              </div>
            </div>
          )}
          <div
            className={clsx(
              'flex items-center h-[52px] px-2',
              isSidebar ? 'justify-between gap-2' : 'justify-center gap-4'
            )}
          >
            <div
              className={clsx(
                'flex items-center',
                isSidebar ? 'gap-1.5' : 'gap-2'
              )}
            >
              <CallControlButton
                icon={
                  isMicrophoneMute ? (
                    <MicrophoneOff size={20} />
                  ) : (
                    <Microphone size={20} />
                  )
                }
                title={isMicrophoneMute ? 'Unmute mic' : 'Mute mic'}
                active={!isMicrophoneMute}
                onClick={toggleMicrophone}
                disabled={!hasMicrophonePermission || buttonsDisabled}
              />
              {width > 0 && width >= 220 && (
                <CallControlButton
                  icon={
                    isCameraMute ? <VideoOff size={20} /> : <Video size={20} />
                  }
                  title={isCameraMute ? 'Turn on video' : 'Turn off video'}
                  active={!isCameraMute}
                  onClick={toggleCamera}
                  disabled={!hasCameraPermission || buttonsDisabled}
                />
              )}
              {width > 0 && width >= 260 && (
                <CallControlButton
                  icon={<Desktop size={20} />}
                  onClick={isSidebar ? enableScreenShare : toggleScreenShare}
                  title={'Share screen'}
                  disabled={buttonsDisabled}
                />
              )}
              {width > 0 && width >= 300 && (
                <CallControlButton
                  icon={<Emoji size={20} />}
                  title={'Send a reaction'}
                />
              )}
              {width > 0 && width >= 340 && (
                <CallControlButton
                  icon={<UserAdd size={20} />}
                  title={'Invite people'}
                />
              )}
              <CallControlButton
                icon={<MoreVert size={20} />}
                title={'More options'}
              />
            </div>
            <button
              onClick={() => {
                leaveCall();
                setIsModalOpen(false);
              }}
              disabled={buttonsDisabled}
              className="flex items-center justify-center min-w-[64px] h-[36px] px-3 pb-[1px] text-[13px] border border-[#b41541] bg-[#b41541] hover:shadow-[0_1px_4px_#0000004d] hover:bg-blend-lighten hover:bg-[linear-gradient(#d8f5e914,#d8f5e914)] font-bold select-none text-white rounded-lg disabled:bg-gray-400 disabled:text-white disabled:border-gray-400"
            >
              Leave
            </button>
          </div>
        </div>
      </div>
    </StreamTheme>
  );
};

export default HuddleUI;

In the code snippet above:

Layouts: We use the PaginatedGridLayout and SpeakerLayout to arrange participants based on the context (e.g., sidebar vs. full screen).
Control Buttons: We use the CallControlButton component to toggle the microphone, camera, and screen sharing.
Modal Window Handling: We use the isSidebar and isModalOpen props to handle when the huddle is open in another window or embedded in the sidebar.

Huddle Component

Now that we've developed the core user interface for our video calls, it's time to integrate the functionality into a single cohesive component. The huddle component will be responsible for managing the different states of a video call, such as when a user is joining, leaving, or responding to an invitation.

Create a new file in the components directory called Huddle.tsx and add the following code:

import { useContext } from 'react';
import { CallingState, StreamTheme } from '@stream-io/video-react-sdk';

import { AppContext } from '../app/client/layout';
import Avatar from './Avatar';
import Hash from './icons/Hash';
import HuddleUI from './HuddleUI';
import useHuddle from '../hooks/useHuddle';

interface HuddleProps {
  isModalOpen: boolean;
  setIsModalOpen: (isOpen: boolean) => void;
}

const Huddle = ({ isModalOpen, setIsModalOpen }: HuddleProps) => {
  const { call, customData, callingState, buttonsDisabled } = useHuddle();
  const { channel } = useContext(AppContext);

  const joinCall = () => {
    call?.join();
  };

  const declineCall = () => {
    call?.leave({
      reject: true,
    });
  };

  if (!call) return null;

  switch (true) {
    case callingState === CallingState.RINGING &&
      call.isCreatedByMe &&
      call.id === channel.id:
    default:
      return null;
    case callingState === CallingState.JOINED ||
      callingState === CallingState.JOINING:
      return (
        <HuddleUI
          isModalOpen={isModalOpen}
          setIsModalOpen={setIsModalOpen}
          isSidebar
        />
      );
    case callingState === CallingState.RINGING && !call.isCreatedByMe:
      return (
        <StreamTheme>
          <div className="absolute pr-4 bottom-2 left-2 w-full">
            <div className="w-full max-w-[340px] p-3 bg-[#101214] rounded-xl overflow-hidden border border-[#797c814d]">
              <div className="flex items-start text-[15px]">
                <div className="grow shrink-0 mr-2">
                  <Avatar
                    width={20}
                    borderRadius={6}
                    data={{
                      name: customData.createdBy,
                      image: customData.createdByUserImage,
                    }}
                  />
                </div>
                <p className="-mt-0.5">
                  <b>{customData.createdBy}</b> is inviting you to a huddle in
                  <span className="w-[15px] h-[15px] inline-block pt-0.5 mx-1">
                    <Hash size={15} color="var(--primary)" />
                    {'  '}
                  </span>
                  <b>{customData.channelName}</b>
                </p>
              </div>
              <div className="mt-3 flex flex-col items-center gap-1.5">
                <button
                  onClick={joinCall}
                  disabled={buttonsDisabled}
                  className="w-full h-[26px] rounded-lg border border-[#e0e0e0] bg-[#e0e0e0] px-3 text-[13px] text-[#101214] font-bold"
                >
                  Join
                </button>
                <button
                  onClick={declineCall}
                  disabled={buttonsDisabled}
                  className="w-full h-[26px] rounded-lg border border-[#f8f8f840] bg-[#f8f8f840] hover:bg-[#696a6b] hover:border-[#696a6b] px-3 text-[13px] text-[#e0e0e0cc] font-bold"
                >
                  Decline
                </button>
              </div>
            </div>
          </div>
        </StreamTheme>
      );
  }
};

export default Huddle;

In the snippet above:

State Handling: The callingState from the useHuddle hook is used to determine the appropriate UI to display. For example, if the call is ringing and wasn't initiated by the current user (call.isCreatedByMe), an invitation message, and options to join or decline the call are shown.
Joining and Declining a Call: The joinCall and declineCall functions handle the respective actions. The joinCall function invokes the call.join() method, while the declineCall function invokes call.leave() with the option to reject.
Conditional Rendering: Depending on the call state, the component renders different UI sections, including:
- The invitation view, when the call is RINGING but not initiated by the user.
- The call UI when the user has JOINED or is JOINING.

Huddle Modal Component

The huddle modal component will give an expanded view of the video call interface. It provides a more immersive experience for users when compared to the sidebar view.

Create a new file in the components directory called HuddleModal.tsx and add the following code:

import HuddleUI from './HuddleUI';

interface HuddleModalProps {
  isModalOpen: boolean;
  setIsModalOpen: (isModalOpen: boolean) => void;
}

const HuddleModal = ({ isModalOpen, setIsModalOpen }: HuddleModalProps) => {
  if (!isModalOpen) return null;

  return (
    <div className="z-[9999] fixed left-0 top-0 flex h-full min-h-screen w-full items-center justify-center bg-[#0009] px-4 py-5">
      <div className="flex flex-col w-[80svw] max-w-[1280px] h-[45svw] max-h-[720px] rounded-lg bg-[#1a1d21] border border-[#797c8126] shadow-[0_0_0_1px_rgba(29,28,29,.13),0_18px_48px_0_#00000059]">
        <HuddleUI isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
      </div>
    </div>
  );
};

export default HuddleModal;

The component accepts an isModalOpen prop to control when to display the modal. The modal also uses fixed positioning and includes styles that provide a centered, full-screen overlay.

Putting It All Together

With the Huddle and HuddleModal now created, we can add them to our app.

Normally, we could place our Huddle component in the Sidebar. However, the Sidebar is a child component in our layout.tsx file, and layout files persist across routes and maintain the same state.

This feature would be unsuitable for our needs as we want the current call state to be able to reset and effects to re-run each time a user navigates between channels.

So instead, we'll use a template file. Templates in Next.js are similar to layouts in that they wrap a child layout or page. However, unlike layouts, they create a new instance of their children each time the user navigates.

This behavior makes templates perfect for our huddle feature, as it allows us to reset the state and re-synchronize effects seamlessly when the channel or call data changes.

In the [channelId] directory, create a new template.tsx file with the following code:

'use client';
import { useContext, useMemo, useState } from 'react';
import { createPortal } from 'react-dom';
import { StreamCall, useCalls } from '@stream-io/video-react-sdk';

import { AppContext } from '../../layout';
import Huddle from '@/components/Huddle';
import HuddleModal from '@/components/HuddleModal';

export default function Template({ children }: { children: React.ReactNode }) {
  const [currentCall] = useCalls();
  const { channelCall } = useContext(AppContext);
  const [isModalOpen, setIsModalOpen] = useState(false);

  const huddleCall = useMemo(() => {
    switch (true) {
      case !!currentCall && !!channelCall:
        return currentCall.id === channelCall.id ? channelCall : currentCall;
      case !!currentCall:
        return currentCall;
      case !!channelCall:
        return channelCall;
      default:
        return undefined;
    }
  }, [currentCall, channelCall]);

  const sidebar = document.getElementById('sidebar');
  const body = document.querySelector('body');

  return (
    <>
      {children}
      {sidebar &&
        huddleCall &&
        createPortal(
          <StreamCall call={huddleCall}>
            <Huddle isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
          </StreamCall>,
          sidebar
        )}
      {body &&
        huddleCall &&
        createPortal(
          <StreamCall call={huddleCall}>
            <HuddleModal
              isModalOpen={isModalOpen}
              setIsModalOpen={setIsModalOpen}
            />
          </StreamCall>,
          body
        )}
    </>
  );
}

In the code above:

useCalls Hook: This hook allows us to get the active call. We use it along with the channelCall from our app context to determine which call to display.
Getting the Current Call: We use the useMemo hook to decide the currently active call, giving priority to matching calls from both the current call and channel call.
Portal for Rendering: The createPortal function from react-dom is used to render the Huddle and HuddleModal components to specific parts of the DOM—the sidebar and body. This allows us to dynamically position the components and ensure they integrate smoothly with the UI layout.
StreamCall Wrapper: The StreamCall wrapper is used to pass the active call to our Huddle components, allowing them to manage the video and audio streams effectively.

Before wrapping things up, let's add some important styles to our globals.css file to ensure our huddle interface looks just right:

...
@layer components {
  ...
  .huddle .str-video__participant-view,
  .huddle
    .str-video__participant-view.str-video__participant-view--dominant-speaker {
    max-width: 500px;
  }

  .huddle .str-video__video-placeholder .str-video__video-placeholder__avatar {
    width: 100%;
    height: 100%;
    border-radius: 12px;
  }

  .huddle.huddle--sidebar
    .str-video__paginated-grid-layout
    .str-video__paginated-grid-layout__group:has(
      > .str-video__participant-view:first-child:nth-last-child(2)
    ) {
    flex-direction: column;
    height: 220px;
  }

  .huddle
    .str-video__paginated-grid-layout--two-four
    .str-video__participant-view {
    max-width: calc(calc(720px - 6rem) / 2 - 6px);
  }

  .huddle
    .str-video__speech-indicator.str-video__speech-indicator--dominant
    .str-video__speech-indicator__bar,
  .huddle .str-video__speech-indicator .str-video__speech-indicator__bar {
    background-color: #42b659 !important;
    width: 3px !important;
    border-radius: 999px !important;
  }

  .huddle .str-video__menu-container {
    background: #222529;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3),
      0 2px 6px 2px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    width: 250px;
  }

  .huddle .str-video__generic-menu {
    padding: 8px 0;
    gap: 4px;
  }

  .huddle .str-video__generic-menu--item {
    background: transparent;
    border-radius: 0;
    padding: 0;
    height: 28px;
  }

  .huddle .str-video__generic-menu .str-video__generic-menu--item button {
    border-radius: 0;
    background: transparent;
    color: #e8eaed;
    padding: 0 16px;
    height: 100%;
    line-height: 1.25rem;
    font-size: 0.875rem;
    font-weight: 400;
  }

  .huddle .str-video__generic-menu .str-video__generic-menu--item button:hover {
    background: #37383b;
  }

  .huddle .str-video__screen-share-overlay {
    z-index: 10;
  }

  .huddle
    .str-video__screen-share-overlay
    .str-video__screen-share-overlay__title {
    font-size: 18px;
    color: var(--primary);
  }

  @media (max-width: 1280px) {
    .huddle .str-video__participant-view {
      max-width: 400px;
    }

    .huddle
      .str-video__participant-view.str-video__participant-view--dominant-speaker {
      max-width: 350px;
    }

    .huddle
      .str-video__paginated-grid-layout--five-nine
      .str-video__participant-view {
      max-width: calc(calc(520px - 6rem) / 2 - 6px);
    }

    .huddle
      .str-video__paginated-grid-layout--two-four
      .str-video__participant-view {
      max-width: calc(calc(580px - 6rem) / 2 - 6px);
    }
  }

  @media (max-width: 1024px) {
    .huddle .str-video__participant-view {
      max-width: 300px;
    }

    .huddle
      .str-video__participant-view.str-video__participant-view--dominant-speaker {
      max-width: 250px;
    }

    .huddle
      .str-video__paginated-grid-layout--five-nine
      .str-video__participant-view {
      max-width: calc(calc(380px - 6rem) / 2 - 6px);
    }

    .huddle
      .str-video__paginated-grid-layout--two-four
      .str-video__participant-view {
      max-width: calc(calc(450px - 6rem) / 2 - 6px);
    }

    .huddle
      .str-video__speaker-layout
      .str-video__speaker-layout__participants-bar-wrapper
      .str-video__speaker-layout__participants-bar
      .str-video__speaker-layout__participant-tile {
      max-width: 220px;
      min-width: 220px;
      width: 220px;
    }
  }

  @media (max-width: 768px) {
    .huddle
      .str-video__paginated-grid-layout--two-four
      .str-video__participant-view {
      max-width: calc(calc(400px - 6rem) / 2 - 6px);
    }

    .huddle
      .str-video__participant-view.str-video__participant-view--dominant-speaker {
      max-width: 200px;
    }

    .huddle
      .str-video__speaker-layout
      .str-video__speaker-layout__participants-bar-wrapper
      .str-video__speaker-layout__participants-bar
      .str-video__speaker-layout__participant-tile {
      max-width: 180px;
      min-width: 180px;
      width: 180px;
    }
  }
}

With this, our huddles are fully functional, allowing users to collaborate seamlessly during video calls!

Conclusion

With this final step, we've successfully built a Slack clone with video calling features using Stream React Video and Audio SDK.

We've covered a lot in this three-part series, from setting up the foundation of our Slack clone with a database, authentication, and initial pages, to adding real-time messaging and video calling.

I encourage you to explore Stream SDKs further and extend your app even more. You could add features like threads, typing indicators, live call reactions, and many more.

Feel free to check out the live demo and GitHub repository to see everything in action and explore the code.

Building a Slack Clone with Next.js and TailwindCSS - Part Two

Oluwabusayo Jacobs — Sun, 16 Feb 2025 11:58:05 +0000

In part one of this series, we built the basics of our Slack clone by setting up user authentication, workspace creation, and designing a responsive layout for our workspace hub.

In this second part, we'll bring our Slack clone to life by adding real-time messaging with Steam React Chat SDK. We'll add features like rich text, file sharing, images, and emoji reactions.

By the end of this part, users will be able to communicate with each other, making our app a functional chat platform.

Check out the live demo and GitHub repository to see the code and try it out for yourself.

Let’s get started!

Adding More Channels To Your Workspace

Currently, users can only have one channel in a workspace, which is the channel added during the workspace creation process. Before adding the messaging feature to our app, let's enable users to create additional channels within a workspace.

To add more channels, we'll create a pop-up modal that appears when users click an 'Add a channel' button in the sidebar.

Creating the Channel API Route

First, we need an API route to handle channel creation. Create a /channels/create directory inside the existing /api/workspaces/[workspaceId] directory, then add a route.ts file with the following code:

import { NextResponse } from 'next/server';
import { auth, currentUser } from '@clerk/nextjs/server';

import { generateChannelId } from '@/lib/utils';
import prisma from '@/lib/prisma';

export async function POST(
  request: Request,
  { params }: { params: Promise<{ workspaceId: string }> }
) {
  const { userId } = await auth();

  if (!userId) {
    return NextResponse.json(
      { error: 'Authentication required' },
      { status: 401 }
    );
  }

  const workspaceId = (await params).workspaceId;

  if (!workspaceId || Array.isArray(workspaceId)) {
    return NextResponse.json(
      { error: 'Invalid workspace ID' },
      { status: 400 }
    );
  }

  try {
    const user = await currentUser();
    const userId = user!.id;

    const body = await request.json();
    const { name, description } = body;

    if (!name || typeof name !== 'string' || name.trim() === '') {
      return NextResponse.json(
        { error: 'Channel name is required' },
        { status: 400 }
      );
    }

    // Check if the user is a member of the workspace
    const membership = await prisma.membership.findUnique({
      where: {
        userId_workspaceId: {
          userId,
          workspaceId,
        },
      },
    });

    if (!membership) {
      return NextResponse.json(
        { error: 'Access denied: Not a member of the workspace' },
        { status: 403 }
      );
    }

    // Check if the user has permission to create channels
    if (membership.role !== 'admin') {
      return NextResponse.json(
        { error: 'Access denied: Insufficient permissions' },
        { status: 403 }
      );
    }

    // Check if a channel with the same name already exists in the workspace
    const existingChannel = await prisma.channel.findFirst({
      where: {
        name,
        workspaceId,
      },
    });

    if (existingChannel) {
      return NextResponse.json(
        {
          error: 'A channel with this name already exists in the workspace',
        },
        { status: 400 }
      );
    }

    // Create the new channel
    const newChannel = await prisma.channel.create({
      data: {
        id: generateChannelId(),
        name,
        description,
        workspaceId,
      },
    });

    return NextResponse.json(
      {
        message: 'Channel created successfully',
        channel: newChannel,
      },
      { status: 201 }
    );
  } catch (error) {
    console.error('Error creating channel:', error);
    return NextResponse.json(
      { error: 'Internal server error' },
      { status: 500 }
    );
  } finally {
    await prisma.$disconnect();
  }
}

In the code above:

Authentication and Validation: We check if the user is authenticated and if they belong to the workspace.
Permission Check: Only users with an 'admin' role can create new channels.
Duplicate Channel Check: We ensure that no other channel in the workspace has the same name.
Channel Creation: If all checks pass, the channel is created and saved in the database.

Creating the Add Channel Modal

Next, let's create a modal for adding new channels. In the components directory, create a file called AddChannelModal.tsx with the following code:

import { FormEvent, useContext, useMemo, useState } from 'react';
import { useRouter } from 'next/navigation';

import { AppContext } from '../app/client/layout';
import Modal from './Modal';
import Spinner from './Spinner';
import TextField from './TextField';

interface AddChannelModalProps {
  open: boolean;
  onClose: () => void;
}

const AddChannelModal = ({ open, onClose }: AddChannelModalProps) => {
  const router = useRouter();
  const { setChannel, workspace, setWorkspace } = useContext(AppContext);
  const [channelName, setChannelName] = useState('');
  const [channelDescription, setChannelDescription] = useState('');
  const [loading, setLoading] = useState(false);

  const channelNameRegex = useMemo(() => {
    const channelNames = workspace.channels.map((channel) => channel.name);
    return `^(?!${channelNames.join('|')}).+$`;
  }, [workspace.channels]);

  const createChannel = async (e: FormEvent) => {
    const regex = new RegExp(channelNameRegex);
    if (channelName && regex.test(channelName)) {
      e.stopPropagation();
      try {
        setLoading(true);
        const response = await fetch(
          `/api/workspaces/${workspace.id}/channels/create`,
          {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              name: channelName.trim(),
              description: channelDescription.trim(),
            }),
          }
        );

        const result = await response.json();

        if (response.ok) {
          const { channel } = result;
          setWorkspace({
            ...workspace,
            channels: [...workspace.channels, { ...channel }],
          });
          setChannel(channel);
          setLoading(false);
          closeModal();
          router.push(`/client/${workspace.id}/${channel.id}`);
        } else {
          alert(`Error: ${result.error}`);
        }
      } catch (error) {
        console.error('Error creating workspace:', error);
        alert('An unexpected error occurred.');
      } finally {
        setLoading(false);
      }
    }
  };

  const closeModal = () => {
    setChannelName('');
    setChannelDescription('');
    onClose();
  };

  if (!open) return null;

  return (
    <Modal
      open={open}
      onClose={closeModal}
      loading={loading}
      title="Create a channel"
    >
      <form
        onSubmit={createChannel}
        action={() => {}}
        className="flex flex-col gap-6"
      >
        <TextField
          name="channelName"
          label="Channel name"
          placeholder="e.g. plan-budget"
          value={channelName}
          onChange={(e) =>
            setChannelName(e.target.value.toLowerCase().replace(/\s/g, '-'))
          }
          pattern={channelNameRegex}
          title="That name is already taken by another channel in this workspace"
          maxLength={80}
          required
        />
        <TextField
          name="channelDescription"
          label={
            <span>
              Channel description{' '}
              <span className="text-[#9a9b9e] ml-0.5">(optional)</span>
            </span>
          }
          placeholder="Add a description"
          value={channelDescription}
          onChange={(e) => setChannelDescription(e.target.value)}
          multiline={5}
          maxLength={250}
        />
        <div className="w-full flex items-center justify-end gap-3">
          <button
            type="submit"
            onClick={createChannel}
            className="order-2 flex items-center justify-center min-w-[80px] h-[36px] px-3 pb-[1px] text-[15px] border border-[#00553d] bg-[#00553d] hover:shadow-[0_1px_4px_#0000004d] hover:bg-blend-lighten hover:bg-[linear-gradient(#d8f5e914,#d8f5e914)] font-bold select-none text-white rounded-lg"
            disabled={loading}
          >
            {loading ? <Spinner /> : 'Save'}
          </button>
          <button
            onClick={closeModal}
            className="min-w-[80px] h-[36px] px-3 pb-[1px] text-[15px] border border-[#797c8180] font-bold select-none text-white rounded-lg"
            disabled={loading}
          >
            Cancel
          </button>
        </div>
      </form>
    </Modal>
  );
};

export default AddChannelModal;

Let’s break down some of the component's key features:

We use the channelNameRegex regular expression to ensure that each channel name is unique within the workspace by comparing it against existing channel names.
Loading State: We use the loading state to show a loading spinner (<Spinner />) while the channel creation is ongoing.
Navigation to New Channel: After successfully creating a channel, we redirect users to the new channel page. The modal is also closed by resetting the input fields and calling the onClose function.

Adding the 'Add Channel' Button to the Sidebar

Next, let's add the AddChannelModal to the Sidebar.tsx file:

...
import AddChannelModal from './AddChannelModal';
import Plus from './icons/Plus';
...

const Sidebar = ({ layoutWidth }: SidebarProps) => {
  ...
  const [isModalOpen, setIsModalOpen] = useState(false);
  ...

  const openCreateChannelModal = () => {
    setIsModalOpen(true);
  };

  const onModalClose = () => {
    setIsModalOpen(false);
  };

  const isWorkspaceOwner = workspace?.ownerId === user?.id;

  return (
    <div
      id="sidebar"
      ...
    >
      {!loading && (
        <>
          ...
          <div className="w-full flex flex-col">
            ...
            <ChannelList
              ...
            />
            {isWorkspaceOwner && (
              <SidebarButton
                icon={Plus}
                title="Add a channel"
                onClick={openCreateChannelModal}
              />
            )}
          </div>
          {/* Handle */}
          ...
          <AddChannelModal open={isModalOpen} onClose={onModalClose} />
        </>
      )}
    </div>
  );
};

export default Sidebar;

In Sidebar.tsx, we add a useState hook to manage the modal's open state, and an “Add Channel“ button that shows the modal if the current user is the workspace owner. This button is placed below the channel list for easy access.

With this setup, users can now create new channels to help organize conversations within the workspace.

Building the Chat Interface

Now that users can create multiple channels, let's start working on our main chat interface. First, we'll be building the loading state for our chat UI, then the main chat interface, and finally, we'll customize different aspects of the chat, like the message input, date separator, and more.

Creating a Channel Loading Indicator

To let users know the channel chat is loading, we will create a loading indicator that provides a visual cue while fetching data. Stream already provides a default loading UI, but we want a custom one to match our application's design.

Navigate to the components directory and create a new file called ChannelLoading.tsx with the following code:

const ChannelLoading = () => {
  return (
    <div className="flex flex-col pt-14">
      <div className="relative flex animate-pulse py-2 pl-5 pr-10">
        <div className="flex shrink-0 mr-2">
          <div className="w-fit h-fit inline-flex">
            <div className="w-9 h-9 bg-[#797c814d] rounded-lg shrink-0 inline-block"></div>
          </div>
        </div>
        <div className="flex-1 min-w-0 w-[426px]">
          <div className="flex rounded-full items-center w-[200px] h-[14px] bg-[#797c814d] gap-2"></div>
          <div className="w-[98%] h-[80px] mt-1.5 rounded-lg bg-[#797c814d]"></div>
        </div>
      </div>
      <div className="relative flex animate-pulse py-2 pl-5 pr-10">
        <div className="flex shrink-0 mr-2">
          <div className="w-fit h-fit inline-flex">
            <div className="w-9 h-9 bg-[#797c814d] rounded-lg shrink-0 inline-block"></div>
          </div>
        </div>
        <div className="flex-1 min-w-0 w-[426px]">
          <div className="flex rounded-full items-center w-[200px] h-[14px] bg-[#797c814d] gap-2"></div>
          <div className="w-[98%] h-[80px] mt-1.5 rounded-lg bg-[#797c814d]"></div>
        </div>
      </div>
      <div className="relative flex animate-pulse py-2 pl-5 pr-10">
        <div className="flex shrink-0 mr-2">
          <div className="w-fit h-fit inline-flex">
            <div className="w-9 h-9 bg-[#797c814d] rounded-lg shrink-0 inline-block"></div>
          </div>
        </div>
        <div className="flex-1 min-w-0 w-[426px]">
          <div className="flex rounded-full items-center w-[200px] h-[14px] bg-[#797c814d] gap-2"></div>
          <div className="w-[98%] h-[80px] mt-1.5 rounded-lg bg-[#797c814d]"></div>
        </div>
      </div>
      <div className="relative flex py-2 pl-5 pr-10">
        <div className="flex shrink-0 mr-2 animate-pulse">
          <div className="w-fit h-fit inline-flex">
            <div className="w-9 h-9 bg-[#797c814d] rounded-lg shrink-0 inline-block"></div>
          </div>
        </div>
        <div className="flex-1 min-w-0 w-[426px] animate-pulse">
          <div className="flex rounded-full items-center w-[200px] h-[14px] bg-[#797c814d] gap-2"></div>
          <div className="w-[98%] h-[80px] mt-1.5 rounded-lg bg-[#797c814d]"></div>
        </div>
      </div>
      <div className="absolute bottom-0 w-[98%] h-[134px] flex py-2 pl-5 pr-10">
        <div className="w-full h-full bg-[#232529] rounded-lg border border-[#565856]"></div>
      </div>
    </div>
  );
};

export default ChannelLoading;

The component shows a skeleton screen, which gives users a visual hint that content is loading.

Adding the Channel Chat

Next, let's build the main chat interface so users can send messages and see their conversation history.

Go to the components folder, create a new file named ChannelChat.tsx, and add the following code:

import { createPortal } from 'react-dom';
import { Channel as ChannelType } from 'stream-chat';
import {
  Channel,
  DefaultStreamChatGenerics,
  MessageInput,
  MessageList,
  Window,
} from 'stream-chat-react';

import ChannelLoading from './ChannelLoading';

interface ChannelChatProps {
  channel: ChannelType<DefaultStreamChatGenerics>;
}

const ChannelChat = ({ channel }: ChannelChatProps) => {
  const inputContainer = document.getElementById('message-input');

  return (
    <div className="w-full h-full">
      <Channel
        LoadingIndicator={ChannelLoading}
        channel={channel}
      >
        <Window>
          <MessageList />
          {inputContainer &&
            createPortal(
              <MessageInput />,
              inputContainer
            )}
        </Window>
      </Channel>
    </div>
  );
};

export default ChannelChat;

The ChannelChat component accepts the channel data as a prop and uses the Channel component from stream-chat-react to manage chat sessions. Here are its key components:

MessageList: This displays the conversation history within the current channel.
MessageInput: This component allows users to type and send messages. The MessageInput is rendered using React Portals, which helps position the input field in a different part of the DOM to match the layout we want for our Slack clone.
Loading Indicator: The Channel component also accepts our custom ChannelLoading component as a prop to override the default loading UI.

Integrating the Channel Chat Component

Next, we need to integrate the ChannelChat component into our channel page. Go to the /client/[workspaceId]/[channelId]/page.tsx file and update it as follows:

...
import ChannelChat from '@/components/ChannelChat';
import ChannelLoading from '@/components/ChannelLoading';
...

const Channel = ({ params }: ChannelProps) => {
  ...

  return (
    <div
      ...
    >
      {/* Toolbar */}
      ...
      {/* Tab Bar */}
      ...
      {/* Chat */}
      <div className="...">
        {/* Body */}
        <div className="...">
          <div className="...">
            <div
              ...
            >
              <div className="absolute h-full inset-[0_-50px_0_0] overflow-y-scroll overflow-x-hidden z-[2]">
                {/* Messages */}
                {channelLoading && <ChannelLoading />}
                {!channelLoading && <ChannelChat channel={chatChannel!} />}
              </div>
            </div>
          </div>
        </div>
        {/* Footer */}
        ...
      </div>
    </div>
  );
};

export default Channel;

In this update:

We check if the channel is still loading using the channelLoading state. If it is, we display the ChannelLoading component.
Once the channel data is loaded, we display the ChannelChat component, which provides the main chat interface for users to interact with.

Finally, let’s add some styling to customize the look of our chat UI. Navigate to the app directory and update the globals.css file with the following code:

...

@layer components {
  ...
  .client ::selection {
    background: #7d7e81;
  }

  .channel .str-chat {
    background: transparent;
  }

  .channel .str-chat__list {
    background: #1a1d21;
    padding: 15px 0;
  }

  .channel .str-chat__empty-channel {
    background: #1a1d21;
  }

  .channel .str-chat__li,
  .channel .str-chat__message-text {
    font-family: Lato, Arial, sans-serif;
  }

  .channel .str-chat__list .str-chat__message-list-scroll {
    padding: 0;
  }

  .channel .str-chat__list .str-chat__message-list-scroll .str-chat__li {
    padding-inline: 0;
    margin-inline: 0;
  }

  .channel .str-chat__message-text {
    color: var(--primary);
    font-size: 14.8px;
    line-height: 1.46668;
  }

  .channel .str-chat__main-panel-inner.str-chat__message-list-main-panel {
    height: calc(100% - 8px);
  }

  .channel .str-chat__list-notifications {
    display: none;
  }

  .channel
    .str-chat__unread-messages-separator-wrapper
    .str-chat__unread-messages-separator {
    background: #ffffff21;
    color: #ffffff;
    user-select: none;
  }

  .channel .str-chat__unread-messages-notification {
    display: none;
  }
}

And with that, users can now send messages. However, the current UI still looks far from what we want, so in the following sections, we'll add custom components to enhance it.

Adding a Custom Date Separator

To help users follow conversations more easily, we'll add custom date separators that indicate when messages are from different days.

Go to the components folder, create a new file called DateSeparator.tsx, and add the following code:

import React from 'react';
import { DateSeparatorProps } from 'stream-chat-react';

import CaretDown from './icons/CaretDown';
import { getOrdinalSuffix } from '../lib/utils';

const DateSeparator = ({ date }: DateSeparatorProps) => {
  function formatDate(date: Date) {
    const now = new Date();
    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
    const yesterday = new Date(today);
    yesterday.setDate(today.getDate() - 1);

    const isToday = date >= today;
    const isYesterday = date >= yesterday && date < today;

    if (isToday) {
      return 'Today';
    } else if (isYesterday) {
      return 'Yesterday';
    } else {
      const options: Intl.DateTimeFormatOptions = {
        weekday: 'long',
        month: 'long',
        day: 'numeric',
      };
      const day = date.getDate();
      const suffix = getOrdinalSuffix(day);
      return `${date.toLocaleDateString('en-US', options)}${suffix}`;
    }
  }

  return (
    <div className="relative font-lato w-full flex items-center justify-center h-10">
      <div className="select-none bg-[#1a1d21] text-channel-gray font-bold flex pr-2 pl-4 z-20 items-center h-7 rounded-[24px] text-[13px] leading-[27px] border border-[#797c814d]">
        {formatDate(date)}
        <span className="ml-1">
          <CaretDown color="var(--channel-gray)" size={13} />
        </span>
      </div>
      <div className="absolute h-[1px] w-full bg-[#797c814d] z-10" />
    </div>
  );
};

export default DateSeparator;

This component shows a separator to help users see when messages are from different days. Using the formatDate() function, we provide labels like "Today", "Yesterday", or a formatted date with an ordinal suffix.

Next, let’s add the DateSeparator to the ChannelChat component to make conversations more readable:

...
import DateSeperator from './DateSeparator';
...

const ChannelChat = ({ channel }: ChannelChatProps) => {
  ...
  return (
    <div className="w-full h-full">
      <Channel
        ...
        DateSeparator={DateSeperator}
      >
        ...
      </Channel>
    </div>
  );
};

export default ChannelChat;

Creating a Custom Emoji Picker

In this section, we'll create a custom emoji picker for our Slack clone using the emoji-mart library. While Stream already provides an EmojiPicker using the same library, we want to build a more flexible version that better suits our chat components and integrates seamlessly into our clone.

Firstly, we need to install the necessary packages for the emoji picker. These include:

emoji-mart: This library provides the emoji picker component.
@emoji-mart/react: This package is specifically for using the emoji picker in React apps.
@emoji-mart/data: This contains all the data needed for the emojis.

Run the following command in your terminal to install the packages:

npm install emoji-mart @emoji-mart/react @emoji-mart/data

Next, go to your components folder, create a new file called EmojiPicker.tsx, and add the following code:

import { ComponentType, useEffect, useState } from 'react';
import Picker from '@emoji-mart/react';
import emojiData from '@emoji-mart/data';
import { usePopper } from 'react-popper';

interface EmojiPickerProps {
  ButtonIconComponent: ComponentType;
  buttonClassName?: string;
  wrapperClassName?: string;
  onEmojiSelect: (e: { id: string; native: string }) => void;
}

const EmojiPicker = ({
  buttonClassName,
  ButtonIconComponent,
  onEmojiSelect,
  wrapperClassName,
}: EmojiPickerProps) => {
  const [displayPicker, setDisplayPicker] = useState(false);
  const [referenceElement, setReferenceElement] =
    useState<HTMLButtonElement | null>(null);
  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
    null
  );
  const { attributes, styles } = usePopper(referenceElement, popperElement, {
    placement: 'top-end',
  });

  useEffect(() => {
    if (!referenceElement) return;
    const handlePointerDown = (e: PointerEvent) => {
      const target = e.target as Node;
      const rootNode = target.getRootNode() as ShadowRoot;
      if (
        popperElement?.contains(!!rootNode?.host ? rootNode?.host : target) ||
        referenceElement.contains(target)
      ) {
        return;
      }
      setDisplayPicker(false);
    };
    window.addEventListener('pointerdown', handlePointerDown);
    return () => window.removeEventListener('pointerdown', handlePointerDown);
  }, [referenceElement, popperElement]);

  return (
    <div className={wrapperClassName}>
      {displayPicker && (
        <div
          ref={setPopperElement}
          {...attributes.popper}
          style={styles.popper}
          className="z-50"
        >
          <Picker
            data={(emojiData as { default: object }).default}
            onEmojiSelect={onEmojiSelect}
            placement="top-start"
          />
        </div>
      )}
      <button
        ref={setReferenceElement}
        onClick={() => setDisplayPicker((prev) => !prev)}
        aria-expanded="true"
        aria-label="Emoji picker"
        className={buttonClassName}
      >
        <ButtonIconComponent />
      </button>
    </div>
  );
};

export default EmojiPicker;

In the code above:

Dependencies: We use @emoji-mart/react to display the emoji picker and @emoji-mart/data to get all the emoji data. We also use usePopper from react-popper to handle the positioning of our emoji picker.
Props: The component accepts several props, such as ButtonIconComponent for the button that triggers the picker, onEmojiSelect to handle emoji selection, and optional styling classes for customization.
Popper Setup: The usePopper hook positions the emoji picker correctly relative to the button.
State Handling: We use the displayPicker state to show or hide the picker. We also handle clicks outside the picker to close it.

Implementing a Custom Message Input

In this section, we'll implement a custom message input for our Slack clone. This new input will allow users to easily add rich formatting, such as bold or italics, and even upload files and add emojis, creating a more dynamic chatting experience.

To achieve this, we'll use slate, which is a robust framework for building rich text editors. We'll also use is-hotkey to define keyboard shortcuts for formatting text.

First, let's install the necessary libraries. Open your terminal and run the following commands:

npm install slate slate-react slate-history is-hotkey
npm install @types/is-hotkey --save-dev

Next, we'll create our custom input component, which will act as the primary input container for our chat.

Navigate to the components directory, create a new file named InputContainer.tsx, and add the following code:

import {
  ReactNode,
  useCallback,
  useContext,
  useMemo,
  useRef,
  useState,
} from 'react';
import clsx from 'clsx';
import {
  Editable,
  withReact,
  useSlate,
  Slate,
  RenderLeafProps,
  RenderElementProps,
} from 'slate-react';
import {
  Editor,
  Transforms,
  createEditor,
  Descendant as SlateDescendant,
  Element as SlateElement,
  Text,
} from 'slate';
import isHotkey from 'is-hotkey';
import { withHistory } from 'slate-history';
import {
  useChannelActionContext,
  useChannelStateContext,
  useMessageInputContext,
} from 'stream-chat-react';

import { AppContext } from '../app/client/layout';
import Avatar from './Avatar';
import Bold from './icons/Bold';
import BulletedList from './icons/BulletedList';
import Close from './icons/Close';
import Code from './icons/Code';
import CodeBlock from './icons/CodeBlock';
import Emoji from './icons/Emoji';
import EmojiPicker from './EmojiPicker';
import Formatting from './icons/Formatting';
import Italic from './icons/Italic';
import Link from './icons/Link';
import Mentions from './icons/Mentions';
import Microphone from './icons/Microphone';
import NumberedList from './icons/NumberedList';
import Plus from './icons/Plus';
import Quote from './icons/Quote';
import Strikethrough from './icons/Strikethrough';
import SlashBox from './icons/SlashBox';
import Video from './icons/Video';
import Send from './icons/Send';
import CaretDown from './icons/CaretDown';

type Descendant = Omit<SlateDescendant, 'children'> & {
  children: (
    | {
        text: string;
      }
    | {
        text: string;
        bold: boolean;
      }
    | {
        text: string;
        italic: boolean;
      }
    | {
        text: string;
        code: boolean;
      }
    | {
        text: string;
        underline: boolean;
      }
    | {
        text: string;
        strikethrough: boolean;
      }
  )[];
  url?: string;
  type: string;
};

type FileInfo = {
  name: string;
  size: number;
  type: string;
  previewUrl?: string;
};

const HOTKEYS: {
  [key: string]: string;
} = {
  'mod+b': 'bold',
  'mod+i': 'italic',
  'mod+u': 'underline',
  'mod+`': 'code',
};

const LIST_TYPES = ['numbered-list', 'bulleted-list'];

const initialValue: Descendant[] = [
  {
    type: 'paragraph',
    children: [{ text: '' }],
  },
];

const InputContainer = () => {
  const { workspace } = useContext(AppContext);
  const { channel } = useChannelStateContext();
  const { sendMessage } = useChannelActionContext();
  const { uploadNewFiles, attachments, removeAttachments, cooldownRemaining } =
    useMessageInputContext();

  const fileInputRef = useRef<HTMLInputElement | null>(null);
  const [filesInfo, setFilesInfo] = useState<FileInfo[]>([]);

  const renderElement = useCallback(
    (props: ElementProps) => <Element {...props} />,
    []
  );
  const renderLeaf = useCallback(
    (props: RenderLeafProps) => <Leaf {...props} />,
    []
  );
  const editor = useMemo(() => withHistory(withReact(createEditor())), []);
  const channelName = useMemo(() => {
    const currentChannel = workspace.channels.find((c) => c.id === channel.id);
    return currentChannel?.name || '';
  }, [workspace.channels, channel.id]);

  const serializeToMarkdown = (nodes: Descendant[]) => {
    return nodes.map((n) => serializeNode(n)).join('\n');
  };

  const serializeNode = (
    node: Descendant | Descendant['children'],
    parentType: string | null = null,
    indentation: string = ''
  ) => {
    if (Text.isText(node)) {
      let text = node.text;
      const formattedNode = node as Text & {
        bold?: boolean;
        italic?: boolean;
        code?: boolean;
        strikethrough?: boolean;
      };
      if (formattedNode.bold) text = `**${text}**`;
      if (formattedNode.italic) text = `*${text}*`;
      if (formattedNode.strikethrough) text = `~~${text}~~`;
      if (formattedNode.code) text = `\`${text}\``;

      return text;
    }

    const formattedNode = node as Descendant;
    const children: string = formattedNode.children
      .map((n) => serializeNode(n as never, formattedNode.type, indentation))
      .join('');

    switch (formattedNode.type) {
      case 'paragraph':
        return `${children}`;
      case 'block-quote':
        return `> ${children}`;
      case 'bulleted-list':
      case 'numbered-list':
        return `${children}`;
      case 'list-item': {
        const prefix = parentType === 'numbered-list' ? '1. ' : '- ';
        const indentedPrefix = `${indentation}${prefix}`;
        return `${indentedPrefix}${children}\n`;
      }
      case 'code-block':
        return `\`\`\`\n${children}\n\`\`\``;
      default:
        return `${children}`;
    }
  };

  const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.currentTarget.files;
    if (files && files.length > 0) {
      const filesArray = Array.from(files);
      uploadNewFiles(files);
      const newFilesInfo: FileInfo[] = [];
      filesArray.forEach((file) => {
        const fileData: FileInfo = {
          name: file.name,
          size: file.size,
          type: file.type,
        };

        if (file.type.startsWith('image/')) {
          const reader = new FileReader();
          reader.onloadend = () => {
            setFilesInfo((prevFiles) => [
              ...prevFiles,
              { ...fileData, previewUrl: reader.result as string },
            ]);
          };
          reader.readAsDataURL(file);
        } else {
          newFilesInfo.push(fileData);
        }
      });
      setFilesInfo((prevFiles) => [...prevFiles, ...newFilesInfo]);
      e.currentTarget.value = '';
    }
  };

  const handleUploadButtonClick = () => {
    if (fileInputRef.current) {
      fileInputRef.current?.click();
    }
  };

  const handleRemoveFile = (index: number) => {
    setFilesInfo((prevFiles) => {
      const newFiles = prevFiles.filter((_, i) => i !== index);
      return newFiles;
    });

    removeAttachments([attachments[index].localMetadata.id]);

    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
  };

  const handlePaste = (event: React.ClipboardEvent<HTMLDivElement>) => {
    const clipboardItems = event.clipboardData.items;
    for (let i = 0; i < clipboardItems.length; i++) {
      const item = clipboardItems[i];
      if (item.type.indexOf('image') !== -1) {
        const imageFile = item.getAsFile();
        if (imageFile) {
          const fileData: FileInfo = {
            name: imageFile.name,
            size: imageFile.size,
            type: imageFile.type,
          };
          const reader = new FileReader();
          reader.onloadend = () => {
            uploadNewFiles([imageFile]);
            setFilesInfo((prevFiles) => [
              ...prevFiles,
              { ...fileData, previewUrl: reader.result as string },
            ]);
          };
          reader.readAsDataURL(imageFile);
        }
        event.preventDefault();
      }
    }
  };

  const handleSubmit = async () => {
    const text = serializeToMarkdown(editor.children as Descendant[]);
    if (text || attachments.length > 0) {
      sendMessage({
        text,
        attachments,
      });
      setFilesInfo([]);
      removeAttachments(attachments.map((a) => a.localMetadata.id));

      const point = { path: [0, 0], offset: 0 };
      editor.selection = { anchor: point, focus: point };
      editor.history = { redos: [], undos: [] };
      editor.children = initialValue;
    }
  };

  return (
    <Slate editor={editor} initialValue={initialValue}>
      <div className="input-container relative rounded-md border border-[#565856] has-[:focus]:border-[#868686] bg-[#22252a]">
        <div className="[&>.formatting]:has-[:focus]:opacity-100 [&>.formatting]:has-[:focus]:select-text flex flex-col">
          {/* Formatting */}
          <div className="formatting opacity-30 flex p-1 w-full rounded-t-lg cursor-text">
            <div className="flex grow h-[30px]">
              <Button
                type="mark"
                format="bold"
                icon={<Bold color="var(--icon-gray)" />}
              />
              <Button
                type="mark"
                format="italic"
                icon={<Italic color="var(--icon-gray)" />}
              />
              <Button
                type="mark"
                format="strikethrough"
                icon={<Strikethrough color="var(--icon-gray)" />}
              />
              <div className="separator h-5 w-[1px] mx-1 my-0.5 self-center flex-shrink-0 bg-[#e8e8e821]" />
              <Button format="none" icon={<Link color="var(--icon-gray)" />} />
              <div className="separator h-5 w-[1px] mx-1 my-0.5 self-center flex-shrink-0 bg-[#e8e8e821]" />
              <Button
                type="block"
                format="numbered-list"
                icon={<NumberedList color="var(--icon-gray)" />}
              />
              <Button
                type="block"
                format="bulleted-list"
                icon={<BulletedList color="var(--icon-gray)" />}
              />
              <div className="separator h-5 w-[1px] mx-1 my-0.5 self-center flex-shrink-0 bg-[#e8e8e821]" />
              <Button
                type="block"
                format="block-quote"
                icon={<Quote color="var(--icon-gray)" />}
              />
              <div className="hidden sm:block separator h-5 w-[1px] mx-1 my-0.5 self-center flex-shrink-0 bg-[#e8e8e821]" />
              <Button
                type="mark"
                format="code"
                icon={<Code color="var(--icon-gray)" />}
                className="hidden sm:inline-flex"
              />
              <Button
                type="block"
                format="code-block"
                icon={<CodeBlock color="var(--icon-gray)" />}
                className="hidden sm:inline-flex"
              />
            </div>
          </div>
          {/* Input */}
          <div className="flex self-stretch cursor-text">
            <div className="flex grow text-[14.8px] leading-[1.46668] px-3 py-2">
              <div
                style={{
                  scrollbarWidth: 'none',
                }}
                className="flex-1 min-h-[22px] scroll- overflow-y-scroll max-h-[calc(60svh-80px)]"
              >
                <Editable
                  renderElement={renderElement as never}
                  renderLeaf={renderLeaf}
                  placeholder={`Mesage #${channelName}`}
                  className="editable outline-none"
                  onPaste={handlePaste}
                  spellCheck
                  autoFocus
                  onKeyDown={(event) => {
                    if (event.key === 'Enter') {
                      if (event.shiftKey) {
                        return;
                      } else {
                        event.preventDefault();
                        handleSubmit();
                      }
                    }
                    if (isHotkey('mod+a', event)) {
                      event.preventDefault();
                      Transforms.select(editor, []);
                      return;
                    }
                    for (const hotkey in HOTKEYS) {
                      if (isHotkey(hotkey, event as never)) {
                        event.preventDefault();
                        const mark = HOTKEYS[hotkey];
                        toggleMark(editor, mark);
                      }
                    }
                  }}
                />
                {/* File preview section */}
                {filesInfo.length > 0 && (
                  <div className="relative mt-4 flex items-center gap-3 flex-wrap">
                    {filesInfo.map((file, index) => (
                      <div key={index} className="group relative max-w-[234px]">
                        {file.previewUrl ? (
                          <div className="relative w-[62px] h-[62px] grow shrink-0 cursor-pointer">
                            {/* eslint-disable-next-line @next/next/no-img-element */}
                            <img
                              src={file.previewUrl}
                              alt={`File Preview ${index}`}
                              className="w-full h-full object-cover rounded-xl border-[#d6d6d621] border"
                            />
                          </div>
                        ) : (
                          <div className="flex items-center rounded-xl gap-3 p-3 border border-[#d6d6d621] bg-[#1a1d21]">
                            <Avatar
                              width={32}
                              borderRadius={8}
                              data={{ name: file.type }}
                            />
                            <div className="flex flex-col gap-0.5">
                              <p className="text-sm text-[#d1d2d3] break-all whitespace-break-spaces line-clamp-1 mr-2">
                                {file.name}
                              </p>
                              <p className="text-[13px] text-[#ababad] break-all whitespace-break-spaces line-clamp-1">
                                {file.type}
                              </p>
                            </div>
                          </div>
                        )}
                        <div className="group-hover:opacity-100 opacity-0 absolute -top-2.5 -right-2.5 flex items-center justify-center w-[22px] h-[22px] rounded-full bg-black">
                          <button
                            onClick={() => handleRemoveFile(index)}
                            className="w-[18px] h-[18px] flex items-center justify-center rounded-full bg-gray-300"
                          >
                            <Close size={14} color="black" />
                          </button>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            </div>
          </div>
          {/* Composer actions */}
          <div className="flex items-center justify-between pl-1.5 pr-[5px] cursor-text rounded-b-lg h-[40px]">
            <div className="flex item-center">
              <button
                onClick={handleUploadButtonClick}
                className="w-7 h-7 p-0.5 m-0.5 flex items-center justify-center rounded-full hover:bg-[#565856]"
              >
                <Plus size={18} color="var(--icon-gray)" />
                <input
                  type="file"
                  ref={fileInputRef}
                  className="hidden"
                  onChange={handleFileInputChange}
                />
              </button>
              <Button
                format="none"
                className="rounded hover:bg-[#d1d2d30b] [&_path]:hover:fill-channel-gray"
                icon={<Formatting color="var(--icon-gray)" />}
              />
              <EmojiPicker
                buttonClassName="w-7 h-7 p-0.5 m-0.5 inline-flex items-center justify-center rounded [&_path]:fill-icon-gray hover:bg-[#d1d2d30b] [&_path]:hover:fill-channel-gray"
                ButtonIconComponent={Emoji}
                wrapperClassName="relative"
                onEmojiSelect={(e) => {
                  Transforms.insertText(editor, e.native);
                }}
              />
              <Button
                format="mention"
                className="rounded hover:bg-[#d1d2d30b] [&_path]:hover:fill-channel-gray"
                icon={<Mentions color="var(--icon-gray)" />}
              />
              <div className="hidden sm:block separator h-5 w-[1px] mx-1.5 my-0.5 self-center flex-shrink-0 bg-[#e8e8e821]" />
              <Button
                format="none"
                className="hidden sm:inline-flex rounded hover:bg-[#d1d2d30b] [&_path]:hover:fill-channel-gray"
                icon={<Video color="var(--icon-gray)" />}
              />
              <Button
                format="none"
                className="hidden sm:inline-flex rounded hover:bg-[#d1d2d30b] [&_path]:hover:fill-channel-gray"
                icon={<Microphone color="var(--icon-gray)" />}
              />
              <div className="hidden sm:block separator h-5 w-[1px] mx-1.5 my-0.5 self-center flex-shrink-0 bg-[#e8e8e821]" />
              <Button
                format="none"
                className="hidden sm:inline-flex rounded hover:bg-[#d1d2d30b] [&_path]:hover:fill-channel-gray"
                icon={<SlashBox color="var(--icon-gray)" />}
              />
            </div>
            <div className="flex items-center mr-0.5 ml-2 rounded h-7 border border-[#797c814d] text-[#e8e8e8b3] bg-[#007a5a] border-[#007a5a]">
              <button
                onClick={handleSubmit}
                disabled={!!cooldownRemaining}
                className="px-2 h-[28px] rounded-l hover:bg-[#148567]"
              >
                <Send
                  color={
                    !Boolean(cooldownRemaining)
                      ? 'var(--primary)'
                      : 'var(--icon-gray)'
                  }
                  size={16}
                  filled
                />
              </button>
              <div className="cursor-pointer h-5 w-[1px] bg-[#ffffff80]" />
              <button className="w-[22px] flex items-center justify-center h-[26px] rounded-r hover:bg-[#148567]">
                <CaretDown
                  size={16}
                  color={
                    !Boolean(cooldownRemaining)
                      ? 'var(--primary)'
                      : 'var(--icon-gray)'
                  }
                />
              </button>
            </div>
          </div>
        </div>
      </div>
    </Slate>
  );
};

const toggleBlock = (editor: Editor, format: string) => {
  const isActive = isBlockActive(editor, format);
  const isList = LIST_TYPES.includes(format);

  Transforms.unwrapNodes(editor, {
    match: (n) =>
      !Editor.isEditor(n) &&
      SlateElement.isElement(n) &&
      LIST_TYPES.includes((n as Descendant).type),
    split: true,
  });
  const newProperties: Partial<Descendant> = {
    type: isActive ? 'paragraph' : isList ? 'list-item' : format,
  };
  Transforms.setNodes<SlateElement>(editor, newProperties);

  if (!isActive && isList) {
    const block = { type: format, children: [] };
    Transforms.wrapNodes(editor, block);
  }
};

const toggleMark = (editor: Editor, format: string) => {
  const isActive = isMarkActive(editor, format);

  if (isActive) {
    Editor.removeMark(editor, format);
  } else {
    Editor.addMark(editor, format, true);
  }
};

const isBlockActive = (editor: Editor, format: string, blockType = 'type') => {
  const { selection } = editor;
  if (!selection) return false;

  const [match] = Array.from(
    Editor.nodes(editor, {
      at: Editor.unhangRange(editor, selection),
      match: (n) =>
        !Editor.isEditor(n) &&
        SlateElement.isElement(n) &&
        (n as never)[blockType] === format,
    })
  );

  return !!match;
};

const isMarkActive = (editor: Editor, format: string) => {
  const marks = Editor.marks(editor) as null;
  return marks ? marks[format] : false;
};

type ElementProps = RenderElementProps & {
  element: {
    type: string;
    align?: CanvasTextAlign;
  };
};

const Element = (props: ElementProps) => {
  const { attributes, children, element } = props;
  switch (element.type) {
    case 'block-quote':
      return <blockquote {...attributes}>{children}</blockquote>;
    case 'bulleted-list':
      return <ul {...attributes}>{children}</ul>;
    case 'list-item':
      return <li {...attributes}>{children}</li>;
    case 'numbered-list':
      return <ol {...attributes}>{children}</ol>;
    case 'code-block':
      return (
        <div {...attributes} className="code-block">
          {children}
        </div>
      );
    default:
      return <p {...attributes}>{children}</p>;
  }
};

interface LeafProps extends RenderLeafProps {
  leaf: {
    bold?: boolean;
    code?: boolean;
    italic?: boolean;
    underline?: boolean;
    strikethrough?: boolean;
    text: string;
  };
}

const Leaf = ({ attributes, children, leaf }: LeafProps) => {
  if (leaf.bold) {
    children = <strong>{children}</strong>;
  }

  if (leaf.code) {
    children = <code>{children}</code>;
  }

  if (leaf.italic) {
    children = <em>{children}</em>;
  }

  if (leaf.underline) {
    children = <u>{children}</u>;
  }

  if (leaf.strikethrough) {
    children = <s>{children}</s>;
  }

  return <span {...attributes}>{children}</span>;
};

interface ButtonProps {
  active?: boolean;
  className?: string;
  icon: ReactNode;
  format: string;
  type?: 'mark' | 'block';
}

const Button = ({ className, format, icon, type }: ButtonProps) => {
  const editor = useSlate();
  const isActive =
    type === 'block'
      ? isBlockActive(editor, format)
      : isMarkActive(editor, format);

  return (
    <button
      className={clsx(
        'w-7 h-7 p-0.5 m-0.5 inline-flex items-center justify-center rounded',
        isActive ? 'bg-[#414347] hover:bg-[#4b4c51]' : 'bg-transparent',
        className
      )}
      onClick={(e) => {
        e.preventDefault();
        if (type === 'block') {
          toggleBlock(editor, format);
        } else if (type === 'mark') {
          toggleMark(editor, format);
        }
      }}
    >
      {icon}
    </button>
  );
};

export default InputContainer;

There’s a lot going on here, so let’s break it down:

Slate Editor: We use Slate to create a rich text editor that supports multiple formatting options, like bold, italics, underline, and strikethrough.
Serialization Functions: The serializeToMarkdown and serializeNode functions convert the editor's content to markdown format, allowing us to maintain rich formatting in text.
File Handling: Functions like handleFileInputChange, handleUploadButtonClick, and handleRemoveFile help manage file uploads, previews, and removal, making the chat input more versatile.
Formatting Buttons: The buttons for formatting text (bold, italic, etc.) call the toggleMark function to add or remove specific text styles.
Hotkey Support: The is-hotkey library binds hotkeys like Ctrl+B for bold, Ctrl+I for italics, and so on, making the editor more user-friendly.
Send Button: The handleSubmit function is responsible for sending the message by serializing the editor's content and then using Stream's sendMessage function.

Next, let's integrate the InputContainer with our channel chat interface.

Open the ChannelChat.tsx file and update it with the following code:

...
import InputContainer from './InputContainer';
...

const ChannelChat = ({ channel }: ChannelChatProps) => {
  ...
  return (
    <div className="w-full h-full">
      <Channel
        ...
      >
        <Window>
          ...
          {inputContainer &&
            createPortal(
              <MessageInput Input={InputContainer} />,
              inputContainer
            )}
        </Window>
      </Channel>
    </div>
  );
};

export default ChannelChat;

In the code above, we import the InputContainer component and pass it as the input prop for the MessageInput component to override the default UI.

Next, let’s add some styling to support the rich text formatting features, ensuring elements like <code> blocks and other inline styles look polished.

Open your globals.css file, and include the following styles:

...
@layer components {
  ...
  .input-container ul > li:before,
  .input-container ol > li:before,
  .channel .str-chat__message-text ul > li:before,
  .channel .str-chat__message-text ol > li:before {
    color: var(--channel-gray);
    display: inline-block;
    width: 24px;
    margin-left: -24px;
    vertical-align: baseline;
    text-align: center;
    content: '•';
  }

  .input-container ul > li:before,
  .channel .str-chat__message-text ul > li:before {
    height: 15px;
    font-size: 17px;
    line-height: 17px;
  }

  .input-container ol,
  .channel .str-chat__message-text ol {
    counter-reset: list-0;
  }

  .input-container ol > li:before,
  .channel .str-chat__message-text ol > li:before {
    counter-increment: list-0;
    content: counter(list-0, decimal) '. ';
  }

  .input-container ol > li,
  .input-container ul > li,
  .channel .str-chat__message-text ol > li,
  .channel .str-chat__message-text ul > li {
    margin-left: 24px;
  }

  .input-container ol > li > *,
  .input-container ul > li > *,
  .channel .str-chat__message-text ol > li > *,
  .channel .str-chat__message-text ul > li > * {
    margin-left: 3px;
    line-height: 22px;
  }

  .channel code,
  .channel .str-chat__message-text code {
    color: #e8912d;
    background: #2c2e33;
    border: 1px solid #4a4d55;
    font-variant-ligatures: none;
    word-wrap: break-word;
    white-space: pre-wrap;
    word-break: break-word;
    tab-size: 4;
    border-radius: 3px;
    padding: 2px 3px 1px;
    font-size: 12px;
    line-height: 1.50001;
  }

  .channel pre:first-of-type {
    margin-top: 4px;
  }

  .channel .code-block {
    font-family: monospace;
    font-size: 12px;
  }

  .channel pre:first-of-type code,
  .channel .code-block:first-of-type code,
  .channel pre:last-of-type code,
  .channel .code-block:last-of-type code,
  .channel pre:not(:first-of-type):not(:last-of-type) code,
  .channel .code-block:not(:first-of-type):not(:last-of-type) code {
    border: none;
    background: none;
    border-radius: 0px;
    color: #d1d2d3;
    padding: 0px;
  }

  .channel pre:first-of-type,
  .channel .code-block:first-of-type {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top: 1px solid #e8e8e821;
    border-left: 1px solid #e8e8e821;
    border-right: 1px solid #e8e8e821;
    border-bottom: 0px;
    background-color: #232529;
    padding: 8px 8px 0px 8px;
    color: #d1d2d3;
  }

  .channel pre:last-of-type,
  .code-block:last-of-type {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-top: 0px;
    border-left: 1px solid #e8e8e821;
    border-right: 1px solid #e8e8e821;
    border-bottom: 1px solid #e8e8e821;
    background-color: #232529;
    padding: 0px 8px 8px 8px;
    color: #d1d2d3;
  }

  .channel pre:not(:first-of-type):not(:last-of-type),
  .code-block:not(:first-of-type):not(:last-of-type) {
    border-radius: 0;
    background-color: #232529;
    border-left: 1px solid #e8e8e821;
    border-right: 1px solid #e8e8e821;
    padding: 0px 8px;
    color: #d1d2d3;
  }

  .channel pre:first-of-type:only-child,
  .channel .code-block:first-of-type:only-child {
    padding-bottom: 8px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top: 1px solid #e8e8e821;
    border-bottom: 1px solid #e8e8e821;
  }

  .emoji {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
      'Helvetica Neue', Arial, sans-serif;
  }

  blockquote {
    position: relative;
    padding-left: 16px;
    margin: 4px 0px;
  }

  blockquote:before {
    background: rgba(221, 221, 221, 1);
    content: '';
    border-radius: 8px;
    width: 4px;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  blockquote:not(:first-child):before {
    background: rgba(221, 221, 221, 1);
    content: '';
    border-radius: 8px;
    width: 4px;
    display: block;
    position: absolute;
    height: calc(100% + 6px);
    top: -6px;
    bottom: 0;
    left: 0;
  }

  .channel a {
    color: #1d9bd1;
  }
}

While the chat interface is now visually improved with a customized message input, the message UI still needs work to match the look of the rest of the app.

Creating a Custom Message UI

In this section, we'll create a custom message UI to match the look and feel of our Slack clone. This custom message component will display user messages in a clean interface with the ability to send reactions and view attachments.

To get started, navigate to the components directory, create a new file named ChannelMessage.tsx, and add the following code:

import { useMemo } from 'react';
import { useUser } from '@clerk/nextjs';
import {
  MessageText,
  renderText,
  useChannelStateContext,
  useMessageContext,
} from 'stream-chat-react';
import clsx from 'clsx';
import emojiData from '@emoji-mart/data';

import AddReaction from './icons/AddReaction';
import Avatar from './Avatar';
import Bookmark from './icons/Bookmark';
import Download from './icons/Download';
import EmojiPicker from './EmojiPicker';
import MoreVert from './icons/MoreVert';
import Share from './icons/Share';
import Threads from './icons/Threads';

const ChannelMessage = () => {
  const { message } = useMessageContext();
  const { channel } = useChannelStateContext('ChannelMessage');
  const { user } = useUser();

  const reactionCounts = useMemo(() => {
    if (!message.reaction_groups) {
      return [];
    }
    return Object.entries(
      Object.entries(message.reaction_groups!)
        ?.sort(
          (a, b) =>
            new Date(a[1].first_reaction_at!).getTime() -
            new Date(b[1].first_reaction_at!).getTime()
        )
        .reduce((acc, entry) => {
          const [type, event] = entry;
          acc[type] = acc[type] || { count: 0, reacted: false };
          acc[type].count = event.count;
          if (
            message.own_reactions?.some(
              (reaction) =>
                reaction.type === type && reaction.user_id === user!.id
            )
          ) {
            acc[type].reacted = true;
          }
          return acc;
        }, {} as Record<string, { count: number; reacted: boolean }>)
    );
  }, [message.reaction_groups, message.own_reactions, user]);

  const createdAt = new Date(message.created_at!).toLocaleTimeString('en-US', {
    hour: 'numeric',
    minute: '2-digit',
    hour12: true,
  });

  const downloadFile = async (url: string) => {
    const link = document.createElement('a');
    link.href = url;
    link.download = url.split('/').pop()!;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  const handleReaction = async (e: { id: string; native?: string }) => {
    await channel.sendReaction(message.id, { type: e.id });
  };

  const removeReaction = async (reactionType: string) => {
    await channel.deleteReaction(message.id, reactionType);
  };

  const handleReactionClick = async (
    reactionType: string,
    isActive: boolean
  ) => {
    if (isActive) {
      removeReaction(reactionType);
    } else {
      handleReaction({ id: reactionType });
    }
  };

  const getReactionEmoji = (reactionType: string) => {
    const data = emojiData as {
      emojis: {
        [key: string]: { skins: { native: string }[] };
      };
    };
    const emoji = data.emojis[reactionType];
    if (emoji) return emoji.skins[0].native;
    return null;
  };

  return (
    <div className="relative flex py-2 pl-5 pr-10 group/message hover:bg-[#22252a]">
      {/* Image */}
      <div className="flex shrink-0 mr-2">
        <span className="w-fit h-fit inline-flex">
          <button className="w-9 h-9 shrink-0 inline-block">
            <span className="w-full h-full overflow-hidden">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={message.user?.image}
                alt="profile-image"
                className="w-full h-full rounded-lg"
              />
            </span>
          </button>
        </span>
      </div>
      {/* Details */}
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2">
          <span className="cursor-pointer text-[15px] leading-[1.46668] font-[900] text-white hover:underline">
            {message.user?.name}
          </span>
          <span className="pt-1 cursor-pointer text-xs leading-[1.46668] text-[#ABABAD] hover:underline">
            {createdAt}
          </span>
        </div>
        <div className="mb-1">
          <div className="w-full">
            <div className="flex flex-col max-w-[245px] sm:max-w-full">
              <MessageText
                renderText={(text, mentionedUsers) =>
                  renderText(text, mentionedUsers, {
                    customMarkDownRenderers: {
                      br: () => <span className="paragraph_break block h-2" />,
                    },
                  })
                }
              />
              <div
                className={clsx(
                  message.attachments && message.attachments.length > 0
                    ? 'flex'
                    : 'hidden',
                  'mt-3 flex-col gap-2'
                )}
              >
                {message.attachments?.map((attachment) => (
                  <div
                    key={
                      attachment?.id ||
                      attachment.image_url ||
                      attachment.asset_url
                    }
                    className={clsx(
                      'group/attachment relative cursor-pointer flex items-center rounded-xl gap-3 border border-[#d6d6d621] bg-[#1a1d21]',
                      attachment?.image_url && !attachment.asset_url
                        ? 'max-w-[360px] p-0'
                        : 'max-w-[426px] p-3'
                    )}
                  >
                    {attachment.asset_url && (
                      <>
                        <Avatar
                          width={32}
                          borderRadius={8}
                          data={{
                            name: attachment!.title!,
                            image: attachment!.image_url!,
                          }}
                        />
                        <div className="flex flex-col gap-0.5">
                          <p className="text-sm text-[#d1d2d3] break-all whitespace-break-spaces line-clamp-1 mr-2">
                            {attachment.title || `attachment`}
                          </p>
                          <p className="text-[13px] text-[#ababad] break-all whitespace-break-spaces line-clamp-1">
                            {attachment.type}
                          </p>
                        </div>
                      </>
                    )}
                    {attachment.image_url && !attachment.asset_url && (
                      // eslint-disable-next-line @next/next/no-img-element
                      <img
                        src={attachment.image_url}
                        alt="attachment"
                        className="w-full max-h-[358px] aspect-auto rounded-lg"
                      />
                    )}
                    {/* Message Actions */}
                    <div className="z-20 hidden group-hover/attachment:inline-flex absolute top-2 right-2">
                      <div className="flex p-0.5 rounded-md ml-2 bg-[#1a1d21] border border-[#797c814d]">
                        <button
                          onClick={() =>
                            downloadFile(
                              attachment.asset_url! || attachment.image_url!
                            )
                          }
                          className="group/button rounded flex w-8 h-8 items-center justify-center hover:bg-[#d1d2d30b]"
                        >
                          <Download className="fill-[#e8e8e8b3] group-hover/button:fill-channel-gray" />
                        </button>
                        <button className="group/button rounded flex w-8 h-8 items-center justify-center hover:bg-[#d1d2d30b]">
                          <Share className="fill-[#e8e8e8b3] group-hover/button:fill-channel-gray" />
                        </button>
                        <button className="group/button rounded flex w-8 h-8 items-center justify-center hover:bg-[#d1d2d30b]">
                          <MoreVert
                            size={18}
                            className="fill-[#e8e8e8b3] group-hover/button:fill-channel-gray"
                          />
                        </button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
              {reactionCounts.length > 0 && (
                <div className="flex items-center gap-1 flex-wrap mt-2">
                  {reactionCounts.map(([reactionType, data], index) => (
                    <button
                      key={index}
                      onClick={() =>
                        handleReactionClick(reactionType, data.reacted)
                      }
                      className={`px-2 mb-1 h-6 flex items-center gap-1 border text-white text-[11.8px] rounded-full transition-colors ${
                        data.reacted
                          ? 'bg-[#004d76] border-[#004d76]'
                          : 'bg-[#f8f8f80f] border-[#f8f8f80f]'
                      }`}
                    >
                      <span className="emoji text-[14.5px]">
                        {getReactionEmoji(reactionType)}
                      </span>{' '}
                      {data.count}
                    </button>
                  ))}
                  <EmojiPicker
                    ButtonIconComponent={AddReaction}
                    wrapperClassName="group/button relative mb-1 rounded-full bg-[#f8f8f80f] flex w-8 h-6 items-center justify-center hover:bg-[#d1d2d30b]"
                    buttonClassName="fill-[#e8e8e8b3] group-hover/button:fill-channel-gray"
                    onEmojiSelect={handleReaction}
                  />
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
      {/* Message Actions */}
      <div className="z-20 hidden group-hover/message:inline-flex absolute -top-4 right-[38px]">
        <div className="flex p-0.5 rounded-md ml-2 bg-[#1a1d21] border border-[#797c814d]">
          <EmojiPicker
            ButtonIconComponent={AddReaction}
            wrapperClassName="group/button relative rounded flex w-8 h-8 items-center justify-center hover:bg-[#d1d2d30b]"
            buttonClassName="fill-[#e8e8e8b3] group-hover/button:fill-channel-gray"
            onEmojiSelect={handleReaction}
          />
          <button className="group/button rounded flex w-8 h-8 items-center justify-center hover:bg-[#d1d2d30b]">
            <Threads className="fill-[#e8e8e8b3] group-hover/button:fill-channel-gray" />
          </button>
          <button className="group/button rounded flex w-8 h-8 items-center justify-center hover:bg-[#d1d2d30b]">
            <Share className="fill-[#e8e8e8b3] group-hover/button:fill-channel-gray" />
          </button>
          <button className="group/button rounded flex w-8 h-8 items-center justify-center hover:bg-[#d1d2d30b]">
            <Bookmark
              size={18}
              className="fill-[#e8e8e8b3] group-hover/button:fill-channel-gray"
            />
          </button>
          <button className="group/button rounded flex w-8 h-8 items-center justify-center hover:bg-[#d1d2d30b]">
            <MoreVert
              size={18}
              className="fill-[#e8e8e8b3] group-hover/button:fill-channel-gray"
            />
          </button>
        </div>
      </div>
    </div>
  );
};

export default ChannelMessage;

In the ChannelMessage component:

Message Details: We use the useMessageContext hook to get information about the current message displayed, such as the message content and its author.
Reactions: Using useMemo, we calculate the number of reactions and whether the user has reacted to the message or not. Users can add or remove reactions by clicking on the reaction buttons.
Attachments: The message can contain attachments such as images or files. We provide download and preview options for attachments.
Emoji Reactions: We added a button to send reactions using our custom EmojiPicker.

Now, let's integrate our new ChannelMessage component into our ChannelChat. Navigate to components/ChannelChat.tsx and update it to use ChannelMessage:

...
import ChannelMessage from './ChannelMessage';
...

const ChannelChat = ({ channel }: ChannelChatProps) => {
  ...
  return (
    <div className="w-full h-full">
      <Channel
        ...
      >
        <Window>
          <MessageList Message={ChannelMessage} />
          ...
        </Window>
      </Channel>
    </div>
  );
};

export default ChannelChat;

In ChannelChat.tsx, we update the MessageList to use our custom ChannelMessage component. This change allows our newly defined custom message UI to display each message.

And that’s it! We now have a fully customized chat experience similar to Slack.

Conclusion

In this part, we made our Slack clone more interactive by implementing core messaging features using Stream React Chat SDK. We added custom components to further style and enhance the user interface with features like rich text formatting, emojis, and file sharing.

In this series's next and final part, we will integrate a video calling feature using Stream React Video and Audio SDK. This feature will allow users to transition between text and video conversations, making the app more versatile and interactive.

Stay tuned!

Building a Slack Clone with Next.js and TailwindCSS - Part One

Oluwabusayo Jacobs — Tue, 24 Dec 2024 10:44:21 +0000

Collaboration is essential for success, and creating a tool that helps teams work better can be fun and rewarding. With more people working from home, building an app that helps everyone stay connected through messaging, video, and group chats can make a big difference.

In this three-part series, we will build a Slack clone—an app that helps teams stay in touch with instant messaging, video calls, and channels. We’ll build this application using React (Next.js), TailwindCSS, Prisma, and Stream SDKs.

In this first part, we'll set up the basics by setting up the project and building the first user interface, including the channel page.

In part two, we'll add real-time messaging and channels using Stream React Chat SDK. Finally, in part three, we'll add video calls (like Slack Huddles) using Stream React Video and Audio SDK and add the final touches.

By the end of this series, you'll have built a robust collaboration app that mirrors the essential features of Slack.

Here's a glimpse of what the final product will look like:

You can check out the live demo and access the complete source code on GitHub.

Let's get started!

Prerequisites

Before starting the project, make sure you have the following:

Basic Understanding of React: You should be comfortable building components, managing state, and understanding how components work.
Node.js and npm: Ensure Node.js and npm (Node Package Manager) are installed on your computer. This is important for running and building our project.
Familiarity with TypeScript, Next.js, and TailwindCSS Basics: We'll use these tools a lot, so knowing the basics will help you follow along easily.

Project Setup

Let's start by setting up our project. We'll begin by cloning a starter template that contains the initial setup code and folder structure to help us get started quickly:

# Clone the repository
git clone https://github.com/TropicolX/slack-clone.git

# Navigate into the project directory
cd slack-clone

# Check out the starter branch
git checkout starter

# Install the dependencies
npm install

The project structure should look like the following:

This project is organized to keep the code neat and easy to manage as it grows:

Components Directory: This folder has all the reusable parts of the user interface, like icons, buttons, and other base components.
Hooks Directory: The hooks folder has custom React hooks like useClickOutside, which we will use to handle specific user interactions.
Lib Directory: This folder contains utility functions like utils.ts that simplify common tasks across the app.

Setting Up the Database

To build an app similar to Slack, we need to be able to store information about workspaces, channels, members, and invitations in a database.

We'll be using Prisma to help us interact with this database easily.

What is Prisma?

Prisma is an open-source ORM (Object-Relational Mapping) tool that lets us define our database structure and run queries efficiently. With Prisma, you can write database operations more intuitively without needing to handle SQL directly, which makes things simpler and reduces errors.

Installing Prisma

Let’s start by installing Prisma and its dependencies:

npm install prisma --save-dev
npm install @prisma/client sqlite3

The @prisma/client library helps us interact with the database and sqlite3 is the database we will use for this project.

After installing, let’s initialize Prisma with the following command:

npx prisma init

This command sets up the default Prisma structure and creates a new .env file where we will configure our database connection.

Setting Up the Database Schema

Now, let's define our database schema. Open the prisma/schema.prisma file and add the following:

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model Workspace {
  id           String       @id @default(cuid())
  name         String
  image        String?
  ownerId      String 
  channels     Channel[]    
  memberships  Membership[]
  invitations Invitation[]
}

model Channel {
  id           String       @id @default(cuid())
  name         String
  description  String?
  workspaceId  String
  workspace    Workspace    @relation(fields: [workspaceId], references: [id])
}

model Membership {
  id           String       @id @default(cuid())
  userId       String
  email        String
  workspaceId  String
  workspace    Workspace @relation(fields: [workspaceId], references: [id])
  role         String?      @default("member")
  joinedAt     DateTime?    @default(now())
  @@unique([userId, workspaceId])
}

model Invitation {
  id            Int        @id @default(autoincrement())
  email         String
  token         String     @unique
  workspaceId   String
  workspace     Workspace  @relation(fields: [workspaceId], references: [id])
  invitedById   String
  acceptedById  String?
  createdAt     DateTime   @default(now())
  acceptedAt    DateTime?
}

This schema defines the primary relationships in our Slack clone. Here's what each model does:

Workspace: Represents a workspace where people can collaborate. It contains information like the workspace name, image, and the list of channels, memberships, and invitations linked to it.
Channel: Represents a channel within a workspace. Channels are where users can have specific discussions, and they belong to a particular workspace.
Membership: Keeps track of which users are part of which workspace. It includes details like the user ID, email, role (e.g., member), and when they joined the workspace.
Invitation: Manages invitations to join a workspace. It tracks the invitee's email, a unique token for the invitation, who invited them, and whether or not the invitation has been accepted.

Each model has its own details and connections, making it easy to get related data as we build features.

Next, let’s set up our database connection. Navigate to your .env file and add the following:

DATABASE_URL=file:./dev.db

This sets up SQLite as our database for local development. You could switch to another database in production, but SQLite is great for quick prototyping and development.

Running Prisma Migrations

To create the database tables based on our schema, run the following command:

npx prisma migrate dev --name init

This command sets up the tables for the models we defined in the database. It also helps us keep track of changes in our database setup during development.

After running the migration, generate the Prisma client by running the following command:

npx prisma generate

This command creates the Prisma client, which lets us work with the database safely and reliably throughout our code.

Setting Up Prisma Client in Code

To use the Prisma client in our project, create a new prisma.ts file in the lib directory with the following code:

import { PrismaClient } from '@prisma/client';

let prisma: PrismaClient;

if (process.env.NODE_ENV === 'production') {
  prisma = new PrismaClient();
} else {
  // @ts-expect-error global.prisma is used by @prisma/client
  if (!global.prisma) {
    // @ts-expect-error global.prisma is used by @prisma/client
    global.prisma = new PrismaClient();
  }
  // @ts-expect-error global.prisma is used by @prisma/client
  prisma = global.prisma;
}
export default prisma;

This script makes sure we only create one Prisma client instance. We use a global instance during development to avoid problems with too many database connections. This is especially useful because frequent restarts or hot reloading can otherwise lead to connection issues.

User Authentication with Clerk

What is Clerk?

Clerk is a platform that helps manage users by providing tools for authentication and user profiles. It includes ready-made UI components, APIs, and a dashboard for admins, making adding authentication features to your app much more straightforward. Instead of building an entire authentication system yourself, Clerk saves time and effort by offering these features out of the box.

In this project, we’ll use Clerk to handle user authentication.

Setting Up a Clerk Account

First, you'll need to create a free account with Clerk. Go to the Clerk sign-up page and sign up using your email or a social login option.

Creating a Clerk Project

After signing in, you can create a new project in Clerk for your app:

Go to the dashboard and click "Create application".
Name your application “Slack clone”.
Under “Sign in options,” choose Email, Username, and Google.
Click the "Create application" to complete the setup.

After creating the project, you'll see the application overview page, which contains your Publishable Key and Secret Key—keep these handy as you'll need them later.

Next, we’ll make the first and last names required fields during sign-up:

Navigate to your dashboard's "Configure" tab.
Under "User & Authentication", select "Email, Phone, Username".
Find the "Name" option in the "Personal Information" section and toggle it on..
Click the gear icon next to "Name" and set it as required.
Click “Continue” to save your changes.

Installing Clerk in Your Project

Next, let's add Clerk to your Next.js project:

Install the Clerk package by running the command below:
```
npm install @clerk/nextjs
```
Create an .env.local file and add the following environment variables:
```
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
```
Replace your_clerk_publishable_key and your_clerk_secret_key with the keys from your project's overview page.

To use Clerk's authentication throughout your app, you need to wrap your application with ClerkProvider. Update your app/layout.tsx file like this:

import type { Metadata } from 'next';
import { ClerkProvider } from '@clerk/nextjs';

...

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body className="text-white bg-purple antialiased">{children}</body>
      </html>
    </ClerkProvider>
  );
}

Creating Sign-Up and Sign-In Pages

Now, we need to set up sign-up and sign-in pages using Clerk's <SignUp /> and <SignIn /> components. These components come with built-in UI and handle all the authentication logic.

Here's how to add the pages:

Set Authentication URLs: Clerk's <SignUp /> and <SignIn /> components need to know where they're mounted in your app. Add these routes to your .env.local file:
```
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
```

Create the Sign-Up Page: Create a sign-up page at app/sign-up/[[...sign-up]]/page.tsx, and add the following code:

import { SignUp } from '@clerk/nextjs';

export default function Page() {
  return (
    <div className="sm:w-svw sm:h-svh bg-purple w-full h-full flex items-center justify-center">
      <SignUp />
    </div>
  );
}

Create the Sign-In Page: Create a page.tsx file in the app/sign-in/[[...sign-in]] directory and add the code below:

import { SignIn } from '@clerk/nextjs';

export default function Page() {
  return (
    <div className="w-svw h-svh bg-purple flex items-center justify-center">
      <SignIn />
    </div>
  );
}

Add Your Clerk Middleware: Clerk comes with a clerkMiddleware() helper that integrates authentication into our Next.js project. We can use this middleware to protect some routes while keeping others public.

In our case, we want only the sign-up and sign-in routes accessible to everyone while protecting other routes. To do this, create a middleware.ts file in the src directory with the following code:

import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';

const isPublicRoute = createRouteMatcher([
  '/sign-in(.*)',
  '/sign-up(.*)',
]);

export default clerkMiddleware(async (auth, request) => {
  if (!isPublicRoute(request)) {
    await auth.protect();
  }
});

export const config = {
  matcher: [
    // Skip Next.js internals and all static files, unless found in search params
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    // Always run for API routes
    '/(api|trpc)(.*)',
  ],
};

With these steps completed, Clerk should be integrated into your app, and your sign-in and sign-up pages should be fully functional.

Building The Workspace Dashboard

Now that we have set up our database and authentication, it's time to start building the workspace dashboard. This dashboard will be the main area where users can use different parts of the app, view their workspaces, and see invitations to other workspaces.

To get started, we need to create components that will make up the main parts of our user interface.

Creating the Navigation Bar

The navigation bar is integral to websites because it helps users navigate the sites and access different features.

However, in this setup, the navigation links don't lead anywhere. The primary helpful item here is the 'Create a new workspace' button within it.

Create a Navbar.tsx file in the components folder and add the following code:

import { ReactNode } from 'react';
import Button from './Button';

type NavbarProps = {
  action: () => void;
};

const Navbar = ({ action }: NavbarProps) => {
  return (
    <header>
      <nav className="bg-purple h-20">
        <div className="flex justify-between h-full px-[4vw] mx-auto">
          <div className="flex items-center w-[125px] justify-start">
            <div className="flex items-center gap-1.5">
              <div className="w-[26px] h-[26px]">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
                  <path
                    d="M27.255 80.719c0 7.33-5.978 13.317-13.309 13.317C6.616 94.036.63 88.049.63 80.719s5.987-13.317 13.317-13.317h13.309zm6.709 0c0-7.33 5.987-13.317 13.317-13.317s13.317 5.986 13.317 13.317v33.335c0 7.33-5.986 13.317-13.317 13.317-7.33 0-13.317-5.987-13.317-13.317zm0 0"
                    fill="#de1c59"
                  />
                  <path
                    d="M47.281 27.255c-7.33 0-13.317-5.978-13.317-13.309C33.964 6.616 39.951.63 47.281.63s13.317 5.987 13.317 13.317v13.309zm0 6.709c7.33 0 13.317 5.987 13.317 13.317s-5.986 13.317-13.317 13.317H13.946C6.616 60.598.63 54.612.63 47.281c0-7.33 5.987-13.317 13.317-13.317zm0 0"
                    fill="#35c5f0"
                  />
                  <path
                    d="M100.745 47.281c0-7.33 5.978-13.317 13.309-13.317 7.33 0 13.317 5.987 13.317 13.317s-5.987 13.317-13.317 13.317h-13.309zm-6.709 0c0 7.33-5.987 13.317-13.317 13.317s-13.317-5.986-13.317-13.317V13.946C67.402 6.616 73.388.63 80.719.63c7.33 0 13.317 5.987 13.317 13.317zm0 0"
                    fill="#2eb57d"
                  />
                  <path
                    d="M80.719 100.745c7.33 0 13.317 5.978 13.317 13.309 0 7.33-5.987 13.317-13.317 13.317s-13.317-5.987-13.317-13.317v-13.309zm0-6.709c-7.33 0-13.317-5.987-13.317-13.317s5.986-13.317 13.317-13.317h33.335c7.33 0 13.317 5.986 13.317 13.317 0 7.33-5.987 13.317-13.317 13.317zm0 0"
                    fill="#ebb02e"
                  />
                </svg>
              </div>
              <span className="text-[29px] font-outfit font-bold">slack</span>
            </div>
          </div>
          <div className="hidden sm:flex items-center text-sm flex-1">
            <ul className="flex flex-1 leading-[1.555] -tracking-[.0012em]">
              <NavLink dropdown>Features</NavLink>
              <NavLink dropdown>Solutions</NavLink>
              <NavLink>Enterprise</NavLink>
              <NavLink dropdown>Resources</NavLink>
              <NavLink>Pricing</NavLink>
            </ul>
            <button className="hidden lg:flex mt-1 mr-6">
              <svg
                width="20"
                height="20"
                fill="white"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m18.78 17.72c.1467.1467.22.3233.22.53 0 .2133-.0733.39-.22.53-.16.1467-.3367.22-.53.22-.2067 0-.3833-.0733-.53-.22l-4.47-4.47c-.6667.54-1.4067.9567-2.22 1.25-.8067.2933-1.65.44-2.53.44-1.36 0-2.61333-.3367-3.76-1.01s-2.05667-1.5833-2.73-2.73-1.01-2.4-1.01-3.76.33667-2.61333 1.01-3.76 1.58333-2.05667 2.73-2.73 2.4-1.01 3.76-1.01 2.6133.33667 3.76 1.01 2.0567 1.58333 2.73 2.73 1.01 2.4 1.01 3.76c0 .88-.1467 1.7267-.44 2.54-.2933.8067-.71 1.5433-1.25 2.21zm-10.28-3.22c1.08667 0 2.0867-.27 3-.81.92-.54 1.65-1.2667 2.19-2.18.54-.92.81-1.92333.81-3.01s-.27-2.08667-.81-3c-.54-.92-1.27-1.65-2.19-2.19-.9133-.54-1.91333-.81-3-.81s-2.09.27-3.01.81c-.91333.54-1.64 1.27-2.18 2.19-.54.91333-.81 1.91333-.81 3s.27 2.09.81 3.01c.54.9133 1.26667 1.64 2.18 2.18.92.54 1.92333.81 3.01.81z"
                  stroke="#fff"
                  strokeWidth=".5"
                ></path>
              </svg>
            </button>
            <form action={action}>
              <Button
                type="submit"
                variant="secondary"
                className="hidden lg:flex ml-2 py-0 w-[240px] h-[45px]"
              >
                <span>Create a new workspace</span>
              </Button>
            </form>
          </div>
        </div>
      </nav>
    </header>
  );
};

type NavLinkProps = {
  dropdown?: boolean;
  children: ReactNode;
};

const NavLink = ({ dropdown = false, children }: NavLinkProps) => {
  return (
    <li className="p-[.25rem_.88rem]">
      <button className="text-[15.5px] font-semibold flex items-center gap-1">
        <span>{children}</span>
        {dropdown && (
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="8"
            height="5"
            viewBox="0 0 8 5"
            fill="none"
          >
            <path
              d="M7 1L4 4L1 1"
              stroke="white"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </svg>
        )}
      </button>
    </li>
  );
};

export default Navbar;

Here, we render the Navbar component, which includes the logo, placeholder links, and a button to create a new workspace. The Navbar also takes an action prop, which is triggered when the 'Create a new workspace' button is clicked.

This function allows us to define what happens when users want to create a new workspace.

Creating a Workspace List Component

To display all the workspaces a user has, we need a WorkspaceList component. This component will show the workspace details and allow users to launch a workspace or accept an invitation.

Create a new file named /components/WorkspaceList.tsx and add the following code:

import { Workspace } from '@prisma/client';

import Button from './Button';

interface WorkspaceListProps {
  action: (formData: FormData) => void;
  actionText: string;
  buttonVariant?: 'primary' | 'secondary';
  title: string;
  workspaces: (Omit<Workspace, 'ownerId'> & {
    memberCount: number;
    token?: string;
    firstChannelId?: string;
  })[];
}

const placeholderImage =
  'https://a.slack-edge.com/80588/img/avatars-teams/ava_0014-88.png';

const WorkspaceList = ({
  action,
  actionText,
  buttonVariant = 'primary',
  title,
  workspaces,
}: WorkspaceListProps) => {
  return (
    <div className="rounded-[9px] mb-12 border-[#fff3] border-4">
      <div className="flex items-center bg-[#ecdeec] text-black p-4 text-lg rounded-t-[5px] min-h-[calc(50px+2rem)]">
        {title}
      </div>
      <div className="flex flex-col rounded-b-[5px] bg-[#fff] [&>:not(:first-child)]:border [&>:not(:first-child)]:border-t-[#ebeaeb]">
        {workspaces.map((workspace) => (
          <form action={action} key={workspace.id} className="p-4">
            <input
              type="hidden"
              name="channelId"
              value={workspace?.firstChannelId}
            />
            <input type="hidden" name="token" value={workspace?.token} />
            <input type="hidden" name="workspaceId" value={workspace.id} />
            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-0">
              <div className="flex items-center">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={workspace.image || placeholderImage}
                  alt="workspace-image"
                  className="rounded-[5px] mr-4 h-[75px] w-[75px] object-cover"
                />
                <div className="flex flex-col my-auto text-black">
                  <span className="text-lg font-bold mb-2">
                    {workspace.name}
                  </span>
                  <div className="flex h-5">
                    <span className="text-[#696969] text-[14.5px]">
                      {workspace.memberCount} member
                      {workspace.memberCount !== 1 && 's'}
                    </span>
                  </div>
                </div>
              </div>
              <div className="sm:ml-auto w-full sm:w-auto flex sm:block">
                <Button
                  type="submit"
                  variant={buttonVariant}
                  className="grow shrink-0"
                >
                  <span>{actionText}</span>
                </Button>
              </div>
            </div>
          </form>
        ))}
      </div>
    </div>
  );
};

export default WorkspaceList;

The component takes several props:
- action: A function defining what happens when the action button clicks.
- actionText: The text displayed on the button for each workspace.
- buttonVariant: Specifies the style of the button, either 'primary' or 'secondary'.
- title: The title of the workspace list.
- workspaces: An array of workspace objects with additional details.
For each workspace, we show:
- Name: The name of the workspace.
- Image: The workspace image or a placeholder if no image is provided.
- Number of Members: The count of members in the workspace.
Each workspace item is also a form that has hidden input fields. These fields store essential data like channelId, token, and workspaceId. When a user clicks the submit button, these inputs send the needed information to act for that workspace.

Putting It All Together

Now that we have created the essential components for the workspace dashboard, it's time to bring them together and make the main dashboard page. We will use the Navbar and WorkspaceList components to build a user-friendly interface for our workspace app.

Update your app/page.tsx file to bring all the components together and create the dashboard:

import Image from 'next/image';
import { redirect } from 'next/navigation';
import { currentUser } from '@clerk/nextjs/server';
import { SignOutButton } from '@clerk/nextjs';

import Button from '@/components/Button';
import Navbar from '@/components/Navbar';
import prisma from '@/lib/prisma';
import WorkspaceList from '@/components/WorkspaceList';

export default async function Home() {
  const user = await currentUser();
  const userEmail = user?.primaryEmailAddress?.emailAddress;

  const memberships = await prisma.membership.findMany({
    where: {
      userId: user!.id,
    },
    include: {
      workspace: {
        include: {
          _count: {
            select: { memberships: true },
          },
          memberships: {
            take: 5,
          },
          channels: {
            take: 1,
            select: {
              id: true,
            },
          },
        },
      },
    },
  });

  const workspaces = memberships.map((membership) => {
    const { workspace } = membership;
    return {
      id: workspace.id,
      name: workspace.name,
      image: workspace.image,
      memberCount: workspace._count.memberships,
      firstChannelId: workspace.channels[0].id,
    };
  });

  const invitations = await prisma.invitation.findMany({
    where: {
      email: userEmail,
      acceptedAt: null,
    },
    include: {
      workspace: {
        include: {
          _count: {
            select: { memberships: true },
          },
          memberships: {
            take: 5,
          },
        },
      },
    },
  });

  const processedInvitations = invitations.map((invitation) => {
    const { workspace } = invitation;
    return {
      id: workspace.id,
      name: workspace.name,
      image: workspace.image,
      memberCount: workspace._count.memberships,
      token: invitation.token,
    };
  });

  async function acceptInvitation(formData: FormData) {
    'use server';
    const token = String(formData.get('token'));
    const invitation = await prisma.invitation.findUnique({
      where: { token },
    });

    await prisma.membership.create({
      data: {
        userId: user!.id,
        email: userEmail!,
        workspace: {
          connect: { id: invitation!.workspaceId },
        },
        role: 'user',
      },
    });

    await prisma.invitation.update({
      where: { token },
      data: {
        acceptedAt: new Date(),
        acceptedById: user!.id,
      },
    });

    const workspace = await prisma.workspace.findUnique({
      where: { id: invitation!.workspaceId },
      select: {
        id: true,
        channels: {
          take: 1,
          select: {
            id: true,
          },
        },
      },
    });

    redirect(`/client/${workspace!.id}/${workspace!.channels[0].id}`);
  }

  async function launchChat(formData: FormData) {
    'use server';
    const workspaceId = formData.get('workspaceId');
    const channelId = formData.get('channelId');
    redirect(`/client/${workspaceId}/${channelId}`);
  }

  async function goToGetStartedPage() {
    'use server';
    redirect('/get-started');
  }

  return (
    <div className="font-lato min-h-screen text-white">
      <Navbar action={goToGetStartedPage} />
      <section className="mt-9 max-w-[62.875rem] mx-auto px-[4vw]">
        {/* Workspaces */}
        <div className="flex items-center gap-1 mb-6">
          <Image
            src="https://a.slack-edge.com/6c404/marketing/img/homepage/bold-existing-users/waving-hand.gif"
            width={52}
            height={56}
            alt="waving-hand"
            unoptimized
          />
          <h1 className="text-[40px] sm:text-[55.5px] leading-[1.12] font-outfit font-semibold">
            Welcome back
          </h1>
        </div>
        <div className="mb-12">
          {workspaces.length > 0 ? (
            <WorkspaceList
              title={`Workspaces for ${userEmail}`}
              workspaces={workspaces}
              action={launchChat}
              actionText="Launch Slack"
            />
          ) : (
            <p className="text-lg font-bold pt-4">
              You are not a member of any workspaces yet.
            </p>
          )}
        </div>
        {/* Create new workspace */}
        <div className="rounded-[9px] mb-12 border-[#fff3] border-4">
          <div className="flex flex-col sm:grid items-center bg-[#fff] p-4 grid-rows-[1fr] grid-cols-[200px_1fr_auto] rounded-[5px]">
            <Image
              src="https://a.slack-edge.com/613463e/marketing/img/homepage/bold-existing-users/create-new-workspace-module/woman-with-laptop-color-background.png"
              width={200}
              height={121}
              className="rounded-[5px] m-[-1rem_-1rem_-47px]"
              alt="woman-with-laptop"
            />
            <p className="mt-[50px] text-center sm:text-start mb-3 sm:my-0 pr-4 tracking-[.02em] text-[17.8px] text-black">
              <strong>
                {workspaces.length > 0
                  ? 'Want to use Slack with a different team?'
                  : 'Want to get started with Slack?'}
              </strong>
            </p>
            <form action={goToGetStartedPage}>
              <Button type="submit" variant="secondary">
                Create a new workspace
              </Button>
            </form>
          </div>
        </div>
        {/* Invitations */}
        <div className="mb-12">
          {processedInvitations.length > 0 && (
            <WorkspaceList
              title={`Invitations for ${userEmail}`}
              workspaces={processedInvitations}
              action={acceptInvitation}
              actionText="Accept invite"
              buttonVariant="secondary"
            />
          )}
        </div>
        <SignOutButton redirectUrl="/sign-in">
          <div className="flex flex-col sm:flex-row items-center justify-center mb-12">
            <p className="mr-2 text-lg leading-[1.555] tracking-[-.0012em]">
              Not seeing your workspace?
            </p>
            <button className="text-lg leading-[1.555] tracking-[.012em] text-[#36c5f0] ml-2 flex items-center gap-[9px]">
              <span>Try using a different email</span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                className="w-[19px] h-[13px]"
                fill="none"
              >
                <path
                  d="M1 6a.5.5 0 0 0 0 1V6zM12.854.646a.5.5 0 0 0-.708.708l.708-.708zM18 6.5l.354.354a.5.5 0 0 0 0-.708L18 6.5zm-5.854 5.146a.5.5 0 0 0 .708.708l-.708-.708zM1 7h16.5V6H1v1zm16.646-.854l-5.5 5.5.708.708 5.5-5.5-.708-.708zm-5.5-4.792l2.75 2.75.708-.708-2.75-2.75-.708.708zm2.75 2.75l2.75 2.75.708-.708-2.75-2.75-.708.708z"
                  fill="#36c5f0"
                />
              </svg>
            </button>
          </div>
        </SignOutButton>
      </section>
    </div>
  );
}

Here's what each part of the code does:

User Information: The function starts by retrieving the current user's information using Clerk.
Workspace Data: It queries the database to get all the workspaces the user belongs to and any pending invitations.
Functions for Actions: There are three main functions defined here:
- acceptInvitation(): Accepts an invitation and redirects the user to the appropriate workspace.
- launchChat(): Launches the selected workspace's chat by redirecting to the correct URL.
- goToGetStartedPage(): Redirects to the "Get Started" page to create a new workspace.
Finally, we return the Navbar, WorkspaceList, and Clerk’s SignOutButton button to present a welcoming interface.

Creating a Workspace

Building the Create Workspace API

To allow users to create a new workspace, we need to build an API that will handle the creation process and a user interface where they can provide the necessary details.

Create a /api/workspaces/create directory, then add a route.ts file with the following code:

import { NextResponse } from 'next/server';
import { auth, currentUser } from '@clerk/nextjs/server';

import prisma from '@/lib/prisma';
import {
  generateChannelId,
  generateToken,
  generateWorkspaceId,
  isEmail,
} from '@/lib/utils';

export async function POST(request: Request) {
  const { userId } = await auth();

  if (!userId) {
    return NextResponse.json(
      { error: 'Authentication required' },
      { status: 401 }
    );
  }

  try {
    const user = await currentUser();
    const userEmail = user?.primaryEmailAddress?.emailAddress;

    const body = await request.json();
    const { workspaceName, channelName, emails, imageUrl } = body;

    // Validate input
    if (
      !workspaceName ||
      !channelName ||
      !Array.isArray(emails) ||
      emails.length === 0
    ) {
      return NextResponse.json(
        { error: 'Invalid input data' },
        { status: 400 }
      );
    }

    // Validate emails
    for (const email of emails) {
      if (!isEmail(email)) {
        return NextResponse.json(
          { error: `Invalid email address: ${email}` },
          { status: 400 }
        );
      }
    }

    // Create workspace
    const workspace = await prisma.workspace.create({
      data: {
        id: generateWorkspaceId(),
        name: workspaceName,
        image: imageUrl || null,
        ownerId: userId,
      },
    });

    // Create initial channel
    const channel = await prisma.channel.create({
      data: {
        id: generateChannelId(),
        name: channelName,
        workspaceId: workspace.id,
      },
    });

    // Add authenticated user as admin
    await prisma.membership.create({
      data: {
        userId: userId,
        email: userEmail!,
        workspace: {
          connect: { id: workspace.id },
        },
        role: 'admin',
      },
    });

    // Invite provided emails
    const invitations = [];
    const skippedEmails = [];
    const errors = [];

    for (const email of emails) {
      try {
        // Check if an invitation already exists
        const existingInvitation = await prisma.invitation.findFirst({
          where: {
            email,
            workspaceId: workspace.id,
            acceptedAt: null,
          },
        });

        // check if the user is already a member
        const existingMembership = await prisma.membership.findFirst({
          where: {
            email,
            workspaceId: workspace.id,
          },
        });

        if (existingInvitation) {
          skippedEmails.push(email);
          continue;
        }

        if (existingMembership) {
          skippedEmails.push(email);
          continue;
        }

        if (email === userEmail) {
          skippedEmails.push(email);
          continue;
        }

        // Generate token
        const token = generateToken();

        // Create invitation
        const invitation = await prisma.invitation.create({
          data: {
            email,
            token,
            workspaceId: workspace.id,
            invitedById: userId,
          },
        });

        invitations.push(invitation);
      } catch (error) {
        console.error(`Error inviting ${email}:`, error);
        errors.push({ email, error });
      }
    }

    // Return response
    const response = {
      message: 'Workspace created successfully',
      workspace: {
        id: workspace.id,
        name: workspace.name,
      },
      channel: {
        id: channel.id,
        name: channelName,
      },
      invitationsSent: invitations.length,
      invitationsSkipped: skippedEmails.length,
      errors,
    };

    if (errors.length > 0) {
      return NextResponse.json(response, { status: 207 });
    } else {
      return NextResponse.json(response, { status: 200 });
    }
  } catch (error) {
    console.error('Error creating workspace:', error);
    return NextResponse.json(
      { error: 'Internal server error' },
      { status: 500 }
    );
  } finally {
    await prisma.$disconnect();
  }
}

Here’s what’s going on in this API:

Authentication: It first checks if the user is logged in. Only logged-in users can create a workspace.
Input Validation: It ensures the provided information, like the workspace name, channel name, and email list, is correct.
Creating a Workspace and Channel: The API then creates a new workspace in the database and sets up the first channel for the workspace.
Adding Admin: We add the user who creates the workspace as an admin of that workspace.
Sending Invitations: It sends invitations to the provided email addresses while skipping any that are already invited, already members, or are not valid.

Finally, the API returns a response with details about the new workspace, channel, and how many invitations were successfully sent or skipped.

Building the Workspace Setup Page

Next, let's create a page where users can fill out the information needed to set up a new workspace. This page will be the user interface for interacting with our API.

Create a get-started directory inside /app, then create a page.tsx file in it and add the following code:

'use client';
import { useState } from 'react';
import { useRouter } from 'next/navigation';

import { isUrl } from '@/lib/utils';
import ArrowDropdown from '@/components/icons/ArrowDropdown';
import Avatar from '@/components/Avatar';
import Button from '@/components/Button';
import Hash from '@/components/icons/Hash';
import Home from '@/components/icons/Home';
import MoreHoriz from '@/components/icons/MoreHoriz';
import RailButton from '@/components/RailButton';
import SidebarButton from '@/components/SidebarButton';
import Tags from '@/components/Tags';
import TextField from '@/components/TextField';

const pattern = `(http)?s?:?(\/\/[^"']*\.(?:png|jpg|jpeg|gif|png|svg))`;

const GetStarted = () => {
  const router = useRouter();
  const [workspaceName, setWorkspaceName] = useState('');
  const [channelName, setChannelName] = useState('');
  const [emails, setEmails] = useState<string[]>([]);
  const [imageUrl, setImageUrl] = useState('');
  const [loading, setLoading] = useState(false);

  const allFieldsValid = Boolean(
    workspaceName &&
      channelName &&
      (!imageUrl || (isUrl(imageUrl) && RegExp(pattern).test(imageUrl))) &&
      emails.length > 0
  );

  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    if (allFieldsValid) {
      e.stopPropagation();

      try {
        setLoading(true);
        const response = await fetch('/api/workspaces/create', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            workspaceName: workspaceName.trim(),
            channelName: channelName.trim(),
            emails,
            imageUrl,
          }),
        });

        const result = await response.json();

        if (response.ok) {
          alert('Workspace created successfully!');
          const { workspace, channel } = result;
          router.push(`/client/${workspace.id}/${channel.id}`);
        } else {
          alert(`Error: ${result.error}`);
        }
      } catch (error) {
        console.error('Error creating workspace:', error);
        alert('An unexpected error occurred.');
      } finally {
        setLoading(false);
      }
    }
  };

  return (
    <div className="client font-lato w-screen h-screen flex flex-col">
      <div className="absolute w-full h-full bg-theme-gradient" />
      <div className="relative w-full h-10 flex items-center justify-between pr-1"></div>
      <div className="w-screen h-[calc(100svh-40px)] grid grid-cols-[70px_auto]">
        <div className="hidden relative w-[4.375rem] sm:flex flex-col items-center overflow-hidden gap-3 pt-2 z-[1000] bg-transparent">
          <div className="w-9 h-9 mb-[5px]">
            <Avatar
              width={36}
              borderRadius={8}
              fontSize={20}
              fontWeight={600}
              data={{ name: workspaceName, image: imageUrl }}
            />
          </div>
          <div className="relative flex flex-col items-center w-[3.25rem]">
            <div className="relative">
              <RailButton
                title="Home"
                icon={<Home color="var(--primary)" filled />}
                active
              />
              <div className="absolute w-full h-full top-0 left-0" />
            </div>
            <div className="relative opacity-30">
              <RailButton
                title="More"
                icon={<MoreHoriz color="var(--primary)" />}
              />
              <div className="absolute w-full h-full top-0 left-0" />
            </div>
          </div>
        </div>
        <div className="relative w-svw h-full sm:h-auto sm:w-auto flex mr-1 mb-1 rounded-md overflow-hidden border border-solid border-[#797c814d]">
          <div className="hidden w-[275px] relative px-2 sm:flex flex-col flex-shrink-0 gap-3 min-w-0 min-h-0 max-h-[calc(100svh-44px)] bg-[#10121499] border-r-[1px] border-solid border-r-[#797c814d]">
            <div className="pl-1 w-full h-[49px] flex items-center justify-between">
              <div className="max-w-[calc(100%-80px)]">
                <div className="w-fit max-w-full rounded-md py-[3px] px-2 flex items-center text-white hover:bg-hover-gray">
                  <span className="truncate text-[18px] font-[900] leading-[1.33334]">
                    {workspaceName}
                  </span>
                </div>
              </div>
            </div>
            {channelName && (
              <div className="w-full flex flex-col">
                <div className="h-7 -ml-1.5 flex items-center px-4 text-[15px] leading-7">
                  <button className="hover:bg-hover-gray rounded-md">
                    <ArrowDropdown color="var(--icon-gray)" />
                  </button>
                  <button className="flex px-[5px] max-w-full rounded-md text-sidebar-gray font-medium hover:bg-hover-gray">
                    Channels
                  </button>
                </div>
                <SidebarButton icon={Hash} title={channelName} />
              </div>
            )}
            <div className="absolute w-full h-full top-0 left-0" />
          </div>
          <div className="bg-[#1a1d21] grow p-16 flex flex-col">
            <div className="max-w-[705px] flex flex-col gap-8">
              <h2 className="max-w-[632px] font-sans font-bold mb-2 text-[45px] leading-[46px] text-white">
                Create a new workspace
              </h2>
              <form onSubmit={onSubmit} action={() => {}} className="contents">
                <TextField
                  label="Workspace name"
                  name="workspaceName"
                  value={workspaceName}
                  onChange={(e) => setWorkspaceName(e.target.value)}
                  placeholder="Enter a name for your workspace"
                  required
                />
                <TextField
                  label={
                    <span>
                      Workspace image{' '}
                      <span className="text-[#9a9b9e] ml-0.5">(optional)</span>
                    </span>
                  }
                  name="workspaceImage"
                  type="url"
                  value={imageUrl}
                  onChange={(e) => setImageUrl(e.target.value)}
                  placeholder="Paste an image URL"
                  pattern={`(http)?s?:?(\/\/[^"']*\.(?:png|jpg|jpeg|gif|png|svg))`}
                  title='Image URL must start with "http://" or "https://" and end with ".png", ".jpg", ".jpeg", ".gif", or ".svg"'
                />
                <TextField
                  label="Channel name"
                  name="channelName"
                  value={channelName}
                  onChange={(e) =>
                    setChannelName(
                      e.target.value.toLowerCase().replace(/\s/g, '-')
                    )
                  }
                  placeholder="Enter a name for your first channel"
                  maxLength={80}
                  required
                />
                <Button
                  type="submit"
                  disabled={emails.length === 0}
                  className="w-fit order-5 capitalize py-2 hover:bg-[#592a5a] hover:border-[#592a5a]"
                  loading={loading}
                >
                  Submit
                </Button>
              </form>
              <Tags
                values={emails}
                setValues={setEmails}
                label="Invite members"
                placeholder="Enter email addresses"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default GetStarted;

In the code above:

The page allows users to provide details for creating a new workspace, including:
- Workspace Name: The name of the workspace.
- Channel Name: The name of the first channel to be created within the workspace.
- Emails of Members to Invite: Users can enter a list of email addresses to invite members to the workspace.
- Workspace Image (Optional): Users can optionally provide an image URL to represent the workspace.
The form uses the useState hook to store the values the user enters and uses allFieldsValid to ensure all required fields are filled in correctly.
When the form is submitted, it makes a POST request to the /api/workspaces/create route, passing along the workspace details. If the request is successful, we redirect the user to the new workspace.
The interface provides visual feedback while the request is processed, such as showing a loading state or error messages if something goes wrong.

Creating Your First Workspace

Now that you have finished building the API and setup page, it's time to create your first workspace to ensure everything works as expected. Follow these steps:

Go to the Setup Page: Navigate to your app's /get-started page.
Fill in the Necessary Details: Enter the workspace name, channel name, and email addresses of the members you want to invite.
Add an Image (Optional): If you wish, add an image URL to make the workspace look more personal.
Submit the Form: Click the "Submit" button to create the workspace.
Verify the Creation: Ensure the workspace is created successfully and all invited members receive invitations.
Check the Dashboard: Verify that the new workspace is listed correctly on your dashboard and that the initial channel is visible.

By following these steps, you can confirm that the workspace creation flow functions correctly.

Setting Up Stream In Your Application

What is Stream?

Stream is a platform that allows developers to add rich chat and video features to their applications. Instead of dealing with the complexity of creating chat and video from the ground up, Stream provides APIs and SDKs to help you add them quickly and easily.

In this project, we'll use Stream's React SDK for Video and React Chat SDK to build the chat and video calling features in our Slack clone.

Creating your Stream Account

To start using Stream, you'll need to create an account:

Sign Up: Go to the Stream sign-up page and create an account using your email or a social login.
Complete Your Profile:

* After signing up, you'll be asked for additional information, such as your role and industry.

* Select the **"Chat Messaging"** and **"Video and Audio"** options since we need these tools for our app.

    ![Strem sign up options](https://cdn.hashnode.com/res/hashnode/image/upload/v1726664432078/966254af-e0b3-4a54-b395-52667e6374b7.png)

* Click **"Complete Signup"** to continue.

You will now be redirected to your Stream dashboard.

Creating a New Stream Project

After creating your Stream account, the next step is to set up an app for your project:

Create a New App: In your Stream dashboard, click the "Create App" button.
Configure Your App:

* **App Name**: Enter a name like "**Slack Clone**" or any other name you choose.

* **Region**: Pick the region nearest to you for the best performance.

* **Environment**: Keep it set to "**Development**".

* Click the "**Create App**" to finish.

Get Your API Keys: After creating the app, navigate to the "App Access Keys" section. You’ll need these keys to connect Stream to your project.

Configuring User Permissions

To allow users to send messages, read channels, and perform other actions, you need to set up the necessary permissions in the Stream dashboard:

Navigate to the "Roles & Permissions" tab under "Chat messaging."
Select the "user" role and choose the "messaging" scope.
Click the “Edit” button and select the following permissions:

* Create Message

* Read Channel

* Read Channel Members

* Create Reaction

* Upload Attachments

* Create Attachments

Save and confirm the changes.

Installing Stream SDKs

To start using Stream in our Next.js project, we need to install a few SDKs:

Install the SDKs: Run the following command to install the necessary packages:

npm install @stream-io/node-sdk @stream-io/video-react-sdk stream-chat-react stream-chat

Set Up Environment Variables: Add your Stream API keys to your .env.local file:
```
NEXT_PUBLIC_STREAM_API_KEY=your_stream_api_key
STREAM_API_SECRET=your_stream_api_secret
```
Replace your_stream_api_key and your_stream_api_secret with the keys from your Stream dashboard.

Import the Stylesheets: Stream SDKs have ready-made stylesheets for their chat and video components. Import these styles into your app/layout.tsx file:

// app/layout.tsx
... 
import '@stream-io/video-react-sdk/dist/css/styles.css';
import 'stream-chat-react/dist/css/v2/index.css';
import './globals.css';
...

Syncing Clerk with Your Stream App

To make sure user data is consistent between Clerk and Stream, you need to set up a webhook that syncs user information:

Set Up ngrok: Since webhooks require a publicly accessible URL, we'll use ngrok to expose our local server. Follow the steps below to set up an ngrok tunnel for your app:

* Go to the [ngrok website](https://dashboard.ngrok.com/signup) and sign up for a free account.

* [Download and install ngrok](https://dashboard.ngrok.com/get-started/setup), then start a tunnel to your local server (assuming it's running on port 3000):

    ```bash
    ngrok http 3000 --domain=YOUR_DOMAIN
    ```

    Replace `YOUR_DOMAIN` with the [generated ngrok domain](https://dashboard.ngrok.com/cloud-edge/domains).

Create a Webhook Endpoint in Clerk:

* **Navigate to Webhooks**: In your [Clerk dashboard](https://dashboard.clerk.com/last-active?path=webhooks), navigate to the “**Configure**” tab and select "**Webhooks**.”

* **Add a New Endpoint**:

    * Click "**Add Endpoint**" and enter your ngrok URL, followed by `/api/webhooks` (e.g., `https://your-subdomain.ngrok.io/api/webhooks`).

    * Under “**Subscribe to events**”, select `user.created` and `user.updated`.

    * Click "**Create**".

* **Get the Signing Secret**: Copy the signing secret provided and add it to your `.env.local` file:

    ```dockerfile
    WEBHOOK_SECRET=your_clerk_webhook_signing_secret
    ```

    Replace `your_clerk_webhook_signing_secret` with the signing secret from the webhooks page.

    ![Signing secret](https://cdn.hashnode.com/res/hashnode/image/upload/v1726741867125/7c6ffd89-36ac-4c4b-a5e0-bd665796612d.png)

Install Svix: We need Svix to verify and handle incoming webhooks. Run the following command to install the package:
```
npm install svix
```

Create the Webhook Endpoint in Your App: Next, we need to create a route to receive the webhook's payload. Create a /app/api/webhooks directory and add a route.ts file with the following code:

import { Webhook } from 'svix';
import { headers } from 'next/headers';
import { WebhookEvent } from '@clerk/nextjs/server';
import { StreamClient } from '@stream-io/node-sdk';

const API_KEY = process.env.NEXT_PUBLIC_STREAM_API_KEY!;
const SECRET = process.env.STREAM_API_SECRET!;
const WEBHOOK_SECRET = process.env.WEBHOOK_SECRET;

export async function POST(req: Request) {
  const client = new StreamClient(API_KEY, SECRET);

  if (!WEBHOOK_SECRET) {
    throw new Error(
      'Please add WEBHOOK_SECRET from Clerk Dashboard to .env or .env.local'
    );
  }

  // Get the headers
  const headerPayload = headers();
  const svix_id = headerPayload.get('svix-id');
  const svix_timestamp = headerPayload.get('svix-timestamp');
  const svix_signature = headerPayload.get('svix-signature');

  // If there are no headers, error out
  if (!svix_id || !svix_timestamp || !svix_signature) {
    return new Response('Error occured -- no svix headers', {
      status: 400,
    });
  }

  // Get the body
  const payload = await req.json();
  const body = JSON.stringify(payload);

  // Create a new Svix instance with your secret.
  const wh = new Webhook(WEBHOOK_SECRET);

  let evt: WebhookEvent;

  // Verify the payload with the headers
  try {
    evt = wh.verify(body, {
      'svix-id': svix_id,
      'svix-timestamp': svix_timestamp,
      'svix-signature': svix_signature,
    }) as WebhookEvent;
  } catch (err) {
    console.error('Error verifying webhook:', err);
    return new Response('Error occured', {
      status: 400,
    });
  }

  const eventType = evt.type;

  switch (eventType) {
    case 'user.created':
    case 'user.updated':
      const newUser = evt.data;
      await client.upsertUsers([
        {
          id: newUser.id,
          role: 'user',
          name: `${newUser.first_name} ${newUser.last_name}`,
          custom: {
            username: newUser.username,
            email: newUser.email_addresses[0].email_address,
          },
          image: newUser.has_image ? newUser.image_url : undefined,
        },
      ]);
      break;
    default:
      break;
  }

  return new Response('Webhook processed', { status: 200 });
}

In the webhook handler:

* We use Svix's `Webhook` class to verify incoming requests. If the request is valid, we sync the user data with Stream using the `upsertUsers` method for `user.created` and `user.updated` events.

* For `user.created` and `user.updated` events, we sync the user data with Stream using `upsertUsers`.

Make the Webhook Endpoint Public: Finally, we need to add the webhook endpoint to the public routes in the middleware configuration to ensure Clerk can access it from “outside”. Navigate to your middleware.ts file, and add the following:
```
import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';

const isPublicRoute = createRouteMatcher([
  ...
  '/api/webhooks(.*)',
]);
...
```

After completing these steps, Stream will be successfully set up in your application.

Building the Workspace Hub

The workspace hub is the central part of our Slack clone, where users can chat, make video calls, and manage their workspaces. It combines all the essential features—like how Slack organizes communication channels and tools—making it easy for users to communicate and work together.

Creating the Layout

We need a layout that will be the foundation for all the activities in the workspace. This layout will bring together parts like the sidebar, chat area, and huddle.

Create a client folder in the app directory, and add a layout.tsx file with the following code:

'use client';
import { createContext, ReactNode, useEffect, useState } from 'react';
import {
  Channel,
  Invitation,
  Membership,
  Workspace as PrismaWorkspace,
} from '@prisma/client';
import { UserButton, useUser } from '@clerk/nextjs';
import { StreamChat } from 'stream-chat';
import { Chat } from 'stream-chat-react';
import {
  Call,
  StreamVideo,
  StreamVideoClient,
} from '@stream-io/video-react-sdk';

import ArrowBack from '@/components/icons/ArrowBack';
import ArrowForward from '@/components/icons/ArrowForward';
import Avatar from '@/components/Avatar';
import Bookmark from '@/components/icons/Bookmark';
import Clock from '@/components/icons/Clock';
import IconButton from '@/components/IconButton';
import Help from '@/components/icons/Help';
import Home from '@/components/icons/Home';
import Plus from '@/components/icons/Plus';
import Messages from '@/components/icons/Messages';
import MoreHoriz from '@/components/icons/MoreHoriz';
import Notifications from '@/components/icons/Notifications';
import RailButton from '@/components/RailButton';
import SearchBar from '@/components/SearchBar';
import WorkspaceLayout from '@/components/WorkspaceLayout';
import WorkspaceSwitcher from '@/components/WorkspaceSwitcher';

interface LayoutProps {
  children?: ReactNode;
  params: Promise<{ workspaceId: string }>;
}

export type Workspace = PrismaWorkspace & {
  channels: Channel[];
  memberships: Membership[];
  invitations: Invitation[];
};

export const AppContext = createContext<{
  workspace: Workspace;
  setWorkspace: (workspace: Workspace) => void;
  otherWorkspaces: Workspace[];
  setOtherWorkspaces: (workspaces: Workspace[]) => void;
  channel: Channel;
  setChannel: (channel: Channel) => void;
  loading: boolean;
  setLoading: (loading: boolean) => void;
  chatClient: StreamChat;
  setChatClient: (chatClient: StreamChat) => void;
  videoClient: StreamVideoClient;
  setVideoClient: (videoClient: StreamVideoClient) => void;
  channelCall: Call | undefined;
  setChannelCall: (call: Call) => void;
}>({
  workspace: {} as Workspace,
  setWorkspace: () => {},
  otherWorkspaces: [],
  setOtherWorkspaces: () => {},
  channel: {} as Channel,
  setChannel: () => {},
  loading: false,
  setLoading: () => {},
  chatClient: {} as StreamChat,
  setChatClient: () => {},
  videoClient: {} as StreamVideoClient,
  setVideoClient: () => {},
  channelCall: undefined,
  setChannelCall: () => {},
});

const tokenProvider = async (userId: string) => {
  const response = await fetch('/api/token', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ userId: userId }),
  });
  const data = await response.json();
  return data.token;
};

const API_KEY = process.env.NEXT_PUBLIC_STREAM_API_KEY as string;

const Layout = ({ children }: LayoutProps) => {
  const { user } = useUser();
  const [loading, setLoading] = useState(true);
  const [workspace, setWorkspace] = useState<Workspace>();
  const [channel, setChannel] = useState<Channel>();
  const [otherWorkspaces, setOtherWorkspaces] = useState<Workspace[]>([]);
  const [chatClient, setChatClient] = useState<StreamChat>();
  const [videoClient, setVideoClient] = useState<StreamVideoClient>();
  const [channelCall, setChannelCall] = useState<Call>();

  useEffect(() => {
    const customProvider = async () => {
      const token = await tokenProvider(user!.id);
      return token;
    };

    const setUpChatAndVideo = async () => {
      const chatClient = StreamChat.getInstance(API_KEY);
      const clerkUser = user!;
      const chatUser = {
        id: clerkUser.id,
        name: clerkUser.fullName!,
        image: clerkUser.imageUrl,
        custom: {
          username: user?.username,
        },
      };

      if (!chatClient.user) {
        await chatClient.connectUser(chatUser, customProvider);
      }

      setChatClient(chatClient);
      const videoClient = StreamVideoClient.getOrCreateInstance({
        apiKey: API_KEY,
        user: chatUser,
        tokenProvider: customProvider,
      });
      setVideoClient(videoClient);
    };

    if (user) setUpChatAndVideo();
  }, [user, videoClient, chatClient]);

  if (!chatClient || !videoClient || !user)
    return (
      <div className="client font-lato w-screen h-screen flex flex-col">
        <div className="absolute w-full h-full bg-theme-gradient" />
      </div>
    );

  return (
    <AppContext.Provider
      value={{
        workspace: workspace!,
        setWorkspace,
        otherWorkspaces,
        setOtherWorkspaces,
        channel: channel!,
        setChannel,
        loading,
        setLoading,
        chatClient,
        setChatClient,
        videoClient,
        setVideoClient,
        channelCall,
        setChannelCall,
      }}
    >
      <Chat client={chatClient}>
        <StreamVideo client={videoClient}>
          <div className="client font-lato w-screen h-screen flex flex-col">
            <div className="absolute w-full h-full bg-theme-gradient" />
            {/* Toolbar */}
            <div className="relative w-full h-10 flex items-center justify-between pr-1">
              <div className="w-[4.375rem] h-10 mr-auto flex-none" />
              {!loading && (
                <div className="flex flex-auto items-center">
                  <div className="relative hidden sm:flex flex-none basis-[24%]">
                    <div className="flex justify-start basis-full" />
                    <div className="flex justify-end basis-full mr-3">
                      <div className="flex gap-1 items-center">
                        <IconButton
                          icon={<ArrowBack color="var(--primary)" />}
                          disabled
                        />
                        <IconButton
                          icon={<ArrowForward color="var(--primary)" />}
                          disabled
                        />
                      </div>
                      <div className="flex items-center ml-1">
                        <IconButton icon={<Clock color="var(--primary)" />} />
                      </div>
                    </div>
                  </div>
                  <SearchBar placeholder={`Search ${workspace?.name}`} />
                  <div className="hidden sm:flex flex-[1_0_auto] items-center justify-end mr-1">
                    <IconButton icon={<Help color="var(--primary)" />} />
                  </div>
                </div>
              )}
            </div>
            {/* Main */}
            <div className="w-screen h-[calc(100svh-40px)] grid grid-cols-[70px_auto]">
              {/* Rail */}
              <div className="relative w-[4.375rem] flex flex-col items-center gap-3 pt-2 z-[1000] bg-transparent">
                {!loading && (
                  <>
                    <WorkspaceSwitcher />
                    <div className="relative flex flex-col items-center w-[3.25rem]">
                      <RailButton
                        title="Home"
                        icon={<Home color="var(--primary)" filled />}
                        active
                      />
                      <RailButton
                        title="DMs"
                        icon={<Messages color="var(--primary)" />}
                      />
                      <RailButton
                        title="Activity"
                        icon={<Notifications color="var(--primary)" />}
                      />
                      <RailButton
                        title="Later"
                        icon={<Bookmark color="var(--primary)" />}
                      />
                      <RailButton
                        title="More"
                        icon={<MoreHoriz color="var(--primary)" />}
                      />
                    </div>
                    <div className="flex flex-col items-center gap-4 mt-auto pb-6 w-full">
                      <div className="cursor-pointer flex items-center justify-center w-9 h-9 rounded-full bg-[#565759]">
                        <Plus color="var(--primary)" />
                      </div>
                      <div className="relative h-9 w-9">
                        <UserButton />
                        <div className="absolute left-0 top-0 flex items-center justify-center pointer-events-none">
                          <div className="relative w-full h-full">
                            <Avatar
                              width={36}
                              borderRadius={8}
                              fontSize={20}
                              fontWeight={700}
                              data={{
                                name: user.fullName!,
                                image: user.imageUrl,
                              }}
                            />
                            <span className="absolute w-3.5 h-3.5 rounded-full flex items-center justify-center -bottom-[3px] -right-[3px] bg-[#111215]">
                              <div className="w-[8.5px] h-[8.5px] rounded-full bg-[#3daa7c]" />
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </>
                )}
              </div>
              <WorkspaceLayout>{children}</WorkspaceLayout>
            </div>
          </div>
        </StreamVideo>
      </Chat>
    </AppContext.Provider>
  );
};

export default Layout;

A lot is going on here, so let’s break things down:

Context Management: The AppContext stores shared information within the entire app, like the current workspace, channels, chat client, video client, and more.
Setting Up Chat and Video Clients: Within the useEffect, we have a setUpChatAndVideo function that sets up the chat and video clients from Stream. It connects the user to the chat client and sets up the video client for calls.
Token Provider: The tokenProvider function asks for a token from our /api/token endpoint. This token is needed for Stream's services to know who the user is.
Main Components: The layout is split into different main parts:
- Toolbar: The toolbar has navigation buttons, a search bar, and a help button.
- Rail: This is a vertical section with buttons like "Home," "DMs," "Activity," and more.
- WorkspaceSwitcher: This part lets users switch between workspaces.
- WorkspaceLayout: The WorkspaceLayout contains the sidebar and the main channel content.

Adding a Token API Route

In the last section, we added a token provider that sends a request to /api/token to get Stream user tokens. Next, we'll create the API route that will handle this request.

Create a /app/api/token directory, then add a route.ts file with the following:

import { StreamClient } from '@stream-io/node-sdk';

const API_KEY = process.env.NEXT_PUBLIC_STREAM_API_KEY!;
const SECRET = process.env.STREAM_API_SECRET!;

export async function POST(request: Request) {
  const client = new StreamClient(API_KEY, SECRET);

  const body = await request.json();

  const userId = body?.userId;

  if (!userId) {
    return Response.error();
  }

  const token = client.generateUserToken({ user_id: userId });

  const response = {
    userId: userId,
    token: token,
  };

  return Response.json(response);
}

In the code above, we use Stream's Node SDK to create a token for a user based on their userId. This token will authenticate users for Stream's chat and video features.

Workspace Switcher Component

Next, let’s create the WorkspaceSwitcher component we added to our layout in the previous section.

Create a WorkspaceSwitcher.tsx file in the components directory and add the following code:

import { MutableRefObject, useContext, useState } from 'react';
import { useRouter } from 'next/navigation';
import clsx from 'clsx';

import { AppContext, Workspace } from '@/app/client/layout';
import Avatar from './Avatar';
import Plus from './icons/Plus';
import useClickOutside from '@/hooks/useClickOutside';

const WorkspaceSwitcher = () => {
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const {
    workspace,
    setWorkspace,
    otherWorkspaces,
    setOtherWorkspaces,
    setChannel,
  } = useContext(AppContext);

  const domNode = useClickOutside(() => {
    setOpen(false);
  }, true) as MutableRefObject<HTMLDivElement>;

  const switchWorkspace = (otherWorkspace: Workspace) => {
    setOtherWorkspaces([
      ...otherWorkspaces.filter((w) => w.id !== otherWorkspace.id),
      workspace,
    ]);
    setWorkspace(otherWorkspace);
    setChannel(otherWorkspace.channels[0]);
    router.push(
      `/client/${otherWorkspace.id}/${otherWorkspace.channels[0].id}`
    );
  };

  return (
    <div
      onClick={() => setOpen((prev) => !prev)}
      className="relative w-9 h-9 mb-[5px] cursor-pointer"
    >
      <Avatar
        width={36}
        borderRadius={8}
        fontSize={20}
        fontWeight={700}
        data={{ name: workspace.name, image: workspace.image }}
      />
      <div
        ref={domNode}
        className={clsx(
          'z-[99] absolute top-11 -left-3 flex-col items-start text-channel-gray text-left w-[360px] rounded-xl overflow-hidden bg-[#212428] border border-[#797c8126] py-1',
          open ? 'flex' : 'hidden'
        )}
      >
        <div className="w-full px-4 py-2 text-[15px] leading-7 hover:bg-[#36383b]">
          <div className="leading-[22px] font-bold truncate">
            {workspace.name}
          </div>
          <div className="text-[13px] leading-[18px]">
            {workspace.name.replace(/\s/g, '').toLowerCase()}.slack.com
          </div>
        </div>
        <div className="w-full h-[1px] my-2 bg-[#797c8126]" />
        <div className="flex flex-col text-[12.8px] leading-[1.38463] m-[4px_12px_4px_16px]">
          <span className="font-bold">Never miss a notification</span>
          <div>
            <span className="cursor-pointer text-[#1D9BD1] hover:underline">
              Get the Slack app
            </span>{' '}
            to see notifications from your other workspaces
          </div>
        </div>
        <div className="w-full h-[1px] my-2 bg-[#797c8126]" />
        {otherWorkspaces.map((otherWorkspace) => (
          <button
            key={otherWorkspace.id}
            className="px-4 flex items-center w-full h-[52px] hover:bg-[#37393d] gap-3 text-[14.8px]"
            onClick={() => switchWorkspace(otherWorkspace)}
          >
            <Avatar
              width={36}
              borderRadius={8}
              fontSize={20}
              fontWeight={700}
              data={{ name: otherWorkspace.name, image: otherWorkspace.image }}
            />
            <div className="flex flex-col text-left">
              <div className="leading-[22px] font-bold truncate">
                {otherWorkspace.name}
              </div>
              <div className="text-[13px] leading-[18px]">
                {otherWorkspace.name.replace(/\s/g, '').toLowerCase()}.slack.com
              </div>
            </div>
          </button>
        ))}
        <button
          className="px-4 flex items-center w-full h-[52px] hover:bg-[#37393d] gap-3 text-[14.8px]"
          onClick={() => router.push(`/get-started`)}
        >
          <div className="w-9 h-9 flex items-center justify-center rounded-lg bg-[#f8f8f80f]">
            <Plus color="var(--primary)" filled />
          </div>
          <div className="flex flex-col text-left text-white">
            Add a workspace
          </div>
        </button>
      </div>
    </div>
  );
};

export default WorkspaceSwitcher;

In the WorkspaceSwitcher component, we have a dropdown when the user clicks the workspace button. This dropdown lets users easily switch between workspaces or add a new one.

Switching Workspaces: The switchWorkspace function updates the current workspace and channel, and then navigates the user to the new workspace's main page.
Click Outside to Close: The useClickOutside hook is used to close the workspace switcher dropdown when the user clicks anywhere outside of it.
Add a Workspace: The button at the bottom lets users create a new workspace, directing them to the setup page.

Building a Workspace Layout Component

Next, we'll create the WorkspaceLayout component that we added in the previous section, similar to how we created the WorkspaceSwitcher component.

Create a WorkspaceLayout.tsx file in the components directory and add the following code:

'use client';
import { ReactNode, useContext, useEffect, useRef, useState } from 'react';
import clsx from 'clsx';

import { AppContext } from '../app/client/layout';
import Sidebar from './Sidebar';

interface WorkspaceLayoutProps {
  children: ReactNode;
}

const WorkspaceLayout = ({ children }: WorkspaceLayoutProps) => {
  const { loading } = useContext(AppContext);
  const layoutRef = useRef<HTMLDivElement>(null);
  const [layoutWidth, setLayoutWidth] = useState(0);

  useEffect(() => {
    if (!layoutRef.current) {
      return;
    }

    const resizeObserver = new ResizeObserver((entries) => {
      for (const entry of entries) {
        setLayoutWidth(entry.contentRect.width);
      }
    });

    resizeObserver.observe(layoutRef.current);

    return () => {
      resizeObserver.disconnect();
    };
  }, [layoutRef]);

  return (
    <div
      ref={layoutRef}
      className={clsx(
        'relative flex mr-1 mb-1 rounded-md overflow-hidden border border-solid',
        loading ? 'border-transparent' : 'border-[#797c814d]'
      )}
    >
      {/* Sidebar */}
      <Sidebar layoutWidth={layoutWidth} />
      {layoutWidth > 0 && <div className="bg-[#1a1d21] grow">{children}</div>}
    </div>
  );
};

export default WorkspaceLayout;

The WorkspaceLayout component provides a consistent structure for the entire workspace. It includes:

Sidebar Integration: The Sidebar is included in this layout to give users easy access to all workspace channels.
Layout Width: The component uses a ResizeObserver to get the current width of the layout and ensure the sidebar can be resized appropriately.

Adding a Channel Preview Component

Next, we'll create the ChannelPreview component, which shows a preview of each channel in the workspace.

Create a ChannelPreview.tsx file in the components directory and add the following code:

import { useContext } from 'react';
import { ChannelPreviewUIComponentProps } from 'stream-chat-react';
import { usePathname, useRouter } from 'next/navigation';

import { AppContext } from '../app/client/layout';
import Hash from './icons/Hash';
import SidebarButton from './SidebarButton';

const ChannelPreview = ({
  channel,
  displayTitle,
  unread,
}: ChannelPreviewUIComponentProps) => {
  const pathname = usePathname();
  const router = useRouter();
  const { workspace, setChannel } = useContext(AppContext);

  const goToChannel = () => {
    const channelId = channel.id;
    setChannel(workspace.channels.find((c) => c.id === channelId)!);
    router.push(`/client/${workspace.id}/${channelId}`);
  };

  const channelActive = () => {
    const pathChannelId = pathname.split('/').filter(Boolean).pop();
    return pathChannelId === channel.id;
  };

  return (
    <SidebarButton
      icon={Hash}
      title={displayTitle}
      onClick={goToChannel}
      active={channelActive()}
      boldText={Boolean(unread)}
    />
  );
};

export default ChannelPreview;

In the code above:

Channel Preview: The ChannelPreview component shows each channel in the sidebar. Users can click on a channel to open it using the goToChannel function, which navigates to the selected channel.
Bold Text for Unread Messages: If there are unread messages in a channel, the channel name is shown in bold text, making it easy for users to see which channels need attention.
Active Channel Highlight: The channelActive function checks if the current channel is active and highlights it in the sidebar so that users know which channel they are currently in.

Adding a Sidebar

The primary function of the Sidebar component is to give users quick access to channels.

Create a Sidebar.tsx file in the components directory and add the following code:

'use client';
import { useContext, useEffect, useMemo, useRef, useState } from 'react';
import { useUser } from '@clerk/nextjs';
import { ChannelList } from 'stream-chat-react';
import clsx from 'clsx';

import { AppContext } from '../app/client/layout';
import ArrowDropdown from './icons/ArrowDropdown';
import CaretDown from './icons/CaretDown';
import ChannelPreview from './ChannelPreview';
import Compose from './icons/Compose';
import IconButton from './IconButton';
import Refine from './icons/Refine';
import Send from './icons/Send';
import SidebarButton from './SidebarButton';
import Threads from './icons/Threads';

const [minWidth, defaultWidth] = [215, 275];

type SidebarProps = {
  layoutWidth: number;
};

const Sidebar = ({ layoutWidth }: SidebarProps) => {
  const { user } = useUser();
  const { loading, workspace } = useContext(AppContext);

  const [width, setWidth] = useState<number>(() => {
    const savedWidth =
      parseInt(window.localStorage.getItem('sidebarWidth') as string) ||
      defaultWidth;
    window.localStorage.setItem('sidebarWidth', String(savedWidth));
    return savedWidth;
  });
  const maxWidth = useMemo(() => layoutWidth - 374, [layoutWidth]);

  const isDragged = useRef(false);

  useEffect(() => {
    if (!layoutWidth) return;

    const onMouseMove = (e: MouseEvent) => {
      if (!isDragged.current) {
        return;
      }
      document.body.style.userSelect = 'none';
      document.body.style.cursor = 'col-resize';
      document.querySelectorAll('.sidebar-btn').forEach((el) => {
        el.setAttribute('style', 'cursor: col-resize');
      });
      setWidth((previousWidth) => {
        const newWidth = previousWidth + e.movementX / 1.3;
        if (newWidth < minWidth) {
          return minWidth;
        } else if (newWidth > maxWidth) {
          return maxWidth;
        }
        return newWidth;
      });
    };

    const onMouseUp = () => {
      document.body.style.userSelect = 'auto';
      document.body.style.cursor = 'auto';
      document.querySelectorAll('.sidebar-btn').forEach((el) => {
        el.removeAttribute('style');
      });
      isDragged.current = false;
    };

    window.removeEventListener('mousemove', onMouseMove);
    window.addEventListener('mousemove', onMouseMove);
    window.addEventListener('mouseup', onMouseUp);

    return () => {
      window.removeEventListener('mousemove', onMouseMove);
      window.removeEventListener('mouseup', () => onMouseUp);
    };
  }, [layoutWidth, maxWidth]);

  useEffect(() => {
    if (!layoutWidth || layoutWidth < 0) return;

    if (width) {
      let newWidth = width;
      if (width > maxWidth) {
        newWidth = maxWidth;
      }
      setWidth(newWidth);
      localStorage.setItem('sidebarWidth', String(width));
    }
  }, [width, layoutWidth, maxWidth]);

  return (
    <div
      id="sidebar"
      style={{ width: `${width}px` }}
      className={clsx(
        'hidden relative px-2 sm:flex flex-col flex-shrink-0 gap-3 min-w-0 min-h-0 max-h-[calc(100svh-44px)] bg-[#10121499] border-r-[1px] border-solid',
        loading ? 'border-r-transparent' : 'border-r-[#797c814d]'
      )}
    >
      {!loading && (
        <>
          <div className="pl-1 w-full h-[49px] flex items-center justify-between">
            <div className="max-w-[calc(100%-80px)]">
              <button className="w-fit max-w-full rounded-md py-[3px] px-2 flex items-center text-white hover:bg-hover-gray">
                <span className="truncate text-[18px] font-[900] leading-[1.33334]">
                  {workspace.name}
                </span>
                <div className="flex-shrink-0">
                  <CaretDown size={18} color="var(--primary)" />
                </div>
              </button>
            </div>
            <div className="flex ">
              <IconButton
                icon={
                  <Refine className="fill-icon-gray group-hover:fill-white" />
                }
                className="w-9 h-9 hover:bg-hover-gray"
              />
              <IconButton
                icon={
                  <Compose className="fill-icon-gray group-hover:fill-white" />
                }
                className="w-9 h-9 hover:bg-hover-gray"
              />
            </div>
          </div>
          <div className="w-full flex flex-col">
            <SidebarButton icon={Threads} iconSize="lg" title="Threads" />
            <SidebarButton icon={Send} iconSize="lg" title="Drafts & sent" />
          </div>
          <div className="w-full flex flex-col">
            <div className="h-7 -ml-1.5 flex items-center px-4 text-[15px] leading-7">
              <button className="hover:bg-hover-gray rounded-md">
                <ArrowDropdown color="var(--icon-gray)" />
              </button>
              <button className="flex px-[5px] max-w-full rounded-md text-sidebar-gray font-medium hover:bg-hover-gray">
                Channels
              </button>
            </div>
            <ChannelList
              filters={{ workspaceId: workspace.id }}
              Preview={ChannelPreview}
              sort={{
                created_at: 1,
              }}
              LoadingIndicator={() => null}
              lockChannelOrder
            />
          </div>
          {/* Handle */}
          <div
            className="absolute -right-1 w-2 h-full bg-transparent cursor-col-resize"
            onMouseDown={() => {
              isDragged.current = true;
            }}
          />
        </>
      )}
    </div>
  );
};

export default Sidebar;

In the code above:

Resizable Sidebar: The Sidebar can be resized by the user, letting them adjust the width however they like.
Channel List: The ChannelList from stream-chat-react shows all the channels in the workspace. The list can be filtered and sorted, helping users quickly find the channels they need.

Next, add the following styles to globals.css to modify the default styling of the ChannelList:

...
@layer components {
  #sidebar
    .str-chat.messaging.light.str-chat__channel-list.str-chat__channel-list-react {
    background: none;
    border: none;
  }

  #sidebar
    .str-chat.messaging.light.str-chat__channel-list.str-chat__channel-list-react
    > div {
    padding: 0;
  }
}

Creating the Workspace API Route

To fetch workspace data, we need an API route that returns the workspace information.

Create a route.ts file in a /api/workspaces/[workspaceId] directory and add the following code:

import { NextResponse } from 'next/server';
import { auth } from '@clerk/nextjs/server';

import prisma from '@/lib/prisma';

export async function GET(
  _: Request,
  { params }: { params: Promise<{ workspaceId: string }> }
) {
  const { userId } = await auth();

  if (!userId) {
    return NextResponse.json(
      { error: 'Authentication required' },
      { status: 401 }
    );
  }

  const workspaceId = (await params).workspaceId;

  if (!workspaceId || Array.isArray(workspaceId)) {
    return NextResponse.json(
      { error: 'Invalid workspace ID' },
      { status: 400 }
    );
  }

  try {
    // Check if the user is a member of the workspace
    const membership = await prisma.membership.findUnique({
      where: {
        userId_workspaceId: {
          userId,
          workspaceId,
        },
      },
    });

    if (!membership) {
      return NextResponse.json({ error: 'Access denied' }, { status: 403 });
    }

    // Fetch the workspace along with related data
    const workspace = await prisma.workspace.findUnique({
      where: { id: workspaceId },
      include: {
        channels: true,
        memberships: true,
        invitations: {
          where: { acceptedAt: null },
        },
      },
    });

    if (!workspace) {
      return NextResponse.json(
        { error: 'Workspace not found' },
        { status: 404 }
      );
    }

    // Fetch the other workspaces the user is a member of excluding the current workspace
    const otherWorkspaces = await prisma.workspace.findMany({
      where: {
        memberships: {
          some: {
            userId,
            workspaceId: { not: workspaceId },
          },
        },
      },
      include: {
        channels: true,
        memberships: true,
        invitations: {
          where: { acceptedAt: null },
        },
      },
    });

    return NextResponse.json({ workspace, otherWorkspaces }, { status: 200 });
  } catch (error) {
    console.error('Error fetching workspace:', error);
    return NextResponse.json(
      { error: 'Internal server error' },
      { status: 500 }
    );
  } finally {
    await prisma.$disconnect();
  }
}

This route handles GET requests for fetching the workspace data based on the workspace ID provided in the URL:

Authentication: The route first checks if the user is authenticated by verifying their session.
Membership Validation: It also checks whether the user is a member of the requested workspace before returning the data.
Data Retrieval: If the user is authorized, the route retrieves the workspace, channels, and membership data from the database, along with any pending invitations.

Building the Channel Page

The channel page will display the current channel in a specific workspace. It uses several hooks and contexts to ensure all the channel information is loaded and displayed correctly.

Create a /client/[workspaceId]/[channelId]/ directory, and a page.tsx file with add the following code:

'use client';
import { useContext, useEffect, useRef, useState } from 'react';
import { useRouter } from 'next/navigation';
import { useUser } from '@clerk/nextjs';
import { Channel as ChannelType } from 'stream-chat';
import { DefaultStreamChatGenerics } from 'stream-chat-react';
import { StreamCall, useCalls } from '@stream-io/video-react-sdk';
import clsx from 'clsx';

import { AppContext } from '../../layout';
import CaretDown from '@/components/icons/CaretDown';
import Files from '@/components/icons/Files';
import Hash from '@/components/icons/Hash';
import Headphones from '@/components/icons/Headphones';
import Message from '@/components/icons/Message';
import MoreVert from '@/components/icons/MoreVert';
import Pin from '@/components/icons/Pin';
import Plus from '@/components/icons/Plus';
import User from '@/components/icons/User';

interface ChannelProps {
  params: {
    workspaceId: string;
    channelId: string;
  };
}

const Channel = ({ params }: ChannelProps) => {
  const { workspaceId, channelId } = params;
  const router = useRouter();
  const { user } = useUser();
  const [currentCall] = useCalls();
  const {
    chatClient,
    loading,
    setLoading,
    workspace,
    setWorkspace,
    setOtherWorkspaces,
    channel,
    setChannel,
    channelCall,
    setChannelCall,
    videoClient,
  } = useContext(AppContext);

  const [chatChannel, setChatChannel] =
    useState<ChannelType<DefaultStreamChatGenerics>>();
  const [channelLoading, setChannelLoading] = useState(true);
  const [pageWidth, setPageWidth] = useState(0);
  const layoutRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (loading || !layoutRef.current) return;
    const resizeObserver = new ResizeObserver((entries) => {
      for (const entry of entries) {
        setPageWidth(entry.contentRect.width);
      }
    });
    resizeObserver.observe(layoutRef.current);

    return () => {
      resizeObserver.disconnect();
    };
  }, [layoutRef, loading]);

  useEffect(() => {
    const loadWorkspace = async () => {
      try {
        const response = await fetch(`/api/workspaces/${workspaceId}`);
        const result = await response.json();
        if (response.ok) {
          setWorkspace(result.workspace);
          setOtherWorkspaces(result.otherWorkspaces);
          localStorage.setItem(
            'activitySession',
            JSON.stringify({ workspaceId, channelId })
          );
          setLoading(false);
        } else {
          console.error('Error fetching workspace data:', result.error);
          router.push('/');
        }
      } catch (error) {
        console.error('Error fetching workspace data:', error);
        router.push('/');
      }
    };

    const loadChannel = async () => {
      const currentMembers = workspace.memberships.map((m) => m.userId);
      const chatChannel = chatClient.channel('messaging', channelId, {
        members: currentMembers,
        name: channel.name,
        description: channel.description,
        workspaceId: channel.workspaceId,
      });

      await chatChannel.create();

      if (currentCall?.id === channelId) {
        setChannelCall(currentCall);
      } else {
        const channelCall = videoClient?.call('default', channelId);
        setChannelCall(channelCall);
      }

      setChatChannel(chatChannel);
      setChannelLoading(false);
    };

    const loadWorkspaceAndChannel = async () => {
      if (!workspace) {
        await loadWorkspace();
      } else {
        if (!channel)
          setChannel(workspace.channels.find((c) => c.id === channelId)!);
        if (loading) setLoading(false);
        if (chatClient && channel) loadChannel();
      }
    };

    if ((!chatChannel || chatChannel?.id !== channelId) && user)
      loadWorkspaceAndChannel();
  }, [
    channel,
    channelId,
    chatChannel,
    chatClient,
    currentCall,
    loading,
    router,
    setChannel,
    setChannelCall,
    setLoading,
    setOtherWorkspaces,
    setWorkspace,
    user,
    videoClient,
    workspace,
    workspaceId,
  ]);

  useEffect(() => {
    if (currentCall?.id === channelId) {
      setChannelCall(currentCall);
    }
  }, [currentCall, channelId, setChannelCall]);

  if (loading) return null;

  return (
    <div
      ref={layoutRef}
      className="channel bg-[#1a1d21] font-lato w-full h-full z-100 flex flex-col overflow-hidden text-channel-gray"
    >
      {/* Toolbar */}
      <div className="pl-4 pr-3 h-[49px] flex items-center flex-shrink-0 justify-between">
        <div className="flex flex-[1_1_0] items-center min-w-0">
          <button className="min-w-[96px] px-2 py-[3px] -ml-1 mr-2 flex flex-[0_auto] items-center text-[17.8px] rounded-md text-channel-gray hover:bg-[#d1d2d30b] leading-[1.33334]">
            <span className="mr-1 align-text-bottom">
              <Hash color="var(--channel-gray)" size={18} />
            </span>
            <span className="truncate font-[900]">{channel?.name}</span>
          </button>
          <div
            className={clsx(
              'w-[96px] flex-[1_1_0] min-w-[96px] mr-2 pt-1 text-[12.8px] text-[#e8e8e8b3]',
              pageWidth > 0 && pageWidth < 500 ? 'hidden' : 'flex'
            )}
          >
            <span className="min-w-[96px] max-w-[min(70%,540px)] truncate">
              {channel?.description}
            </span>
          </div>
        </div>
        <div className="flex flex-none ml-auto items-center">
          <button
            className={clsx(
              'flex items-center pl-2 py-[3px] rounded-lg h-7 border border-[#797c814d] text-[#e8e8e8b3] hover:bg-[#25272b]',
              pageWidth > 0 && pageWidth < 605 ? 'hidden' : 'flex'
            )}
          >
            <User color="var(--icon-gray)" />
            <span className="pl-1 pr-2 text-[12.8px]">
              {workspace.memberships.length}
            </span>
          </button>
          <button className="group rounded-lg flex w-7 h-7 ml-2 items-center justify-center hover:bg-[#d1d2d30b]">
            <MoreVert className="fill-[#e8e8e8b3] group-hover:fill-channel-gray" />
          </button>
        </div>
      </div>
      {/* Tab Bar */}
      <div className="w-full min-w-full max-w-full h-[38px] flex items-center pl-4 pr-3 shadow-[inset_0_-1px_0_0_#797c814d] gap-1">
        <div className="flex items-center cursor-pointer w-[92.45px] h-full p-2 gap-1 text-[13px] leading-[1.38463] text-center font-bold rounded-t-lg hover:bg-hover-gray border-b-[2px] border-white">
          <Message color="var(--primary)" />
          Messages
        </div>
        <div className="group flex items-center cursor-pointer text-[#b9babd] h-full p-2 gap-1 text-[13px] leading-[1.38463] text-center font-bold rounded-t-lg hover:bg-hover-gray hover:text-white">
          <Files className="fill-icon-gray group-hover:fill-white" size={16} />
          Files
        </div>
        <div className="group flex items-center cursor-pointer text-[#b9babd] h-full p-2 gap-1 text-[13px] leading-[1.38463] text-center font-bold rounded-t-lg hover:bg-hover-gray hover:text-white">
          <Pin className="fill-icon-gray group-hover:fill-white" size={16} />
          Pins
        </div>
        <div className="group flex items-center justify-center cursor-pointer h-7 w-7 rounded-full hover:bg-hover-gray">
          <Plus
            filled
            className="fill-icon-gray group-hover:fill-white"
            size={16}
          />
        </div>
      </div>
      {/* Chat */}
      <div className="relative flex flex-col w-full h-full flex-1 overflow-hidden ">
        {/* Body */}
        <div className="relative flex-1">
          <div className="absolute -top-2 bottom-0 flex w-full overflow-hidden">
            <div
              style={{
                width: pageWidth > 0 ? pageWidth : '100%',
              }}
              className="relative"
            >
              <div className="absolute h-full inset-[0_-50px_0_0] overflow-y-scroll overflow-x-hidden z-[2]">
                {/* Messages */}
                <div>Hello World!</div>
              </div>
            </div>
          </div>
        </div>
        {/* Footer */}
        <div className="relative max-h-[calc(100%-36px)] flex flex-col -mt-2 px-5">
          <div id="message-input" className="flex-1"></div>
          <div className="w-full flex items-center h-6 pl-3 pr-2"></div>
        </div>
      </div>
    </div>
  );
};

export default Channel;

Let’s break this down:

Layout Management: The component uses the layoutRef and ResizeObserver to manage and adjust the page layout dynamically based on the width of the channel section.
Channel Loading: The component first checks if the workspace and channel information are available, and if not, it makes an API call to load the data.
Storing Activity Session: After loading the workspace data, we store the activity session in localStorage. This session contains the workspaceId and channelId to remember the user’s last active workspace and channel.
Chat and Video Clients: We initialize the chat and video clients to allow real-time messaging and calling functionality within the channel.
Toolbar and Footer: The toolbar shows details about the current channel, such as its name and description, while the footer contains an input area for sending messages.

Setting Up the Client Page

The Client component is a utility page that redirects users to their last active workspace and channel. It does this by checking the activitySession stored in localStorage. If no activity session is found, the user is redirected to the homepage.

Create a page.tsx file in the /app/client directory with the following code:

'use client';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';

export default function Client() {
  const router = useRouter();

  useEffect(() => {
    const fetchActivitySession = async () => {
      const activitySession = localStorage.getItem('activitySession');
      if (activitySession) {
        const { workspaceId, channelId } = await JSON.parse(activitySession);
        router.push(`/client/${workspaceId}/${channelId}`);
      } else {
        router.push('/');
      }
    };

    fetchActivitySession();
  }, [router]);

  return null;
}

Building the Workspace Page

Finally, we will create a second utility page which will handle the logic of redirecting the user to a channel within a workspace.

Create a page.tsx file in the /client/[workspaceId] directory:

'use client';
import { useContext, useEffect } from 'react';
import { useRouter } from 'next/navigation';

import { AppContext, Workspace } from '../layout';

interface WorkspacePageProps {
  params: {
    workspaceId: string;
  };
}

export default function WorkspacePage({ params }: WorkspacePageProps) {
  const { workspaceId } = params;
  const { workspace, setWorkspace, setOtherWorkspaces } =
    useContext(AppContext);
  const router = useRouter();

  useEffect(() => {
    const goToChannel = (workspace: Workspace) => {
      const channelId = workspace.channels[0].id;
      localStorage.setItem(
        'activitySession',
        JSON.stringify({ workspaceId: workspace.id, channelId })
      );
      router.push(`/client/${workspace.id}/${channelId}`);
    };

    const loadWorkspace = async () => {
      try {
        const response = await fetch(`/api/workspaces/${workspaceId}`);
        const result = await response.json();
        if (response.ok) {
          setWorkspace(result.workspace);
          setOtherWorkspaces(result.otherWorkspaces);
          goToChannel(result.workspace);
        } else {
          console.error('Error fetching workspace data:', result.error);
        }
      } catch (error) {
        console.error('Error fetching workspace data:', error);
      }
    };

    if (!workspace) {
      loadWorkspace();
    } else {
      goToChannel(workspace);
    }
  }, [workspace, workspaceId, setWorkspace, setOtherWorkspaces, router]);

  return null;
}

In the code above, if the workspace data isn't loaded yet, we fetch it from the /api/workspaces/[workspaceId] route, and navigate the user to the first available channel in that workspace.

And with that, we now have a solid foundation for our Slack clone!

Conclusion

In this first part of building the Slack clone, we:

Set up the project, including workspace creation, channel management, and integration with Stream and Clerk.
Created API routes for managing workspaces and channels.
Built essential components for navigating between workspaces and channels.

In the next part, we will focus on implementing real-time messaging and managing channels.

Stay tuned!

Infinite Scrolling in React: A Practical Guide

Oluwabusayo Jacobs — Mon, 28 Aug 2023 13:02:00 +0000

Introduction

With the rapid evolution of web design and user experience principles, infinite scrolling has become a prominent feature, especially on social media platforms, e-commerce sites, and content-rich websites. But what exactly is infinite scrolling?

Infinite scrolling is a web design technique that allows users to scroll through content continuously without pagination or clicking "Next" buttons. As the user nears the end of the displayed content, more content is fetched and shown automatically, giving the illusion of an "infinite" amount of data. This technique keeps users engaged; they don't need to interrupt their browsing to load more content.

In this guide, we'll implement infinite scrolling by building a card-based planet explorer. As the user scrolls, they'll discover more planets and enjoy a seamless user experience. Alongside crafting this application, we'll explore the potential performance issues infinite scrolling can present and reveal optimization strategies to mitigate them.

Curious to see what's in store? Here's a sneak peek of our final product:

You can check out the live demo here and find the complete source code on GitHub here.

Prerequisites

Before we begin, there are a few prerequisites you should have:

Basic Understanding of HTML, CSS, and JavaScript: A foundational knowledge of HTML, CSS, and JavaScript will be incredibly helpful.
React Knowledge: Since we're using React to build our application, having a grasp of its concepts and how components work will be valuable. If you're new to React, refer to the official React documentation for a quick overview.
Node.js and npm: You'll need Node.js and npm (Node Package Manager) installed on your system. If you haven't installed them, you can download and install them from the official Node.js website.
Git: Ensure you have Git installed on your machine. If not, you can download it from the Git website.

Getting Started

Before we can start building our planet explorer, we need a foundation. Fortunately, to save time on boilerplate code and focus on the goal of our project, there's a starter template in a separate branch prepared for you.

This template already contains a predefined folder structure and essential components, so we're not starting from scratch.

Cloning the Starter Template

To get your hands on the starter template, run the following commands:

git clone https://github.com/TropicolX/space-explorer-scroll.git
cd space-explorer-scroll
git checkout starter
npm install

With this, you'll have all the necessary files and dependencies installed.

Exploring the Folder Structure

Let's familiarize ourselves with the structure of our workspace:

/src: This is where the core of our project resides.
- /components: A directory for our React components.
  - /PlanetImages: Contains individual JSX files for each planet image and random ones for our infinite scroll.
  - Planet.jsx: This component will render individual planet cards.
  - Stars.jsx: To create the starry background effect.
- App.css: Main styling file for our application.
- App.jsx: The heart of our project, where we will manage our state and render the main components.
- index.css: Contains global styles.
- main.jsx: The entry point for our React app.
- utils.js: This file contains utility functions like the function for generating random colors for our planets.

Now we've set up our workspace, let's jump into crafting the main structure of our space explorer.

Building the Basic Structure

Let's get started by setting up the interface for the planet explorer. The app should contain a list of cards where each card represents a planet with an image on the left and details about the planet on the right.

To begin, launch the development server by navigating to the project directory and entering the following command:

npm run dev

We should have something similar to what we have below:

Next, let's set up our initial planets list. Add the following code to the App.jsx file:

import { useState } from "react";
import Planet from "./components/Planet";
...
function App() {
    const [planets, setPlanets] = useState(planetsInSolarSystem);

    return (
        <div className="universe">
            ...
            <div className="planets">
                {planets.map((planet) => (
                    <Planet key={planet.name} data={planet} />
                ))}
            </div>
        </div>
    );
}

export default App;

In the code above:

We initiate the planets state with an array of planet objects.
We then map through the planets array to render a list of Planet components.

With the basic structure set up, our application should display a list of planets in a card format.

Implementing Infinite Scroll using Intersection Observer

Understanding Intersection Observer

The Intersection Observer API is a powerful tool that allows you to efficiently track and respond to changes in the visibility of an element in relation to its parent container or the viewport.

In our case, we'll use it to detect when a loading spinner element comes into the viewport. When it does, this will be our cue to load more planet cards.

If you want to gain a better understanding of the Intersection Observer API, the Mozilla Developer Network (MDN) documentation is a great resource to consult.

Setting up the Observer

To set up the observer, we first need a reference to the element we want to observe. Let's add the loading spinner under our list in App.jsx:

...
<div className="planets">
    {planets.map((planet) => (
        <Planet key={planet.name} data={planet} />
    ))}
</div>
<div ref={loaderRef} className="spinner"></div>
...

Now, let's dive into the logic. Add the following code snippet:

import { useState, useEffect, useRef, useCallback } from "react";
...

function App() {
    const [planets, setPlanets] = useState(...);
    const [offset, setOffset] = useState(0);
    const loaderRef = useRef(null);

    const loadMorePlanets = useCallback(async () => {
        try {
            const response = await fetch(
                `https://planets-api-rho.vercel.app/api/planets?offset=${offset}`
            );
            const data = await response.json();
            setPlanets([...planets, ...data]);
            setOffset((previousOffset) => previousOffset + limit);
        } catch (error) {
            console.error(error);
        }
    }, [offset, planets]);

    useEffect(() => {
        const observer = new IntersectionObserver((entries) => {
            const firstEntry = entries[0];
            if (firstEntry.isIntersecting) {
                // Load more planets when the loader is visible
                loadMorePlanets();
            }
        });
        if (loaderRef.current) {
            observer.observe(loaderRef.current);
        }

        // Clean up the observer on component unmount
        return () => observer.disconnect();
    }, [loadMorePlanets]);

    return (
        ...
    );
}

Let's break down each section of the code:

State Management and Data Fetching:
- offset keeps track of the current offset for fetching more planets.
- loaderRef is used to keep a reference of the loading spinner element.
- The loadMorePlanets function is defined using the useCallback hook. This optimization ensures that the function reference remains constant across renders unless its dependencies (offset and planets) change.
- In the loadMorePlanets function, we asynchronously fetch planet data from a remote API using the fetch function. We're appending the offset parameter to paginate the data. Once we receive the data, we concatenate it with the existing planets, update the planets state, and update the offset for future pagination.
Intersection Observer for Infinite Scroll:
- Inside the useEffect hook, we create an instance of IntersectionObserver to monitor the visibility of the loading spinner. The constructor takes a callback function and invokes it whenever an observed element's intersection status changes.
- Inside the callback function, we access the entries parameter, representing an array of observed elements. We're observing just one element (our loading spinner), so we access the first entry using entries[0].
- When the loading spinner becomes visible in the viewport (isIntersecting is true), the callback function triggers the loadMorePlanets function to fetch more planets.
- After setting up the Intersection Observer, we attach it to the loaderRef.current element.
- The observer is disconnected when the component unmounts to prevent memory leaks.
- The useEffect hook has [loadMorePlanets] as its dependency, ensuring it responds to changes in the loadMorePlanets function. This dependency is essential because the loadMorePlanets function reference may change due to its dependencies.

And with that, you've implemented an infinite scroll! As users scroll down, the Intersection Observer will detect when the loader becomes visible and trigger the loadMorePlanets function.

Optimizations and Considerations

Infinite scroll, while visually pleasing and user-friendly, has some caveats. Performance issues might emerge as you keep appending items to the DOM, especially on devices with limited resources. Let's discuss how to counteract these concerns and optimize for the best performance.

Potential Performance Issues with Infinite Content Addition

Every time the user gets close to the bottom of the page, and new content is fetched and rendered, we add more nodes to the DOM. As the content grows, this could:

Increase Memory Usage: Each new DOM element takes up memory. As we infinitely append more elements, this could slow down devices, especially older ones.
Increase CPU Usage: Especially with complex layouts and CSS styles/animations. As the number of elements grows, operations like layout recalculations could take longer.

Introduction to Virtualized Lists for Performance Enhancement

One popular optimization is the use of virtualized lists (or windowing). The concept is simple: only render the items currently in view (or slightly offscreen) and recycle the DOM nodes as the user scrolls. Virtualized lists provide various benefits, such as:

Consistent Performance: By rendering only a subset of the items, memory and CPU usage remain largely constant, regardless of the list's total size.
Faster Initial Render: As the page renders fewer items initially, it can load and become interactive faster.

For React, libraries like react-window or react-virtualized provide components and hooks to enable this functionality. If you decide to dive into this territory, they are an excellent place to start!

Tools and Libraries for Further Optimization

React-query or SWR: If you're fetching data from an API, libraries like react-query or SWR can handle caching, background data fetching, and other optimizations out of the box.
React Infinite Scroll Component: To simplify the process of implementing infinite scroll, you might consider using libraries like react-infinite-scroll-component. These libraries provide pre-built components that handle much of the complexity for you. They offer features like automatic loading, loading indicators, and customizable thresholds for triggering the loading of more content.

Conclusion

In this guide, we implemented infinite scrolling within a React application. We started by crafting our planet explorer's user interface. Then, we implemented the infinite scroll feature, allowing users to discover new planets continuously.

Finally, we discussed potential pitfalls and the technical optimizations that one should consider for maintaining performance and user satisfaction.

When implemented thoughtfully, infinite scroll can significantly improve user engagement and make content consumption seamless. However, it's essential to remember that, like any tool, it's most effective when suited to the content and the user's needs.

If you found this article useful or learned something new, please consider showing your support by liking it and following me for updates on future posts.

You can also connect with me on Twitter, LinkedIn, and GitHub!

Till next time, happy coding!

Creating a Cyberpunk-Themed Music Player with React, Web Audio API, and Canvas

Oluwabusayo Jacobs — Thu, 10 Aug 2023 08:00:00 +0000

Music has always played a significant role in our lives, bringing comfort, inspiration, and motivation. Whether you're enjoying your favorite tracks or relaxing after a tiring day, music has the power to transport us to a different place and time.

As a front-end developer, I decided to put my skills and creativity to the test by bringing the beauty of music to life on the web. Combining my love for visualizations and cyberpunk aesthetics, I was inspired to create a music player that was both functional and aesthetically pleasing.

In this article, I'll take you on a journey of building a cyberpunk-themed music player using React, the Web Audio API, and Canvas. By the end of this article, you will have a solid understanding of how to:

Build a music player with standard features such as:
- Play
- Pause
- Next
- Previous
- Shuffle
- Repeat
- Volume control
Integrate the Web Audio API into your projects to enhance your applications with audio.
Create simple animated visual sketches using Canvas by adding an audio visualizer to the music player.

Here's a sneak peek at what we'll be building:

You can find the live demo of the music player here. The complete code for this project is also available on my GitHub here.

Prerequisites

Before we begin, kindly note that a basic knowledge of the following tools is required:

HTML
CSS
JavaScript
React v16.8+

Alright, with all that out of the way, let's begin!

Project Setup and Installation

Creating a new React project

Let's start by creating a new React project. To do this, run the following command in your terminal:

npx create-react-app cyberpunk-music-player

This will create a new React project in a folder named cyberpunk-music-player.

Installing required dependency

The only dependency needed for this project is react-bootstrap-icons. To install this library, navigate to the project directory and run the following command:

cd cyberpunk-music-player
npm i react-bootstrap-icons

We'll be using react-bootstrap-icons to incorporate icons into the UI of the project.

Setting the basis of the app

With the project setup and dependencies installed, it's time to configure the project structure. Navigate to the project directory and run the following command:

npm start

This starts our development server and lets us run our React app in real-time. We should have something similar to what we have below:

Next, let's delete all the files in the src directory, then create two new directories within the src folder:

components - This will store all our React components
styles - This is where we'll keep our application's CSS files.

Next, navigate to the src folder and create a new index.js file with the following code:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

This sets up the entry point for our application and prepares our app for rendering.

Next, create a new App.js file and add the following code:

import React from "react";

const songs = [
    {
        id: 0,
        title: "Machinery of War",
        artist: "Evgeny Bardyuzha",
        image: "https://res.cloudinary.com/tropicolx/image/upload/v1675352152/music_app/machinery-of-war_fqu8z6.jpg",
        src: "https://res.cloudinary.com/tropicolx/video/upload/v1675218409/music_app/Evgeny_Bardyuzha_-_Machinery_of_War_fyaroh.mp3",
    },
    {
        id: 1,
        title: "Nova",
        artist: "2050",
        image: "https://res.cloudinary.com/tropicolx/image/upload/v1675351835/music_app/song-2_ljg2wd.jpg",
        src: "https://res.cloudinary.com/tropicolx/video/upload/v1675218406/music_app/2050_-_Nova_jp2ila.mp3",
    },
    {
        id: 2,
        title: "Medusa",
        artist: "Kryptos",
        image: "https://res.cloudinary.com/tropicolx/image/upload/v1675351585/music_app/song-3_ppgsaf.jpg",
        src: "https://res.cloudinary.com/tropicolx/video/upload/v1675218402/music_app/Kryptos_-_Medusa_yyj3nc.mp3",
    },
    {
        id: 3,
        title: "Artificial Intelligence",
        artist: "Lance Conrad",
        image: "https://res.cloudinary.com/tropicolx/image/upload/v1675351701/music_app/song-4_yaqewe.jpg",
        src: "https://res.cloudinary.com/tropicolx/video/upload/v1675218398/music_app/Lance_Conrad_-_Artificial_Intelligence_ioozhh.mp3",
    },
];

function App() {
    return (
        <></>
    )
}

export default App;

The App component returns an empty JSX Element for now, but soon it will be the driving force behind our music player. In the meantime, let's take a closer look at the songs constant. This constant holds all the information we need for each piece in our music player. As you can see, each object in the array represents a single song with its unique id, title, artist, image, and src (the source URL of the actual audio file).

The audio files themselves are hosted on Cloudinary. They were sourced from Artlist.io, a platform that provides tracks for creative projects. You can find and host the audio files with these platforms, but covering that process will complicate this guide. So, for now, we hard-coded the data in songs.

Before building the components, let's create an index.css file in the src folder for the global styles used throughout the app. Here is some code to get us started:

@import url("https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@500&family=Barlow&family=Chakra+Petch:wght@600&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #ffee08;
    --caption-color: rgba(255, 238, 8, 0.48);
    --background-color: #030816;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button {
    position: relative;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
}

.app {
    background: var(--background-color);
    height: 100svh;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.layout {
    max-width: 24.375rem;
    padding: 2.5rem 0;
}

@media only screen and (min-width: 768px) {
    .app {
        align-items: center;
    }

    .layout {
        border: 2px solid var(--primary-color);
        padding: 2.5rem;
    }
}

@media only screen and (max-height: 640px) {
    .app {
        align-items: center;
    }
}

This sets up a clean and stylish base for our music player app.

Building the User Interface

Let's take a moment to determine which components we want to split our application into. Breaking down the app into smaller pieces helps to keep our code organized and easy to maintain.

Here are the components we'll be building:

SongImage - This showcases the song's image. It also features an SVG frame that serves as a visual highlight for the image.
Visualizer - This uses canvas to generate a cool visual representation of the music as it plays.
SongDetails - This contains all the essential details about the song. This component includes:
- Song image (displayed through the SongImage component)
- Song title
- Song artist
- Song visualizer (provided by the Visualizer component)
Volume - This is where users can adjust the volume of the music. It includes a volume button and a pop-up volume bar.
ExtraControls - This is a container for the Volume component and the Visualizer toggle button.
Progress - This displays a progress bar representing the song's current play head position. The progress bar also doubles as a seeker, allowing the user to jump to any point in the music. This component also contains the song's elapsed time and total duration.
PlayerControls - This houses the main controls for the music player. It consists of the following buttons:
- play - to play the song
- pause - to pause the song
- next - to go to the next song
- previous - to go to the previous song
- shuffle - to shuffle the songs
- repeat - to repeat the song

With these components in mind, let's head to the components directory and build our components individually.

SongImage.jsx

// components/SongImage.jsx
import React, { useState, useEffect, useRef } from "react";

const SongImage = ({ url }) => {
    const [imageLoaded, setImageLoaded] = useState(false);
    const imageRef = useRef(null);

    useEffect(() => {
        setImageLoaded(false);
        if (!imageRef.current) return;
        imageRef.current.setAttribute("href", url);
        imageRef.current.onload = () => setImageLoaded(true);
    }, [imageRef, url]);

    return (
        <svg
            width="310"
            height="267"
            viewBox="0 0 310 267"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
        >
            <g clipPath="url(#clip0_254_11)">
                <path
                    d="M273.651 266.399L309.429 229.84C309.795 229.466 310 228.964 310 228.441V2.34701C310 1.2434 309.106 0.348373 308.002 0.34701L27.6036 0.000835899C27.1645 0.000293745 26.7374 0.144299 26.3882 0.410626L0.787054 19.9381C0.291064 20.3164 0 20.9045 0 21.5283V265C0 266.105 0.895431 267 2 267H40.735H272.221C272.759 267 273.274 266.783 273.651 266.399Z"
                    fill="url(#pattern0)"
                    stroke="#FFEE08"
                    strokeWidth="2"
                />
                <line
                    x1="17"
                    y1="1"
                    x2="1"
                    y2="1"
                    stroke="#FFEE08"
                    strokeWidth="2"
                    strokeLinecap="square"
                />
                <line
                    x1="0.285156"
                    y1="12"
                    x2="0.285157"
                    y2="1"
                    stroke="#FFEE08"
                    strokeWidth="2"
                    strokeLinecap="square"
                />
                <path
                    d="M295.817 266.915C295.655 267.079 295.441 267.182 295.211 267.206L284.743 268.315C283.813 268.413 283.269 267.296 283.92 266.624L309.712 240.013C310.363 239.341 311.498 239.851 311.427 240.784L310.603 251.633C310.585 251.87 310.484 252.092 310.317 252.261L295.817 266.915Z"
                    fill="#FFEE08"
                />
            </g>
            <defs>
                <pattern
                    id="pattern0"
                    patternContentUnits="objectBoundingBox"
                    width="1"
                    height="1"
                >
                    <use
                        xlinkHref={
                            imageLoaded ? "#image0_254_11" : "#image0_254_12"
                        }
                        transform="matrix(0.000390625 0 0 0.000453535 0 -0.0805243)"
                    />
                </pattern>
                <clipPath id="clip0_254_11">
                    <rect width="310" height="267" fill="white" />
                </clipPath>
                <image
                    id="image0_254_11"
                    width="2560"
                    height="2560"
                    ref={imageRef}
                    opacity={imageLoaded ? "1" : "0"}
                    className="songDetails__image"
                    attributeName="song image"
                />
                <image
                    id="image0_254_12"
                    width="2560"
                    height="2560"
                    xlinkHref="https://res.cloudinary.com/tropicolx/image/upload/v1675211310/music_app/default-song-image_tmekey.svg"
                    attributeName="default song image"
                />
            </defs>
        </svg>
    );
};

export default SongImage;

This component takes the song image url as its prop and displays it as an SVG image element. The useRef hook is used to store a reference to the song image.

The component also defines a second image element used as a placeholder. The two image Elements are switched based on the loading status of the song image. The useState and useEffect hooks manage the song image's loading state.

The SVG elements around the images act as a frame to add flair to the song image.

Okay, now we have our SongImage component ready, let's move on to the next piece.

SongDetails.jsx

// components/SongDetails.jsx
import React from "react";
import SongImage from "./SongImage";
import "../styles/SongDetails.css";

const SongDetails = ({ song }) => {
    return (
        <div className="songDetails">
            <div className="songDetails__imageContainer">
                <SongImage url={song.image} />
            </div>
            <div className="songDetails__info">
                <h3 className="songDetails__songName">{song.title}</h3>
                <h4 className="songDetails__artistName">{song.artist}</h4>
            </div>
        </div>
    );
};

export default SongDetails;

The SongDetails component uses a song prop to render the song title, song artist, and SongImage we created earlier. The rendered contents are then wrapped in div elements with appropriate class names for styling purposes.

Next, let's head to the styles folder and create a new file named SongDetails.css. Add the following CSS code:

.songDetails,
.songDetails__info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.songDetails__info {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    margin-top: 1.625rem;
}

.songDetails__image {
    transition: opacity 0.25s ease-in;
}

.songDetails__artistName,
.songDetails__songName {
    text-align: center;
}

.songDetails__songName {
    font-family: "Chakra Petch";
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.9375rem;
    color: var(--primary-color);
}

.songDetails__artistName {
    margin-top: 0.375rem;
    font-family: "Barlow";
    font-weight: 400;
    font-size: 1rem;
    line-height: 1rem;
    letter-spacing: 0.1em;
    color: var(--caption-color);
}

This styles the layout and appearance of the SongDetails and SongImage components.

Volume.jsx

// components/Volume.jsx
import React, { useEffect, useRef, useState } from "react";

import "../styles/Volume.css";

const useOnClickOutside = (ref, handler) => {
    useEffect(() => {
        const listener = (event) => {
            if (!ref.current || ref.current.contains(event.target)) {
                return;
            }
            handler(event);
        };

        document.addEventListener("mousedown", listener);
        document.addEventListener("touchstart", listener);

        return () => {
            document.removeEventListener("mousedown", listener);
            document.removeEventListener("touchstart", listener);
        };
    }, [ref, handler]);
};

const Volume = ({ value, onChange }) => {
    const [isOpen, setIsOpen] = useState(false);

    const divRef = useRef(null);
    useOnClickOutside(divRef, () => setIsOpen(false));

    const toggleIsOpen = () => {
        setIsOpen((prev) => !prev);
    };

    const getVolumeSvg = (volume) => {
        if (volume === 0) {
            return (
                <svg
                    width={30}
                    height={30}
                    viewBox="0 0 30 29"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                        d="M12.5985 6.09254C12.9233 6.24865 13.1299 6.57713 13.1299 6.93751V21.9375C13.1299 22.2979 12.9233 22.6264 12.5985 22.7825C12.2737 22.9386 11.8881 22.8947 11.6067 22.6696L7.17603 19.125H2.81738C2.29962 19.125 1.87988 18.7053 1.87988 18.1875V10.6875C1.87988 10.1697 2.29962 9.75001 2.81738 9.75001H7.17603L11.6067 6.20544C11.8881 5.98032 12.2737 5.93642 12.5985 6.09254ZM11.2549 8.88809L8.09053 11.4196C7.9243 11.5526 7.71776 11.625 7.50488 11.625H3.75488V17.25H7.50488C7.71776 17.25 7.9243 17.3225 8.09053 17.4554L11.2549 19.9869V8.88809Z"
                        fill="#FFEE08"
                    />
                </svg>
            );
        } else if (volume < 53) {
            return (
                <svg
                    width={30}
                    height={30}
                    viewBox="0 0 30 30"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                        d="M13.1299 7.50001C13.1299 7.13963 12.9233 6.81115 12.5985 6.65504C12.2737 6.49892 11.8881 6.54282 11.6067 6.76794L7.17603 10.3125H2.81738C2.29962 10.3125 1.87988 10.7322 1.87988 11.25V18.75C1.87988 19.2678 2.29962 19.6875 2.81738 19.6875H7.17603L11.6067 23.2321C11.8881 23.4572 12.2737 23.5011 12.5985 23.345C12.9233 23.1889 13.1299 22.8604 13.1299 22.5V7.50001ZM8.09053 11.9821L11.2549 9.45059V20.5494L8.09053 18.0179C7.9243 17.885 7.71776 17.8125 7.50488 17.8125H3.75488V12.1875H7.50488C7.71776 12.1875 7.9243 12.1151 8.09053 11.9821Z"
                        fill="#FFEE08"
                    />
                    <path
                        d="M18.802 15C18.802 17.3299 17.8576 19.4393 16.3307 20.9662L15.0049 19.6403C16.1925 18.4528 16.927 16.8121 16.927 15C16.927 13.1878 16.1925 11.5471 15.0049 10.3596L16.3307 9.03374C17.8576 10.5606 18.802 12.67 18.802 15Z"
                        fill="#FFEE08"
                    />
                </svg>
            );
        }
        return (
            <svg
                xmlns="http://www.w3.org/2000/svg"
                width={30}
                height={30}
                fill="none"
            >
                <path
                    d="M21.629 26.27c2.884-2.884 4.668-6.869 4.668-11.27s-1.784-8.385-4.668-11.269l-1.326 1.326c2.545 2.545 4.119 6.06 4.119 9.944s-1.574 7.399-4.119 9.944l1.326 1.326z"
                    fill="#fff"
                    fillOpacity={0}
                />
                <path
                    d="M18.978 23.618A12.15 12.15 0 0 0 22.547 15a12.15 12.15 0 0 0-3.57-8.618l-1.326 1.326A10.28 10.28 0 0 1 20.672 15a10.28 10.28 0 0 1-3.021 7.292l1.326 1.326zM18.797 15a8.41 8.41 0 0 1-2.471 5.966L15 19.64A6.54 6.54 0 0 0 16.922 15 6.54 6.54 0 0 0 15 10.36l1.326-1.326A8.41 8.41 0 0 1 18.797 15zm-5.672-7.5a.94.94 0 0 0-1.523-.732l-4.431 3.545H2.813a.94.94 0 0 0-.937.938v7.5a.94.94 0 0 0 .938.938h4.359l4.431 3.545a.94.94 0 0 0 1.523-.732v-15zm-5.039 4.482L11.25 9.45v11.099l-3.164-2.531c-.166-.133-.373-.205-.586-.205H3.75v-5.625H7.5a.94.94 0 0 0 .586-.205z"
                    fill="#ffee08"
                />
            </svg>
        );
    };

    return (
        <div ref={divRef} className="volumeContainer">
            <button onClick={toggleIsOpen} tabIndex={0} aria-label="Volume">
                <div className="volume__icon">{getVolumeSvg(value)}</div>
            </button>
            {isOpen && (
                <div className="volume">
                    <div className="volume__sliderContainer">
                        <input
                            type="range"
                            aria-label="Volume slider"
                            value={value}
                            min="0"
                            max="100"
                            className="volume__slider"
                            onChange={onChange}
                        />
                        <svg
                            width={54}
                            height={150}
                            viewBox="0 0 54 150"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                                d="M5.09434 111H0.999996V149H53V1H12.6352L6.82795 6.69967L0.999996 12.8964V82H5.09434H6.09434V83V110V111H5.09434Z"
                                fill="#040C1F"
                                stroke="#FFEE08"
                                strokeWidth={2}
                            />
                        </svg>
                    </div>
                </div>
            )}
        </div>
    );
};

export default Volume;

First, we defined a custom hook useOnClickOutside, that listens for clicks outside an element and executes a handler function if the click did not occur within the element.

Next, we defined our component function. It accepts two props:

value - the current volume level
onChange - the function that changes the volume level when a user drags or clicks the volume slider

The component uses a useRef hook to store a reference to the volume container. The reference value is then passed to the onClickOutside hook, which closes the volume slider when a user clicks outside its container.

The component uses a useState hook to monitor the volume slider's open/closed state and a button to toggle it, with a volume icon that adjusts based on the value prop.

Now, let's style this component. Head over to the styles folder and create a Volume.css file. Add the following code:

 .volumeContainer {
    position: relative;
}

.volume {
    position: absolute;
    top: -10.375rem;
    left: -0.75rem;
}

.volume__sliderContainer {
    width: 3.375rem;
    height: 9.375rem;
}

.volume__icon {
    cursor: pointer;
    width: 1.875rem;
    height: 1.875rem;
}

.volume__iconBlocker {
    position: absolute;
    top: 0;
    left: 0;
    width: 1.875rem;
    height: 1.875rem;
    background-color: transparent;
    cursor: pointer;
}

.volume__slider {
    -webkit-appearance: none;
    appearance: none;
    transform: rotate(-90deg);
    position: absolute;
    top: 4.375rem;
    left: -2.5rem;
    background: transparent;
    border: 2px solid var(--primary-color);
    width: 8.5rem;
    height: 0.5rem;
}

.volume__slider:focus {
    outline: none;
}

.volume__slider:focus::-webkit-slider-thumb {
    outline: 2px solid var(--primary-color);
}

.volume__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.0625rem;
    height: 1.6875rem;
    outline: 2px solid var(--primary-color);
    border-radius: 0.3125rem;
    background: #f8ef00;
    cursor: pointer;
    position: relative;
}

We made user-friendly adjustments for easy volume control, including a clickable icon, styled slider, and convenient positioning.

ExtraControls.jsx

// components/ExtraControls.jsx
import React from "react";

const ExtraControls = ({ children }) => {
    return <div className="extraControls">{children}</div>;
};

export default ExtraControls;

This will be the wrapper for the Volume component and the Visualizer toggle button.

Now, let's head over to the index.css file in the src directory and add the following code to style the component:

...
.layout {
    ...
}

.extraControls {
    margin-top: 2.625rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media only screen and (min-width: 768px) {
    ...
}
...

We added some margin above the extra controls container to space it from the SongDetails component. We also added some styles to center the controls and display them at the edges of the container.

Progress.jsx

// components/Progress.jsx
import React from "react";

import "../styles/Progress.css";

const Progress = ({
    value,
    onChange,
    progressSeekStart,
    progressSeekEnd,
    timeElapsed,
    songLength,
}) => {
    return (
        <div className="progress">
            <input
                type="range"
                aria-label="Progress slider"
                value={value}
                min="0"
                max="100"
                className="progress__slider"
                onChange={onChange}
                style={{
                    background: `linear-gradient(90deg, var(--primary-color) ${Math.ceil(
                        value
                    )}%, transparent ${Math.ceil(value)}%)`,
                }}
                onTouchStart={progressSeekStart}
                onMouseDown={progressSeekStart}
                onTouchEnd={progressSeekEnd}
                onClick={progressSeekEnd}
            />
            <div className="progress__time">
                <span className="progress__timeElapsed">{timeElapsed}</span>
                <span className="progress__timeLength">{songLength}</span>
            </div>
        </div>
    );
};

export default Progress;

This component accepts the following props:

value - the song's current position
onChange - the function that is called when the progress bar is changed
progressSeekStart - the function called when the progress bar is touched or pressed
progressSeekEnd - the function called when the progress bar is released or clicked
timeElapsed - the time elapsed for the current song
songLength - the length of the current song

We returned a div that contains an input with a range type to display the progress slider. The value of this input is set to the value prop. We also set the minimum value to 0 and the maximum value to 100.

We gave the input some attributes set to either progressSeekStart or progressSeekEnd to control the user's interaction with the slider.

The background of the input is set to a linear gradient with the primary color on the left side and a transparent right side. The gradient is set to the value passed in from the props, with Math.ceil() used to ensure there is no decimal point.

Finally, we added a div inside the progress bar container to display the time elapsed and the song's length.

Next, let's go to the styles folder and create a Progress.css file. Add the following code:

.progress {
    margin-top: 2.625rem;
}

.progress__slider {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 2px solid rgba(255, 238, 8, 0.5);
    width: 100%;
    height: 0.5rem;
}

.progress__slider:focus {
    outline: none;
}

.progress__slider:focus::-webkit-slider-thumb {
    outline: 2px solid var(--primary-color);
}

.progress__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0.875rem;
    height: 0.875rem;
    outline: 2px solid var(--primary-color);
    background: #f8ef00;
    cursor: pointer;
    position: relative;
}

.progress__slider::-moz-range-thumb {
    width: 0.875rem;
    height: 0.875rem;
    outline: 2px solid var(--primary-color);
    background: #f8ef00;
    cursor: pointer;
    position: relative;
}

.progress__time {
    margin-top: 0.625rem;
    font-family: "Bai Jamjuree";
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 0.9375rem;
    color: var(--primary-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

We customized the slider and improved the progress time styling for a cyberpunk theme. We also added a margin to separate the component and container.

PlayerControls.jsx

// components/PlayerControls.jsx
import React from "react";
import {
    PauseCircle,
    PlayCircle,
    Repeat,
    Repeat1,
    Shuffle,
    SkipEnd,
    SkipStart,
} from "react-bootstrap-icons";

import "../styles/PlayerControls.css";

const PlayerControls = ({
    isPlaying,
    toggleIsPlaying,
    prev,
    next,
    repeat,
    toggleRepeat,
    shuffle,
    toggleShuffle,
}) => {
    const centerControlSize = 47;
    const sideControlSize = 25;
    const color = "var(--primary-color)";

    return (
        <div className="playerControls">
            <button
                aria-label={shuffle ? "Disable shuffle" : "Enable shuffle"}
                className="shuffle"
                onClick={toggleShuffle}
            >
                <Shuffle color={color} size={sideControlSize} />
                {shuffle && <div className="dot" />}
            </button>
            <div className="playerControls__main">
                <button aria-label="Previous" onClick={prev}>
                    <SkipStart color={color} size={centerControlSize} />
                </button>
                <button
                    aria-label={isPlaying ? "Pause" : "Play"}
                    onClick={toggleIsPlaying}
                >
                    {!isPlaying && (
                        <PlayCircle color={color} size={centerControlSize} />
                    )}
                    {isPlaying && (
                        <PauseCircle color={color} size={centerControlSize} />
                    )}
                </button>
                <button aria-label="Next" onClick={next}>
                    <SkipEnd color={color} size={centerControlSize} />
                </button>
            </div>
            <button
                aria-label={repeat ? "Disable repeat" : "Enable repeat"}
                onClick={toggleRepeat}
            >
                {!repeat && <Repeat color={color} size={sideControlSize} />}
                {repeat && (
                    <>
                        <Repeat1 color={color} size={sideControlSize} />
                        <div className="dot" />
                    </>
                )}
            </button>
        </div>
    );
};

export default PlayerControls;

This component accepts the following props:

isPlaying - a boolean that indicates whether the song is currently playing or not
toggleIsPlaying - a callback function that toggles the isPlaying state.
prev - a function that plays the previous song
next - a function that plays the next song
repeat - a boolean that indicates whether repeat is enabled or not
toggleRepeat - a function that toggles the repeat state
shuffle - a boolean that indicates whether shuffle is enabled or not
toggleShuffle - a function that toggles the shuffle state

We created constants for the size and color of the button icons.

Next, we added the player control buttons and containers and the appropriate attributes to each button.

The button labels make the values assigned to each button attribute and their respective icons straightforward and intuitive.

The repeat and shuffle buttons contain a dot under their icons that will be shown only if their respective states are true.

Let's head over to the styles folder and create a PlayerControls.css file. Add the following code:

.playerControls {
    margin-top: 2.8125rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.playerControls__main {
    display: flex;
    align-items: center;
}

.playerControls__main > :not(:first-child) {
    margin-left: 1.4375rem;
}

.shuffle .dot {
    left: 0.5625rem;
}

These styles make a layout for the player control buttons and their icons.

Now, let's head over to our index.css file in the src directory and add the following styles for our dot elements:

...
.extraControls {
    ...
}

.dot {
    position: absolute;
    bottom: -2px;
    left: 0.675rem;
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 50%;
    background-color: var(--primary-color);
}

@media only screen and (min-width: 768px) {
    ...
}
...

Visualizer.jsx

// components/Visualizer.jsx
import React from "react";

const Visualizer = () => {
    return <div id="canvasWrapper" />;
};

export default Visualizer;

This component returns a div with an id of canvasWrapper. We'll be using this wrapper to hold our canvas element that will be used to generate a visual representation of the music as it plays.

We're not configuring the actual visualizer functionality in this component just yet. We'll do that later in the article, using the canvas API to draw our visualizer onto a canvas element.

For now, let's add an outline for the canvas. Head to the index.css file and add the following code:

...
.dot {
    ...
}

#canvasWrapper canvas {
    outline: 2px solid var(--primary-color);
}

@media only screen and (min-width: 768px) {
    ...
}
...

Putting all the pieces together

So far, we've built all the main components for our app. Now it's time to put all our components together and integrate the logic of our music player.

The Web Audio API

Before diving into the code, let's take a moment to discuss the primary tool we'll be utilizing for audio - the Web Audio API.

The Web Audio API is a high-level JavaScript API for processing and synthesizing audio in web applications. It provides a simple and powerful way to add sound to web applications. It also offers various features, such as creating sound nodes, controlling volume, filtering, and even synthesizing sound from scratch.

With the Web Audio API, we can add audio to our application by simply creating an HTML audio element, a native HTML element for embedding audio into a page.

The Web Audio API also provides an AudioContext object. Think of AudioContext as a command center or a workshop where all the sound activities on a web page occur.

Now, within this 'workshop', there's a special tool called the AnalyserNode. It lets us take a closer look at the audio and pull out detailed information about it. Why is this useful? We want to create cool visual effects based on the beat or rhythm of whatever song is currently playing; the AnalyserNode helps us do just that by giving us the data we need for such visualizations.

Feel free to refer to the official documentation to learn more about the Web Audio API.

Creating the Audio Element

We've introduced the Web Audio API and discussed how it provides various features for controlling and manipulating audio. Let's dive into the code and integrate the audio element into our React app!

In the App.js file, add the following code:

import React, { useEffect, useRef, useState } from "react";

const songs = [
    ...
];

function App() {
    const audioRef = useRef();
    const [playlist, setPlaylist] = useState(songs);
    const [currentSongIndex, setCurrentSongIndex] = useState(0);
    const [progress, setProgress] = useState(0);
    const [dragging, setDragging] = useState(false);
    const [timeElapsed, setTimeElapsed] = useState(0);
    const [songLength, setSongLength] = useState(0);
    const [songFinished, setSongFinished] = useState(false);
    const [repeat, setRepeat] = useState(false);

    const setTimeUpdate = () => {
        const audio = audioRef.current;
        const currentTime = audio.currentTime;
        const progress = currentTime
            ? Number(((currentTime * 100) / audio.duration).toFixed(1))
            : 0;
        setTimeElapsed(currentTime);
        !dragging && setProgress(progress);
    };

    const setLoadedData = async () => {
        const audio = audioRef.current;
        setTimeElapsed(audio.currentTime);
        setSongLength(audio.duration);
    };

    useEffect(() => {
        if (songFinished) {
            if (!repeat) next();
            setSongFinished(false);
        }
    }, [songFinished]);

    return (
        <div className="app">
            <audio
                src={playlist[currentSongIndex].src}
                ref={audioRef}
                onTimeUpdate={setTimeUpdate}
                onLoadedData={setLoadedData}
                onEnded={() => setSongFinished(true)}
                loop={repeat}
                crossOrigin="anonymous"
            ></audio>
        </div>
    );
}

export default App;

We set up several states using useState to manage the current song, song progress, time elapsed, song length, repeat mode, and whether the song is finished. We then created a reference to the audio element using the useRef hook and assigned it to the audioRef variable.

Next, we set up some event listeners for the audio element using the onTimeUpdate, onLoadedData, and onEnded properties.

The setTimeUpdate function updates the time elapsed and song progress based on the current time of the audio. The setLoadedData function updates the song length when the audio data is loaded. The onEnded event handler sets the songFinished state to true when the audio has ended.

We used the useEffect hook to listen to the songFinished state. When the song is finished and the repeat mode is off, the next function (which we will define later) is called to play the next song.

Finally, we render the audio element with the properties defined in the code, including the source of the audio, the reference created with the useRef hook, and the event listeners.

Implementing the Structure and Main Functionalities

In this section, we'll implement the structure and main functionalities of the music player. Add the following code in the App.js file:

import React, { useEffect, useRef, useState } from "react";
import { Soundwave } from "react-bootstrap-icons";

import ExtraControls from "./components/ExtraControls";
import PlayerControls from "./components/PlayerControls";
import Progress from "./components/Progress";
import SongDetails from "./components/SongDetails";
import Volume from "./components/Volume";

const songs = [
    ...
];

function App() {
    ...
    return (
        <div className="app">
            ...
            <div className="layout">
                <SongDetails
                    song={playlist[currentSongIndex]}
                />
                <ExtraControls>
                    <Volume
                        value={volume * 100}
                        onChange={(e) =>
                            setVolume(Number(e.target.value) / 100)
                        }
                    />
                    <button
                        aria-label={
                            visualizer
                                ? "Disable visualizer"
                                : "Enable visualizer"
                        }
                        onClick={() => setVisualizer((prev) => !prev)}
                    >
                        <Soundwave color="var(--primary-color)" size={25} />
                        {visualizer && <div className="dot" />}
                    </button>
                </ExtraControls>
                <Progress
                    value={progress}
                    onChange={(e) => {
                        setProgress(Number(e.target.value));
                    }}
                    progressSeekStart={() => setDragging(true)}
                    progressSeekEnd={progressSeekEnd}
                    timeElapsed={formatTime(timeElapsed)}
                    songLength={formatTime(songLength)}
                />
                <PlayerControls
                    next={next}
                    prev={prev}
                    isPlaying={isPlaying}
                    toggleIsPlaying={() =>
                        setIsPlaying((isPlaying) => !isPlaying)
                    }
                    shuffle={shuffle}
                    toggleShuffle={() => setShuffle((shuffle) => !shuffle)}
                    repeat={repeat}
                    toggleRepeat={() => setRepeat((repeat) => !repeat)}
                />
            </div>
        </div>
    );
}

export default App;

This code implements the overall structure of the music player using the components we've already created. Note how we've added the Volume component and visualizer toggle-button within the ExtraControls component as intended.

Next, let's add the functionality to these components to make the music player work as expected:

...
function App() {
    ...
    const [isPlaying, setIsPlaying] = useState(false);
    const [volume, setVolume] = useState(0.7);
    const [visualizer, setVisualizer] = useState(false);
    const [shuffle, setShuffle] = useState(false);
    const [shuffledPlaylist, setShuffledPlaylist] = useState(songs);

    ...
    const setLoadedData = async () => {
        ...
    };

    const playSong = async () => {
        await analyser.context.resume();
        setIsPlaying(true);
        await audioRef.current.play();
    };

    const shufflePlaylist = () => {
        setShuffledPlaylist((playlist) => {
            if (playlist.length === 1) return playlist;

            const newPlaylist = playlist.filter(
                (song) => song.id !== playlist[currentSongIndex].id
            );

            let shuffledPlaylist = newPlaylist.sort(() => Math.random() - 0.5);

            shuffledPlaylist = [
                playlist[currentSongIndex],
                ...shuffledPlaylist,
            ];
            return shuffledPlaylist;
        });
    };

    const next = () => {
        const currentSongId = playlist[currentSongIndex].id;
        const newPlaylist = shuffle ? shuffledPlaylist : songs;
        setPlaylist(newPlaylist);
        setCurrentSongIndex(() => {
            const currentSongIndex = newPlaylist.findIndex(
                (song) => song.id === currentSongId
            );
            const nextIndex = currentSongIndex + 1;
            const newIndex = nextIndex > newPlaylist.length - 1 ? 0 : nextIndex;
            return newIndex;
        });
        playSong();
    };

    const prev = () => {
        const currentSongId = playlist[currentSongIndex].id;
        const newPlaylist = shuffle ? shuffledPlaylist : songs;
        setPlaylist(newPlaylist);
        setCurrentSongIndex(() => {
            const currentSongIndex = newPlaylist.findIndex(
                (song) => song.id === currentSongId
            );
            const prevIndex = currentSongIndex - 1;
            const newIndex = prevIndex < 0 ? newPlaylist.length - 1 : prevIndex;
            return newIndex;
        });
        playSong();
    };

    const updateCurrentTime = (value) => {
        const audio = audioRef.current;
        const currentTime = (value * audio.duration) / 100;
        audio.currentTime = currentTime;
    };

    const progressSeekEnd = (e) => {
        updateCurrentTime(e.target.value);
        setDragging(false);
    };

    const formatTime = (time) => {
        const minutes = Math.floor(time / 60);
        const seconds = Math.floor(time - minutes * 60);
        return `${minutes}:${seconds < 10 ? "0" + seconds : seconds}`;
    };

    useEffect(() => {
        audioRef.current.volume = volume;
    }, [volume]);

    useEffect(() => {
        const playOrPause = async () => {
            if (isPlaying) {
                await analyser?.context?.resume();
                await audioRef.current.play();
            } else {
                audioRef.current.pause();
            }
        };

        playOrPause();
    }, [isPlaying, analyser?.context]);

    useEffect(() => {
        if (shuffle) shufflePlaylist();
    }, [shuffle]);

    useEffect(() => {
        ...
    }, [songFinished]);

    return (
        ...
    );
}

export default App;

We created the useState variables for the remaining states we need in our music player. We also added a function shufflePlaylist that shuffles the songs in our playlist. It uses the setShuffledPlaylist function to update the state of the shuffled playlist. If the shuffle state is true, the function will sort the songs randomly in the playlist.

The next and prev functions perform the following actions:

Update the current playlist to either the shuffledPlaylist or the songs constant depending on whether the shuffle state is true or false.
Use the setCurrentSongIndex function to update the current song's index in the new playlist.
Use the playSong function to start playing the previous or next song.

The updateCurrentTime function updates the current time of the song being played. It takes in a progress value and uses that to calculate the current time of the song based on its duration. The progressSeekEnd function is used to seek a specific time in the song by updating the value of the current time.

The formatTime function is used to format the time of the current song into a string of minutes and seconds.

We also see the use of useEffect hooks, which are used to update the state of our music player in response to changes in its properties. For example, we used useEffect to update the volume of the song being played, control the play and pause functionality of the music player, and shuffle the playlist when the shuffle state was set to true.

Integrating the Visualizer

Configuring the Audio Analyser

In this section, we will create and configure an audio analyzer. We'll use this to analyze the audio in our application and use the data obtained to configure our Visualizer component.

Let's go to our App.js file and add the following code:

...
const songs = [
    ...
];

class AudioAnalyser {
    constructor(audioElement) {
        this.context = new (window.AudioContext || window.webkitAudioContext)();
        this.source = this.context.createMediaElementSource(audioElement);
        this.analyserNode = this.context.createAnalyser();
        this.source.connect(this.analyserNode);
        this.analyserNode.connect(this.context.destination);
    }
}

function App() {
    ...
    const [analyser, setAnalyser] = useState(null);
    ...
    const setTimeUpdate = () => {
        ...
    };

    const setLoadedData = async () => {
        const audio = audioRef.current;
        !analyser && setAnalyser(new AudioAnalyser(audio));
        setTimeElapsed(audio.currentTime);
        setSongLength(audio.duration);
    };

    const playSong = async () => {
        ...
    };
    ...
    return (
        <div className="app">
            ...
            <div className="layout">
               <SongDetails
                    visualizer={visualizer}
                    source={analyser?.source}
                    analyser={analyser?.analyserNode}
                    currentSongIndex={currentSongIndex}
                    song={playlist[currentSongIndex]}
                />
                ...
            </div>
        </div>
    )
}

export default App;

First, we defined the AudioAnalyser class. This class sets the foundation for processing and visualizing audio data from our audio element. When a new instance of AudioAnalyser is created, it expects an audioElement (like an HTML <audio> tag) to be passed to it. This element is the source of our music or sound.

Inside the constructor, we do the following:

Set up AudioContext: We're initializing this.context. It's the main hub of the Web Audio API, an interface that lets us control, process, and analyze audio in the browser. We also account for potential browser compatibility issues by using window.webkitAudioContext as a fallback.
Creating Nodes: In the Web Audio API, "nodes" are building blocks that handle audio processing tasks. We initialize our first node this.source, which represents the audio source in our audio processing graph. Next, we initialize this.analyserNode, allowing us to extract frequency and timing information from our audio source. This is crucial for our visualizer.
Connecting Nodes: Here, we're defining the flow of our audio signal. First, we connect our audio source to the analyzer. Then, the analyzer connects to the audio context's destination (typically the device's speakers or headphones). This ensures that while we're analyzing the audio data, the audio also plays through the device's output.

Next, we modified the setLoadedData function to set the analyser to a new AudioAnalyser object if it is initially null, before setting the time elapsed and song length.

In the return statement of the App, we passed the analyser, source, and analyserNode properties of the AudioAnalyser object to the SongDetails component, which we'll work on later.

The Canvas API

Using the AudioAnalyser class, we've learned how to analyze audio data from an audio source. Now, we can use this data to configure our Visualizer component. To do this, we will use the canvas API.

The canvas API is a powerful tool that enables us to create and manipulate graphics on a web page. With this API, we can create custom graphics, animations, and even games.

In the context of our music player, we can use the canvas API to enable the visualizer component to display the audio data in real time. This component will allow users to see an audio waveform as it plays and provide a more engaging and interactive experience.

We can refer to the Mozilla Developer Network (MDN) documentation to get started with the canvas API.

The MDN documentation provides a comprehensive guide to the canvas element, including its properties, methods, and examples. It's an excellent resource for learning more about creating and manipulating graphics on a web page.

Creating the Visualizer component

Let's head over to the Visualizer.jsx file in our components directory. Add the following code:

import React, { useEffect } from "react";

let width = 310;
let height = 267;

const Visualizer = ({ analyser, source, currentSongIndex }) => {
    useEffect(() => {
        if (!analyser || !source) return;
        const container = document.querySelector("#canvasWrapper");
        const oldCanvas = document.querySelector("#canvasWrapper canvas");
        if (oldCanvas) oldCanvas.remove();

        let canvas = document.createElement("canvas");
        canvas.width = width;
        canvas.height = height;
        container?.appendChild(canvas);

        let ctx = canvas?.getContext("2d");

        analyser.fftSize = 256;

        let bufferLength = analyser.frequencyBinCount;

        let dataArray = new Uint8Array(bufferLength);

        let barWidth = (width / bufferLength) * 2.5;
        let barHeight;
        let x;

        function renderFrame() {
            requestAnimationFrame(renderFrame);
            x = 0;

            analyser.getByteFrequencyData(dataArray);

            ctx.fillStyle = "#030816";
            ctx.fillRect(0, 0, width, height);

            for (let i = 0; i < bufferLength; i++) {
                barHeight = dataArray[i];

                let t = i / bufferLength;
                let r = (1 - t) * 255 + t * 2;
                let g = (1 - t) * 238 + t * 215;
                let b = (1 - t) * 8 + t * 242;

                ctx.fillStyle =
                    "rgb(" +
                    Math.floor(r) +
                    "," +
                    Math.floor(g) +
                    "," +
                    Math.floor(b) +
                    ")";

                ctx.fillRect(x, height - barHeight, barWidth, barHeight);

                x += barWidth + 1;
            }
        }

        renderFrame();
    }, [currentSongIndex, analyser, source]);

    return <div id="canvasWrapper" />;
};

export default Visualizer;

We pass in the AnalyserNode, audio source, and currentSongIndex as props. When the component mounts or whenever these props change, we use the useEffect hook to create a canvas element and draw the audio data on it.

Here's what's happening in the useEffect code:

Checking and Cleaning: We first check if analyser and source are present. If not, we exit early. Then, we select the container for the canvas and remove any old canvas if it exists to prevent the stacking of multiple canvases.
Canvas Setup: A new canvas element is created, its width and height are set, and then it's appended to our container.
Analyser and Data Configuration: We retrieve the 2D rendering context from the canvas, set the fftSize for the analyzer (which affects the granularity of the visualized data), determine the buffer length, and initialize a Uint8Array to hold our frequency data.
Drawing the Visualizer: The core logic lies in the renderFrame function. This function continuously runs, updating the canvas in sync with screen refresh rates using requestAnimationFrame. We reset the x position, grab the frequency data, and draw a background rectangle on the canvas.
Dynamic Color Bars: For each frequency data point, we determine its height barHeight. We also use a gradient formula to compute a color based on the data point's position. This provides a colorful visual representation of the sound spectrum. The ctx.fillRect method then draws each bar of the visualizer. The x value determines the horizontal position of each bar, which increments by barWidth + 1 after every loop iteration.
Starting the Animation: We call the renderFrame function to begin our visualizer animation.

Now let's go to the SongDetails.jsx file and add in the Visualizer component:

import React from "react";

import SongImage from "./SongImage";
import Visualizer from "./Visualizer";

import "../styles/SongDetails.css";

const SongDetails = ({
    song,
    visualizer,
    source,
    analyser,
    currentSongIndex,
}) => {
    return (
        <div className="songDetails">
            <div className="songDetails__imageContainer">
                {!visualizer && <SongImage url={song.image} />}
                {visualizer && (
                    <Visualizer
                        source={source}
                        analyser={analyser}
                        currentSongIndex={currentSongIndex}
                    />
                )}
            </div>
            ...
        </div>
    );
};

export default SongDetails;

As you can see, we've added some additional props to the component, such as visualizer, source, analyser, and currentSongIndex.

Next, we modified the content of the image container to contain either the SongImage component or the Visualizer component depending on the value of the visualizer prop.

If visualizer is truthy, then we render the Visualizer component with the source, analyser, and currentSongIndex props. However, if visualizer is falsy, then we render the SongImage component like before.

Here is how the visualizer should look:

And that's it! You should now have a fully functional music player.

Conclusion

In this tutorial, we successfully built a cyberpunk-themed music player with React, Web Audio API, and Canvas. We began by identifying the desired features and creating a user interface mockup. Afterward, we established our application's foundation by setting up the React app.

We designed custom base files to ensure seamless rendering of the player and imported all the necessary icons required for audio playback control.

We prioritized the development of individual components before creating the central app file. We then imported all the components and programmed the audio player's functionality. Finally, we added a visualizer to our music player using the Canvas API.

You can find the complete code on the GitHub repository here.

If you found this article useful or learned something new, please consider showing your support by liking it and following me for updates on future posts.

You can also connect with me on Twitter, LinkedIn, and GitHub!

Till next time, happy coding!

DEV Community: Oluwabusayo Jacobs

Build a YouTube Live Clone with Next.js, Clerk, and TailwindCSS - Part Two

Building the Reactions System (Likes/Dislikes)

Building the useReactions Hook

Creating the Reactions API Route

Building the Livestream Studio

Creating the Livestream Layout

Building the Livestream Studio Page

Building the Live Chat

Creating the LiveChat Component

Customizing the Chat Appearance

Creating the CustomMessage Component

Creating the CustomSendButton Component

Building the LiveStream Page

Creating the Subscription API Routes

Putting it All Together

Conclusion

Build a YouTube Live Clone with Next.js, Clerk, and TailwindCSS - Part One

Prerequisites

Setting up the Next.js Project

Setting Up the Database

What is Prisma?

Installing Prisma

Setting Up the Database Schema

Configuring the Database Connection

Running Prisma Migrations

Setting Up Prisma Client in Code

User Authentication with Clerk

What is Clerk?

Setting Up a Clerk Account

Creating a Clerk App

Installing Clerk in Your Project

Creating the Sign-Up and Sign-In Pages

Setting Up Stream

Creating your Stream Account

Creating a New Stream App

Configuring User Permissions

Installing the Stream SDKs

Building the Home Page

Building the Header

Building the Home Layout

Creating the Token API Route

Creating the Stream Card Component

Creating the Livestreams Container

Building the useHostParticipant Hook

Implementing the Live Player Component

Putting it All Together

Conclusion

Build a Signal Clone with React Native and Stream - Part Two

Building the Modal Screens

Updating the Home Layout

Creating the Modal Layout

Building the Profile Screen

Building a Hook to Manage Contacts

Building the New Message Screen

Find by Username Screen

New Group Screen

Building the Chat Screen

Customizing the Channel UI

Enabling Audio Recording

Adding a Message List Header

Custom Buttons

Customizing the Message Avatar

Customizing Stream Components Using Themes

Adding Video and Audio Calling

Installing Stream Video SDK

Setting Up a Development Build

Initializing the Stream Video Client

Adding Call Functionality to the Chat Screen

Building the Call Layout

Configuring Call Permissions

Building the Call Screen

Listening For Calls

Conclusion

Build a Signal Clone with React Native and Stream - Part One

Prerequisites

Project Setup

Creating an Expo Project

Installing Nativewind

Testing the Setup

Building the `useReactions` Hook

Creating the `LiveChat` Component

Creating the `CustomMessage` Component

Creating the `CustomSendButton` Component

Building the `useHostParticipant` Hook