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.
For reference purposes, here's the outline of this blog series:
- Part 1: Setting Up the Backend and Frontend with Strapi 5 and Next.js.
- Part 2: Real-Time Features, Video Integration, and Screen Sharing.
Prerequisites
Before we begin, make sure you have the following installed:
- Node and npm are installed on your computer.
- Postman 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.
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:
1import { factories } from "@strapi/strapi";
2
3export default factories.createCoreController(
4 "api::meeting.meeting",
5 ({ strapi }) => ({
6 async create(ctx) {
7 try {
8 const {
9 title,
10 startTime,
11 endTime,
12 participantEmails = [],
13 } = ctx.request.body.data;
14 const user = ctx.state.user;
15
16 console.log("came here");
17
18 if (!user) {
19 return ctx.unauthorized("You must be logged in to create a meeting");
20 }
21
22 // Validate required fields
23 if (!startTime || !endTime) {
24 return ctx.badRequest("Start time and end time are required");
25 }
26
27 // Validate time logic
28 const start = new Date(startTime);
29 const end = new Date(endTime);
30
31 if (start >= end) {
32 return ctx.badRequest("End time must be after start time");
33 }
34
35 if (start < new Date()) {
36 return ctx.badRequest("Start time cannot be in the past");
37 }
38
39 // Find users by email
40 const userIds = new Set([user.documentId]);
41 const invalidEmails = [];
42
43 if (participantEmails && participantEmails.length > 0) {
44 const users = await strapi
45 .query("plugin::users-permissions.user")
46 .findMany({
47 where: {
48 email: {
49 $in: participantEmails,
50 },
51 },
52 select: ["documentId", "email"],
53 });
54
55 // Track which emails were found
56 const foundEmails = new Set(users.map((user) => user.email));
57
58 // Add found user IDs to the set
59 users.forEach((user) => userIds.add(user.documentId));
60
61 // Track invalid emails
62 invalidEmails.push(
63 ...participantEmails.filter((email: any) => !foundEmails.has(email))
64 );
65 }
66 // Create the meeting
67 const meeting = await strapi.documents("api::meeting.meeting").create({
68 data: {
69 title,
70 startTime,
71 meetingId: title.toLowerCase().replace(/\s+/g, "-"),
72 endTime,
73 isActive: false,
74 hosts: user.id,
75 participants: {
76 connect: Array.from(userIds),
77 },
78 publishedAt: new Date(),
79 },
80 status: "published",
81 populate: ["hosts", "participants"],
82 });
83
84 // Return meeting data along with any invalid emails
85 return {
86 data: meeting,
87 meta: {
88 invalidEmails: invalidEmails.length > 0 ? invalidEmails : undefined,
89 },
90 };
91 } catch (error) {
92 console.error("Meeting creation error:", error);
93 ctx.throw(
94 500,
95 error instanceof Error
96 ? error.message
97 : "An error occurred while creating the meeting"
98 );
99 }
100 },
101}
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
:
1export default {
2 routes: [
3 {
4 method: "POST",
5 path: "/meetings",
6 handler: "custom.create",
7 auth: true,
8 },
9 ],
10};
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 (Users-permissions):
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.
In the next section, we'll build a responsive frontend using Next.js, create the user interfaces, implement authentication, and handle meeting lists and creating new meetings.
Create a New Next.js Project
Let's create a new Next.js project with TypeScript and Tailwind CSS:
px create-next-app@latest google-meet-frontend --typescript --tailwind --app
cd google-meet-frontend
Then, install the required project dependencies:
npm install @tanstack/react-query axios jwt-decode @headlessui/react lucide-react clsx tailwind-merge zustand @types/js-cookie js-cookie
Here is a brief overview of the dependencies and what they will do:
- @tanstack/react-query: Manages API data fetching, caching, and synchronization
- axios: Makes HTTP requests to our backend
- jwt-decode: Decodes JWT tokens for authentication
- @headlessui/react: Provides unstyled, accessible UI components
- lucide-react: Modern icon library for React
- clsx: Helps build className strings conditionally
- tailwind-merge: Merges Tailwind CSS classes without conflicts.
- zustand: Simple state management solution
Project Structure
Once the project is created and the required dependencies is installed, let's organize our project structure:
📦google-meet-frontend
┣ 📂app
┃ ┣ 📂auth
┃ ┃ ┣ 📂login
┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┣ 📂register
┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┗ 📜layout.tsx
┃ ┣ 📂meetings
┃ ┃ ┣ 📂[id]
┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┣ 📂new
┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┗ 📜page.tsx
┃ ┣ 📜layout.tsx
┃ ┗ 📜page.tsx
┣ 📂components
┃ ┣ 📂meeting
┃ ┃ ┣ 📜chat.tsx
┃ ┃ ┣ 📜controls.tsx
┃ ┃ ┗ 📜participant-list.tsx
┃ ┣ 📜header.tsx
┃ ┗ 📜providers.tsx
┣ 📂lib
┃ ┣ 📜api-client.ts
┃ ┗ 📜cookie-manager.ts
┣ 📂store
┃ ┣ 📜auth-store.ts
┃ ┗ 📜meeting-store.ts
┣ 📂types
┃ ┗ 📜index.ts
┣ 📜.env.local
┣ 📜middleware.ts
Then create a .env.local
file in your project root and add the following environment variables:
NEXT_PUBLIC_STRAPI_URL=http://localhost:1337
NEXT_PUBLIC_API_URL=http://localhost:1337/api
Handling Authentication and Authorization
Strapi provides different types of authentication and authorization, for the demonstration in this tutorial, we'll use the Password-based authentication and API Keys authorization. To learn more about Strapi authentication, check out the Strapi blog on A Beginner's Guide to Authentication and Authorization in Strapi.
Setting Up User Authentication
Let's create our authentication store using Zustand. Create a store/auth-store.ts
file and add the code snippets:
1import { cookieManager } from "@/lib/cookie-manager";
2import { create } from "zustand";
3import { createJSONStorage, persist } from "zustand/middleware";
4
5interface User {
6 id: number;
7 email: string;
8 username: string;
9 avatar?: string;
10}
11
12interface AuthState {
13 user: User | null;
14 token: string | null;
15 isInitialized: boolean;
16 setAuth: (user: User, token: string) => void;
17 logout: () => void;
18}
19
20export const useAuthStore = create<AuthState>()(
21 persist(
22 (set) => ({
23 user: null,
24 token: null,
25 isInitialized: false,
26 setAuth: (user, token) => {
27 set({ user, token, isInitialized: true });
28 cookieManager.setAuthCookie(user, token);
29 },
30 logout: () => {
31 set({ user: null, token: null, isInitialized: true });
32 cookieManager.clearAuthCookie();
33 },
34 }),
35 {
36 name: "auth-storage",
37 storage: createJSONStorage(() => localStorage),
38 partialize: (state) => ({
39 user: state.user,
40 token: state.token,
41 }),
42 }
43 )
44);
The above code creates an authentication store using Zustand's create
and persist
middleware. The useAuthStore
hook creates a persistent state container with null initial values for the user and token, along with isInitialized
flag. It exposes two functions: setAuth
, which takes a User
object and token
string to update the authentication state and sync cookies using cookieManager.setAuthCookie
, and logout
, which nullifies the user and token and clears cookies using cookieManager.clearAuthCookie
. The persist
configuration named auth-storage
uses localStorage
to persist data.
Then create the cookie manager in the lib/cookie-manager.ts
to manage users' cookies with the code:
1import Cookies from "js-cookie";
2
3export const cookieManager = {
4 setAuthCookie: (user: any, token: string) => {
5 Cookies.set(
6 "auth-storage",
7 JSON.stringify({
8 state: { user, token },
9 }),
10 {
11 expires: 7,
12 path: "/",
13 sameSite: "strict",
14 }
15 );
16 },
17
18 clearAuthCookie: () => {
19 Cookies.remove("auth-storage", { path: "/" });
20 },
21};
Now you need to create an API client in lib/api-client.ts
. It will allow you reuse the pre-configured Axios instance that will handle authentication by automatically adding the JWT token from your Zustand auth store to the request headers. It also uses the base URL from your environment variables for all API calls to Strapi.
1import axios from 'axios';
2import { useAuthStore } from '@/store/auth-store';
3
4const apiClient = axios.create({
5 baseURL: process.env.NEXT_PUBLIC_API_URL,
6});
7
8apiClient.interceptors.request.use((config) => {
9 const token = useAuthStore.getState().token;
10 if (token) {
11 config.headers.Authorization = `Bearer ${token}`;
12 }
13 return config;
14});
15
16export default apiClient;
Creating Login Page
Create a page in app/auth/login/page.tsx
and add the code snippet for the login page to allow users to login to the application.
1"use client";
2
3import { useState } from "react";
4import { useRouter, useSearchParams } from "next/navigation";
5import Link from "next/link";
6import apiClient from "@/lib/api-client";
7import { useAuthStore } from "@/store/auth-store";
8
9export default function LoginPage() {
10 const [email, setEmail] = useState("");
11 const [password, setPassword] = useState("");
12 const [isLoading, setIsLoading] = useState(false);
13 const [error, setError] = useState("");
14
15 const router = useRouter();
16 const searchParams = useSearchParams();
17 const redirectUrl = searchParams.get("redirect") || "/meetings";
18 const setAuth = useAuthStore((state) => state.setAuth);
19
20 const handleSubmit = async (e: React.FormEvent) => {
21 e.preventDefault();
22 setIsLoading(true);
23 setError("");
24
25 try {
26 const response = await apiClient.post("/auth/local", {
27 identifier: email,
28 password,
29 });
30
31 setAuth(response.data.user, response.data.jwt);
32
33 router.push(redirectUrl);
34 } catch (error: any) {
35 setError(error.response?.data?.error?.message || "Failed to login");
36 } finally {
37 setIsLoading(false);
38 }
39 };
40
41 return (
42 <div className="min-h-screen flex items-center justify-center bg-gray-50">
43 <div className="max-w-md w-full p-6 bg-white rounded-lg shadow-md">
44 <div className="text-center mb-8">
45 <h1 className="text-2xl font-bold text-gray-600">Welcome Back</h1>
46 <p className="text-gray-600">Sign in to your account</p>
47 </div>
48
49 {error && (
50 <div className="mb-4 p-3 bg-red-100 text-red-700 rounded-md">
51 {error}
52 </div>
53 )}
54
55 <form onSubmit={handleSubmit} className="space-y-4">
56 <div>
57 <label
58 htmlFor="email"
59 className="block text-sm font-medium text-gray-700"
60 >
61 Email
62 </label>
63 <input
64 type="email"
65 id="email"
66 value={email}
67 onChange={(e) => setEmail(e.target.value)}
68 className="mt-1 block w-full text-gray-700 rounded-md border border-gray-300 px-3 py-2 focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
69 required
70 />
71 </div>
72
73 <div>
74 <label
75 htmlFor="password"
76 className="block text-sm font-medium text-gray-700"
77 >
78 Password
79 </label>
80 <input
81 type="password"
82 id="password"
83 value={password}
84 onChange={(e) => setPassword(e.target.value)}
85 className="mt-1 block w-full text-gray-700 rounded-md border border-gray-300 px-3 py-2 focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
86 required
87 />
88 </div>
89
90 <button
91 type="submit"
92 disabled={isLoading}
93 className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 disabled:opacity-50"
94 >
95 {isLoading ? "Signing in..." : "Sign In"}
96 </button>
97 </form>
98
99 <p className="mt-4 text-center text-sm text-gray-600">
100 Don't have an account?{" "}
101 <Link
102 href="/auth/register"
103 className="text-blue-600 hover:text-blue-700"
104 >
105 Sign up
106 </Link>
107 </p>
108 </div>
109 </div>
110 );
111}
The above code will require users to log in with their email and password, and then send a POST
request to the Strapi authentication endpoint (/auth/local
) to log users in. Then on successfully login, it will update the auth-store
to save the user's access token.
Creating the Register Page
Next, create the user registration page in the app/auth/register/page.tsx
to allow users to create an account:
1"use client";
2
3import { useState } from "react";
4import { useRouter } from "next/navigation";
5import Link from "next/link";
6import apiClient from "@/lib/api-client";
7import { useAuthStore } from "@/store/auth-store";
8
9export default function RegisterPage() {
10 const [email, setEmail] = useState("");
11 const [password, setPassword] = useState("");
12 const [username, setUsername] = useState("");
13 const [isLoading, setIsLoading] = useState(false);
14 const [error, setError] = useState("");
15
16 const router = useRouter();
17 const setAuth = useAuthStore((state) => state.setAuth);
18
19 const handleSubmit = async (e: React.FormEvent) => {
20 e.preventDefault();
21 setIsLoading(true);
22 setError("");
23
24 try {
25 const response = await apiClient.post("/auth/local/register", {
26 username: username,
27 email,
28 password,
29 });
30
31 setAuth(response.data.user, response.data.jwt);
32 router.push("/meetings");
33 } catch (error: any) {
34 setError(error.response?.data?.error?.message || "Failed to register");
35 } finally {
36 setIsLoading(false);
37 }
38 };
39
40 return (
41 <div className="min-h-screen flex items-center justify-center bg-gray-50">
42 <div className="max-w-md w-full p-6 bg-white rounded-lg shadow-md">
43 <div className="text-center mb-8">
44 <h1 className="text-2xl font-bold text-gray-600">Create Account</h1>
45 <p className="text-gray-600">Join us today</p>
46 </div>
47
48 {error && (
49 <div className="mb-4 p-3 bg-red-100 text-red-700 rounded-md">
50 {error}
51 </div>
52 )}
53
54 <form onSubmit={handleSubmit} className="space-y-4">
55 <div>
56 <label
57 htmlFor="username"
58 className="block text-sm font-medium text-gray-700"
59 >
60 Username
61 </label>
62 <input
63 type="text"
64 id="username"
65 value={username}
66 onChange={(e) => setUsername(e.target.value)}
67 className="mt-1 block w-full rounded-md border text-gray-700 border-gray-300 px-3 py-2 focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
68 required
69 />
70 </div>
71
72 <div>
73 <label
74 htmlFor="email"
75 className="block text-sm font-medium text-gray-700"
76 >
77 Email
78 </label>
79 <input
80 type="email"
81 id="email"
82 value={email}
83 onChange={(e) => setEmail(e.target.value)}
84 className="mt-1 block w-full rounded-md border text-gray-700 border-gray-300 px-3 py-2 focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
85 required
86 />
87 </div>
88
89 <div>
90 <label
91 htmlFor="password"
92 className="block text-sm font-medium text-gray-700"
93 >
94 Password
95 </label>
96 <input
97 type="password"
98 id="password"
99 value={password}
100 onChange={(e) => setPassword(e.target.value)}
101 className="mt-1 block w-full rounded-md border text-gray-700 border-gray-300 px-3 py-2 focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
102 required
103 />
104 </div>
105
106 <button
107 type="submit"
108 disabled={isLoading}
109 className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 disabled:opacity-50"
110 >
111 {isLoading ? "Creating account..." : "Create Account"}
112 </button>
113 </form>
114
115 <p className="mt-4 text-center text-sm text-gray-600">
116 Already have an account?{" "}
117 <Link
118 href="/auth/login"
119 className="text-blue-600 hover:text-blue-700"
120 >
121 Sign in
122 </Link>
123 </p>
124 </div>
125 </div>
126 );
127}
The above will require users to register with their username
, email
, and password
. We send a POST
request to the Strapi register auth route (/aut/register
). Once their account is registered, we update, grab their API Key, update the auth-store,
and redirect them to the meetings page.
Now create an authLayouth
component in the app/auth/layout.tsx
to render the authentication pages:
1export default function AuthLayout({
2 children,
3}: {
4 children: React.ReactNode;
5}) {
6 return <div className="min-h-screen bg-gray-50">{children}</div>;
7}
Protected Route Middleware
Create a middleware to protect routes in middleware.ts
, allowing authenticated users to access the meetings pages:
1import { NextResponse } from "next/server";
2import type { NextRequest } from "next/server";
3
4export function middleware(request: NextRequest) {
5 const authState = request.cookies.get("auth-storage")?.value;
6 let isAuthenticated = false;
7
8 if (authState) {
9 try {
10 const parsedAuthState = JSON.parse(authState);
11 isAuthenticated = !!(
12 parsedAuthState.state?.token && parsedAuthState.state?.user
13 );
14 } catch (error) {
15 console.error("Error parsing auth state:", error);
16 }
17 }
18
19 const isAuthPage =
20 request.nextUrl.pathname.startsWith("/auth/login") ||
21 request.nextUrl.pathname.startsWith("/auth/register");
22
23 if (!isAuthenticated && !isAuthPage) {
24 const loginUrl = new URL("/auth/login", request.url);
25 loginUrl.searchParams.set("/auth/redirect", request.nextUrl.pathname);
26 return NextResponse.redirect(loginUrl);
27 }
28
29 if (isAuthenticated && isAuthPage) {
30 return NextResponse.redirect(new URL("/", request.url));
31 }
32
33 return NextResponse.next();
34}
35
36export const config = {
37 matcher: ["/", "/meetings/:path*", "/auth/login", "/auth/register"],
38};
The above middleware handles authentication routing by checking a cookie named auth-storage
, which contains the user's auth state. The middleware will run before the pages load, verifying if the user is authenticated by looking for a valid token and user object in the parsed cookie. It redirects unauthenticated users to the login page (while preserving their intended destination as a URL parameter).
Creating Meeting Pages
Now that users can register and login, let's proceed to creating the meeting pages to allow users create new meetings and join and manage meetings.
Creating Meeting Types
First, create a Meeting, User, MeetingParticipant and ChatMessage types in the types/index.ts
directory with code snippet below:
1export interface User {
2 id: number;
3 email: string;
4 username: string;
5 avatar?: string;
6}
7
8export interface Meeting {
9 id: number;
10 title: string;
11 meetingId: string;
12 startTime: string;
13 endTime: string;
14 isActive: boolean;
15 createdAt: string;
16 updatedAt: string;
17 host: {
18 data: {
19 id: number;
20 username: string;
21 email: string;
22 };
23
24 participants: {
25 data: Array<{
26 id: number;
27 username: string;
28 email: string;
29 }>;
30 };
31 };
32}
33
34export interface MeetingParticipant {
35 id: number;
36 username: string;
37 isAudioEnabled: boolean;
38 isVideoEnabled: boolean;
39 isScreenSharing: boolean;
40}
41
42export interface ChatMessage {
43 id: string;
44 userId: number;
45 text: string;
46 timestamp: number;
47 username: string;
48}
Creating App Layout Components
Next, create a Header
component in components/header.tsx
. This Header component will be reused across the meetings pages:
1'use client';
2
3import Link from 'next/link';
4import { useAuthStore } from '@/store/auth-store';
5import { LogOut, User } from 'lucide-react';
6
7export function Header() {
8 const { user, logout } = useAuthStore();
9
10 if (!user) return null;
11
12 return (
13 <header className="border-b">
14 <div className="container mx-auto px-4 h-16 flex items-center justify-between">
15 <Link href="/meetings" className="font-semibold text-xl">
16 Meet Clone
17 </Link>
18
19 <div className="flex items-center gap-4">
20 <div className="flex items-center gap-2">
21 <User size={20} />
22 <span>{user.displayName}</span>
23 </div>
24 <button
25 onClick={logout}
26 className="flex items-center gap-2 text-red-600 hover:text-red-700"
27 >
28 <LogOut size={20} />
29 <span>Logout</span>
30 </button>
31 </div>
32 </div>
33 </header>
34 );
35}
Then create a Providers for the state management using tanstack in the components/providers.tsx
:
1'use client';
2
3import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
4import { PropsWithChildren } from 'react';
5
6const queryClient = new QueryClient();
7
8export function Providers({ children }: PropsWithChildren) {
9 return (
10 <QueryClientProvider client={queryClient}>
11 {children}
12 </QueryClientProvider>
13 );
14}
Now update the main app layout component in app/layout.tsx
:
1import { Inter } from 'next/font/google';
2import { Providers } from '@/components/providers';
3import { Header } from '@/components/header';
4
5const inter = Inter({ subsets: ['latin'] });
6
7export default function RootLayout({
8 children,
9}: {
10 children: React.ReactNode;
11}) {
12 return (
13 <html lang="en">
14 <body className={inter.className}>
15 <Providers>
16 <Header />
17 <main className="container mx-auto px-4 py-8">
18 {children}
19 </main>
20 </Providers>
21 </body>
22 </html>
23 );
24}
This is what your page will look like now.
Creating a Meeting Page
Create a meeting page in app/meetings/page.tsx
to display all user's meetings, a button to create new meetings, and a link to join meetings:
1"use client";
2
3import { useQuery } from "@tanstack/react-query";
4import apiClient from "@/lib/api-client";
5import Link from "next/link";
6import { Meeting } from "@/types";
7import { useAuthStore } from "@/store/auth-store";
8
9export default function MeetingList() {
10 const authState = useAuthStore((state) => state.user);
11 const { data: meetings, isLoading } = useQuery({
12 queryKey: ["meetings"],
13 queryFn: async () => {
14 const response = await apiClient.get(
15 `/meetings?filters[participants][id][$eq]=${authState?.id}&populate=*`
16 );
17 return response.data.data;
18 },
19 });
20
21 if (isLoading) {
22 return <div>Loading meetings...</div>;
23 }
24
25 return (
26 <div className="space-y-4">
27 <div className="flex justify-between items-center">
28 <h2 className="text-2xl font-bold">Your Meetings</h2>
29 <Link
30 href="/meetings/new"
31 className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700"
32 >
33 New Meeting
34 </Link>
35 </div>
36 <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
37 {meetings?.map((meeting: Meeting) => (
38 <div
39 key={meeting.id}
40 className="border rounded-lg p-4 hover:shadow-md transition-shadow"
41 >
42 <h3 className="font-semibold">{meeting.title}</h3>
43 <p className="text-gray-600">
44 {new Date(meeting.startTime).toLocaleString()}
45 </p>
46 <Link
47 href={`/meetings/${meeting.meetingId}`}
48 className="text-blue-600 hover:underline mt-2 inline-block"
49 >
50 Join Meeting
51 </Link>
52 </div>
53 ))}
54 </div>
55 </div>
56 );
57}
The above code will send a GET
request to your Strapi backend to fetch all the meetings that the active your participant using the Strapi filter query and populate all the relation fields using the populate query.
Creating a New Meeting
Create a new meeting page in app/meetings/new/page.tsx
to allow users to create meetings and add participants:
1"use client";
2
3import { useState } from "react";
4import { useRouter } from "next/navigation";
5import { X, Plus, Mail, Loader2 } from "lucide-react";
6import apiClient from "@/lib/api-client";
7
8interface FormErrors {
9 title?: string;
10 startTime?: string;
11 endTime?: string;
12 email?: string;
13}
14
15export default function NewMeetingForm() {
16 const [title, setTitle] = useState("");
17 const [startTime, setStartTime] = useState("");
18 const [endTime, setEndTime] = useState("");
19 const [email, setEmail] = useState("");
20 const [participantEmails, setParticipantEmails] = useState<string[]>([]);
21 const [errors, setErrors] = useState<FormErrors>({});
22 const [isLoading, setIsLoading] = useState(false);
23 const router = useRouter();
24
25 const validateEmail = (email: string) => {
26 const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
27 return emailRegex.test(email);
28 };
29
30 const addParticipant = () => {
31 if (!email.trim()) {
32 setErrors({ ...errors, email: "Email is required" });
33 return;
34 }
35
36 if (!validateEmail(email)) {
37 setErrors({ ...errors, email: "Invalid email format" });
38 return;
39 }
40
41 if (participantEmails.includes(email)) {
42 setErrors({ ...errors, email: "Email already added" });
43 return;
44 }
45
46 setParticipantEmails([...participantEmails, email.trim()]);
47 setEmail("");
48 setErrors({ ...errors, email: undefined });
49 };
50
51 const removeParticipant = (emailToRemove: string) => {
52 setParticipantEmails(participantEmails.filter(email => email !== emailToRemove));
53 };
54
55 const validateForm = () => {
56 const newErrors: FormErrors = {};
57
58 if (!title.trim()) {
59 newErrors.title = "Title is required";
60 }
61
62 if (!startTime) {
63 newErrors.startTime = "Start time is required";
64 }
65
66 if (!endTime) {
67 newErrors.endTime = "End time is required";
68 }
69
70 if (startTime && endTime && new Date(startTime) >= new Date(endTime)) {
71 newErrors.endTime = "End time must be after start time";
72 }
73
74 if (startTime && new Date(startTime) < new Date()) {
75 newErrors.startTime = "Start time cannot be in the past";
76 }
77
78 return newErrors;
79 };
80
81 const handleSubmit = async (e: React.FormEvent) => {
82 e.preventDefault();
83
84 const formErrors = validateForm();
85 if (Object.keys(formErrors).length > 0) {
86 setErrors(formErrors);
87 return;
88 }
89
90 setIsLoading(true);
91
92 try {
93 const response = await apiClient.post("/meetings", {
94 data: {
95 title,
96 startTime,
97 endTime,
98 isActive: false,
99 participantEmails,
100 },
101 });
102
103 if (response.data.meta?.invalidEmails?.length > 0) {
104 // Handle invalid emails if needed
105 console.warn("Some emails were invalid:", response.data.meta.invalidEmails);
106 }
107
108 router.push("/meetings");
109 } catch (error) {
110 console.error("Failed to create meeting:", error);
111 // You might want to show an error notification here
112 } finally {
113 setIsLoading(false);
114 }
115 };
116
117 return (
118 <form onSubmit={handleSubmit} className="space-y-6 max-w-lg mx-auto">
119 <div>
120 <label className="block text-sm font-medium text-gray-100">
121 Meeting Title
122 </label>
123 <input
124 type="text"
125 value={title}
126 onChange={(e) => setTitle(e.target.value)}
127 className={`mt-1 block w-full rounded-md border text-gray-600 border-gray-300 px-3 py-2 ${
128 errors.title ? 'border-red-500' : ''
129 }`}
130 required
131 />
132 {errors.title && (
133 <p className="mt-1 text-sm text-red-500">{errors.title}</p>
134 )}
135 </div>
136
137 <div>
138 <label className="block text-sm font-medium text-gray-100">
139 Start Time
140 </label>
141 <input
142 type="datetime-local"
143 value={startTime}
144 onChange={(e) => setStartTime(e.target.value)}
145 className={`mt-1 block w-full rounded-md border text-gray-600 border-gray-300 px-3 py-2 ${
146 errors.startTime ? 'border-red-500' : ''
147 }`}
148 required
149 />
150 {errors.startTime && (
151 <p className="mt-1 text-sm text-red-500">{errors.startTime}</p>
152 )}
153 </div>
154
155 <div>
156 <label className="block text-sm font-medium text-gray-100">
157 End Time
158 </label>
159 <input
160 type="datetime-local"
161 value={endTime}
162 onChange={(e) => setEndTime(e.target.value)}
163 className={`mt-1 block w-full rounded-md border text-gray-600 border-gray-300 px-3 py-2 ${
164 errors.endTime ? 'border-red-500' : ''
165 }`}
166 required
167 />
168 {errors.endTime && (
169 <p className="mt-1 text-sm text-red-500">{errors.endTime}</p>
170 )}
171 </div>
172
173 <div>
174 <label className="block text-sm font-medium text-gray-100">
175 Add Participants
176 </label>
177 <div className="flex gap-2">
178 <div className="flex-1">
179 <div className="relative">
180 <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={18} />
181 <input
182 type="email"
183 value={email}
184 onChange={(e) => setEmail(e.target.value)}
185 onKeyPress={(e) => {
186 if (e.key === 'Enter') {
187 e.preventDefault();
188 addParticipant();
189 }
190 }}
191 placeholder="Enter email address"
192 className={`mt-1 block w-full rounded-md border text-gray-600 border-gray-300 pl-10 pr-3 py-2 ${
193 errors.email ? 'border-red-500' : ''
194 }`}
195 />
196 </div>
197 {errors.email && (
198 <p className="mt-1 text-sm text-red-500">{errors.email}</p>
199 )}
200 </div>
201 <button
202 type="button"
203 onClick={addParticipant}
204 className="mt-1 p-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
205 >
206 <Plus size={20} />
207 </button>
208 </div>
209
210 {participantEmails.length > 0 && (
211 <div className="mt-3 space-y-2">
212 {participantEmails.map((email) => (
213 <div
214 key={email}
215 className="flex items-center justify-between p-2 bg-gray-700 rounded-md"
216 >
217 <span className="text-sm text-gray-200">{email}</span>
218 <button
219 type="button"
220 onClick={() => removeParticipant(email)}
221 className="text-gray-400 hover:text-red-500"
222 >
223 <X size={16} />
224 </button>
225 </div>
226 ))}
227 </div>
228 )}
229 </div>
230
231 <div className="flex gap-4">
232 <button
233 type="submit"
234 disabled={isLoading}
235 className="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
236 >
237 {isLoading ? (
238 <>
239 <Loader2 className="animate-spin" size={20} />
240 Creating...
241 </>
242 ) : (
243 'Create Meeting'
244 )}
245 </button>
246 <button
247 type="button"
248 onClick={() => router.push("/meetings")}
249 className="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-700"
250 >
251 Cancel
252 </button>
253 </div>
254 </form>
255 );
256}
The above code creates a new meeting that uses the apiClient
we set up earlier. It manages form state for meeting details (title
, start/end
times) and participant
emails using React's useState
hooks. The form includes client-side validation for emails and meeting times, with a neat feature that lets users add multiple participant emails through a dynamic list interface. When the form is submitted, it validates all inputs, sends the data to the server using the apiClient
, and handles invalid email responses.
Now update your app/page.tsx
file to render the MeetingsPage
:
1import MeetingsPage from "./meetings/page";
2export default function Home() {
3 return <MeetingsPage />;
4}
Github Source Code
The complete source code for this tutorial is available on GitHub. Please note that the Strapi backend code resides on the main
branch and the complete code is on the part_3
of the repo.
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.
We've implemented the following:
- User authentication with Zustand
- Protected routes with middleware
- Meeting management interface, listing meetings, and creating new meetings.
- Responsive UI with Tailwind CSS
In the next and final part, we'll add real-time video conferencing using WebRTC, Chat functionality, Screen-sharing capabilities, Meeting controls, and participant management.
See Strapi in action with an interactive demo
I am Software Engineer and Technical Writer. Proficient Server-side scripting and Database setup. Agile knowledge of Python, NodeJS, ReactJS, and PHP. When am not coding, I share my knowledge and experience with the other developers through technical articles