In this tutorial, you’ll learn how to build an AI-powered social media post scheduler using Gemini, Late API, and Next.js.

We’ll use the Gemini API to generate engaging social media content from user prompts, Next.js to handle both the frontend and backend of the application, and Late API to publish and schedule posts across multiple social media platforms from a single platform.

Table of Contents

• Prerequisites

• Setup and Installation

• How to Schedule Social Media Posts with Late

• How to Build the Next.js App Interface

• How to integrate Gemini API for Post Generation

• How to Use Late API in Next.js

• Conclusion

Prerequisites

To fully understand this tutorial, you need to have a basic understanding of React or Next.js.

We will use the following tools:

• Late API: A social media API that lets you create and schedule posts across 13 social media platforms from a single dashboard.

• Next.js: A React framework for building fast, scalable web applications, handling both the frontend and backend.

• Google Gemini API: Provides access to Google’s AI models for generating text and other content based on user prompts.

Setup and Installation

Create a new Next.js project using the following code snippet:

npx create-next-app post-scheduler

Install the project dependencies. We’ll use Day.js to work with JavaScript dates, making it easier to schedule and publish social media posts at the correct time.

npm install @google/genai dayjs utc

Next, add a .env.local file containing your Gemini API key at the root of your Next.js project:

GEMINI_API_KEY=<paste_your API key>

Once everything is set up, your Next.js project is ready. Now, let's start building! 🚀

How to Schedule Social Media Posts with Late

Late is an all-in-one social media scheduling platform that allows you to connect your social media accounts and publish posts across multiple platforms. In this section, you’ll learn how to create and schedule social media posts using the Late dashboard.

To get started, create a Late account and sign in.

Create an API key and add it to the .env.local file within your Next.js project.

LATE_API_KEY=<your_API_key>

Connect your social media accounts to Late so you can manage and publish posts across all platforms.

After connecting your social media accounts via OAuth, you can start writing, posting, and scheduling content directly to your social media platforms.

Late lets you write your post content and attach media files directly from the dashboard.

You can choose when your content should be published: post immediately, schedule for later, add it to a job queue, or save it as a draft.

Once a post is published, you can view its status and preview it directly in the dashboard using the post link.

🎉 Congratulations! You’ve successfully created your first post using the Late dashboard. In the next sections, you’ll learn how to use the Late API to create and schedule posts directly from your applications.

How to Build the Next.js App Interface

In this section, you’ll build the user interface for the application. The app uses a single-page route with conditional rendering to display recent posts, an AI prompt input field, and a form that allows users to create or schedule posts.

Before we proceed, create a types.d.ts file within your Next.js project and copy the following code snippet into the file:

interface Post {
    _id: string;
    content: string;
    scheduledFor: string;
    status: string;
}

interface AIFormProps {
    handleGeneratePost: (e: React.FormEvent<HTMLFormElement>) => void;
    useAI: boolean;
    setUseAI: React.Dispatch<React.SetStateAction<boolean>>;
    prompt: string;
    setPrompt: React.Dispatch<React.SetStateAction<string>>;
    disableBtn: boolean;
}

interface FormProps {
    handlePostSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
    content: string;
    setContent: React.Dispatch<React.SetStateAction<string>>;
    date: string;
    setDate: React.Dispatch<React.SetStateAction<string>>;
    disableBtn: boolean;
    setUseAI: React.Dispatch<React.SetStateAction<boolean>>;
    useAI: boolean;
}

The types.d.ts file defines all the data structures and type declarations used throughout the application.

Copy the following code snippet into the app/page.tsx file:

"use client";
import Nav from "./components/Nav";
import { useState } from "react";
import NewPost from "./components/NewPost";
import PostsQueue from "./components/PostsQueue";

export default function Page() {
    const [showPostQueue, setShowPostQueue] = useState<boolean>(false);
    return (
        <div className='w-full h-screen'>
            <Nav showPostQueue={showPostQueue} setShowPostQueue={setShowPostQueue} />
            {showPostQueue ? <PostsQueue /> : <NewPost />}
        </div>
    );
}

The Page component renders the Nav component and uses conditional rendering to display either the PostsQueue or NewPost component based on the value of the showPostQueue state.

Create a components folder to store the page components used in the application.

cd app
mkdir components && cd components
touch Nav.tsx NewPost.tsx PostElement.tsx PostsQueue.tsx

Add the code snippet below to the Nav.tsx file:

export default function Nav({
    showPostQueue,
    setShowPostQueue,
}: {
    showPostQueue: boolean;
    setShowPostQueue: React.Dispatch<React.SetStateAction<boolean>>;
}) {
    return (
        <nav>
            <h2>Post Scheduler</h2>

            <button onClick={() => setShowPostQueue(!showPostQueue)}>
                {showPostQueue ? "New Post" : "Schedule Queue"}
            </button>
        </nav>
    );
}

Copy the following code snippet into the PostsQueue.tsx file:

"use client";
import { useEffect, useState, useCallback } from "react";
import PostElement from "./PostElement";

export default function PostsQueue() {
    const [posts, setPosts] = useState<Post[]>([]);
    const [loading, setLoading] = useState<boolean>(true);

    return (
        <div className='p-4'>
            <h2 className='text-xl font-bold'>Scheduled Posts</h2>

            {loading ? (
                <p className='text-sm'>Loading scheduled posts...</p>
            ) : (
                <div className='mt-4'>
                    {posts.length > 0 ? (
                        posts.map((post) => <PostElement key={post._id} post={post} />)
                    ) : (
                        <p>No scheduled posts available.</p>
                    )}
                </div>
            )}
        </div>
    );
}

The PostsQueue.tsx component displays a list of previously created posts along with their current status, showing whether each post has been published or scheduled for a later time. While the data is being loaded, it shows a loading message, and once loaded, it renders each post using the PostElement component.

Add the following to the PostElement.tsx component:

export default function PostElement({ post }: { post: Post }) {
    export const formatReadableTime = (isoString: string) => {
        const date = new Date(isoString); // parses UTC automatically
        return date.toLocaleString(undefined, {
            year: "numeric",
            month: "short",
            day: "numeric",
            hour: "2-digit",
            minute: "2-digit",
            second: "2-digit",
            hour12: true, // set to false for 24h format
        });
    };

    return (
        <div className='p-4 border flex items-center justify-between  space-x-4 rounded mb-2 hover:bg-gray-100 cursor-pointer'>
            <div>
                <p className='font-semibold text-sm'>{post.content.slice(0, 100)}</p>
                <p className='text-blue-400 text-xs'>
                    Scheduled for: {formatReadableTime(post.scheduledFor)}
                </p>
            </div>

            <p className='text-sm text-red-500'>{post.status}</p>
        </div>
    );
}

Finally, copy the following code snippet into the NewPost.tsx file:

"use client";
import { useState } from "react";

export default function NewPost() {
 const [disableBtn, setDisableBtn] = useState<boolean>(false);
 const [useAI, setUseAI] = useState<boolean>(false);
 const [content, setContent] = useState<string>("");
 const [prompt, setPrompt] = useState<string>("");
 const [date, setDate] = useState<string>("");

 //👇🏻 generates post content
 const handleGeneratePost = async (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  setDisableBtn(true);
 };

 //👇🏻 create/schedule post
 const handlePostSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
 };

 return (
  <div className='w-full p-4  h-[90vh] flex flex-col items-center justify-center border-t'>
   <h3 className='text-xl font-bold'>New Post</h3>

   {useAI ? (
    <AIPromptForm
     handleGeneratePost={handleGeneratePost}
     useAI={useAI}
     setUseAI={setUseAI}
     prompt={prompt}
     setPrompt={setPrompt}
     disableBtn={disableBtn}
    />
   ) : (
    <PostForm
     handlePostSubmit={handlePostSubmit}
     content={content}
     setContent={setContent}
     date={date}
     setDate={setDate}
     disableBtn={disableBtn}
     setUseAI={setUseAI}
     useAI={useAI}
    />
   )}
  </div>
 );
}

The NewPost component conditionally renders the AIPromptForm and the PostForm. When a user chooses to generate content using AI, the AIPromptForm component is displayed to collect the prompt. Once the content is generated, the PostForm component is shown, allowing the user to edit, create, or schedule the post.

Add the components below inside the NewPost.tsx file:

export const AIPromptForm = ({
    handleGeneratePost,
    useAI,
    setUseAI,
    prompt,
    setPrompt,
    disableBtn,
}: AIFormProps) => {
    return (
        <form onSubmit={handleGeneratePost}>
            <p onClick={() => setUseAI(!useAI)}>Exit AI </p>
            <textarea
                rows={3}
                required
                value={prompt}
                onChange={(e) => setPrompt(e.target.value)}
                placeholder='Enter prompt...'
            />
            <button type='submit' disabled={disableBtn}>
                {disableBtn ? "Generating..." : "Generate Post with AI"}
            </button>
        </form>
    );
};

// 👇🏻 Post Form component
export const PostForm = ({
    handlePostSubmit,
    content,
    setContent,
    date,
    setDate,
    disableBtn,
    setUseAI,
    useAI,
}: FormProps) => {
    const getNowForDatetimeLocal = () => {
        const now = new Date();
        return new Date(now.getTime() - now.getTimezoneOffset() * 60000)
            .toISOString()
            .slice(0, 16);
    };

    return (
        <form onSubmit={handlePostSubmit}>
            <p onClick={() => setUseAI(!useAI)}>Generate posts with AI </p>
            <textarea
                value={content}
                onChange={(e) => setContent(e.target.value)}
                rows={4}
                placeholder="What's happening?"
                required
                maxLength={280}
            />
            <input
                type='datetime-local'
                min={getNowForDatetimeLocal()}
                value={date}
                onChange={(e) => setDate(e.target.value)}
            />
            <button disabled={disableBtn} type='submit'>
                {disableBtn ? "Posting..." : "Create post"}
            </button>
        </form>
    );
};

Congratulations! You've completed the application interface.

How to integrate Gemini API for Post Generation

Here, you will learn how to generate post content from the user's prompt using the Gemini API.

Before we proceed, make sure you have copied your API key from the Google AI Studio.

Create an api folder inside the Next.js app directory. This folder will contain the API routes used to generate AI content and create or schedule posts using the Late API.

cd app && mkdir api

Next, create a generate folder inside the api directory and add a route.ts file. Copy the following code into the file:

// 👇🏻 In api/generate/route.ts file
import { NextRequest, NextResponse } from "next/server";
import { GoogleGenAI } from "@google/genai";

const ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY! });

export async function POST(req: NextRequest) {
    const { prompt } = await req.json();

    try {
        const response = await ai.models.generateContent({
            model: "gemini-3-flash-preview",
            contents: `
    You are a social media post generator, very efficient in generating engaging posts for Twitter (X). Given a topic, generate a creative and engaging post that captures attention and encourages interaction. This posts will always be within the character limit of X (Twitter) which is 280 characters, which includes any hashtags or mentions, spaces, punctuation, and emojis.

    The user will provide a topic or theme, and you will generate a post based on that input.
    Here is the instruction from the user:
    "${prompt}"`,
        });
        if (!response.text) {
            return NextResponse.json(
                {
                    message: "Encountered an error generating the post.",
                    success: false,
                },
                { status: 400 },
            );
        }

        return NextResponse.json(
            { message: response.text, success: true },
            { status: 200 },
        );
    } catch (error) {
        return NextResponse.json(
            { message: "Error generating post.", success: false },
            { status: 500 },
        );
    }
}

The api/generate endpoint accepts the user's prompt and generates post content using the Gemini API.

Now you can send a request to the newly created /api/generate endpoint from the NewPost component. Update the handleGeneratePost function as shown below:

const handleGeneratePost = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setDisableBtn(true);
    const result = await fetch("/api/generate", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({ prompt }),
    });

    const data = await result.json();
    if (data.success) {
        setUseAI(false);
        setContent(data.message);
        setPrompt("");
    }
    setDisableBtn(false);
};

The handleGeneratePost function accepts the user's prompt and returns the AI-generated content.

How to Use Late API in Next.js

Late provides API endpoints that let you create, schedule, and manage posts programmatically. This allows you to integrate social media posting directly into your applications or automation workflows.

