vodcreator
[READ-ONLY] Mirror of https://github.com/Rowan-Paul/vodcreator. vodcreator.rowanpaulflynn.com
Star
Fork
Watch
18 1 0
Files
.vscode
docs
public
src
.env.example
.gitignore
.npmrc
AGENTS.md
components.json
eslint.config.js
next.config.js
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
postcss.config.js
prettier.config.js
README.md
tsconfig.json
README.md

VOD Creator #

A web application to generate Twitch VOD download commands for TwitchDownloaderCLI. Built with the T3 Stack (Next.js, TypeScript, tRPC, Tailwind CSS, NextAuth).

Features #

  • Add multiple Twitch channels to track
  • Fetch latest VODs from Twitch API
  • Generate copyable download commands for:
    • Video download
    • Chat download
    • Chat render
  • Choose 1080p, 1440p, or custom chat render templates
  • Cursor-paginated VOD loading with background refresh and retry states
  • Persistent local settings and a bounded recent-VOD cache
  • Google OAuth authentication

Tech Stack #

Setup #

Prerequisites #

  • Node.js 18+ and pnpm
  • Google Cloud account
  • Twitch Developer account

1. Google OAuth Setup #

  1. Go to Google Cloud Console
  2. Create a new project or select an existing one
  3. Navigate to APIs & Services > Credentials
  4. Click Create Credentials > OAuth client ID
  5. Application type: Web application
  6. Authorized JavaScript origins: http://localhost:3000 (or your production URL)
  7. Authorized redirect URIs: http://localhost:3000/api/auth/callback/google (or your production URL + /api/auth/callback/google)
  8. Click Create to get your Client ID and Client Secret

2. Twitch API Setup #

  1. Go to Twitch Developer Console
  2. Click Register Your Application
  3. Fill in the form:
    • Name: VOD Creator (or any name you prefer)
    • OAuth Redirect URLs: http://localhost:3000 (or your production URL)
    • Category: Integration
  4. Click Register to get your Client ID and Client Secret
  5. Click Manage on your application and ensure it has the correct redirect URL

3. Environment Variables #

Create a .env file in the root directory with the following variables:

# Google OAuth
AUTH_GOOGLE_ID="your-google-client-id"
AUTH_GOOGLE_SECRET="your-google-client-secret"

# Twitch API
TWITCH_CLIENT_ID="your-twitch-client-id"
TWITCH_CLIENT_SECRET="your-twitch-client-secret"

# NextAuth
AUTH_SECRET="generate-with: npx auth secret"

4. Install Dependencies #

pnpm install

5. Start Development Server #

pnpm dev

Visit http://localhost:3000 to start using the app.

Usage #

  1. Sign In: Click "Sign in with Google" and authenticate
  2. Add Channel: Enter a Twitch username and click "Add Channel"
  3. Refresh VODs: Click the refresh button to fetch the latest VODs from the channel
  4. Copy Commands: Click the copy buttons to copy commands to your clipboard:
    • Video Download: Downloads the VOD video file
    • Chat Download: Downloads the chat JSON file
    • Chat Render: Renders the chat as a video file
  5. Load More: Click "Load More" to fetch additional VODs from Twitch and cache them locally
  6. Settings: Choose a chat render template, font, and VODs per load

Development #

Available Commands #

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

# Start production server
pnpm start

# Run type checking
pnpm typecheck

# Run ESLint
pnpm lint

# Fix ESLint issues
pnpm lint:fix

# Format code with Prettier
pnpm format:write

Deployment #

Environment Variables #

Set the following environment variables in your deployment platform:

AUTH_GOOGLE_ID=""
AUTH_GOOGLE_SECRET=""
TWITCH_CLIENT_ID=""
TWITCH_CLIENT_SECRET=""
AUTH_SECRET=""

Update OAuth Redirect URLs #

Before deploying, update your OAuth redirect URLs:

Google OAuth:

  • Add your production URL to authorized JavaScript origins
  • Add your production URL + /api/auth/callback/google to authorized redirect URIs

Twitch API:

  • Update OAuth Redirect URLs to your production URL

Deploy to Vercel #

  1. Push your code to GitHub
  2. Import project to Vercel
  3. Add environment variables
  4. Deploy

Learn More #

To learn more about the T3 Stack, check out these resources:

Troubleshooting #

Twitch API Rate Limiting #

The Twitch API has rate limits (30 requests per minute). If you see rate limit errors, wait a moment before refreshing.

Local Storage Issues #

  • Ensure browser local storage is available
  • Clear the vodcreator-store local storage key if state gets corrupted

OAuth Callback Issues #

  • Verify your redirect URLs match exactly (including http/https)
  • Check that your production URL is added to authorized origins/redirects
  • Ensure your auth secret is set (AUTH_SECRET)

License #

MIT