Skip to content

README.md

Latest commit

 

History

History
449 lines (356 loc) · 18.4 KB

README.md

File metadata and controls

449 lines (356 loc) · 18.4 KB

AI-Powered YouTube Clone using Next.js 15 and Mux

AI-Powered YouTube Clone using Next.js 15 and Mux

Ask Me Anything! GitHub license Maintenance GitHub branches Github commits GitHub issues GitHub pull requests Vercel status

📔 Table of Contents

‼️ Folder Structure

Here is the folder structure of this app.

yt-clone/
  |- migrations/
  |- public/
  |- src/
    |-- app/
      |--- (auth)/
      |--- (home)/
      |--- (studio)/
      |--- api/
      |--- apple-icon.png
      |--- error.tsx
      |--- favicon.ico
      |--- globals.css
      |--- icon0.svg
      |--- icon1.png
      |--- layout.tsx
      |--- manifest.json
      |--- not-found.tsx
    |-- components/
      |--- providers/
      |--- ui/
      |--- filter-carousel.tsx
      |--- infinite-scroll.tsx
      |--- responsive-modal.tsx
      |--- user-avatar.tsx
    |-- config/
      |--- http-status-codes.ts
      |--- index.ts
    |-- constants/
      |--- index.ts
    |-- db/
      |--- index.ts
      |--- schema.ts
    |-- env/
      |--- client.ts
      |--- server.ts
    |-- hooks/
      |--- use-confirm.tsx
      |--- use-intersection-observer.ts
      |--- use-mobile.tsx
    |-- lib/
      |--- encryption.ts
      |--- mux.ts
      |--- qstash.ts
      |--- ratelimit.ts
      |--- redis.ts
      |--- uploadthing.ts
      |--- utils.ts
    |-- modules/
      |--- auth/
      |--- categories/
      |--- comment-reactions/
      |--- comments/
      |--- home/
      |--- playlists/
      |--- search/
      |--- studio/
      |--- subscriptions/
      |--- suggestions/
      |--- users/
      |--- video-reactions/
      |--- video-views/
      |--- videos/
    |-- scripts/
      |--- seed-categories.ts
    |-- trpc/
      |--- routers/
      |--- client.tsx
      |--- init.ts
      |--- query-client.ts
      |--- server.tsx
    |-- middleware.ts
  |- .env.example
  |- .env/.env.local
  |- .gitignore
  |- .prettierrc.mjs
  |- bun.lock
  |- components.json
  |- drizzle.config.ts
  |- environment.d.ts
  |- eslint.config.mjs
  |- next.config.ts
  |- package.json
  |- postcss.config.mjs
  |- tailwind.config.ts
  |- tsconfig.json
  |- vercel.ts

🧰 Getting Started

  1. Make sure Git and NodeJS is installed.
  2. Clone this repository to your local computer.
  3. Create .env.local file in root directory.
  4. Contents of .env.local:
# disable telemetry
DO_NOT_TRACK="1"
CLERK_TELEMETRY_DISABLED="1"
CLERK_TELEMETRY_DEBUG="1"
NEXT_TELEMETRY_DISABLED="1"

# app base url
NEXT_PUBLIC_APP_BASE_URL="http://localhost:3000"

# clerk api keys
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="pk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
CLERK_SECRET_KEY="sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"

# clerk webhook
CLERK_WEBHOOK_SECRET="whsec_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"

# clerk redirect urls
NEXT_PUBLIC_CLERK_SIGN_IN_URL="/sign-in"
NEXT_PUBLIC_CLERK_SIGN_UP_URL="/sign-up"
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL="/"
NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL="/"

# neon db uri
DATABASE_URL="postgresql://<username>:<password>@<hostname>/NewTube?sslmode=require"

# upstash redis url and token
UPSTASH_REDIS_REST_URL="https://<db-slug>.upstash.io"
UPSTASH_REDIS_REST_TOKEN="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"

# qstash token, url and keys
QSTASH_TOKEN="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
UPSTASH_WORKFLOW_URL="https://<slug>.ngrok-free.app"
QSTASH_CURRENT_SIGNING_KEY="sig_xxxxxxxxxxxxxxxxxxxxxxxx"
QSTASH_NEXT_SIGNING_KEY="sig_xxxxxxxxxxxxxxxxxxxxxxxxxxx"

# mux image and stream base url
NEXT_PUBLIC_MUX_IMAGE_BASE_URL="https://image.mux.com"
NEXT_PUBLIC_MUX_STREAM_BASE_URL="https://stream.mux.com"

# mux token and webhook secret
MUX_TOKEN_ID="xxxxxxxxx-xxx-xxxx-xxxx-xxxxxxxxxxxxxx"
MUX_TOKEN_SECRET="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
MUX_WEBHOOK_SECRET="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

