Build a Video Calling Application using React , Tailwind and Zegocloud

Source: Dev.to

Introduction

Hi everyone, recently I built a full video‑calling application and was stunned at how fast you can create one in just minutes using ZEGOCLOUD services.

ZEGOCLOUD provides powerful SDKs and UIKits that handle all the complex parts of real‑time communication for you. Instead of building video streaming, device management, or connection logic from scratch, you simply design a basic UI, integrate their APIs, and your application is ready to go.

In this guide I’ll walk you step‑by‑step through building your own video‑calling application using ZEGOCLOUD.

Step 1 – Sign up on ZEGOCLOUD

Visit the ZEGOCLOUD website.

Step 2 – Create a Project

1. Click Create Your Project.
2. Choose Voice and Video Call as the application type.

Step 3 – Name Your Project

Enter a project name and click Start with UIKits.

Step 4 – Select Platform

Choose For Web and then click Save & Start to integrate.

Step 5 – Retrieve Credentials

Copy the AppID and AppSecret from the project you just created.

Step 6 – Install Development Tools

• VS Code
• Node.js

Step 7 – Set Up a New Workspace

1. Open VS Code in a fresh window.
2. Create a folder on your desktop (any name) and drag it into the VS Code window to open it as a workspace.

Step 8 – Install Tailwind CSS with Vite

Open the terminal in VS Code and follow the instructions at the official Tailwind CSS guide.

Step 9 – Install ZEGOCLOUD SDK and React Router

npm install @zegocloud/zego-uikit-prebuilt react-router-dom

Step 10 – Create Component Files

Inside the src folder, create a folder named components.
Add two files:

• Home.jsx
• VideoCall.jsx

Step 11 – Home.jsx (Create / Join Rooms)

import { useState } from "react";
import { useNavigate } from "react-router-dom";

export default function Home() {
  const [roomCode, setRoomCode] = useState("");
  const [userName, setUserName] = useState("");
  const [showRoomLink, setShowRoomLink] = useState(false);
  const [generatedRoomLink, setGeneratedRoomLink] = useState("");
  const [copied, setCopied] = useState(false);
  const navigate = useNavigate();

  const handleCreateRoom = () => {
    if (userName.trim()) {
      setGeneratedRoomLink(
        `${window.location.origin}/room?roomID=${Math.random()
          .toString(36)
          .substring(2, 8)
          .toUpperCase()}`
      );
      setShowRoomLink(true);
    }
  };

  const copyToClipboard = () => {
    navigator.clipboard.writeText(generatedRoomLink);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  const joinCreatedRoom = () =>
    navigate(
      `/room?roomID=${new URLSearchParams(
        new URL(generatedRoomLink).search
      ).get("roomID")}&userName=${userName}`
    );

  return (
    <>
      {/* UI elements for entering user name, creating room, showing link, etc. */}
    </>
  );
}

(Add the necessary JSX for the UI inside the returned fragment as needed.)

Step 12 – VideoCall.jsx (Integrate ZEGOCLOUD UI Kit)

import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { ZegoUIKitPrebuilt } from "@zegocloud/zego-uikit-prebuilt";

export default function VideoCall() {
  const location = useLocation();
  const params = new URLSearchParams(location.search);
  const roomID = params.get("roomID");
  const userName = params.get("userName");

  useEffect(() => {
    const appID = YOUR_APP_ID;          // replace with your AppID
    const appSign = "YOUR_APP_SECRET"; // replace with your AppSecret

    const kitToken = ZegoUIKitPrebuilt.generateKitTokenForTest(
      appID,
      appSign,
      roomID,
      userName
    );

    const zp = ZegoUIKitPrebuilt.create(kitToken);
    zp.joinRoom();
    // Additional configuration (e.g., UI layout, event listeners) can be added here.
  }, [roomID, userName]);

  return null;
}

Note: Replace YOUR_APP_ID and YOUR_APP_SECRET with the credentials obtained in Step 5.

Step 13 – Configure Routing

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./components/Home";
import VideoCall from "./components/VideoCall";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/room" element={<VideoCall />} />
      </Routes>
    </Router>
  );
}

export default App;

Step 14 – Run the Application

npm run dev   # or the script defined for Vite

Open the provided local URL (e.g., http://localhost:5173) in a browser, create a room, and start a video call.

Conclusion

You now have a functional video‑calling app built with React, Tailwind CSS, and ZEGOCLOUD. Feel free to customize the UI, add authentication, or extend functionality as needed.