{"id":19208399,"url":"https://github.com/zntb/nextjs-twitch-clone","last_synced_at":"2026-06-15T18:31:25.415Z","repository":{"id":230203721,"uuid":"778728046","full_name":"zntb/nextjs-twitch-clone","owner":"zntb","description":null,"archived":false,"fork":false,"pushed_at":"2026-05-19T04:33:18.000Z","size":1289,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-05-19T07:04:55.492Z","etag":null,"topics":["clerk","livekit","nextjs","prisma-orm","tailwindcss","typescript","uploadthing"],"latest_commit_sha":null,"homepage":"https://nextjs-twitch-clone-one.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/zntb.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-03-28T09:32:13.000Z","updated_at":"2026-02-16T16:12:35.000Z","dependencies_parsed_at":"2024-03-31T08:31:27.353Z","dependency_job_id":"3f49ec4f-2c67-4209-ae89-b002a085ee81","html_url":"https://github.com/zntb/nextjs-twitch-clone","commit_stats":null,"previous_names":["zntb/nextjs-twitch-clone"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zntb/nextjs-twitch-clone","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zntb%2Fnextjs-twitch-clone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zntb%2Fnextjs-twitch-clone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zntb%2Fnextjs-twitch-clone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zntb%2Fnextjs-twitch-clone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zntb","download_url":"https://codeload.github.com/zntb/nextjs-twitch-clone/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zntb%2Fnextjs-twitch-clone/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34376120,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-15T02:00:07.085Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","livekit","nextjs","prisma-orm","tailwindcss","typescript","uploadthing"],"created_at":"2024-11-09T13:26:07.437Z","updated_at":"2026-06-15T18:31:25.409Z","avatar_url":"https://github.com/zntb.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next.js Twitch‑Style Livestreaming Starter\n\n[![Next.js](https://img.shields.io/badge/Next.js-App%20Router-000)](https://nextjs.org/) [![TypeScript](https://img.shields.io/badge/TypeScript-Strict-3178C6)](https://www.typescriptlang.org/) [![Tailwind CSS](https://img.shields.io/badge/Tailwind-CSS-38B2AC)](https://tailwindcss.com/) [![Clerk](https://img.shields.io/badge/Auth-Clerk-6C47FF)](https://clerk.com/) [![Prisma](https://img.shields.io/badge/ORM-Prisma-2D3748)](https://prisma.io/) [![LiveKit](https://img.shields.io/badge/RTC-LiveKit-FF4D4D)](https://livekit.io/) [![UploadThing](https://img.shields.io/badge/Uploads-UploadThing-000)](https://uploadthing.com/)\n\nA minimal, modern foundation for building a Twitch‑like livestreaming app with **Next.js App Router + TypeScript**, **Clerk** for auth, **Prisma** for data, **LiveKit** for real‑time video, **UploadThing** for file uploads, and **Tailwind CSS** for styling.\n\n---\n\n## Problem statement\n\nBuilding a production‑feel livestreaming platform requires stitching together many moving parts—authentication, real‑time video, channel metadata, thumbnails, role‑based access, and a database that plays nicely with server components. Most examples focus on one piece at a time, which makes it hard to see **how the whole stack fits together**.\n\n\u003e This repository provides a **clean, end‑to‑end starting point** showing how to combine these tools into a cohesive app: creators sign in, configure a stream, go live via LiveKit, and viewers open a channel page to watch.\n\n---\n\n## Live demo\n\n- Preview: **[https://nextjs-twitch-clone-one.vercel.app](https://nextjs-twitch-clone-one.vercel.app)**\n\n\u003e Note: This is a developer preview. Some actions (e.g. starting a stream) depend on your environment keys/roles.\n\n---\n\n## Feature matrix\n\n| Area      | Creator                              | Viewer                                                |\n| --------- | ------------------------------------ | ----------------------------------------------------- |\n| Auth      | Clerk sign‑in/sign‑up                | Anonymous/Authed viewing supported depending on route |\n| Channels  | Create/update basic channel metadata | Browse/open a channel page                            |\n| Streaming | Publish to LiveKit room/ingress      | Playback from LiveKit room                            |\n| Assets    | UploadThing for thumbnails/avatars   | View rendered thumbnails                              |\n| Data      | Prisma models \u0026 migrations           | –                                                     |\n| UI        | Tailwind starter components          | Responsive channel/watch pages                        |\n\n\u003e Scope is intentionally lean so you can extend it (chat, moderation, follows, VODs, analytics, etc.).\n\n---\n\n## What’s inside\n\n- **Next.js App Router** with Server Components \u0026 Server Actions\n- **Clerk** authentication\n- **Prisma** schema and migrations (DB via `DATABASE_URL`)\n- **LiveKit** client integration for real‑time livestream publish/playback\n- **UploadThing** for file uploads\n- **Tailwind CSS** utility‑first styling\n- Sensible project layout and linting\n\n### Project structure\n\n```text\napp/          # Routes (App Router), layouts, pages, server actions\ncomponents/   # Reusable UI components\nhooks/        # Custom React hooks\nlib/          # Server utilities, clients, helpers\nprisma/       # Prisma schema \u0026 migrations\npublic/       # Static assets (place screenshots here)\nstore/        # Client state (e.g., Zustand)\n```\n\n---\n\n## Quickstart\n\n### 1) Prerequisites\n\n- **Node.js** ≥ 18\n- An SQL database (SQLite/MySQL/Postgres via Prisma)\n- **Clerk** app (auth)\n- **LiveKit** (Cloud or self‑hosted) for WebRTC/ingress\n- **UploadThing** account (uploads)\n\n### 2) Clone \u0026 install\n\n```bash\ngit clone https://github.com/zntb/nextjs-twitch-clone\ncd nextjs-twitch-clone\nnpm install\n# or pnpm i / yarn / bun i\n```\n\n### 3) Environment variables\n\nCreate `.env` (or `.env.local`) in the project root:\n\n```dotenv\n# Auth (Clerk)\nNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=\nCLERK_SECRET_KEY=\n\n# Database (Prisma)\nDATABASE_URL=\n\n# LiveKit\nNEXT_PUBLIC_LIVEKIT_WS_URL=\nLIVEKIT_API_KEY=\nLIVEKIT_API_SECRET=\n\n# UploadThing\nUPLOADTHING_TOKEN=\n```\n\n\u003e **Tip:** Use SQLite locally (simple dev) and Postgres/MySQL in prod.\n\n### 4) Prisma init\n\n```bash\nnpx prisma generate\nnpx prisma db push\n# optional: npx prisma studio\n```\n\n### 5) Run dev server\n\n```bash\nnpm run dev\n# open http://localhost:3000\n```\n\n---\n\n## How the streaming flow works\n\n1. **Creator auths** with Clerk → creator‑only screens are available.\n2. **Go Live** sets up a **LiveKit** publish session/ingress; channel/stream state is persisted via **Prisma**.\n3. **Viewer** opens a channel page and connects to the corresponding **LiveKit** room for playback.\n\nExact workflows will vary with your LiveKit deployment (rooms, ingress, keys). Start simple locally, then harden for prod.\n\n---\n\n## Scripts\n\nCommon scripts (see `package.json` for the full list):\n\n- `dev` – start local development\n- `build` – production build\n- `start` – run the production server\n- `lint` – lint the codebase\n\n---\n\n## Screenshots\n\n![Home](public/screenshots/home.png)\n\n![Channel](public/screenshots/channel.png)\n\n---\n\n## Roadmap ideas\n\n- Channel pages (about, schedule, VOD placeholders)\n- Real‑time chat + moderation\n- Follows \u0026 notifications\n- Creator dashboard (stream health, title/category, thumbnail management)\n- Access controls (followers‑only chat, slow‑mode, block/ban)\n- Analytics (concurrent viewers, watch time)\n\nContributions and issues are welcome!\n\n---\n\n## Troubleshooting\n\n- **Prisma in Next.js dev**: Ensure a single Prisma client instance (e.g., `lib/db.ts`) and a valid `DATABASE_URL`.\n- **LiveKit connectivity**: Verify `NEXT_PUBLIC_LIVEKIT_WS_URL` and that your Ingress/Room is reachable from clients (use a tunnel for local testing).\n- **Clerk redirect URLs**: Add local \u0026 production URLs in Clerk (including `/sign-in` and `/sign-up`).\n\n---\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for details.\n\n---\n\n## Acknowledgements\n\nThanks to the teams behind Next.js, Clerk, Prisma, LiveKit, UploadThing, and Tailwind CSS. If you ship something with this starter, consider sharing your learnings with the community.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzntb%2Fnextjs-twitch-clone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzntb%2Fnextjs-twitch-clone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzntb%2Fnextjs-twitch-clone/lists"}