Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nayak-nirmalya/twitch-clone

FullStack Twitch Clone: Next.js 14, Livestreaming, React, Prisma, Stripe, Tailwind, MySQL & TypeScript.
https://github.com/nayak-nirmalya/twitch-clone

mysql nextjs14 planetscale prisma-orm reactjs server-action ssr tailwindcss typescript uploadthing

Last synced: about 1 month ago
JSON representation

FullStack Twitch Clone: Next.js 14, Livestreaming, React, Prisma, Stripe, Tailwind, MySQL & TypeScript.

Host: GitHub
URL: https://github.com/nayak-nirmalya/twitch-clone
Owner: nayak-nirmalya
Created: 2023-12-13T14:16:32.000Z (about 1 year ago)
Default Branch: master
Last Pushed: 2024-01-15T14:08:59.000Z (12 months ago)
Last Synced: 2024-01-15T18:28:24.103Z (12 months ago)
Topics: mysql, nextjs14, planetscale, prisma-orm, reactjs, server-action, ssr, tailwindcss, typescript, uploadthing
Language: TypeScript
Homepage: https://twitch-clone-orcin.vercel.app
Size: 313 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# FullStack Twitch Clone: Next.js 14, Livestreaming, React, Prisma, Stripe, Tailwind, MySQL & TypeScript

Credits: [Antonio Erdeljac](https://github.com/AntonioErdeljac)

Key Features:

- 📡 Streaming using RTMP / WHIP protocols
- 🌐 Generating ingress
- 🔗 Connecting Next.js app to OBS
- 🔐 Authentication
- 📸 Thumbnail upload with Uploadthing
- 👀 Live viewer count
- 🚦 Live statuses
- 💬 Real-time chat using sockets
- 🎨 Unique color for each viewer in chat
- 👥 Following system
- 🚫 Blocking system
- 👢 Kicking participants from a stream in real-time
- 🎛️ Streamer / Creator Dashboard
- 🐢 Slow chat mode
- 🔒 Followers only chat mode
- 📴 Enable / Disable chat
- 🔽 Collapsible layout (hide sidebars, chat etc, theatre mode etc.)
- 📚 Sidebar following & recommendations tab
- 🏠 Home page recommending streams, sorted by live first
- 🔍 Search results page with a different layout
- 🔄 Syncing user information to our DB using Webhooks
- 📡 Syncing live status information to our DB using Webhooks
- 🤝 Community tab
- 🎨 Beautiful design
- ⚡ Blazing fast application
- 📄 SSR (Server-Side Rendering)
- 🗺️ Grouped routes & layouts
- 🗃️ MySQL DB with PlanetScale

### Prerequisites

**Node version 18.17 or later**

### Cloning the Repository

```shell
git clone https://github.com/nayak-nirmalya/twitch-clone.git
```

### Install Packages

```shell
npm i
```

### Setup .env File

```js
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_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
CLERK_WEBHOOK_SECRET=

DATABASE_URL=

LIVEKIT_API_URL=
LIVEKIT_API_KEY=
LIVEKIT_API_SECRET=
NEXT_PUBLIC_LIVEKIT_WS_URL=

UPLOADTHING_SECRET=
UPLOADTHING_APP_ID=
```

### Setup Prisma

Add Database URL (PlanetScale/MySQL)

```shell
npx prisma generate
npx prisma db push
```

### Start the App

```shell
npm run dev
```

## Available Commands

Running commands with npm `npm run [command]`