publish

Author: TheAnkushshah

.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "extends": [
+    "next/core-web-vitals",
+    "standard",
+    "plugin:tailwindcss/recommended",
+    "prettier"
+  ]
+}

.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.vscode
+
+.env

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

README.md

@@ -0,0 +1,121 @@
+<a name="readme-top"></a>
+
+# Room - A Video & Audio Meeting Platform
+
+![image](public/Preview.png)
+
+## 📋 <a name="table">Table of Contents</a>
+
+1. [Introduction](#introduction)
+2. [Tech Stack](#tech-stack)
+3. [Features](#features)
+4. [Getting Started](#getting-started)
+5. [Assets & Code](#snippets)
+6. [More](#more)
+
+## <a name="introduction">Introduction</a>
+
+Built with the latest Next.js and TypeScript, this project replicates Zoom, a widely used video conferencing tool. It enables users to securely log in, create meetings and access various meeting functionalities such as recording, screen sharing, and managing participants.
+
+## <a name="tech-stack">Tech Stack</a>
+
+- Next.js
+- TypeScript
+- Clerk
+- getstream
+- shadcn
+- Tailwind CSS
+
+## <a name="features">Features</a>
+
+**Authentication**: Implements authentication and authorization features using Clerk, allowing users to securely log in via social sign-on or traditional email and password methods, while ensuring appropriate access levels and permissions within the platform.
+
+**New Meeting**: Quickly start a new meeting, configuring camera and microphone settings before joining.
+
+**Meeting Controls**: Participants have full control over meeting aspects, including recording, emoji reactions, screen sharing, muting/unmuting, sound adjustments, grid layout, participant list view, and individual participant management (pinning, muting, unmuting, blocking, allowing video share).
+
+**Exit Meeting**: Participants can leave a meeting, or creators can end it for all attendees.
+
+**Schedule Future Meetings**: Input meeting details (date, time) to schedule future meetings, accessible on the 'Upcoming Meetings' page for sharing the link or immediate start.
+
+**Past Meetings List**: Access a list of previously held meetings, including details and metadata.
+
+**View Recorded Meetings**: Access recordings of past meetings for review or reference.
+
+**Personal Room**: Users have a personal room with a unique meeting link for instant meetings, shareable with others.
+
+**Join Meetings via Link**: Easily join meetings created by others by providing a link.
+
+**Secure Real-time Functionality**: All interactions within the platform are secure and occur in real-time, maintaining user privacy and data integrity.
+
+**Responsive Design**: Follows responsive design principles to ensure optimal user experience across devices, adapting seamlessly to different screen sizes and resolutions.
+
+and many more, including code architecture and reusability. 
+
+## <a name="getting-started">Getting Started</a>
+
+**Make sure you have the following installed on your machine**
+
+- [Git](https://git-scm.com/)
+- [Node.js](https://nodejs.org/en)
+- [npm](https://www.npmjs.com/) (Node Package Manager)
+
+**Cloning the Repository**
+
+```bash
+git clone https://github.com/theankushshah/room.git
+cd zoom-clone
+```
+
+**Installation**
+
+Install the project dependencies using npm:
+
+```bash
+npm install
+```
+
+**Set Up Environment Variables**
+
+Create a new file named `.env` in the root of your project and add the following content:
+
+```env
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
+CLERK_SECRET_KEY=
+
+NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
+NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
+
+NEXT_PUBLIC_STREAM_API_KEY=
+STREAM_SECRET_KEY=
+```
+
+Replace the placeholder values with your actual Clerk & getstream credentials. You can obtain these credentials by signing up on the [Clerk website](https://clerk.com/) and [getstream website](https://getstream.io/)
+
+**Running the Project**
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) in your browser to view the project.
+
+## More Screenshots
+
+![image](public/up.png)
+
+![image](public/past.png)
+
+![image](public/record.png)
+
+![image](public/link.png)
+
+## Feedback
+
+You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.
+
+## Developer & Main
+
+- Ankush Shah ([email protected]) (Main)
+
+Happy coding! 🚀

actions/stream.actions.ts

@@ -0,0 +1,24 @@
+'use server';
+
+import { currentUser } from '@clerk/nextjs/server';
+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 currentUser();
+
+  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.createToken(user.id, expirationTime, issuedAt);
+
+  return token;
+};

app/(auth)/sign-in/[[...sigin-in]]/page.tsx

@@ -0,0 +1,9 @@
+import { SignIn } from '@clerk/nextjs';
+
+export default function SiginInPage() {
+  return (
+    <main className="flex h-screen w-full items-center justify-center">
+      <SignIn />
+    </main>
+  );
+}

app/(auth)/sign-up/[[...sign-up]]/page.tsx

@@ -0,0 +1,9 @@
+import { SignUp } from '@clerk/nextjs';
+
+export default function SignUpPage() {
+  return (
+    <main className="flex h-screen w-full items-center justify-center">
+      <SignUp />
+    </main>
+  );
+}

app/(root)/(home)/layout.tsx

@@ -0,0 +1,28 @@
+import { Metadata } from 'next';
+import { ReactNode } from 'react';
+
+import Navbar from '@/components/Navbar';
+import Sidebar from '@/components/Sidebar';
+
+export const metadata: Metadata = {
+  title: 'Room',
+  description: 'A workspace for your team, powered by Stream Chat and Clerk.',
+};
+
+const RootLayout = ({ children }: Readonly<{children: ReactNode}>) => {
+  return (
+    <main className="relative">
+      <Navbar />
+
+      <div className="flex">
+        <Sidebar />
+        
+        <section className="flex min-h-screen flex-1 flex-col px-6 pb-6 pt-28 max-md:pb-14 sm:px-14">
+          <div className="w-full">{children}</div>
+        </section>
+      </div>
+    </main>
+  );
+};
+
+export default RootLayout;

app/(root)/(home)/page.tsx

@@ -0,0 +1,28 @@
+import MeetingTypeList from '@/components/MeetingTypeList';
+
+const Home = () => {
+  const now = new Date();
+
+  const time = now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
+  const date = (new Intl.DateTimeFormat('en-US', { dateStyle: 'full' })).format(now);
+
+  return (
+    <section className="flex size-full flex-col gap-5 text-white">
+      <div className="h-[303px] w-full rounded-[20px] bg-hero bg-cover">
+        <div className="flex h-full flex-col justify-between max-md:px-5 max-md:py-8 lg:p-11">
+          <h2 className="glassmorphism max-w-[273px] rounded py-2 text-center text-base font-normal">
+            Built with ❤️ by Ankush shah
+          </h2>
+          <div className="flex flex-col gap-2">
+            <h1 className="text-4xl font-extrabold lg:text-7xl">{time}</h1>
+            <p className="text-lg font-medium text-sky-1 lg:text-2xl">{date}</p>
+          </div>
+        </div>
+      </div>
+
+      <MeetingTypeList />
+    </section>
+  );
+};
+
+export default Home;

app/(root)/(home)/personal-room/page.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useUser } from "@clerk/nextjs";
+import { useStreamVideoClient } from "@stream-io/video-react-sdk";
+import { useRouter } from "next/navigation";
+
+import { useGetCallById } from "@/hooks/useGetCallById";
+import { Button } from "@/components/ui/button";
+import { useToast } from "@/components/ui/use-toast";
+
+const Table = ({
+  title,
+  description,
+}: {
+  title: string;
+  description: string;
+}) => {
+  return (
+    <div className="flex flex-col items-start gap-2 xl:flex-row">
+      <h1 className="text-base font-medium text-sky-1 lg:text-xl xl:min-w-32">
+        {title}:
+      </h1>
+      <h1 className="truncate text-sm font-bold max-sm:max-w-[320px] lg:text-xl">
+        {description}
+      </h1>
+    </div>
+  );
+};
+
+const PersonalRoom = () => {
+  const router = useRouter();
+  const { user } = useUser();
+  const client = useStreamVideoClient();
+  const { toast } = useToast();
+
+  const meetingId = user?.id;
+
+  const { call } = useGetCallById(meetingId!);
+
+  const startRoom = async () => {
+    if (!client || !user) return;
+
+    const newCall = client.call("default", meetingId!);
+
+    if (!call) {
+      await newCall.getOrCreate({
+        data: {
+          starts_at: new Date().toISOString(),
+        },
+      });
+    }
+
+    router.push(`/meeting/${meetingId}?personal=true`);
+  };
+
+  const meetingLink = `${process.env.NEXT_PUBLIC_BASE_URL}/meeting/${meetingId}?personal=true`;
+
+  return (
+    <section className="flex size-full flex-col gap-10 text-white">
+      <h1 className="text-xl font-bold lg:text-3xl">Personal Meeting Room</h1>
+      <div className="flex w-full flex-col gap-8 xl:max-w-[900px]">
+        <Table title="Topic" description={`${user?.username}'s Meeting Room`} />
+        <Table title="Meeting ID" description={meetingId!} />
+        <Table title="Invite Link" description={meetingLink} />
+      </div>
+      <div className="flex gap-5">
+        <Button className="bg-blue-1" onClick={startRoom}>
+          Start Meeting
+        </Button>
+        <Button
+          className="bg-dark-3"
+          onClick={() => {
+            navigator.clipboard.writeText(meetingLink);
+            toast({
+              title: "Link Copied",
+            });
+          }}
+        >
+          Copy Invitation
+        </Button>
+      </div>
+    </section>
+  );
+};
+
+export default PersonalRoom;

app/(root)/(home)/previous/page.tsx

@@ -0,0 +1,13 @@
+import CallList from "@/components/CallList";
+
+const PreviousPage = () => {
+  return (
+    <section className="flex size-full flex-col gap-10 text-white">
+      <h1 className="text-3xl font-bold">Previous Calls</h1>
+
+      <CallList type="ended" />
+    </section>
+  );
+};
+
+export default PreviousPage;

app/(root)/(home)/recordings/page.tsx

@@ -0,0 +1,13 @@
+import CallList from '@/components/CallList';
+
+const PreviousPage = () => {
+  return (
+    <section className="flex size-full flex-col gap-10 text-white">
+      <h1 className="text-3xl font-bold">Recordings</h1>
+
+      <CallList type="recordings" />
+    </section>
+  );
+};
+
+export default PreviousPage;