To get started, copy your Late API key and the account ID of your social media platforms into the .env.local file:

LATE_API_KEY=<Late_API_key>
ACCOUNT_ID=<social_media_acct_id>

# Gemini API key
GEMINI_API_KEY=<gemini_API_key>

Note: In this tutorial, we will be using Twitter (X) as the social media platform for scheduling posts. You can adapt the same workflow to other platforms supported by Late API by updating the platform and accountId values in your API requests.

Create an api/post endpoint to accept post content and schedule or publish posts using the Late API.

cd api
mkdir post && cd post
touch route.ts

Then, add the following POST method to post/route.ts:

import { NextRequest, NextResponse } from "next/server";
import utc from "dayjs/plugin/utc";
import dayjs from "dayjs";

dayjs.extend(utc);

export async function POST(req: NextRequest) {
    const { content, publishAt } = await req.json();

    // Determine if the post should be scheduled or published immediately
    const nowUTC = publishAt ? dayjs(publishAt).utc() : null;
    const publishAtUTC = nowUTC ? nowUTC.format("YYYY-MM-DDTHH:mm") : null;

    try {
        const response = await fetch("https://getlate.dev/api/v1/posts", {
            method: "POST",
            headers: {
                Authorization: `Bearer ${process.env.LATE_API_KEY}`,
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                content,
                platforms: [
                    {
                        platform: "twitter",
                        accountId: process.env.ACCOUNT_ID!,
                    },
                ],
                publishNow: !publishAt,
                scheduledFor: publishAtUTC,
            }),
        });

        const { post, message } = await response.json();

        if (post?._id) {
            return NextResponse.json({ message, success: true }, { status: 201 });
        }

        return NextResponse.json({ message: "Error occurred", success: false }, { status: 500 });
    } catch (error) {
        return NextResponse.json({ message: "Error scheduling post.", success: false }, { status: 500 });
    }
}

From the code snippet above:

• The api/post endpoint accepts the post’s content and an optional publishAt time.

• If publishAt is null, the post is published immediately. Otherwise, the time is converted to UTC for scheduling.

• It then sends a request to the Late API using your API key and the account ID to create or schedule the post on the selected social media platform.

You can also add a GET method to the /api/post endpoint to retrieve posts that have already been created or scheduled:

export async function GET() {
    try {
        const response = await fetch(
            "https://getlate.dev/api/v1/posts?platform=twitter",
            {
                method: "GET",
                headers: {
                    Authorization: `Bearer ${process.env.LATE_API_KEY}`,
                    "Content-Type": "application/json",
                },
            },
        );

        const { posts } = await response.json();

        return NextResponse.json({ posts }, { status: 200 });
    } catch (error) {
        return NextResponse.json(
            { message: "Error fetching posts.", success: false },
            { status: 500 },
        );
    }
}

Next, update the handlePostSubmit function in NewPost.tsx to send a POST request to /api/post. This will create or schedule the post and notify the user of the result:

const handlePostSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setDisableBtn(true);

    const now = new Date();
    const selected = date ? new Date(date) : null;
    const publishAt = !selected || selected <= now ? null : date;

    const result = await fetch("/api/post", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ content, publishAt }),
    });

    const { message, success } = await result.json();

    if (success) {
        setContent("");
        setDate("");
        alert("Success: " + message);
    } else {
        alert("Error: " + message);
    }

    setDisableBtn(false);
};

Finally, fetch all scheduled or published posts and render them in the PostsQueue component:

const fetchScheduledPosts = useCallback(async () => {
    try {
        const response = await fetch("/api/post", {
            method: "GET",
            headers: { "Content-Type": "application/json" },
        });
        const data = await response.json();
        setPosts(data.posts);
        setLoading(false);
    } catch (error) {
        console.error("Error fetching scheduled posts:", error);
        setLoading(false);
    }
}, []);

useEffect(() => {
    fetchScheduledPosts();
}, [fetchScheduledPosts]);

🎉 Congratulations! You’ve successfully built an AI-powered social media post scheduler using Next.js, Gemini API, and Late API.

The source code for this tutorial is available on GitHub.

Conclusion

In this tutorial, you’ve learnt how to create and schedule social media posts across multiple platforms using a single scheduling platform, Late, and how to generate AI content using the Gemini API.

The Late API is a powerful tool for automating social media tasks, posting at specific intervals, managing multiple accounts, and tracking analytics – all from one platform. By combining it with generative AI models like Gemini and automation tools like n8n or Zapier, you can build automated workflows that keep your audience engaged with minimal effort.

The Gemini API also makes it easy to integrate AI-powered text, images, or code generation directly into your applications, opening up a wide range of creative possibilities.

Thank you for reading! 🎉

In this tutorial, you'll learn how to build a social learning platform that connects students with professionals across various fields. The platform enables users to:

• Schedule video conferencing sessions that students can join,

• Share posts or announcements about trending tools and upcoming sessions, and

• Create community channels where students can engage with one another.

The Stream Video & Audio SDK and Stream Chat SDK will enable us to integrate video calls and community channels easily into the application.

Table of Contents

• App Overview

• Prerequisites

• How to Set up Server-Side Authentication with Supabase

  • How to Configure Supabase Authentication in a Next.js application

  • Student Authentication with Supabase

  • Instructor Authentication with Supabase

• The Application Database Design

  • Access Policy for the Announcements Table

  • Access Policy for the Instructors Table

  • Access Policy for the Students Table

• How to Add a Video Conferencing Feature with Stream

  • Setting Up Stream Video & Audio SDK in Next.js

  • Creating and Scheduling Calls with Stream

  • Joining Stream Video Calls

  • Stream Call UI Components

• How to Integrate a Group Chat Feature Using Stream Chat Messaging

  • Setting Up the Stream Chat SDK in Next.js

  • Stream Chat UI Components

• Next Steps

App Overview

The application consists of two types of users (students and instructors), each with access to specific features:

Students can do the following:

• View an activity feed with posts from instructors and react to them.

• Follow instructors in their field of interest.

• Join upcoming video sessions and community channels.

• Each student has an interest attribute that helps match them with relevant instructors.

Instructors can also:

• Access a dashboard showing their follower count and post activity.

• Schedule video conferences for students to join.

• Make announcements or share posts.

