linhtutkyawdev/pioneer-edu-portal

Learn to develop a professional enterprise-ready video conferencing app in hours using Next.js 14, Stream, and Tailwind CSS.

Pioneer Education Portal

🤖 Introduction

Built with the latest Next.js and TypeScript, this project replicates Zoom, a widely used video conferencing tool and convert it to an internal lecture streaming platform. It enables users (students, teachers and admins) to securely log in, create classes and access live lectures according to the schedule and also have all the streaming functionalities such as recording, screen sharing, and managing participants.

⚙️ Tech Stack

• Next.js
• TypeScript
• Clerk
• getstream
• shadcn
• Tailwind CSS

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Installation

Install the project dependencies using npm:

npm install

Set Up Environment Variables

Create a new file named .env in the root of your project and add the following content:

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=

POSTGRES_URL=
POSTGRES_PRISMA_URL=
POSTGRES_URL_NON_POOLING=
POSTGRES_USER=
POSTGRES_HOST=
POSTGRES_PASSWORD=
POSTGRES_DATABASE=

Replace the placeholder values with your actual Clerk & getstream credentials. You can obtain these credentials by signing up on the Clerk website, getstream website, vercel postgres website

Running the Project

npm run dev

Open http://localhost:3000 in your browser to view the project.

Secreenshots

🚀 Refrence Tutorial