# uploadthing app id and token
UPLOADTHING_APP_ID="xxxxxxxxx"
UPLOADTHING_TOKEN="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"

# openai api base url
OPENAI_API_BASE_URL="https://api.openai.com/v1"

# open ai api key cookie name and verification secret (generated by `openssl rand -hex 32`)
OPENAI_API_KEY_COOKIE_NAME="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
VERIFICATION_SECRET="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"

5. Disable Telemetry (Optional)

DO_NOT_TRACK="1"
CLERK_TELEMETRY_DISABLED="1"
CLERK_TELEMETRY_DEBUG="1"
NEXT_TELEMETRY_DISABLED="1"
  • These disable analytics/telemetry from Clerk and Next.js. Keep them as provided.

6. App Base URL

NEXT_PUBLIC_APP_BASE_URL="http://localhost:3000"
  • Keep as http://localhost:3000 during development.
  • Change to your deployed URL (e.g., https://yourdomain.com) in production.

7. Clerk (Authentication)

  • Go to Clerk Dashboard.
  • Create a new application.
  • Navigate to API Keys:
    • Copy Publishable Key → NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
    • Copy Secret Key → CLERK_SECRET_KEY
  • Set up a Webhook (under "Webhooks") pointing to: https://<your-domain>/api/users/webhook (this will be your server endpoint, can be tunneled via ngrok). Copy the generated secret → CLERK_WEBHOOK_SECRET
  • Redirect URLs: Keep as provided unless you modify authentication routes.

8. Neon (PostgreSQL Database)

  • Sign up at Neon.
  • Create a new PostgreSQL project.
  • Go to Connection Details and copy the Connection String.
  • Replace <username>, <password>, and <hostname> with your Neon credentials.
  • Append ?sslmode=require at the end (needed for secure connections).

9. Upstash Redis (API Ratelimit)

  • Sign up at Upstash.
  • Create a Redis database.
  • In the database dashboard:
    • Copy the REST URL → UPSTASH_REDIS_REST_URL
    • Copy the REST Token → UPSTASH_REDIS_REST_TOKEN

10. Upstash QStash (AI Workflows)

  • In your Upstash Dashboard, create a QStash project.
  • Copy the QStash Token → QSTASH_TOKEN.
  • Configure your Workflow URL (this will be your server endpoint, can be tunneled via ngrok).
  • Obtain the Signing Keys from the QStash dashboard:
    • Current Signing Key → QSTASH_CURRENT_SIGNING_KEY
    • Next Signing Key → QSTASH_NEXT_SIGNING_KEY

11. Mux (Video Uploads)

  • Sign up at Mux and create a new project.
  • In your Dashboard → Settings → API Access Tokens:
    • Create a new token with Videos (Read & Write) permissions.
    • Copy Token ID → MUX_TOKEN_ID
    • Copy Token Secret → MUX_TOKEN_SECRET
  • Set up a Webhook in Mux (point to https://<your-domain>/api/videos/webhook (this will be your server endpoint, can be tunneled via ngrok).) and copy the Webhook Signing Secret → MUX_WEBHOOK_SECRET

12. UploadThing (File Uploads)

  • Sign up at UploadThing.
  • Create a new app.
  • Copy the App ID → UPLOADTHING_APP_ID
  • Copy the API Token → UPLOADTHING_TOKEN

13. OpenAI (AI Features)

  • Store it in your cookies under the name specified by OPENAI_API_KEY_COOKIE_NAME.

  • Generate both verification secret and cookie name (for cryptographic signing):

    openssl rand -hex 32

    Copy the output → VERIFICATION_SECRET and OPENAI_API_KEY_COOKIE_NAME separately

  1. Install Project Dependencies using npm install --legacy-peer-deps or yarn install --legacy-peer-deps or bun install --legacy-peer-deps.

  2. Now app is fully configured 👍 and you can start using this app using either one of npm run dev or yarn dev or bun dev.

NOTE: Please make sure to keep your API keys and configuration values secure and do not expose them publicly.

📷 Screenshots

Modern UI/UX

Playlist functionality

Creator profile

⚙️ Tech Stack

React JS Next JS Typescript Tailwind CSS Vercel

🔧 Stats

Stats for NewTube

🙌 Contribute

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.

💎 Acknowledgements

Useful resources and dependencies that are used in NewTube.

☕ Buy Me a Coffee

🚀 Follow Me

Follow Me Tweet about this project

📚 Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

📃 Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out Next.js deployment documentation for more details.

⭐ Give A Star

You can also give this repository a star to show more people and they can use this repository.

🌟 Star History

Star History Chart

(back to top)