• Create community channels (if they haven't already).

• The platform suggests instructors to students based on shared career interests.

Here is an image showing the various functions that the users can perform:

Prerequisites

To fully understand this tutorial, you need to have a basic understanding of React or Next.js.

We will use the following tools:

• Supabase: a Backend-as-a-service platform that makes it easy to integrate authentication, database, real-time communication, file storage, and edge functions within your software applications. It also supports multiple programming languages.

• Stream Chat and Audio & Video SDK: a real-time communication platform that enables you to add video, chat, and various types of communication to your application.

• Shadcn UI: a UI component library that provides customizable, beautifully designed, and accessible UI components for your applications.

Create a Next.js project by running the following code snippet:

npx create-next-app stream-lms

Install the package dependencies for the project:

npm install @supabase/supabase-js @supabase/ssr @stream-io/node-sdk @stream-io/video-react-sdk stream-chat stream-chat-react @emoji-mart/data @emoji-mart/react

To install the Shadcn UI library, follow the installation guide.

Once everything is set up, your Next.js project is ready. Now, let's start building! 🚀

How to Set up Server-Side Authentication with Supabase

Here, you'll learn how to configure Supabase, add server-side authentication, and protect pages from unauthorized users in a Next.js application. You'll also learn how to handle the authentication logic efficiently using Next.js server actions.

How to Configure Supabase Authentication in a Next.js application

First, create a Supabase account and an organization that will contain your various Supabase projects.

Add a new Supabase project to the organisation and copy the following credentials on your dashboard into a .env.local file at the root of your project:

NEXT_PUBLIC_SUPABASE_ANON_KEY=<anon_key_from_Supabase_dashboard>
NEXT_PUBLIC_SUPABASE_URL=<supabase_project_url>

Create a utils/supabase folder at the root of the Next.js project and add the following files to the folder: client.ts, middleware.ts, and server.ts.

mkdir utils && cd utils
mkdir supabase && cd supabase
touch client.ts middleware.ts server.ts

Copy the following code into utils/supabase/client.ts. This initializes a Supabase browser client to interact with Supabase on client-side routes:

import { createBrowserClient } from "@supabase/ssr";

export function createClient() {
    return createBrowserClient(
        process.env.NEXT_PUBLIC_SUPABASE_URL!,
        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
    );
}

Next, copy the following code into utils/supabase/server.ts. This creates a Supabase server client for handling authentication and interacting with Supabase in server-side requests:

import { createServerClient } from "@supabase/ssr";
import { cookies } from "next/headers";

export async function createClient() {
    const cookieStore = await cookies();

    return createServerClient(
        process.env.NEXT_PUBLIC_SUPABASE_URL!,
        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
        {
            cookies: {
                getAll() {
                    return cookieStore.getAll();
                },
                setAll(cookiesToSet) {
                    try {
                        cookiesToSet.forEach(({ name, value, options }) =>
                            cookieStore.set(name, value, options)
                        );
                    } catch {
                        // The `setAll` method was called from a Server Component.
                        // This can be ignored if you have middleware refreshing
                        // user sessions.
                    }
                },
            },
        }
    );
}

Now, copy the following code into utils/supabase/middleware.ts. This middleware creates authentication cookies and protects pages from unauthorized access:

import { createServerClient } from "@supabase/ssr";
import { NextResponse, type NextRequest } from "next/server";

export async function updateSession(request: NextRequest) {
    let supabaseResponse = NextResponse.next({
        request,
    });
    //👇🏻 creates the Supabase cookie functions
    const supabase = createServerClient(
        process.env.NEXT_PUBLIC_SUPABASE_URL!,
        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
        {
            cookies: {
                getAll() {
                    return request.cookies.getAll();
                },
                setAll(cookiesToSet) {
                    cookiesToSet.forEach(({ name, value }) =>
                        request.cookies.set(name, value)
                    );
                    supabaseResponse = NextResponse.next({
                        request,
                    });
                    cookiesToSet.forEach(({ name, value, options }) =>
                        supabaseResponse.cookies.set(name, value, options)
                    );
                },
            },
        }
    );

    // 👉🏻 placeholder for protected route controller
}

To enforce authentication, add the following code inside the placeholder in middleware.ts. This checks if a user is signed in and redirects unauthenticated users to the login page:

//👇🏻 gets current user
const {
    data: { user },
} = await supabase.auth.getUser();

//👇🏻 declares protected routes
if (
    !user &&
    request.nextUrl.pathname !== "/" &&
    !request.nextUrl.pathname.startsWith("/instructor/auth") &&
    !request.nextUrl.pathname.startsWith("/student/auth")
) {
    //👇🏻 Redirect unauthenticated users to the login page
    const url = request.nextUrl.clone();
    url.pathname = "/student/auth/login"; // 👈🏼 redirect page
    return NextResponse.redirect(url);
}
//👇🏻 returns Supabase response
return supabaseResponse;

Add another middleware.ts file to the root of the Next.js project and copy the following code into the file:

import { type NextRequest } from "next/server";
import { updateSession } from "./utils/supabase/middleware";

export async function middleware(request: NextRequest) {
    return await updateSession(request);
}

export const config = {
    matcher: [
        /*
         * Match all request paths except for the ones starting with:
         * - _next/static (static files)
         * - _next/image (image optimization files)
         * - favicon.ico (favicon file)
         * Feel free to modify this pattern to include more paths.
         */
        "/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
    ],
};

Finally, create an auth/confirm route and error page within the Next.js app folder.

You've successfully configured authentication in your Next.js project using Supabase.

Student Authentication with Supabase

In this section, you will learn how to create the signup and login functions for the students within the application.

First, create an actions folder in the root of your Next.js project and add an auth.ts file inside it. This file will contain all Supabase authentication functions.

Add the following imports to the top of the auth.ts file:

"use server";
import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";
import { createClient } from "../utils/supabase/server";

Next, you need to create the server functions that accept form data from the client and sign users up or log them in as students.

Copy the following code snippet into the actions/auth.ts file to create the user sign-up function:

export async function studentSignUp(formData: FormData) {
    const supabase = await createClient();

    //👇🏻 Extract form data
    const credentials = {
        email: formData.get("email") as string,
        password: formData.get("password") as string,
        interest: formData.get("interest") as string,
        name: formData.get("name") as string,
    };

    //👇🏻 Supabase sign up function (options attribute :- for user metadata)
    const { data, error } = await supabase.auth.signUp({
        email: credentials.email,
        password: credentials.password,
        options: {
            data: {
                interest: credentials.interest,
                name: credentials.name,
            },
        },
    });

    //👉🏻 return user or error object
}

The code snippet above accepts the form credentials such as email, password, interest, and name, and signs the user up as a Supabase user.

Modify the function to return the user or error object.

export async function studentSignUp(formData: FormData) {
    //...form inputs and supabase functions

    if (error) {
        return { error: error.message, status: error.status, user: null };
    } else if (data.user?.identities?.length === 0) {
        return { error: "User already exists", status: 409, user: null };
    }

    revalidatePath("/", "layout");
    return { error: null, status: 200, user: data.user };
}

Create the student login function as shown below:

export async function studentLogIn(formData: FormData) {
    const supabase = await createClient();

    const credentials = {
        email: formData.get("email") as string,
        password: formData.get("password") as string,
    };
    const { data, error } = await supabase.auth.signInWithPassword(credentials);

    if (error) {
        return { error: error.message, status: error.status, user: null };
    }
    //👇🏻 only instructors have an image attribute
    if (data && data.user.user_metadata.image) {
        return { error: "You are not a student", status: 400, user: null };
    }

    //👉🏻 create a student row and add to the database

    revalidatePath("/", "layout");
    return { error: null, status: 200, user: data.user };
}

The code above takes the student's email and password to log them into the application.

• If an error occurs, it returns an error message.

• If the user object includes an image attribute (indicating that they are an instructor), they are prevented from logging in.

Once the student is signed in, you must store their details in a Supabase table. This allows you to add a following_list column that tracks the instructors they follow. The list will be updated whenever the student follows or unfollows an instructor.

export async function studentLogIn(formData: FormData) {
    //...other functions

    const { data: existingUser } = await supabase
        .from("students")
        .select()
        .eq("email", credentials.email)
        .single();

    //👇🏻 if student doesn't exist
    if (!existingUser) {
        const { error: insertError } = await supabase.from("students").insert({
            email: credentials.email,
            name: data.user.user_metadata.name,
            interest: data.user.user_metadata.interest,
            id: data.user.id,
            following_list: [] as string[],
        });

        if (insertError) {
            return { error: insertError.message, status: 500, user: null };
        }
    }

    revalidatePath("/", "layout");
    return { error: null, status: 200, user: data.user };
}

Every time a student logs in, the code checks if they already exist in the students table.

• If the student is found, no new entry is created.

• If the student is not found, a new row with their details is added.

Each student’s data includes two primary keys: id and email and additional columns: interest, name, and following_list.

Instructor Authentication with Supabase

The instructor's user object is quite different from the student's. It includes data such as email, password, name, interest, occupation, bio, URL, and image.

Add the following function to actions/auth.ts to handle instructor sign-ups:

export async function instructorSignUp(formData: FormData) {
    const supabase = await createClient();

    //👇🏻 get user credentials from the form
    const credentials = {
        email: formData.get("email") as string,
        password: formData.get("password") as string,
        interest: formData.get("interest") as string,
        name: formData.get("name") as string,
        occupation: formData.get("occupation") as string,
        bio: formData.get("bio") as string,
        url: formData.get("url") as string,
        image: formData.get("image") as File,
    };

    //👉🏻 following code snippet below
}

Next, upload the image to Supabase Storage and retrieve its download URL before signing up the user as an instructor. Update the instructorSignUp function to show this:

export async function instructorSignUp(formData: FormData) {
    //👇🏻 upload instructor's image
    const { data: imageData, error: imageError } = await supabase.storage
        .from("headshots")
        .upload(`${crypto.randomUUID()}/image`, credentials.image);

    if (imageError) {
        return { error: imageError.message, status: 500, user: null };
    }
    //👇🏻 get the image URL
    const imageURL = `${process.env.STORAGE_URL!}${imageData.fullPath}`;

    //👇🏻 authenticate user as instructor
    const { data, error } = await supabase.auth.signUp({
        email: credentials.email,
        password: credentials.password,
        options: {
            data: {
                interest: credentials.interest,
                name: credentials.name,
                occupation: credentials.occupation,
                bio: credentials.bio,
                url: credentials.url,
                image: imageURL,
            },
        },
    });

    //👇🏻 return user or error object
    if (error) {
        return { error: error.message, status: error.status, user: null };
    }

    revalidatePath("/", "layout");
    return { error: null, status: 200, user: data.user };
}

Finally, an instructor login function that authenticates the user, similar to the student login function, should be created. It should check whether the instructor already exists in the instructors table. If the instructor does not exist, execute the function to add the instructor's user object to the database table.

Here is the Supabase function for adding an instructor to the table:

const { error: insertError } = await supabase.from("instructors").insert({
    email: credentials.email,
    name: data.user.user_metadata.name,
    occupation: data.user.user_metadata.occupation,
    bio: data.user.user_metadata.bio,
    url: data.user.user_metadata.url,
    image: data.user.user_metadata.image,
    id: data.user.id,
    interest: data.user.user_metadata.interest,
    followers: [],
});

The instructors table includes an additional followers attribute, which stores an array of student IDs following the instructor. You can find the complete code on GitHub.

Additionally, authentication functions like getUserSession and logOut must be created. These functions will retrieve the current user's object and allow them to log out when necessary, such as when clicking a logout button.

The Application Database Design

In the previous section, we created two database tables: instructors and students, which store instructors and students separately. Instructors can also upload headshot images to Supabase Storage.

In this section, you'll learn how to create these tables, define their access policies, and retrieve or modify data within the tables.

Note: The instructors table includes an image column that stores the instructor's headshot URL. You can obtain this by creating a Supabase bucket named headshot and uploading the image when the instructor signs up.

The instructors and students tables have two primary keys: id and email.

Supabase allows you to define policies for your tables, controlling the operations different users can perform within the application.

Next, let’s create the access policies for each table.

Access Policy for the Announcements Table

The announcements table has four access policies:

• Enable delete operation for users based on their user ID.

    alter policy "Enable delete for users based on user_id"
    on "public"."announcements"
    to public
    using (
      (( SELECT auth.uid() AS uid) = author_id)
    );
  

• Enable insert operation for authenticated users only.

    alter policy "Enable insert for authenticated users only"
    on "public"."announcements"
    to authenticated
    with check (
      true
    );
  

• Enable read access for all users.

    alter policy "Enable read access for all users"
    on "public"."announcements"
    to public
    using (
      true
    );
  

• Enable update operation for authenticated users only.

    alter policy "Enable update for authenticated users"
    on "public"."announcements"
    to authenticated
    using (
      (auth.role() = 'authenticated'::text)
    );
  

Access Policy for the Instructors Table

The instructors table has three policies:

• Allow only authenticated users to update the instructors table.

    alter policy "Allow only authenticated users"
    on "public"."instructors"
    to authenticated
    using (
      (auth.role() = 'authenticated'::text)
    );
  

• Enable insert operation for authenticated users only.

    alter policy "Enable insert for authenticated users only"
    on "public"."instructors"
    to authenticated
    with check (
      true
    );
  

• Enable read access for all users.

    alter policy "Enable read access for all users"
    on "public"."instructors"
    to public
    using (
      true
    );
  

Access Policy for the Students Table

The students table has three access policies:

• Enable insert operation for authenticated users only.

    alter policy "Enable insert for authenticated users only"
    on "public"."students"
    to authenticated
    with check (
      true
    );
  

• Enable update operation for authenticated users only.

    alter policy "Enable update for only authenticated users"
    on "public"."students"
    to authenticated
    using ((auth.role() = 'authenticated'::text))
  

• Enable read access for authenticated users only.

    alter policy "Read access for only authenticated users"
    on "public"."students"
    to authenticated
    using (
      true
    );
  

How to Add a Video Conferencing Feature with Stream

In this section, I'll walk you through adding a video conferencing feature to the application using the Stream Audio & Video SDK. This will enable instructors to schedule educational sessions and allow students to join the meetings.

Setting Up Stream Video & Audio SDK in Next.js

Create a Stream account and a new organization that holds all your apps.

Add a new app to the organization and copy the Stream API and Secret key into the .env.local file.

NEXT_PUBLIC_STREAM_API_KEY=<paste_from_Stream_app_dashboard>
STREAM_SECRET_KEY=<paste_from_Stream_app_dashboard>

Create a new file named stream.action.ts inside the actions folder at the root of your Next.js project. This is the same folder where the authentication server actions for Supabase are stored. Then, copy the following code snippet into the file:

"use server";

import { getUserSession } from "./auth";
import { StreamClient } from "@stream-io/node-sdk";

const STREAM_API_KEY = process.env.NEXT_PUBLIC_STREAM_API_KEY!;
const STREAM_API_SECRET = process.env.STREAM_SECRET_KEY!;

export const tokenProvider = async () => {
    const { user } = await getUserSession();

    if (!user) throw new Error("User is not authenticated");
    if (!STREAM_API_KEY) throw new Error("Stream API key secret is missing");
    if (!STREAM_API_SECRET) throw new Error("Stream API secret is missing");

    const streamClient = new StreamClient(STREAM_API_KEY, STREAM_API_SECRET);

    const expirationTime = Math.floor(Date.now() / 1000) + 3600;
    const issuedAt = Math.floor(Date.now() / 1000) - 60;

    const token = streamClient.generateUserToken({
        user_id: user.id,
        exp: expirationTime,
        validity_in_seconds: issuedAt,
    });

    return token;
};

• From the code snippet above,

  • The getUserSession function returns the Supabase user object for the current user.

  • The tokenProvider function generates an authentication token for the user, enabling Stream to identify and manage users during real-time communication.

Create a providers folder containing a StreamVideoProvider component within the Next.js app folder and copy the following code snippet into the file:

"use client";
import { createClient } from "../../../utils/supabase/client";
import { tokenProvider } from "../../../actions/stream.action";
import { StreamVideo, StreamVideoClient } from "@stream-io/video-react-sdk";
import { useState, ReactNode, useEffect, useCallback } from "react";
import { Loader2 } from "lucide-react";

const apiKey = process.env.NEXT_PUBLIC_STREAM_API_KEY!;

export const StreamVideoProvider = ({ children }: { children: ReactNode }) => {
    const [videoClient, setVideoClient] = useState<StreamVideoClient | null>(
        null
    );
    const supabase = createClient();

    const getUser = useCallback(async () => {
        //👉🏻 get user object from Supabase
        //👉🏻 set Stream user data
        // 👉🏻 initialize Stream video client using the Stream API key, Stream user data, and token Provider
    }, [supabase.auth]);

    useEffect(() => {
        getUser();
    }, [getUser]);

    if (!videoClient)
        return (
            <div className='h-screen flex items-center justify-center'>
                <Loader2 size='32' className='mx-auto animate-spin' />
            </div>
        );

    return <StreamVideo client={videoClient}>{children}</StreamVideo>;
};

The StreamVideoProvider component is initialized and manages Stream’s video functionality across the application. It wraps all pages that require access to Stream's real-time video features. This includes:

• instructor/[id] – displays an instructor’s upcoming sessions.

• instructor/dashboard – allows instructors to schedule new video calls.

Update the getUser function as shown below:

const getUser = useCallback(async () => {
    const { data, error } = await supabase.auth.getUser();
    const { user } = data;
    if (error || !user || !apiKey) return;
    if (!tokenProvider) return;

    let streamUser;

    if (user.user_metadata?.image) {
        streamUser = {
            // 👇🏻 user is an instructor
            id: user.id,
            name: user.user_metadata?.name,
            image: user.user_metadata?.image,
        };
    } else {
        // 👇🏻 user is a student
        streamUser = {
            id: user.id,
            name: user.user_metadata?.name,
        };
    }

    //👇🏻 create s Stream video client
    const client = new StreamVideoClient({
        apiKey,
        user: streamUser,
        tokenProvider,
    });

    setVideoClient(client);
}, [supabase.auth]);

The getUser function retrieves the current user's data from Supabase Auth, sets up the Stream user, and initializes a Stream video client using the Stream API key, the user’s object and the token.

Creating and Scheduling Calls with Stream

Here, you will learn how to allow instructors to schedule calls using the Stream Video & Audio SDK.

Before we proceed, create a hooks folder within the Next.js app folder and add these files:

cd app && mkdir hooks
cd hooks
touch useGetCallById.ts useGetCalls.ts

The useGetCallById file defines a React hook that fetches details of a specific Stream call via its ID, while the useGetCalls hook retrieves all calls created by a particular Stream user.

Let's create these custom React hooks.

Copy the following code snippet into the useGetCallById.ts file:

import { useEffect, useState } from "react";
import { Call, useStreamVideoClient } from "@stream-io/video-react-sdk";

export const useGetCallById = (id: string | string[]) => {
    const [call, setCall] = useState<Call>();
    const [isCallLoading, setIsCallLoading] = useState(true);

    const client = useStreamVideoClient();

    useEffect(() => {
        if (!client) return;

        const loadCall = async () => {
            try {
                // https://getstream.io/video/docs/react/guides/querying-calls/#filters
                const { calls } = await client.queryCalls({
                    filter_conditions: { id },
                });

                if (calls.length > 0) setCall(calls[0]);

                setIsCallLoading(false);
            } catch (error) {
                console.error(error);
                setIsCallLoading(false);
            }
        };

        loadCall();
    }, [client, id]);

    return { call, isCallLoading };
};

Add the following to the useGetCalls.ts file:

import { useEffect, useState } from "react";
import { Call, useStreamVideoClient } from "@stream-io/video-react-sdk";
import { useParams } from "next/navigation";

export const useGetCalls = () => {
    const client = useStreamVideoClient();
    const [calls, setCalls] = useState<Call[]>();
    const [isLoading, setIsLoading] = useState(false);
    const { id } = useParams<{ id: string }>();

    useEffect(() => {
        const loadCalls = async () => {
            if (!client || !id) return;

            setIsLoading(true);

            try {
                const { calls } = await client.queryCalls({
                    sort: [{ field: "starts_at", direction: 1 }],
                    filter_conditions: {
                        starts_at: { $exists: true },
                        $or: [{ created_by_user_id: id }, { members: { $in: [id] } }],
                    },
                });

                setCalls(calls);
            } catch (error) {
                console.error(error);
            } finally {
                setIsLoading(false);
            }
        };

        loadCalls();
    }, [client, id]);

    const now = new Date();
    //👇🏻 upcoming calls
    const upcomingCalls = calls?.filter(({ state: { startsAt } }: Call) => {
        return startsAt && new Date(startsAt) > now;
    });
    //👇🏻 ongoing calls
    const ongoingCalls = calls?.filter(
        ({ state: { startsAt, endedAt } }: Call) => {
            return startsAt && new Date(startsAt) < now && !endedAt;
        }
    );

    return { upcomingCalls, isLoading, ongoingCalls };
};

The useGetCalls hook retrieves all calls where the instructor is either the creator or a participant, returning both current and upcoming calls. It also returns an isLoading state to indicate when data is being fetched, allowing for conditional rendering.

Add the function below to the instructor's dashboard to allow instructors to create or schedule calls. This function accepts a call description along with the scheduled date and time.

//👇🏻 imports
import { useStreamVideoClient, Call } from "@stream-io/video-react-sdk";
const client = useStreamVideoClient();
//👇🏻 Form states
const [description, setDescription] = useState<string>("");
const [dateTime, setDateTime] = useState<string>("");

const handleScheduleMeeting = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!client || !user) return;

    try {
        const id = crypto.randomUUID();
        const call = client.call("default", id);
        if (!call) throw new Error("Failed to create meeting");
    //👇🏻 create Stream call
        await call.getOrCreate({
            data: {
                starts_at: new Date(dateTime).toISOString(),
                custom: {
                    description,
                },
            },
        });

        //👇🏻 Call object
        console.log({ call });
    } catch (error) {
        console.error(error);
    }
};

