Technologies

• Next.js
• Progressive Web App
• NextAuth
• Google Auth
• drizzle orm
• Postgresql
• t3-oss env
• tanstack/react-query
• trpc client/server
• vixsrc.to with a little bit of reverse engineering
• HeroUI
• hls.js for custom video player
• tailwindcss
• tmdb wrapper
• vaul (drawer)
• zod
• zustand
• other (just look at package.json)

Env

• TMDB_API_KEY: Register at themoviedb.org, go to API section, and generate a key.
• GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET: Create a project in Google Cloud Console, navigate to APIs & Services > Credentials, create OAuth 2.0 Client IDs, and note the ID and secret.
• NEXTAUTH_SECRET: Generate a random string using openssl rand -base64 32 or npx auth secret in your project’s root and add to .env.
• POSTGRES_URL, POSTGRES_PRISMA_URL, POSTGRES_URL_NON_POOLING, POSTGRES_USER, POSTGRES_HOST, POSTGRES_PASSWORD, POSTGRES_DATABASE: Set up a PostgreSQL database (e.g., via Supabase). Get credentials from the dashboard’s “Connect” section. Format: postgres://USER:PASSWORD@HOST:PORT/DATABASE?schema=public. Use same URL for POSTGRES_URL and POSTGRES_PRISMA_URL; for POSTGRES_URL_NON_POOLING, use a direct connection URL without pooling parameters.

Service Availability

The video database used may only work in EU or some places around there. But since VideoPlayer.tsx uses a proxy, if you host the server in a supported country or you use a vpn or something like that, of course it will work the same.

Imagery