Social Learning Platform using Next.Js, Stream and Supabase

				
					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.
                    }
                },
            },
        }
    );
}

				
			

				
					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
}

				
			

				
					NEXT_PUBLIC_STREAM_API_KEY=<paste_from_Stream_app_dashboard>
STREAM_SECRET_KEY=<paste_from_Stream_app_dashboard>
				
			

				
					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>
);

				
			

				
					//👇🏻 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>
    );
};