The code snippet above initializes a Stream video call with a default call type. It assigns the call a unique ID, sets the scheduled date and time, and includes a custom description.

Note: Ensure that the <StreamVideoProvider> component wraps the instructor's dashboard where the video call is being created. You can achieve this by adding a layout.tsx file to the dashboard page and wrapping all child elements with <StreamVideoProvider>.

Joining Stream Video Calls

The instructor/[id] page displays detailed information about a specific instructor from Supabase and lists of their current and upcoming calls. This allows students to view scheduled meetings and join them when they start.

To implement this functionality, we will use the MeetingsBox component within the instructor's profile page and create a dedicated calls/[id] page route for joining calls.

First, create a (stream) folder and add a calls/[id] page route. Then, create a layout.tsx file within the (stream) folder and insert the following code:

import { StreamVideoProvider } from "../providers/StreamVideoProvider";
import type { Metadata } from "next";

export const metadata: Metadata = {
    title: "Calls & Chat | LinkedUp",
    description: "Generated by create next app",
};

export default function AuthLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
    return <StreamVideoProvider>{children}</StreamVideoProvider>;
}

The layout.tsx file ensures that the StreamVideoProvider component wraps all pages inside the (stream) folder, enabling access to Stream's video and audio features across these pages.

Next, render the calls within the MeetingsBox component and and let students join meetings.

"use client";
import { formatDateTime } from "@/lib/utils";
import { Call } from "@stream-io/video-react-sdk";
import { useRouter } from "next/navigation";

export default function MeetingsBox({
    upcomingCalls,
    isLoading,
    ongoingCalls,
}: {
    upcomingCalls: Call[] | undefined;
    isLoading: boolean;
    ongoingCalls: Call[] | undefined;
}) {
    const router = useRouter();

    if (isLoading || !upcomingCalls || !ongoingCalls) {
        return <p className='text-xs opacity-60'>Fetching calls...</p>;
    }

    if (upcomingCalls.length === 0) {
        return <p className='text-xs  opacity-60'>No upcoming meetings</p>;
    }

    return {
        // --- upcoming and ongoing calls display elements ---
    };
}

Return the following UI elements from the component to allow everyone to see the instructor's current and upcoming meetings.

return (
    <div className='space-y-4'>
        // --- ongoing calls ---
        {ongoingCalls.map((call) => (
            <div className='bg-white p-2 rounded-md' key={call.id}>
                <h3 className='text-sm font-bold text-gray-500 mb-2'>
                    {call.state.custom.description}
                </h3>
                <p className='text-xs'>
                    Started: {formatDateTime(call.state?.startsAt?.toLocaleString())}
                </p>
                <div className='flex items-center space-x-4'>
                    <button
                        className='bg-blue-500 text-white px-4 py-2 text-xs rounded-md mt-2'
                        onClick={() => handleJoinCall(call)}
                    >
                        Join In
                    </button>

                    <button
                        className='bg-gray-500 text-white px-4 py-2 text-xs rounded-md mt-2'
                        onClick={() => handleCopyLink(call)}
                    >
                        Copy Link
                    </button>
                </div>
            </div>
        ))}
        // --- upcoming calls ---
        {upcomingCalls.map((call) => (
            <div className='bg-white p-2 rounded-md' key={call.id}>
                <h3 className='text-sm font-bold text-gray-500 mb-2'>
                    {call.state.custom.description}
                </h3>

                <div className='flex items-center space-x-4'>
                    <button
                        className='bg-blue-500 text-white px-4 py-2 text-xs rounded-md mt-2'
                        disabled={true}
                    >
                        {formatDateTime(call.state?.startsAt?.toLocaleString())}
                    </button>

                    <button
                        className='bg-gray-500 text-white px-4 py-2 text-xs rounded-md mt-2'
                        onClick={() => handleCopyLink(call)}
                    >
                        Copy Link
                    </button>
                </div>
            </div>
        ))}
    </div>
);

The MeetingsBox component renders the instructor's current and upcoming calls, allowing users to copy the call link and join meetings.

Execute the handleJoinCall function to redirect the user to the call page. This allows them to confirm the action before joining the call. The handleCopyLink function copies the call link to the clipboard.

const handleJoinCall = (call: Call) => {
    router.push(`/call/${call.id}`);
};

const handleCopyLink = (call: Call) => {
    navigator.clipboard.writeText(
        `${process.env.NEXT_PUBLIC_PAGE_URL!}/call/${call.id}`
    );
    console.log({
        title: "Link copied to clipboard",
        description: "You can now share the link with interested participants",
    });
};

Now, create the call/[id]/page.tsx component and copy the following code into the file:

"use client";
import { useParams } from "next/navigation";
import { useEffect, useState, useCallback } from "react";
import { useRouter } from "next/navigation";
import { User } from "@supabase/supabase-js";
import { createClient } from "../../../../../utils/supabase/client";

export default function CallPage() {
    const { id } = useParams<{ id: string }>();
    const [user, setUser] = useState<User | null>(null);
    const router = useRouter();

    const authenticateUser = useCallback(async () => {
        const supabase = createClient();
        const { data } = await supabase.auth.getUser();
        const userData = data.user;
        if (!userData) {
            return router.push("/student/auth/login");
        }
        setUser(userData);
    }, [router, call, camMicEnabled]);

    useEffect(() => {
        authenticateUser();
    }, [authenticateUser]);

    return {
        // -- Conditionally render Stream Call component --
    };
}

The code snippet authenticates the user to ensure they are signed in.

Next, fetch the call details using the call ID from the page route via the useParams hook.

"use client";
//..other imports
import { useGetCallById } from "@/app/hooks/useGetCallById";
import { StreamCall, StreamTheme } from "@stream-io/video-react-sdk";

export default function CallPage() {
    //..other states
    const { call, isCallLoading } = useGetCallById(id);
    const [confirmJoin, setConfirmJoin] = useState<boolean>(false);
    const [camMicEnabled, setCamMicEnabled] = useState<boolean>(false);

    const handleJoin = () => {
        //👇🏻 Stream join call function
        call?.join();
        setConfirmJoin(true);
    };

    if (isCallLoading) return <p>Loading...</p>;

    if (!call) return <p>Call not found</p>;

    return (
        <main className='min-h-screen w-full items-center justify-center'>
            <StreamCall call={call}>
                <StreamTheme>
                    {confirmJoin ? (
                        <MeetingRoom call={call} />
                    ) : (
                        <div className='flex flex-col items-center justify-center gap-5 h-screen w-full'>
                            <h1 className='text-3xl font-bold'>Join Call</h1>
                            <p className='text-lg'>
                                Are you sure you want to join this call?
                            </p>
                            <div className='flex gap-5'>
                                <button
                                    onClick={handleJoin}
                                    className='px-4 py-3 bg-blue-600 text-blue-50'
                                >
                                    Join
                                </button>
                                <button
                                    onClick={() => router.back()}
                                    className='px-4 py-3 bg-red-600 text-red-50'
                                >
                                    Cancel
                                </button>
                            </div>
                        </div>
                    )}
                </StreamTheme>
            </StreamCall>
        </main>
    );
}

In the code snippet above,

• The StreamCall component wraps the entire call page, allowing access to various audio and video calling features. It accepts the call object as a prop.

• The StreamTheme component provides UI styling for the call, enabling you to use different themes.

• The confirmJoin state is initially set to false. When the user clicks the Join button, it triggers the handleJoin function, which joins the call and updates confirmJoin to true.

• When confirmJoin is true, the component renders the MeetingRoom component, which includes all prebuilt and customizable UI elements for the call provided by Stream.

Finally, update the authenticateUser function to prompt the Stream user to enable or disable the camera and microphone immediately after joining a call.

//👇🏻 call & camera disable/enable state
const [camMicEnabled, setCamMicEnabled] = useState<boolean>(false);

