DoceAzedo's Overlay

The heart of my live coding streams — a set of widgets and scripts including live stats, custom alerts, rewards and tons of chat commands.

🗂 What's inside?

This monorepo uses npm as a package manager. It includes the following applications:

bot: a TypeScript Twitch chat bot and event listener
overlay: a SvelteKit app with stream widgets
trpc-server: a tRPC app to fetch third-party data
ws-server: a Socket.IO app that acts as a message broker

You'll also find the following packages:

db: a LowDB powered JSON database for persistence
trpc-client: the tRPC client used by other apps
twurple-auth: reusable Twurple auth data
ws-client: the Socket.IO client used by other apps

Additionally, there are also a few other useful directiories:

assets: images you may add to your OBS scenes
data: the folder where the database data is stored
tokens: the folder that Twurple stores your tokens

🏃 Getting started

First off, please make sure you have Node.js v18 or up installed and is using npm v8 or up.

Clone this repository.
Run npm install to install the dependencies.
Run npm run setup to setup the required environment variables.
- Please follow each steps of the setup carefully.
- You might want to fill additional values on the .env file.
Run npm run start to initialize the app.

The bot will start and join the streamer's chat automatically.

The overlay widgets will be available at localhost:42069 by default. You can check the availables widgets in the routes directory.

You can add these widgets as OBS browser sources. When doing that, you might need to add body { background-color: rgba(0, 0, 0, 0) !important; } to make sure OBS removes the background of the widget.

🧑‍💻 Development

You can start the development server with:

npm run dev

Please note that some apps might freak out with hot reloading. If you find any problems, refrain from using this command but for overlay development.

If you want to create a new command, use the following command:

npm run cmd:new

📝 Notes

This project is in constant development and I'm always open for new features ideas and pull requests! 🥳
If you want to replicate the overlay I use on my streams, you'll need to place everything in the exact positions and sizes as I do, which is currently not documented yet.
The fancy transitions are handled by the obs-move-transition plugin and a clever usage of masks, both of which should also be setup manually.
The Spotify now playing and volume features only work on macOS as they depend on AppleScript to work.

License

This project is licensed under the GNU General Public License v3.0.