Welcome to the open source UI for Dotabod! This repository includes the overlay used in OBS, a dashboard to manage all settings, and the https://dotabod.com homepage.
Dotabod is a platform designed to enhance the experience of Dota 2 streamers and viewers. By providing real-time stats, twitch bets, mmr tracking, and more, Dotabod allows viewers to engage with Dota 2 streams in new and exciting ways.
- Clone the repository & copy the example environment file
git clone https://github.com/dotabod/frontend.git
cd frontend
# Fill out the values in .env with your own
cp .env.example .env- Install dependencies
pnpm install- Setup your postgres database
pnpm prisma db push- Start the development server
pnpm dev-
Open http://localhost:3000 with your browser to see the result.
-
Alter the frontend to use moderator scopes, then login with your chatbot
-
Undo the moderator scope changes and login with a normal twitch user that you want to stream on
frontend is the production Worker, with production Hyperdrive and NEXTAUTH_URL=https://dotabod.com. frontend-dev follows the cloudflare-dev branch and is a separate deployment for dev.dotabod.com, built with pnpm run build:vinext:dev and deployed with pnpm exec wrangler deploy --name frontend-dev. Cloudflare's Vite plugin selects env.dev at build time, not at deploy time.
Development uses Doppler's preview configuration, preview Hyperdrive, test payments, and NEXTAUTH_URL=https://dev.dotabod.com. Sync its runtime secrets with pnpm run cloudflare:dev-secrets:sync. Production users/settings are not copied into the development database. Some third-party integration credentials remain shared; separate deployments do not imply every external service is sandboxed.
The production auth URL must be set in both Workers runtime secrets and Workers Builds variables. Do not change the public dotabod.com/www DNS until cutover is approved and verified. Keep the existing Twitch callbacks for production and dev.
Set the Workers Builds Preview deploy command to pnpm run cloudflare:preview:deploy after this script is available on the deployed branch. Keep the build command as pnpm run build:vinext.
The deploy script reads Cloudflare's stable Preview URL and updates NEXTAUTH_URL on that Preview in a second deployment. It does not change production or Preview Base secrets. Do not treat the first deployment as ready until the command completes; a failed secret update fails the command. Unique deployment URLs use the stable branch URL for authentication.
Twitch requires the exact ${NEXTAUTH_URL}/api/auth/callback/twitch URL to be registered in the Twitch application used by Preview credentials. The script prints that URL. New branch URLs are not automatically authorized by Twitch. Use registered branches for authenticated testing; arbitrary branches need callback registration first. Do not derive NEXTAUTH_URL from untrusted request headers or mutate it per request.
The queue blocker draws a fake main menu over a streamer's real one, so its two background images have to keep matching whatever Valve is currently shipping:
public/images/overlay/finding-match.png— the client searching for a matchpublic/images/overlay/finding-match-old.png— the client idle on the main menu
Both are refreshed from the Dota 2 client installed on your own machine. This is Windows-only, and needs the client running and visible (not exclusive fullscreen) at any 16:9 resolution:
pnpm overlay:finding-matchThe command screenshots the client, scales the frame to 1080p, crops the fixed 840x355 region the overlay covers, and works out which of the two states the menu is in — so whichever state the client is in decides which file it writes. Sit on the main menu to refresh the idle art; press Find Match, run the command, then cancel the queue to refresh the searching art. It never touches matchmaking itself.
For the searching state it also paints out the client's baked-in "Finding Match" caption, because the overlay draws that label itself in each streamer's own language. Capture with your client set to English: the mask that erases the caption covers the English string's footprint, and a longer translation can run past it.
node scripts/update-finding-match-overlay.mjs --help covers the rest — feeding in a screenshot you already have, keeping the full frame to debug a bad crop, and forcing a particular state.
We welcome contributions from the community! Whether you want to submit a bug report, suggest a new feature, or contribute code, we would love to hear from you. Please see our Contributing Guidelines for more information.
This project is licensed under the MIT License.