const authenticateUser = useCallback(async () => {
    const supabase = createClient();
    const { data } = await supabase.auth.getUser();
    const userData = data.user;
    if (!userData) {
        return router.push("/student/auth/login");
    }
    setUser(userData);
    //👇🏻 Enable camera and microphone
    if (camMicEnabled) {
        call?.camera.enable();
        call?.microphone.enable();
    } else {
        call?.camera.disable();
        call?.microphone.disable();
    }
}, [router, call, camMicEnabled]);

useEffect(() => {
    authenticateUser();
}, [authenticateUser]);

Stream Call UI Components

Stream makes setting up a call page easy using minimal UI components. It provides two prebuilt call layouts (PaginatedGridLayout and SpeakerLayout) and a customizable CallControls component.

• PaginatedGridLayout and SpeakerLayout define how call participants are displayed on the call page.

• CallControls provides essential call functionalities such as toggling video and audio, sharing the screen, leaving the call, and more.

Create the MeetingRoom component as follows:

const MeetingRoom = ({call} : {call: Call}) => {
    const [layout, setLayout] = useState<CallLayoutType>("grid");
    const router = useRouter();

//👇🏻 allows members to leave the call
    const handleLeave = () => {
        if (confirm("Are you sure you want to leave the call?")) {
            router.push("/");
        }
    };

//👇🏻 describes the call layout
    const CallLayout = () => {
        switch (layout) {
            case "grid":
                return <PaginatedGridLayout />;
            case "speaker-right":
                return <SpeakerLayout participantsBarPosition='left' />;
            default:
                return <SpeakerLayout participantsBarPosition='right' />;
        }
    };

  return (
    //  -- Stream call UI component--
  )
}

The handleLeave function enables call participants to leave the call and the CallLayout component determines how they are laid out on the screen.

Return the following from the MeetingRoom component:

return (
    <section className='relative min-h-screen w-full overflow-hidden pt-4'>
        <div className='relative flex size-full items-center justify-center'>
            <div className='flex size-full max-w-[1000px] items-center'>
                <CallLayout />
            </div>
            <div className='fixed bottom-0 flex w-full items-center justify-center gap-5'>
                <CallControls onLeave={handleLeave} />
            </div>

            <div className='fixed bottom-0 right-0 flex items-center justify-center gap-5 p-5'>
                <EndCallButton call={call} />
            </div>
        </div>
    </section>
);

The CallLayout and CallControls components are rendered on the page, allowing users to communicate, share their screen, turn their camera on or off, and engage in conversations through reactions.

Finally, create the EndCallButton component to enable the host (instructor) to end the call for everyone.

//👇🏻 Stream call hook
import { useCallStateHooks } from "@stream-io/video-react-sdk";

const EndCallButton = ({ call }: { call: Call }) => {
    const { useLocalParticipant } = useCallStateHooks();
    const localParticipant = useLocalParticipant();
    const router = useRouter();

    const participantIsHost =
        localParticipant &&
        call.state.createdBy &&
        localParticipant.userId === call.state.createdBy.id;

    if (!participantIsHost) return null;

    const handleEndCall = () => {
        call.endCall();
        console.log({
            title: "Call Ended",
            description: "The call has been ended for everyone",
        });
        router.push("/");
    };

    return (
        <button
            className='bg-red-500 text-white px-4 py-2 rounded-md mt-2'
            onClick={handleEndCall}
        >
            End Call for Everyone
        </button>
    );
};

The code snippet above ensures that only the call host can end the call for all participants. It first checks if the current user is the host before displaying the "End Call for Everyone" button.

How to Integrate a Group Chat Feature Using Stream Chat Messaging

In this section, you will learn how to integrate a community chat feature into the application. Each instructor will create a group chat for their followers (students). The chat will allow students to interact with one another and share documents, video links, text, images, and so on using the Stream Chat Messaging SDK.

Setting Up the Stream Chat SDK in Next.js

Add the following code snippet to the stream.action.ts file:

import { StreamChat } from "stream-chat";
import { getUserSession } from "./auth";

//👇🏻 creates a StreamChat instance
const serverClient = StreamChat.getInstance(STREAM_API_KEY, STREAM_API_SECRET);

//👇🏻 creates a token
export async function createToken(): Promise<string> {
    const { user } = await getUserSession();
    if (!user) throw new Error("User is not authenticated");
    return serverClient.createToken(user.id);
}

The code snippet above initializes a Stream Chat instance using its API key and secret key. It also includes a function that generates and returns a token based on the current user's ID.

To ensure that only instructors can create a community channel, follow these steps:

1. Retrieve all the channels where the instructor is a member.

2. If no channels are found (i.e., the returned array is empty), the instructor can create a new channel.

3. An error message is displayed if a channel already exists, informing the instructor that they can only have one community channel.

    export async function createChannel({
        userId,
        data,
    }: {
        userId: string;
        data: { name: string; imageUrl: string };
    }) {
        try {
            //👇🏻 retrieve channel list
            const channels = await serverClient.queryChannels(
                {
                    members: { $in: [userId] },
                    type: "messaging",
                },
                { last_message_at: -1 }
            );
            //👇🏻 instructor already has a channel
            if (channels.length > 0) {
                return {
                    success: false,
                    error: "You already have an existing channel",
                    id: channels[0].id,
                };
            }
            //👇🏻 declare channel type
            const channel = serverClient.channel("messaging", `channel-${userId}`, {
                name: data.name,
                image: data.imageUrl,
                members: [userId],
                created_by_id: userId,
            });
            //👇🏻 create a channel
            await channel.create();
            return { success: true, error: null, id: channel.id };
        } catch (err) {
            return { success: false, error: "Failed to create channel", id: null };
        }
    }
   

The code snippet above creates a public channel, meaning anyone can join at any time. Also, the channel name is linked to the instructor's ID, ensuring it remains unique to that instructor.

To retrieve the instructor's channel link, add a function inside the stream.action.ts file. This function should return the channel URL (channel ID), allowing members to access the channel whenever needed. Then, you can display this link on the instructor's profile for easy access.

export async function getInstructorChannel(userId: string) {
    try {
        const channels = await serverClient.queryChannels(
            {
                members: { $in: [userId] },
                type: "messaging",
            },
            { last_message_at: -1 }
        );
        return `/chat/${channels[0].id}`;
    } catch (err) {
        return null;
    }
}

Finally, to grant users access to the channel page, check if the user is already a member. If not, add the student as a member before rendering the chat page. This ensures that only authorized users can participate in the conversation.

export async function addUserToChannel(channelId: string, userId: string) {
    try {
        //👇🏻 check if student is already a member
        const channels = await serverClient.queryChannels(
            {
                members: { $in: [userId] },
                type: "messaging",
                id: channelId,
            },
            { last_message_at: -1 }
        );
        //👇🏻 student already a member (success - show chat page)
        if (channels.length > 0) {
            return {
                success: true,
                message: "Already a member",
                id: channels[0].id,
                error: null,
            };
        }
        //👇🏻 get channel by ID (student not a member)
        const channel = serverClient.channel("messaging", channelId);
        //👇🏻 add student to channel as a member
        await channel.addMembers([userId]);
        //👇🏻 student now a member (success - show chat page)
        return {
            success: true,
            error: null,
            id: channel.id,
            message: "Member just added",
        };
    } catch (error) {
        console.error("Error adding user to channel:", error);
        return {
            success: false,
            error: "Failed to add user to channel",
            id: null,
            message: null,
        };
    }
}

Stream Chat UI Components

Inside the (stream) folder, create a chat/[id]/page.tsx file. This page retrieves the channel ID from the page route and checks whether the user is already a channel member. If not, the user is automatically added as a member before displaying the chat interface.

Copy the following code snippet into the chat/[id]/page.tsx file:

"use client";
import { useCallback, useEffect, useState } from "react";
import StreamChat from "./../(components)/StreamChat";
import { useParams } from "next/navigation";
import { useRouter } from "next/navigation";

export default function ChatPage() {
    const [userData, setUserData] = useState<UserData | null>(null);
    const [joinChannel, setJoinChannel] = useState<boolean>(false);
    const params = useParams<{ id: string }>();
    const router = useRouter();

    const fetchUserData = useCallback(async () => {
        // 👉🏻 get user object & channel id from useParams
        // 👉🏻 execute the addUserToChannel() function declared in the previous section
        // 👉🏻 update the joinChannel React state
    }, [params.id, router]);

    useEffect(() => {
        fetchUserData();
    }, [fetchUserData]);

    if (!userData) {
        return null;
    }

    return (
        <>{joinChannel ? <StreamChat user={userData} /> : <ConfirmMember />}</>
    );
}

function ConfirmMember() {
    return (
        <div className='flex flex-col items-center justify-center h-screen'>
            <h1 className='text-2xl font-bold mb-4 text-blue-500'>
                You are not a member of this channel
            </h1>
            <p className='text-lg mb-4'>
                Please wait while we add you to the channel
            </p>

            <div className='loader'>
                <Loader2 size={48} className='animate-spin' />
            </div>
        </div>
    );
}

This code snippet ensures that a user is either already a member of the channel or is added before displaying the chat interface. The StreamChat component is a custom React component that contains all the Stream Chat UI elements. The ConfirmMember component shows a loading message while the user is added to the channel.

Create a StreamChat component and add the following imports to the file:

"use client";
import { useCallback } from "react";
//👇🏻 -- Stream chat UI components
import {
    Chat,
    Channel,
    ChannelList,
    Window,
    ChannelHeader,
    MessageList,
    MessageInput,
    useCreateChatClient,
} from "stream-chat-react";
// -- end of Stream chat UI components

//👇🏻 -- allows members to send emoji within the chat
import { EmojiPicker } from "stream-chat-react/emojis";
import { init, SearchIndex } from "emoji-mart";
import data from "@emoji-mart/data";
init({ data });
// -- end of emoji imports
//👇🏻 -- create token server action
import { createToken } from "../../../../../actions/stream.action";

Declare the StreamChat component as follows:

export default function StreamChat({ user }: { user: UserData }) {

    const tokenProvider = useCallback(async () => {
        return await createToken();
    }, []);

    const filters = { members: { $in: [user.id] }, type: "messaging" };
    const options = { presence: true, state: true };

    const client = useCreateChatClient({
        apiKey: process.env.NEXT_PUBLIC_STREAM_API_KEY!,
        tokenOrProvider: tokenProvider,
        userData: { id: user.id, name: user.name, image: user.image },
    });

    if (!client) return <div>Loading...</div>;

  return (
    // -- Stream Chat UI components --
  )

The useCreateChatClient hook creates a Stream chat client using the Stream API key, the user's data, and the token created using the createToken() function declared earlier in this section.

Finally, return the chat UI from the StreamChat component:

return (
    <Chat client={client}>
        <div className='chat-container'>
            {/* -- Channel List -- */}
            <div className='channel-list'>
                <ChannelList
                    sort={{ last_message_at: -1 }}
                    filters={filters}
                    options={options}
                />
            </div>

            {/* -- Messages Panel -- */}
            <div className='chat-panel'>
                <Channel EmojiPicker={EmojiPicker} emojiSearchIndex={SearchIndex}>
                    <Window>
                        <ChannelHeader />
                        <MessageList />
                        <MessageInput />
                    </Window>
                </Channel>
            </div>
        </div>
    </Chat>
);

• From the code snippet above:

  • Chat component initializes the Stream Chat client and wraps the entire Chat page.

  • ChannelList shows available chat channels.

  • Channel sets up an active chat session.

  • Window contains the message display and input areas.

  • ChannelHeader, MessageList, and MessageInput provide a fully functional chat interface.

Congratulations! You've completed this tutorial. The source code for this article is also available on GitHub.

Next Steps

So far, you've learned how to build a full-stack social learning platform using Stream and Supabase. This platform enables users to interact with one another through real-time chat powered by Stream.

Stream helps you build engaging apps that scale to millions with performant and flexible Chat, Video, Voice, Feeds, and Moderation APIs and SDKs powered by a global edge network and enterprise-grade infrastructure.

Here are some useful resources to help you get started:

• Stream Chat Documentation

• Stream Video and Audio Documentation

• Stream Activity Feeds

Thank you for reading! 🎉

In this tutorial, you'll learn how to design stunning email templates with React Email and send them using Resend – a simple and powerful email API platform.

Prerequisites

To get the most out of this tutorial, you should have a basic understanding of React or Next.js.

We'll also make use of the following tools:

• React Email: A library that lets you create beautifully designed email templates using React components.

• Resend: A simple and powerful API platform for sending emails from your applications.

How to Build the Application with Next.js

In this section, you'll create a simple customer support application. The app will include a form for users to submit their queries, which triggers an email notification confirming that a support ticket has been created.

To get started, we'll first set up the user interface and an API endpoint.

Run the following command to create a new Next.js TypeScript project:

npx create-next-app react-email-resend

Update the app/page.tsx file to render a form that collects the customer's details, including their full name, email address, the subject of the ticket, and a detailed message describing the issue. When the form is submitted, the input data is logged to the console using the handleSubmit function.

"use client";
import support from "@/app/images/support.jpg";
import { useState } from "react";
import Image from "next/image";

export default function Page() {
    //👇🏻 input states
    const [name, setName] = useState<string>("");
    const [email, setEmail] = useState<string>("");
    const [subject, setSubject] = useState<string>("");
    const [content, setContent] = useState<string>("");

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        //👇🏻 log the user's input
        console.log({ name, email, subject, content });
    };
return ({/** -- UI elements -- */})
}

