Project 07 – An Interactive Media Overlay for Twitch Streams

Project 07 is a personal tool I’ve been building to make Twitch live streams more interactive and community-driven.

The idea is simple: friends can upload videos, images, or even send TikTok or YouTube links, and the content will be instantly displayed on the live stream overlay through OBS.

Stack & Technologies

The frontend is built with Vue 3 and TailwindCSS, offering a fast, responsive, and fully customizable UI.

For the backend, I used Node.js with Express and integrated real-time communication using Socket.IO.

Users authenticate via Discord OAuth2, allowing me to filter access based on roles like `friend` or `streamer`.

Key Features

- Upload support for videos, images, and GIFs

- External video support (YouTube, TikTok, etc.)

- Preview system for local and remote media

- Custom caption and display size options

- Discord login with role-based access

- Real-time media display via Socket.IO to OBS overlay

- Optional partial video playback (e.g. show only 5 seconds)

## What's Next?

The project is currently a proof of concept, but there’s still a lot I plan to improve:

- Fetch Discord username and avatar automatically after login

- Add a dashboard to manage whitelisted users and see active contributors

- Improve the UX/UI with animated transitions using GSAP

- Add an admin panel to shut down or queue media during live

- Support for moderation or approval system before showing content live

Conclusion

This project mixes my passion for livestreaming, frontend development, and community interaction.

It also gave me a good opportunity to work with technologies like Vue, OAuth2, WebSockets, and OBS integration.

Feel free to check out the source or reach out if you want to collaborate or give feedback!