LoL Twitch VODs

A web application for browsing League of Legends streamers and their match VODs with synchronized Twitch video playback.

Project Structure

lol-twitch-vods/
├── frontend/          # React + Vite frontend
└── backend/           # ASP.NET Core API

Prerequisites

• Frontend: Bun 1.0+
• Backend: .NET 9 SDK
• Database: Docker & Docker Compose (for PostgreSQL)

Quick Start

Backend Setup

cd backend

# Start PostgreSQL database
docker compose up -d

# Run migrations
dotnet ef database update

# Configure User Secrets (if needed)
dotnet user-secrets set "TwitchApi:ClientId" "your_twitch_client_id"
dotnet user-secrets set "TwitchApi:ClientSecret" "your_twtich_client_secret"
dotnet user-secrets set "RiotGamesApi:Key" "your_riot_games_api_key"

# Run the API
dotnet run

API will be available at http://localhost:5240

Frontend Setup

cd frontend

# Install dependencies
bun install

# Run development server
bun run dev

Frontend will be available at http://localhost:5173

Environment Variables

Frontend (.env)

VITE_API_BASE_URL=http://localhost:5240/api
VITE_TWITCH_PARENT_DOMAIN=localhost

Backend (User Secrets)

TwitchApi:ClientId=<your_twitch_client_id>
TwitchApi:ClientSecret=<your_twitch_client_secret>
RiotGamesApi:Key=<your_riot_games_api_key>

Getting API Credentials

Riot Games API

1. Go to the Riot Developer Portal
2. Sign in with your Riot account
3. Your development API key is available on the dashboard (expires every 24 hours)
4. For a persistent key, register a product under Register Product (requires approval)

Documentation: https://developer.riotgames.com/docs/portal

Twitch API

1. Go to the Twitch Developer Console
2. Sign in with your Twitch account
3. Click Register Your Application
4. Fill in the details:
   • Name: Your app name
   • OAuth Redirect URLs: http://localhost (for development)
   • Category: Choose appropriate category
5. Click Create and then Manage to view your Client ID and generate a Client Secret

Documentation: https://dev.twitch.tv/docs/api/get-started

Tech Stack

Frontend:

• React 19
• Vite
• React Router v7
• Tailwind CSS v4
• TypeScript

Backend:

• ASP.NET Core 9
• Entity Framework Core
• PostgreSQL 18
• Minimal APIs

Todo:

• Add data validation on endpints