Return the form UI elements that accept the user’s full name, email address, ticket subject, and a detailed message describing the issue.

    return (
        <main className='w-full min-h-screen flex items-center justify-between'>
                <form className='w-full' onSubmit={handleSubmit}>
                    <label htmlFor='name' className='opacity-60'>
                        Full Name
                    </label>
                    <input
                        type='text'
                        className='w-full px-4 py-3 border-[1px] mb-3 border-gray-300 rounded-sm'
                        id='name'
                        required
                        value={name}
                        onChange={(e) => setName(e.target.value)}
                    />

                    <label htmlFor='email' className='opacity-60'>
                        Email Address
                    </label>
                    <input
                        type='email'
                        className='w-full px-4 py-3 border-[1px] mb-3 border-gray-300 rounded-sm'
                        id='email'
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        required
                    />

                    <label htmlFor='subject' className='opacity-60'>
                        Subject
                    </label>
                    <input
                        type='text'
                        className='w-full px-4 py-3 border-[1px] mb-3 border-gray-300 rounded-sm'
                        id='subject'
                        value={subject}
                        onChange={(e) => setSubject(e.target.value)}
                        required
                    />

                    <label htmlFor='message' className='opacity-60'>
                        Message
                    </label>
                    <textarea
                        rows={7}
                        className='w-full px-4 py-3 border-[1px] mb-3 border-gray-300 rounded-sm'
                        id='message'
                        required
                        value={content}
                        onChange={(e) => setContent(e.target.value)}
                    />

                    <button className='w-full bg-blue-500 py-4 px-3 rounded-md font-bold text-blue-50'>
                        SEND MESSAGE
                    </button>
                </form>
            </div>
        </main>
    );

Here is the resulting page from the component:

Next, create an API endpoint (/api/route.ts) that accepts the customer’s input.

cd app
mkdir api && cd api
touch route.ts

Copy the following code into the api/route.ts file. The API endpoint logs the customer's input to the console upon receiving it.

import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest) {
    const { name, email, subject, content } = await req.json();
    //👇🏻 log the contents
    console.log({ name, email, subject, content });
    return NextResponse.json({
        message: "Email sent successfully",
        data,
 });
}

Update the handleSubmit function to send the customer's data to the API endpoint and return the JSON response:

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    try {
        const response = await fetch("/api", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({ name, email, subject, content }),
        });
        const data = await response.json();
        alert(data.message);
    } catch (error) {
        console.error(error);
        alert("An error occurred, please try again later");
    }
    setName("");
    setEmail("");
    setSubject("");
    setContent("");
};

Congratulations! You've set up the data collection and submission. In the upcoming sections, I'll walk you through creating and sending email templates with React Email and Resend.

How to Create Email Templates using React Email

React Email lets you build and send email components using React and TypeScript. It supports multiple email clients, including Gmail, Yahoo Mail, Outlook, and Apple Mail.

React Email also provides multiple UI components that enables you to customize the email templates according to your preferred layout using React JSX/TSX components.

Install the React Email package and its components by running the code snippet below:

npm install react-email -D -E
npm install @react-email/components -E

Include this script in your package.json file. It directs React Email to where the email templates are located in your project.

  "scripts": {
    "email": "email dev --dir src/emails"
  },

One of the features of React Email is the ability to preview your email template in your browser during development, allowing you to see how it will appear in the recipient's email.

So next, create an emails folder containing a TicketCreated.tsx file within the Next.js src folder and copy the following code snippet into the file:

import * as React from "react";
import {
    Body,
    Container,
    Head,
    Heading,
    Hr,
    Html,
    Link,
    Preview,
    Text,
    Tailwind,
} from "@react-email/components";

interface TicketCreatedProps {
    username: string;
    ticketID: string;
}

const baseUrl = process.env.VERCEL_URL || "http://localhost:3000";

In the code snippet above, we imported the components necessary for building the email template.

Next, add the TicketCreated component to the file to render the email template using React Email components.

export const TicketCreated = ({ username, ticketID }: TicketCreatedProps) => {
    return (
        <Html>
            <Head />
            <Preview>Support Ticket Confirmation Email 🎉</Preview>
            <Tailwind>
                <Body className='bg-white my-auto mx-auto font-sans px-2'>
                    <Container className='border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] max-w-[465px]'>
                        <Heading className='text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0'>
                            Your Ticket has been created
                        </Heading>
                        <Text className='text-black text-[14px] leading-[24px]'>
                            Hello {username},
                        </Text>
                        <Text className='text-black text-[14px] leading-[24px]'>
                            <strong>Support Ticket</strong> (
                            <Link
                                href={`${baseUrl}/ticket/${ticketID}`}
                                className='text-blue-600 no-underline'
                            >
                                {`#${ticketID}`}
                            </Link>
                            ) has been created successfully.
                        </Text>

                        <Text className='text-black text-[14px] leading-[24px]'>
                            The Support team will review your ticket and get back to you
                            shortly.
                        </Text>

                        <Hr className='border border-solid border-[#eaeaea] my-[26px] mx-0 w-full' />
                        <Text className='text-[#666666] text-[12px] leading-[24px]'>
                            This message was intended for{" "}
                            <span className='text-black'>{username}</span>. If you did not
                            create this ticket, please ignore this email.
                        </Text>
                    </Container>
                </Body>
            </Tailwind>
        </Html>
    );
};

Finally, export it and add a default values for the props:

TicketCreated.PreviewProps = {
    username: "alanturing",
    ticketID: "9083475",
} as TicketCreatedProps;

export default TicketCreated;

Run npm run email in your terminal to preview the email template.

This email template notifies customers that their support ticket has been created and that someone from the support team will reach out to them.

React Email offers a variety of pre-designed email templates, making it easy to craft beautifully styled emails for different purposes. You can check out the available demo to see examples of what’s possible.

How to Send Emails with Resend

Resend is a simple email API that enables you to send emails within your software application. It supports a range of programming languages, including JavaScript (Next.js, Express, Node.js), Python, PHP, Go, and Rust, among others.

Resend and React Email can be easily integrated together since the co-founder of Resend, Bu Kinoshita, is also the creator of React Email.

Create an account on Resend. Once you're signed in, navigate to the API keys section on your dashboard and copy your API key into a .env.local file.

//👇🏻 .env.local file
RESEND_API_KEY=<RESEND_API_KEY>

Update the API endpoint to send an email using the React Email template, as shown below:

import { NextRequest, NextResponse } from "next/server";
//👇🏻 ticket ID generator function
import { v4 as generateID } from "uuid";
//👇🏻 imports the email template
import TicketCreated from "@/emails/TicketCreated";
//👇🏻 imports Resend
import { Resend } from "resend";
const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST(req: NextRequest) {
    //👇🏻 accepts customer's input from frontend
    const { name, email, subject, content } = await req.json();
    //👇🏻 logs them
    console.log({ name, email, subject, content });
    //👇🏻 send an email using the email template
    const { data, error } = await resend.emails.send({
        from: "Acme <onboarding@resend.dev>",
        to: [email],
        subject: "Ticket Confirmation Email 🎉",
        react: TicketCreated({ username: name, ticketID: generateID() }),
    });

    if (error) {
        return NextResponse.json(
            { message: "Error sending email" },
            { status: 500 }
        );
    }

    return NextResponse.json({
        message: "Email sent successfully",
        data,
    });
}

Congratulations!🥳 You've completed this tutorial.

Here is a brief demo of the application:

Next Steps

In this tutorial, you learned how to create email templates with React Email and send them using Resend. Both packages enable you to integrate email communication easily within your applications.

Whether it’s simple email notifications, newsletters, or marketing campaigns, React Email and Resend offers an efficient and customizable solution to meet your needs.

Some helpful resources includes:

• React Email Pre-built Components

• React Email Documentation

• How to install Resend in Next.js applications

Thank you for reading!

The application leverages some of Supabase's features, such as authentication and database storage, to build a secured full-stack mobile application.

Additionally, you'll learn how to create React Native applications with Expo, generate a set of questions and answers from ChatGPT, and perform CRUD operations and user authentication with Supabase.

To fully understand this tutorial, you'll need to have a basic knowledge of React Native and data fetching in React applications.

Table of Contents

• Mobile Application Demo
• How to set up a React Native application with Expo
• How to style the React Native application with Tailwind CSS
• How to build the application screens
• How to build the authentication screens
• How to build the tab screens
• How to build the stack screens
• How to generate quiz questions and answers from ChatGPT
• How to add Supabase to React Native
• How to add Supabase authentication to React Native applications
• How to sign up new users
• How to sign in existing users
• How to log users out of the application
• How to protect screens from unauthenticated users
• How to interact with the Supabase database
• How to save user's score to the database
• How to retrieve data from Supabase
• Conclusion

Mobile Application Demo

To preview the application, download Expo Go and paste the links below into the app URL field:

Android: exp://u.expo.dev/update/a4774250-e156-4d34-bcfc-a4f2549c2e1d
iOS: exp://u.expo.dev/update/7e5f8ba5-89c4-4c1d-b219-a613ace642df

Scan the QR code to preview the mobile quiz application within the Expo Go application

How to Set Up a React Native Application with Expo

Expo is an open-source platform that allows you to create cross-platform applications easily with JavaScript. It saves us from the complex configurations required to create a native application with the React Native CLI, making it the easiest and fastest way to build and publish React Native apps.

Execute the code snippet below to create a new Expo project that uses Expo Router for navigating between screens.

npx create-expo-app@latest --template tabs@50

Expo Router is an open-source file-based routing system that enables users to navigate between screens easily. It is similar to Next.js, where each file name represents its route name.

Start the development server to ensure that the app is working as expected.

npx expo start

How to style the React Native application with Tailwind CSS

Tailwind CSS is a CSS framework that lets you create modern and stunning applications easily.

However, to style Expo applications using Tailwind CSS, you need to install NativeWind – a library that uses Tailwind CSS as its scripting language.

Run the code snippet below to install NativeWind and its dependencies:

npx expo install nativewind@^4.0.1 react-native-reanimated tailwindcss

Execute npx tailwindcss init within your terminal to create a tailwind.config.js file. Update the file with the code snippet below:

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

Create a globals.css file within the root of your project and add the Tailwind directives below:

@tailwind base;
@tailwind components;
@tailwind utilities;

Update the babel.config.js file with the code below:

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

Create a metro.config.js file within the root of your project and paste the code snippet below into the file:

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

const config = getDefaultConfig(__dirname)

module.exports = withNativeWind(config, { input: './globals.css' })

Finally, import the ./globals.css file into the app/_layout.tsx file to enable you to style your application with Tailwind CSS:

//👉🏻 Within ./app/_layout.tsx

import "../globals.css";

Great job on creating the React Native project with Expo! Now, you're ready to add some style using Tailwind CSS. If you encounter any problems while installing NativeWind, check out the documentation for a step-by-step guide.

How to Build the Application Screens

Here, I'll guide you through building the application screens. They are divided into three categories:

