# Building a Google Meet Clone with Strapi 5 and Next.js - Part 1

Welcome to this comprehensive tutorial series where we'll build a Google Meet clone using Strapi 5 and Next.js. In this first part, we'll focus on setting up a backend using Strapi 5, which will handle our user authentication, meeting management, and real-time messaging features.

## Prerequisites

Before we begin, make sure you have the following installed:

- [Node](https://nodejs.org/en) and [npm](https://www.npmjs.com/) are installed on your computer.
- [Postman](https://www.postman.com/) for API testing.
- You should be familiar with Next.js and Strapi CMS CRUD operations. You can check out [Getting Started With Next.js and Strapi 5: beginner's guide](https://strapi.io/blog/getting-started-with-next-js-and-strapi-5-beginner-s-guide).

## Project Overview

In this series, we’ll be building a Google Meet app with Strapi 5 and Next.js that will feature:

- User authentication and authorization
- Real-time video conferencing
- Screen sharing capabilities
- Chat messaging during meetings
- Meeting scheduling and management
- User presence indicators

Here is the folder structure for the app we'll be building throughout this tutorial.

📦google-meet-clone-backend
 ┣ 📂config
 ┃ ┣ 📜admin.ts
 ┃ ┣ 📜api.ts
 ┃ ┣ 📜database.ts
 ┃ ┣ 📜middlewares.ts
 ┃ ┣ 📜plugins.ts
 ┃ ┣ 📜server.ts
 ┃ ┗ 📜socket.ts
  📂src
 ┃ ┣ 📂api
 ┃ ┃ ┣ 📂meeting
 ┃ ┃ ┃ ┣ 📂content-types
 ┃ ┃ ┃ ┃ ┗ 📂meeting
 ┃ ┃ ┃ ┃ ┃ ┗ 📜schema.json
 ┃ ┃ ┃ ┣ 📂controllers
 ┃ ┃ ┃ ┃ ┣ 📜custom.ts
 ┃ ┃ ┃ ┃ ┗ 📜meeting.ts
 ┃ ┃ ┃ ┣ 📂routes
 ┃ ┃ ┃ ┃ ┣ 📜custome.ts
 ┃ ┃ ┃ ┃ ┗ 📜meeting.ts
 ┃ ┃ ┃ ┗ 📂services
 ┃ ┃ ┃ ┃ ┗ 📜meeting.ts
 ┃ ┃ ┣ 📂socket
 ┃ ┃ ┃ ┗ 📂services
 ┃ ┃ ┃ ┃ ┗ 📜socket.ts
 ┃ ┃ ┗ 📜.gitkeep
 ┣ 📜.env
 ┣ 📜.gitignore
 ┣ 📜package-lock.json
 ┣ 📜package.json
 ┗ 📜tsconfig.json

Below is a demo of what we will build by the end of this blog series.


## Setting Up Strapi 5 Project

Let's start by creating a new Strapi project. Open your terminal and run:

npx create-strapi@latest google-meet-clone-backend

The above command will prompt you to select the preferred configuration for your Strapi project. Your selection should look the the screenshot below:


After going through the prompts, the command will scaffold a new Strapi project with TypeScript support. Once the installation is complete, change the directory to the project folder and start and open the admin panel in your browser.

cd google-meet-clone-backend
npm run develop


Now enter your details and click the **Get Started** button to access the Strapi admin panel.

## Creating Meeting Collection Type

Now, let's create the Meeting content type. To do that, click on the **Create new collection type** tab from your Admin panel to create a **Meeting** collection for your application and click **Continue**.


Add the following fields to **Meeting** collection type and click the **Save** button:

| Field | Type |
| -------- | -------- |
| title | short text |
| meetingId (targetField: title) | uid |
| startTime | datetime |
| endTime | datetime |
| isActive | boolean |


### Creating Data Relationships
I left out some fields in our **User** and **Meeting** collections because they are relations fields. I needed us to cover them separately. For the **User** Collection, the fields are:

- **meetings**: The meetings created by users

For the **Meeting** collection, the fields are:

- **host**: The creator of the meeting.
- **participants**: The users who are joining the meeting.

#### Adding Relation Field Between **User** and **Meeting** Collection Types
To add the relation fields to the User collection, click on the **Meeting -> Add new fields** from **Content-Type Builder -> User** page. Select a **Relations** from the fields modal, and add a new relation field named **meetings**, which will be a **many-to-many** relationship with the **Meeting** collection. This is so that a user can join other users' meetings, and another can also join their meetings. Now click on the **Finish** button and **Save** button to save the changes.


#### Adding Relation Field in Meeting Collection
For the **Meeting** collection, click on the **Meeting** -> **Add new fields** from the Content-Type Builder page. Click on the **Add new field** button select a **Relation** from the fields modal and add a new relation field named **host**, which will be a **many-to-One** relationship with the **User** collection. Then click on the **Finish** button and **Save** button to save the changes.


To create the **participants** relation field, you need also repeat this process. But this **participants** collection will be a **many-to-many** relationship.


After the fields, your **Meeting** collection will look like the screenshot below:


## Creating the Meeting Controller

Let's add custom logic for meeting management. Create `./src/api/meeting/controllers/custom.js` and add the code snippets below to create a new meeting:

import { factories } from "@strapi/strapi";

export default factories.createCoreController(
  "api::meeting.meeting",
  ({ strapi }) => ({
    async create(ctx) {
      try {
        const {
          title,
          startTime,
          endTime,
          participantEmails = [],
        } = ctx.request.body.data;
        const user = ctx.state.user;

        console.log("came here");

        if (!user) {
          return ctx.unauthorized("You must be logged in to create a meeting");
        }

        // Validate required fields
        if (!startTime || !endTime) {
          return ctx.badRequest("Start time and end time are required");
        }

        // Validate time logic
        const start = new Date(startTime);
        const end = new Date(endTime);

        if (start >= end) {
          return ctx.badRequest("End time must be after start time");
        }

        if (start < new Date()) {
          return ctx.badRequest("Start time cannot be in the past");
        }

        // Find users by email
        const userIds = new Set([user.documentId]);
        const invalidEmails = [];

        if (participantEmails && participantEmails.length > 0) {
          const users = await strapi
            .query("plugin::users-permissions.user")
            .findMany({
              where: {
                email: {
                  $in: participantEmails,
                },
              },
              select: ["documentId", "email"],
            });

          // Track which emails were found
          const foundEmails = new Set(users.map((user) => user.email));

          // Add found user IDs to the set
          users.forEach((user) => userIds.add(user.documentId));

          // Track invalid emails
          invalidEmails.push(
            ...participantEmails.filter((email: any) => !foundEmails.has(email))
          );
        }
        // Create the meeting
        const meeting = await strapi.documents("api::meeting.meeting").create({
          data: {
            title,
            startTime,
            meetingId: title.toLowerCase().replace(/\s+/g, "-"),
            endTime,
            isActive: false,
            hosts: user.id,
            participants: {
              connect: Array.from(userIds),
            },
            publishedAt: new Date(),
          },
          status: "published",
          populate: ["hosts", "participants"],
        });

        // Return meeting data along with any invalid emails
        return {
          data: meeting,
          meta: {
            invalidEmails: invalidEmails.length > 0 ? invalidEmails : undefined,
          },
        };
      } catch (error) {
        console.error("Meeting creation error:", error);
        ctx.throw(
          500,
          error instanceof Error
            ? error.message
            : "An error occurred while creating the meeting"
        );
      }
    },
}

The above code handles the creation of new meetings. We would have used the default API created by Strapi and simply sent an API request, but we needed to use users' emails to add them to the participant's list, keep track of invalid emails, and slugifying the title to create a `meetingId` value.

Then add the route in `./src/api/meeting/routes/custom.js`:

export default {
  routes: [
    {
      method: "POST",
      path: "/meetings",
      handler: "custom.create",
      auth: true,
    },
  ],
};

## Setting Up Permissions

Strapi provides authorization for your collections out of the box, you only need to specify what kind of access you give users. Navigate to **Settings → Users & Permissions Plugin → Roles** and configure the following permissions for authenticated users role:

- Meeting:
- `find`, `findOne` (for viewing meetings)
- `create` (for creating new meetings)
- `update` (for modifying meeting details)
- `create` (for creating new meetings)


- User:
- `me` (for accessing my profile)
- `update` (for updating profile)
- `find` (for accessing the details of others in the meeting)


We're done with part one of this blog series. Stay tuned for Part 2, where we'll continue this tutorial by building the front end using Next.js and connecting it to our Strapi backend.

## Conclusion

We've successfully set up the backend for our Google Meet clone using Strapi 5. We've created the necessary content types, implemented custom authentication features, and added meeting management functionality.

The complete source code for this tutorial is available on [GitHub](https://github.com/icode247/google-meet-clone). The `main` branch contains the code for the Strapi 5 backend, the `part_2` branch contains the code for part 2 of this blog series and the `part_3` branch contains the code for part 3 which also has the complete code for Youtube clone Next.js application.

Remember to secure your environment variables and follow security best practices before deploying to production.