{"id":16139961,"url":"https://github.com/ladunjexa/nextjs14-zoom","last_synced_at":"2025-03-18T16:31:16.279Z","repository":{"id":236860200,"uuid":"793276804","full_name":"ladunjexa/nextjs14-zoom","owner":"ladunjexa","description":"Yoom is a video conferencing application built with Next.js, Tailwind CSS, Clerk, and GetStream. 🎦","archived":false,"fork":false,"pushed_at":"2024-12-08T12:19:53.000Z","size":1752,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-28T10:52:36.367Z","etag":null,"topics":["clerk","getstream-io","react-datepicker","shadcn-ui","typescripted-nextjs14","zoom-clone"],"latest_commit_sha":null,"homepage":"https://nextjs14-zoom.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ladunjexa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-28T22:26:30.000Z","updated_at":"2024-12-08T12:19:50.000Z","dependencies_parsed_at":"2024-04-29T01:28:07.906Z","dependency_job_id":"7e3e6d06-011b-40cf-9e7f-6354aec5f119","html_url":"https://github.com/ladunjexa/nextjs14-zoom","commit_stats":null,"previous_names":["ladunjexa/nextjs14-zoom"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ladunjexa%2Fnextjs14-zoom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ladunjexa%2Fnextjs14-zoom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ladunjexa%2Fnextjs14-zoom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ladunjexa%2Fnextjs14-zoom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ladunjexa","download_url":"https://codeload.github.com/ladunjexa/nextjs14-zoom/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243940108,"owners_count":20372045,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clerk","getstream-io","react-datepicker","shadcn-ui","typescripted-nextjs14","zoom-clone"],"created_at":"2024-10-09T23:50:16.956Z","updated_at":"2025-03-18T16:31:15.786Z","avatar_url":"https://github.com/ladunjexa.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next.js 14 Yoom (Zoom Clone)\n\n\u003c!-- GitHub badges --\u003e\n\n[![Latest release](https://img.shields.io/github/v/release/ladunjexa/nextjs14-zoom?label=Latest%20release\u0026style=social)](https://github.com/ladunjexa/nextjs14-zoom/releases/tag/v0.1.0)\n[![Stars](https://img.shields.io/github/stars/ladunjexa/nextjs14-zoom?style=social)](https://github.com/ladunjexa/nextjs14-zoom/stargazers)\n[![Fork](https://img.shields.io/github/forks/ladunjexa/nextjs14-zoom?style=social)](https://github.com/ladunjexa/nextjs14-zoom/forks)\n[![GitHub commits](https://img.shields.io/github/commit-activity/t/ladunjexa/nextjs14-zoom?style=social\u0026logo=github)](https://github.com/ladunjexa/nextjs14-zoom/commits)\n[![Pull requests](https://img.shields.io/github/issues-pr/ladunjexa/nextjs14-zoom?style=social\u0026logo=github)](https://github.com/ladunjexa/nextjs14-zoom/pulls)\n\n![demo](https://i.ibb.co/SXB6XpF/317983098-f09a8421-67d3-45ce-b9bc-a791cdc2774b.png)\n\n[![ladunjexa](https://custom-icon-badges.demolab.com/badge/made%20by%20-ladunjexa-556bf2?logo=github\u0026logoColor=white\u0026labelColor=101827)](https://github.com/luadnjexa)\n[![License](https://img.shields.io/github/license/ladunjexa/nextjs14-zoom?color=dddddd\u0026labelColor=000000)](https://github.com/ladunjexa/nextjs14-zoom/blob/main/LICENSE)\n[![Top Language](https://img.shields.io/github/languages/top/ladunjexa/nextjs14-zoom?logo=github\u0026logoColor=%23007ACC\u0026label=TypeScript)](https://www.typescriptlang.org/)\n[![Contributors](https://img.shields.io/github/contributors/ladunjexa/nextjs14-zoom?style=flat\u0026color=orange\u0026label=Contributors)](https://github.com/ladunjexa/nextjs14-zoom/graphs/contributors)\n![Release](https://img.shields.io/github/release/ladunjexa/nextjs14-zoom.svg)\n![PRs](https://img.shields.io/badge/PRs-welcome-ff69b4.svg?style=shields)\n![deployment](https://img.shields.io/github/deployments/ladunjexa/nextjs14-zoom/Production?logo=vercel\u0026label=Website)\n[![Known Vulnerabilities](https://snyk.io/test/github/ladunjexa/nextjs14-zoom/badge.svg)](https://snyk.io/test/github/ladunjexa/nextjs14-zoom)\n\n## 🌐 Live Demo\n\nExplore the live demonstration of the project: [nextjs14-zoom](https://nextjs14-zoom.vercel.app/)\n\n## 📝 Description\n\n**Yoom** is a video conferencing application built with Next.js, Tailwind CSS, Clerk, and GetStream.\nIt allows users to create and join video meetings, schedule meetings, and view upcoming and previous\nmeetings. The application is built with a modern design and user-friendly interface.\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eFolder Structure\u003c/b\u003e\u003c/summary\u003e\n\n```bash\nnextjs14-zoom/\n├── app/\n│   ├── (auth)/\n│   │   ├── sign-in/\n│   │   │   └── [[...sign-in]]/\n│   │   │       └── page.tsx\n│   │   └── sign-up/\n│   │       └── [[...sign-up]]/\n│   │           └── page.tsx\n│   ├── (root)/\n│   │   ├── (home)/\n│   │   │   ├── layout.tsx\n│   │   │   ├── page.tsx\n│   │   │   ├── personal-room/\n│   │   │   │   └── page.tsx\n│   │   │   ├── previous/\n│   │   │   │   └── page.tsx\n│   │   │   ├── recordings/\n│   │   │   │   └── page.tsx\n│   │   │   └── upcoming/\n│   │   │       └── page.tsx\n│   │   ├── layout.tsx\n│   │   └── meeting/\n│   │       └── [id]/\n│   │           └── page.tsx\n│   ├── favicon.ico\n│   ├── globals.css\n│   └── layout.tsx\n├── components/\n│   ├── home-card.tsx\n│   ├── layout/\n│   │   ├── mobile-nav.tsx\n│   │   ├── navbar.tsx\n│   │   └── sidebar.tsx\n│   ├── loader.tsx\n│   ├── meeting-modal.tsx\n│   ├── meeting-room.tsx\n│   ├── meeting-setup.tsx\n│   ├── meeting-type-list.tsx\n│   └── ui/\n│       ├── button.tsx\n│       ├── dialog.tsx\n│       ├── sheet.tsx\n│       ├── toast.tsx\n│       ├── toaster.tsx\n│       └── use-toast.ts\n├── constants/\n│   └── index.ts\n├── hooks/\n│   └── use-get-call-by-id.ts\n├── lib/\n│   └── utils.ts\n├── actions/\n│   └── stream.actions.ts\n├── providers/\n│   └── stream-client-provider.tsx\n├── public/\n│   ├── icons/[[...]].svg\n│   ├── images/[[...]].{jpeg,png}\n│   ├── next.svg\n│   └── vercel.svg\n├── .env.local\n├── .eslintignore\n├── .eslintrc.json\n├── .gitignore\n├── .prettierignore\n├── .prettierrc\n├── components.json\n├── middleware.ts\n├── next-env.d.ts\n├── next.config.mjs\n├── package-lock.json\n├── package.json\n├── postcss.config.mjs\n├── README.md\n├── tailwind.config.ts\n└── tsconfig.json\n```\n\n\u003c/details\u003e\n\n## 📖 Table of Contents\n\n\u003cdetails\u003e\u003csummary\u003eTable of Contents\u003c/summary\u003e\n\n- [Live Demo](#-live-demo)\n- [Description](#-description)\n- [Technologies Used](#-technologies-used)\n- [Get Started](#-get-started)\n  - [Prerequisites](#-prerequisites)\n  - [Installation and Run Locally](#-installation-and-run-locally)\n  - [Scripts](#-scripts)\n- [Environment Variables](#-environment-variables)\n- [Deployment](#-deployment)\n  - [Deploy to production (manual)](#-deploy-to-production-manual)\n  - [Deploy on Vercel (recommended)](#-deploy-on-vercel-recommended)\n  - [Deploy on Netlify](#-deploy-on-netlify)\n- [Contributing](#-contributing)\n  - [Bug / Feature Request](#-bug--feature-request)\n- [Acknowledgements](#-acknowledgements)\n- [Contact Us](#-contact-us)\n- [License](#-license)\n\n\u003c/details\u003e\n\n## ✨ Technologies Used\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eYoom\u003c/b\u003e is built using the following technologies:\u003c/summary\u003e\n\n- [TypeScript](https://www.typescriptlang.org/): TypeScript is a typed superset of JavaScript that\n  compiles to plain JavaScript.\n- [Next.js](https://nextjs.org/): Next.js is a React framework for building server-side rendered and\n  statically generated web applications.\n- [Tailwind CSS](https://tailwindcss.com/): Tailwind CSS is a utility-first CSS framework for\n  rapidly building custom user interfaces.\n- [ESLint](https://eslint.org/): ESLint is a static code analysis tool for identifying problematic\n  patterns found in JavaScript code.\n- [Prettier](https://prettier.io/): Prettier is an opinionated code formatter.\n- [Clerk](https://clerk.dev/): Clerk is a developer-first authentication API that handles all the\n  logic for user sign up, sign in, and more.\n- [Shadcn-UI](https://ui.shadcn.com/): Shadcn UI is a React UI library that helps developers rapidly\n  build modern web applications.\n- [React Datepicker](https://reactdatepicker.com/): React Datepicker is a simple and reusable\n  datepicker component for React.\n- [Vercel](https://vercel.com/): Vercel is a cloud platform for frontend developers, providing the\n  frameworks, workflows, and infrastructure to build a faster, more personalized Web.\n\n\u003c/details\u003e\u003cbr/\u003e\n\n[![Technologies Used](https://skillicons.dev/icons?i=ts,nextjs,tailwind,vercel)](https://skillicons.dev)\n\n## 🧰 Get Started\n\nTo get this project up and running in your development environment, follow these step-by-step\ninstructions.\n\n### 📋 Prerequisites\n\nIn order to install and run this project locally, you would need to have the following installed on\nyour local machine.\n\n- [Node.js](https://nodejs.org/en/)\n- [NPM](https://www.npmjs.com/get-npm)\n- [Git](https://git-scm.com/downloads)\n\n### ⚙️ Installation and Run Locally\n\n**Step 0:**\n\n\u003e [!IMPORTANT]\n\u003e\n\u003e - the application uses Clerk for Authentication and User Management, therefore, you need to create\n\u003e   Clerk account [here](https://clerk.dev/) and sets the `CLERK_PUBLISHABLE_KEY` and\n\u003e   `CLERK_SECRET_KEY` environment variables in `.env` file. Also, the different URLs for the Clerk\n\u003e   sign-in, sign-up, after sign-in and after sign-up pages.\n\u003e - the application uses GetStream for Video \u0026 Audio Calls, therefore, you need to create GetStream\n\u003e   account [here](https://getstream.io/) and sets the `STREAM_APP_ID`, `STREAM_API_KEY`, and\n\u003e   `STREAM_SECRET_KEY` environment variables in `.env` file.\n\n**Step 1:**\n\nDownload or clone this repo by using the link below:\n\n```bash\ngit clone https://github.com/ladunjexa/nextjs14-zoom.git\n```\n\n**Step 2:**\n\nExecute the following command in the root directory of the downloaded repo in order to install\ndependencies:\n\n```bash\nnpm install\n```\n\n**Step 3:**\n\nExecute the following command in order to run the development server locally:\n\n```bash\nnpm run dev\n```\n\n**Step 4:**\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n### 📜 Scripts\n\nAll scripts are defined in the `package.json` file. Here is a list of all scripts:\n\n| Script          | Action                                      |\n| :-------------- | :------------------------------------------ |\n| `npm install`   | Installs dependencies                       |\n| `npm run dev`   | Starts local dev server at `localhost:3000` |\n| `npm run build` | Build your production site to `./dist/`     |\n| `npm run start` | Start your production site locally          |\n| `npm run lint`  | Run ESLint                                  |\n\n## 🔒 Environment Variables\n\nEnvironment variables[^10] can be used for configuration. They must be set before running the app.\n\n\u003e [Environment variables](https://en.wikipedia.org/wiki/Environment_variable) are variables that are\n\u003e set in the operating system or shell, typically used to configure programs.\n\n**Yoom** uses [Clerk](https://clerk.com) and [GetStream](https://getstream.io) as external services.\nYou need to create an account on each of these services and get the required credentials to run the\napp.\n\nCreate a `.env` file in the root directory of the project and add the following environment\nvariables:\n\n```env\nNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=\u003cCLERK_PUBLISHABLE_KEY\u003e\nCLERK_SECRET_KEY=\u003cCLERK_SECRET_KEY\u003e\n\nNEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in\nNEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up\nNEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/\nNEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/\n\nNEXT_PUBLIC_STREAM_APP_ID=\u003cSTREAM_APP_ID\u003e\nNEXT_PUBLIC_STREAM_API_KEY=\u003cSTREAM_API_KEY\u003e\n\nSTREAM_SECRET_KEY=\u003cSTREAM_SECRET_KEY\u003e\n\nNEXT_PUBLIC_BASE_URL=\u003cBASE_URL\u003e\n```\n\n## 🚀 Deployment\n\n#### Deploy to production (manual)\n\nYou can create an optimized production build with the following command:\n\n```bash\nnpm run build\n```\n\n#### Deploy on Vercel (recommended)\n\nThe easiest way to deploy this Next.js app is to use the\n[Vercel Platform](https://vercel.com/new?utm_medium=default-template\u0026filter=next.js\u0026utm_source=create-next-app\u0026utm_campaign=create-next-app-readme).\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fladunjexa%2Fnextjs14-zoom)\n\n#### Deploy on Netlify\n\nYou can also deploy this Next.js app with [Netlify](https://www.netlify.com/).\n\n[![Deploy with Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/ladunjexa/nextjs14-zoom)\n\nCheck out [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n\n## 🔧 Contributing\n\n[![contributors](https://contrib.rocks/image?repo=ladunjexa/nextjs14-zoom)](https://github.com/ladunjexa/nextjs14-zoom/graphs/contributors)\n\nContributions are what make the open source community such an amazing place to learn, inspire, and\ncreate. Any contributions you make are **greatly appreciated**.\n\nTo fix a bug or enhance an existing module, follow these steps:\n\n1. Fork the repo\n2. Create a new branch (`git checkout -b improve-feature`)\n3. Make the appropriate changes in the files\n4. Commit your changes (`git commit -am 'Improve feature'`)\n5. Push to the branch (`git push origin improve-feature`)\n6. Create a Pull Request 🎉\n\n### 📩 Bug / Feature Request\n\nIf you find a bug (failure of a module to execute its intended function), kindly open an issue\n[here](https://github.com/ladunjexa/nextjs14-zoom/issues/new) by including the issue with a title\nand clear description.\n\nIf you'd like to request a new function, feel free to do so by opening an issue\n[here](https://github.com/ladunjexa/nextjs14-zoom/issues/new). Please include sample queries and\ntheir corresponding results.\n\n## 💎 Acknowledgements\n\nI'd like to express my gratitude to the following people who helped me with this project and made it\npossible:\n\n- [Next.js](https://nextjs.org/)\n- [Tailwind CSS](https://tailwindcss.com/)\n- [Shadcn UI](https://ui.shadcn.com/)\n- [Clerk](https://clerk.dev/)\n- [GetStream](https://getstream.io/)\n- [React Datepicker](https://reactdatepicker.com/)\n- [Vercel](https://vercel.com/)\n- [JavaScript Mastery](https://www.jsmastery.pro/)\n\n## 📞 Contact Us\n\n[![Telegram](https://img.shields.io/badge/Telegram-@ladunjexa-2CA5E0?style=social\u0026logo=telegram\u0026logoColor=000000)](https://t.me/ladunjexa)\n[![LinkedIn](https://img.shields.io/badge/LinkedIn-ladunjexa-blue?style=flat\u0026logo=linkedin\u0026logoColor=b0c0c0\u0026labelColor=363D44)](https://www.linkedin.com/in/lironabutbul)\n[![Instagram](https://img.shields.io/badge/Instagram-ladunjexa-grey?style=flat\u0026logo=instagram\u0026logoColor=b0c0c0\u0026labelColor=8134af)](https://www.instagram.com/ladunjexa)\n[![Discord](https://img.shields.io/badge/Discord-ladunjexa-7289da?style=flat\u0026logo=discord\u0026logoColor=b0c0c0\u0026labelColor=2c2f33)](https://discord.com/users/827996364331810816)\n\n\u003c!-- [![Twitter](https://img.shields.io/twitter/follow/ladunjexa.svg?style=social)](https://twitter.com/intent/follow?screen_name=ladunjexa) --\u003e\n\n## 📋 License\n\n**Yoom** is open source software [licensed as MIT](https://opensource.org/license/mit/) and is free\nto use — See [LICENSE](https://github.com/ladunjexa/nextjs14-zoom/blob/main/LICENSE) for more\ndetails.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fladunjexa%2Fnextjs14-zoom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fladunjexa%2Fnextjs14-zoom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fladunjexa%2Fnextjs14-zoom/lists"}