• The Authentication screens – the register and login screens.
• The Tab layout screens – the dashboard, leaderboard, and profile screens.
• The Stack screens – the test and test completion screens.

The application prompts new users to create an account and log in before allowing access to the Tab layout screens.

On the dashboard screen, users can take tests on various topics. The leaderboard screen showcases the top ten users. Users can log out or preview their previous attempts on the profile page.

Application Demo

How to Build the Authentication Screens

The authentication screens accept the user's email and password and ensure the credentials are valid before creating an account or granting access to the application.

The Authentication Screens

Create an index.tsx and a register.tsx file within the app folder and a component that accepts the user's email and password using the React Native TextInput component.

import { Text, View, TextInput, Pressable, Alert } from "react-native";
import { Link, useRouter } from "expo-router";
import { useState } from "react";

export default function LoginScreen() {
    const [email, setEmail] = useState<string>("");
    const [password, setPassword] = useState<string>("");
    const [loading, setLoading] = useState<boolean>(false);
    const router = useRouter();

    //👇🏻 triggered when the user submits the email & password
    const handleLogin = () => {
        if (!email.trim() || !password.trim())
            return Alert.alert("Error", "Please fill in all fields");
        setLoading(true);
        console.log({
            email,
            password,
        });
        router.replace("/(tabs)/");
    };

    return (
        <View>
        {/** -- user interface--*/}
        </View>
    );
}

The code snippet stores the user's email and password in states using the React useState hook. The handleLogin function accepts the user's email and password when the form is submitted and ensures that they are not empty before logging them to the console and redirecting the user to the Dashboard page.

You can create the user interface using the code snippet below. It displays the input fields for the user's credentials and an interactive Sign-in button that executes the handleLogin function. Additionally, the loading state ensures that the button is only pressed once.

<View className=' flex-1'>
    <View className='w-full px-4'>
        <Text className='text-3xl mb-4 font-bold text-white text-center'>
            Log in
        </Text>

        <Text className='text-lg text-gray-200'>Email Address</Text>
        <TextInput
            className='w-full border-b-[1px] py-4 rounded-md mb-3 text-white font-bold'
            value={email}
            onChangeText={setEmail}
        />
        <Text className='text-lg text-gray-200'>Password</Text>
        <TextInput
            className='w-full border-b-[1px] py-4 rounded-md mb-3 text-white font-bold'
            secureTextEntry
            value={password}
            onChangeText={setPassword}
        />
        <Pressable
            className={`w-full ${
                loading ? "bg-orange-200" : "bg-orange-600"
            } rounded-xl p-4 border-[1px] border-orange-200`}
            disabled={loading}
            onPress={() => handleLogin()}
        >
            <Text className='text-white text-center font-bold text-xl'>
                {loading ? "Authenticating..." : "Sign in"}
            </Text>
        </Pressable>
        <Text className='text-center mt-2 text-orange-200'>
            Don't have an account?{" "}
            <Link href='/register'>
                <Text className='text-white'>Register</Text>
            </Link>
        </Text>
    </View>
</View>

For instance, the loading state becomes true when a user clicks the Sign-in button. The Pressable component (button) has a disabled attribute set to the loading state to ensure that the user does not press the button multiple times. Additionally, you can use the loading state to notify the user that the request is processing.

The register.tsx file is also similar to the login.tsx file. You only need to change the words from Login to Register.

How to Build the Tab Screens

The Tab Screens consist of the Dashboard, Leaderboard, and Profile screens.

The Tab Screens

Create a (tabs) folder containing index.tsx, leaderboard.tsx, profile.tsx, and _layout.tsx files within the app folder.

cd app
mkdir (tabs)
cd (tabs)
touch index.tsx leaderboard.tsx profile.tsx _layout.tsx

After creating the _layout.tsx file within the (tabs) folder, update the _layout.tsx to specify Tab screen navigation for the newly created screens. The screens use icons from the Expo Vector Icons library.

import { Tabs } from "expo-router";
import { Ionicons, MaterialIcons, FontAwesome5 } from "@expo/vector-icons";
import { ActivityIndicator } from "react-native";

export default function TabScreen() {
    return (
        <Tabs
            screenOptions={{
                tabBarActiveTintColor: "#f97316",
                tabBarInactiveTintColor: "gray",
                tabBarShowLabel: false,
                headerShown: false,
                tabBarStyle: {
                    backgroundColor: "#ffedd5",
                    borderTopColor: "#ffedd5",
                },
            }}
        >
            <Tabs.Screen
                name='index'
                options={{
                    tabBarIcon: ({ color }) => (
                        <Ionicons name='home' size={24} color={color} />
                    ),
                }}
            />
            <Tabs.Screen
                name='leaderboard'
                options={{
                    tabBarIcon: ({ color }) => (
                        <MaterialIcons name='leaderboard' size={24} color={color} />
                    ),
                }}
            />
            <Tabs.Screen
                name='profile'
                options={{
                    tabBarIcon: ({ color }) => (
                        <FontAwesome5 name='user-alt' size={24} color={color} />
                    ),
                }}
            />
        </Tabs>
    );
}

Next, update the RootLayoutNav component within the _app/layout.tsx file to render all the screens within the application.

function RootLayoutNav() {
    return (
        <Stack screenOptions={{ headerShown: false }}>
            <Stack.Screen name='(tabs)' />
            <Stack.Screen name='(stack)' />
            <Stack.Screen name='index' />
            <Stack.Screen name='register' />
        </Stack>
    );
}

The Dashboard Screen

Update the component to allow users to select four categories from a list of categories.

export default function HomeScreen() {
    const greet = getGreeting();
    const router = useRouter();
    const { session } = useAuth();
    const [loading, setLoading] = useState<boolean>(false);
    const [userCategories, setUserCategories] = useState<string[]>([]);

    const fetchQuestions = async () => {};

    const handleStartTest = async () => {
        Alert.alert("Start Test", "Are you sure you want to start the test?", [
            {
                text: "Cancel",
                style: "destructive",
            },
            {
                text: "Yes",
                onPress: () => fetchQuestions(),
            },
        ]);
    };

    return (
        <SafeAreaView className='flex-1 bg-orange-100 px-4 py-2'>
            <View className='flex flex-row items-center justify-between mb-2'>
                <View>
                    <Text className='font-bold text-2xl mb-[1px]'>
                        Good morning
                        <Ionicons name='partly-sunny-sharp' size={24} color='orange' />
                    </Text>

                    <Text className='text-lg'>Welcome User</Text>
                </View>
            </View>
            {userCategories.length === 4 && (
                <Pressable
                    className={`w-full h-[70px] flex items-center justify-center ${
                        loading ? "bg-orange-300" : "bg-orange-500"
                    } rounded-xl mb-2`}
                    disabled={loading}
                    onPress={() => handleStartTest()}
                >
                    <Text className='text-xl font-bold text-orange-50'>
                        {loading ? "Loading questions..." : "START TEST"}
                    </Text>
                </Pressable>
            )}

            <View className='w-full flex-1'>
                <Text className='text-xl font-bold text-orange-500 mb-4'>
                    Available Categories
                </Text>
                <FlatList
                    data={categories}
                    numColumns={2}
                    contentContainerStyle={{ width: "100%", gap: 10 }}
                    columnWrapperStyle={{ gap: 10 }}
                    renderItem={({ item }) => (
                        <Categories
                            item={item}
                            userCategories={userCategories}
                            setUserCategories={setUserCategories}
                        />
                    )}
                    showsVerticalScrollIndicator={false}
                    keyExtractor={(item) => item.id}
                />
            </View>
        </SafeAreaView>
    );
}

The code snippet above renders a list of categories where users can select only four categories to answer questions on and start the quiz.

The Dashboard Screen

The Leaderboard Screen

The Leaderboard screen displays the top ten users ranked in descending order.

import { Text, FlatList, SafeAreaView } from "react-native";
import Board from "../../components/Board";

interface Props {
    total_score: number;
    user_id: string;
}

export default function LeaderboardScreen() {
    const [leaderboard, setLeaderboard] = useState<Props[]>([]);

    return (
        <SafeAreaView className='flex-1 bg-orange-100 p-4'>
            <Text className='text-2xl font-bold text-gray-500 text-center mb-6'>
                Leaderboard
            </Text>

            <FlatList
                data={leaderboard}
                renderItem={({ item }) => <Board item={item} />}
                keyExtractor={(item) => item.user_id}
                showsVerticalScrollIndicator={false}
            />
        </SafeAreaView>
    );
}

The code snippet above renders a FlatList with ten items. You can create an array containing ten users and pass it into the FlatList for now.

The Profile Screen

The Profile Screen displays the user's image, recent attempts, and a log-out button that enables the user to sign out of the application.

export default function ProfileScreen() {
    const [loading, setLoading] = useState<boolean>(false);
    const [total_score, setTotalScore] = useState<number>(0);
    const [attempts, setAttempts] = useState<string[]>([]);

    const handleSignOut = async () => {
        setLoading(true);
    };

    return (
        <SafeAreaView className='flex-1 bg-orange-100 p-4'>
            <View className='flex items-center justify-center mb-6'>
                <Text className='text-gray-600 mb-[1px]'>
                    <FontAwesome name='star' size={20} color='red' />
                    <Text>45</Text>
                </Text>
                <Text className='text-gray-600 mb-2'>@dhastix</Text>

                <Pressable onPress={() => handleSignOut()} disabled={loading}>
                    <Text className='text-red-500'>
                        {loading ? "Logging out..." : "Log out"}
                    </Text>
                </Pressable>
            </View>

            <Text className='font-bold text-xl text-gray-700 mb-3 px-4'>
                Recent Attempts
            </Text>

            <FlatList
                data={attempts}
                contentContainerStyle={{ padding: 15 }}
                renderItem={({ item }) => <Attempts item={item} />}
                keyExtractor={(item, index) => index.toString()}
                showsVerticalScrollIndicator={false}
            />
        </SafeAreaView>
    );
}

The code snippet above displays the user's image, the sign-out button, and all the user's attempts. You can create an array of items for testing purposes.

How to Build the Stack Screens

The Stack Screens comprise two screens – the quiz screen and the screen that displays the user's score after completing a quiz session.

The Stack Screens

The Quiz Screen

The Quiz Screen displays a timer that countdowns from 15 seconds before moving to the next question. It shows the question, its category, available options, the Skip and Next buttons, and a cancel icon.

Create a similar screen to the one shown below. You can use this as a guide.

The Quiz Screen

The Quiz Completion Screen

It displays the user's score after completing a test.

import {
    SafeAreaView,
    Text,
    Pressable,
    View,
    ImageBackground,
} from "react-native";
import { MaterialIcons } from "@expo/vector-icons";
import { useLocalSearchParams } from "expo-router";

export default function CompletedScreen() {
    const { score } = useLocalSearchParams();

    return (
        <View className='flex flex-1 bg-orange-400'>
            <ImageBackground
                source={{ uri: "https://source.unsplash.com/NAP14GEjvh8" }}
                className='flex-1 p-4'
            >
                <SafeAreaView />
                <Pressable onPress={() => router.replace("/(tabs)/")}>
                    <MaterialIcons name='cancel' size={60} color='white' />
                </Pressable>

                <View className='flex-1 flex items-center justify-center'>
                    <View className='bg-orange-50 w-full py-[50px] rounded-xl p-4 flex items-center justify-center shadow-lg shadow-orange-500'>
                        <Text className='text-3xl text-orange-600 font-bold mb-4'>
                            {Number(score) > 20 ? "Congratulations🥳" : "Sorry! You lose 🥲"}
                        </Text>
                        <Text className='font-bold text-xl'>You scored {score}!</Text>
                    </View>
                </View>
            </ImageBackground>
        </View>
    );
}

The code snippet above accepts the user's score as a parameter after completing the quiz and displays the score to the user.

How to Generate Quiz Questions and Answers from ChatGPT

When building a quiz application, the first question is: how do you get the questions and options for the application? You can either create a list of questions or search for a suitable public API.

However, I'll guide you through creating a list of questions and options in JSON format using ChatGPT. Use this prompt to generate questions and answers from ChatGPT:

Generate 25 distinct questions on and ensure they are in JSON format containing an id, category which is , a question attribute containing the question, an options array of 3 options, and an answer property.

The prompt returns a JSON result containing the questions and answers. You can host them on GitHub or save them to a database.

The questions and answers I'm using in this mobile application are available on GitHub. Feel free to clone or copy the files.

Once your questions and answers are ready, you can connect the application to Supabase.

How to Add Supabase to React Native

Supabase is an open-source Firebase alternative that enables you to create secured and scalable software applications within a few minutes.

It provides a secured Postgres database, a complete user management system that handles various forms of authentication (including email and password, email sign-in, and social authentication), a file storage system that lets you store and serve files of any size, real-time communication, and many other features.

In this tutorial, I'll walk you through the following:

• How to authenticate users and control access to some application screens with Supabase.
• How to save the users' scores to the database to enable you to rank them based on their scores.

First, you need to install Supabase and its required dependencies. You can do that with the following commands:

npm install @supabase/supabase-js 
npm install react-native-elements @react-native-async-storage/async-storage react-native-url-polyfill
npx expo install expo-secure-store

Create a supabase.ts file within your project and copy the code snippet below into the file to initiate Supabase:

import "react-native-url-polyfill/auto";
import * as SecureStore from "expo-secure-store";
import { createClient } from "@supabase/supabase-js";

const ExpoSecureStoreAdapter = {
    getItem: (key: string) => {
        return SecureStore.getItemAsync(key);
    },
    setItem: (key: string, value: string) => {
        SecureStore.setItemAsync(key, value);
    },
    removeItem: (key: string) => {
        SecureStore.deleteItemAsync(key);
    },
};

const supabaseUrl = "YOUR_REACT_NATIVE_SUPABASE_URL";
const supabaseAnonKey = "YOUR_REACT_NATIVE_SUPABASE_ANON_KEY";

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
    auth: {
        storage: ExpoSecureStoreAdapter as any,
        autoRefreshToken: true,
        persistSession: true,
        detectSessionInUrl: false,
    },
});

Next, visit the Supabase homepage, sign in, and create a new organization and project.

Create a new Supabase project

Click the Settings icon on the sidebar and select API to copy the project URL and the public API key.

Supabase API settings containing project credentials

Create a .env.local file and copy the credentials into the variables. Update the supabase.ts file to use the Supabase URL and API key.

EXPO_PUBLIC_API_URL=<YOUR_SUPABASE_URL>
EXPO_PUBLIC_API_KEY=<YOUR_SUPABASE_API_KEY>

Congratulations! You can now interact with Supabase from your application and access various features such as authentication, database, file storage, and so on.

How to Add Supabase Authentication to React Native Applications

Supabase offers various forms of authentication. But we only need the email and password method of authentication for this application.

How to sign up new users

The code snippet below accepts an email and a password and creates an account for the user. Otherwise, it returns an error if any of the credentials is invalid.

//👇🏻 import supabase from supabase file
import { supabase } from "../lib/supabase";

//👇🏻 sign up function
const handleRegister = async () => {
    if (!email.trim() || !password.trim())
        return Alert.alert("Error", "Please fill in all fields");
    const { error } = await supabase.auth.signUp({ email, password });
    if (error) return Alert.alert("Error", error.message);
    router.replace("/");
};

With the supabase.auth.signUp() function, Supabase handles the authentication process. If successful, the user is redirected to the login page. Otherwise, it displays an error message.

How to sign in existing users

This function allows existing users to access the application. It accepts the user's email and password and logs the user into the application.

//👇🏻 import supabase from supabase file
import { supabase } from "../lib/supabase";

//👇🏻 register function
const handleLogin = async () => {
    if (!email.trim() || !password.trim())
        return Alert.alert("Error", "Please fill in all fields");
    const { error } = await supabase.auth.signInWithPassword({ email, password });
    if (error) return Alert.alert("Error", error.message);
    router.replace("/(tabs)/");
};

The supabase.auth.signInWithPassword() function validates the user's email and password and redirects the user to the Dashboard screen. Otherwise, it returns the necessary authentication error.

How to log users out of the application

Supabase also allows users to sign out of the application. You can execute this function when the user clicks a button within the Profile page.

//👇🏻 import supabase from supabase file
import { supabase } from "../lib/supabase";

//👇🏻 sign out function
const handleSignOut = async () => {
    try {
        const { error } = await supabase.auth.signOut();
        if (error) throw error;
    } catch (error) {
        console.log(error);
    }
};

How to protect screens from unauthenticated users

You've been able to add the sign-up, sign-in, and log-out functionalities to the React Native application. But the Dashboard and other screens containing sensitive data are still accessible to unauthenticated users.

How do we fix this?

In this section, I'll walk you through how to protect screens from unauthorized users using the React Context API.

The React Context API allows us to pass data through the component tree without needing to pass props down manually at every level.

Create an AuthProvider.tsx file. This is where the data to be passed down the application screens is stored. Copy the code snippet below into the file:

import { supabase } from "./supabase";
import { Session } from "@supabase/supabase-js";
import {
    PropsWithChildren,
    createContext,
    useContext,
    useEffect,
    useState,
} from "react";

type AuthData = {
    session: Session | null;
    loading: boolean;
};

//👇🏻 data to be passed down the components
const AuthContext = createContext<AuthData>({
    session: null,
    loading: true,
});

export default function AuthProvider({ children }: PropsWithChildren) {
    const [session, setSession] = useState<Session | null>(null);
    const [loading, setLoading] = useState(true);

    //👇🏻 fetches the current user's session
    useEffect(() => {
        const fetchSession = async () => {
            const {
                data: { session },
            } = await supabase.auth.getSession();
            setSession(session);
            setLoading(false);
        };

        fetchSession();
        supabase.auth.onAuthStateChange((_event, session) => {
            setSession(session);
            setLoading(false);
        });
    }, []);

    return (
        <AuthContext.Provider value={{ session, loading }}>
            {children}
        </AuthContext.Provider>
    );
}
//👇🏻 custom hook for using the context (data)
export const useAuth = () => useContext(AuthContext);

The code snippet retrieves the current user's session. If the user is signed in, the session and loading state variables are updated to show that the user is active, and they are passed into other components within the application.

The useAuth custom hook allows you to access the state variables (session and loading) within the application screens.

To access the context (data) available within the application screens, wrap the entire application with the AuthProvider. So now, update the RootLayoutNav component within the app/_layout.tsx file as shown below:

import AuthProvider from "../lib/AuthProvider";

function RootLayoutNav() {
    return (
        <AuthProvider>
            <Stack screenOptions={{ headerShown: false }}>
                <Stack.Screen name='(tabs)' />
                <Stack.Screen name='(stack)' />
                <Stack.Screen name='index' />
                <Stack.Screen name='register' />
            </Stack>
        </AuthProvider>
    );
}

Congratulations! You've successfully set up the context. Next, how do we read the context and ensure that only authenticated users can view some of the application screens?

You can do this using the custom useAuth hook. For example, you can protect the Tabs screens via the (tabs)/_layout.tsx file.

import { Tabs, Redirect } from "expo-router";
import { useAuth } from "../../lib/AuthProvider";
import { ActivityIndicator } from "react-native";

export default function TabScreen() {
    const { session, loading } = useAuth();

    if (!session) {
        return <Redirect href='/' />;
    }

    if (loading) {
        return <ActivityIndicator size='large' color='#f97316' />;
    } else {
        return (
            <Tabs
                screenOptions={{
                    tabBarActiveTintColor: "#f97316",
                    tabBarInactiveTintColor: "gray",
                    tabBarShowLabel: false,
                    headerShown: false,
                    tabBarStyle: {
                        backgroundColor: "#ffedd5",
                        borderTopColor: "#ffedd5",
                    },
                }}
            >
                {/**-- screens--*/}
            </Tabs>
        );
    }
}

The code snippet above checks if there is a session for the current user. If null, the application redirects the user to the login screen. If the application is yet to determine the user's status, it displays a loading icon.

How to Interact with the Supabase Database

In this section, I'll walk you through creating the database for the mobile application. You'll learn how to store and retrieve the user's scores and rank them based on their total score.

Before we proceed, note that the application calculates the user's score after answering each question on the test screen. Upon completion, the user's score is retrieved and displayed on the test completion screen.

const handleSave = () => {
    //👇🏻 checks if the user has not completed the test
    if (count < questions.length - 1) {
        //👇🏻 updates the user's score if the selected answer is correct
        if (questions[count].answer === userAnswer) {
            setUserScore((userScore) => userScore + 1);
        }
        //👇🏻 change the question, refresh the selected answer and time
        setCount((count) => count + 1);
        setSelectedBox(null);
        setTime(15);
    } else {
        //👇🏻 test completed
        router.push({
            pathname: "/(stack)/completed",
            params: { score: userScore },
        });
    }
};

Within your Supabase project, select Table Editor from the sidebar menu and create a new table containing the following columns:

• id – contains a unique ID for each row of data.
• created_at – represents the time the data was created.
• attempts – a text array containing the score and date attributes.
• total_score – represents a user's cumulative score. We'll rank users using this score
• user_id – a unique ID used to identify each user's data.

The Table Columns

Finally, you can add a Row Level Security that allows only authenticated users interact with the database.

The Table Row Level Security Policy

How to save the user's score to the database

Before you can save a user's score to the database, you need to check if the user's data already exists – meaning the user has taken a test before. If true, you need to update the user's score with the latest test score. Otherwise, add the data to the database.

The code snippet below accepts the user's score and user's ID (from the session data) and saves the user's score to Supabase.

export const saveScore = async (userScore: number, userID: string) => {
    try {
        //👇🏻 check if the user data exists
        const { data, error } = await supabase
            .from("scores")
            .select()
            .eq("user_id", userID);
        if (error) throw error;

        //👇🏻 if the user data does not exist, insert a new one
        if (error || !data.length) {
            const { data, error } = await supabase
                .from("scores")
                .insert({
                    attempts: [{ score: userScore, date: getCurrentDate() }],
                    total_score: userScore,
                    user_id: userID,
                })
                .single();
            if (error) throw error;
        } else {
            //👇🏻 if the user data exists, update the attempts and total_score
            const { data: updateData, error } = await supabase
                .from("scores")
                .update({
                    attempts: [
                        ...data[0].attempts,
                        { score: userScore, date: getCurrentDate() },
                    ],
                    total_score: data[0].total_score + userScore,
                })
                .eq("user_id", userID);
            if (error) throw error;
        }
    } catch (err) {
        console.log(err);
    }
};

How to retrieve data from Supabase

Recall that you need to rank the users based on their scores on the Leaderboard screen and retrieve the user's attempts on the Profile screen.

The code snippet below accepts a user's ID and retrieves the attempts and total score from the database.

export const getUserAttempts = async (userID: string) => {
    try {
        const { data, error } = await supabase
            .from("scores")
            .select("attempts, total_score")
            .eq("user_id", userID);
        if (error) throw error;
        return { attempts: data[0].attempts, total_score: data[0].total_score };
    } catch (err) {
        return { attempts: "", total_score: 0 };
    }
};

The code snippet below retrieves the top ten users from the database based on their score.

export const getLeaderBoard = async () => {
    try {
        const { data, error } = await supabase
            .from("scores")
            .select("total_score, user_id")
            .order("total_score", { ascending: false })
            .limit(10);
        if (error) throw error;
        return data;
    } catch (err) {
        return null;
    }
};

Congratulations! You've successfully completed the project for this tutorial.

Conclusion

In this tutorial, you’ve learned how to:

• build React Native mobile applications with Expo,
• style your mobile applications with Tailwind CSS,
• create stack and tab screen navigations using Expo Router,
• use Supabase and leverage its authentication and database features to build full-stack applications.

Supabase is an amazing tool that enables you to build a full-stack software application with no hassle. If you are looking forward to shipping great software products or side projects faster, consider using Supabase.

Expo also saves us from the complexities of setting up and developing mobile applications using the React Native CLI. It enables you to focus more on building your applications while it handles the necessary configurations, including deployment.

Feel free to customise the application using ChatGPT to generate questions and answers tailored to any niche or topic.

The source code for this tutorial is available in this GitHub repository.

Thank you for reading!