2025
Tipping App
The Sound Alerts Tipping App that twitch viewers can use to tip their favorite streamers using PayPal or credit card.
I developed the Sound Alerts Tipping Page using Nuxt 3 and deployed it on Google Cloud App Engine, creating a robust, scalable platform that enables streamers to receive real-money tips directly from their viewers. The application integrates multiple APIs, supports dynamic theming, and provides a seamless end-to-end flow—from viewer interaction to real-time alerts on Twitch streams.
The core functionality centers around allowing viewers to select sounds, videos, TTS-messages (Text-to-Speech via various TTS-Clients such as Google-TTS or MonsterTTS), or random alerts and send tips to their favorite broadcaster.
Once a payment is completed, the system automatically triggers the selected alert in the streamer’s broadcast environment, connecting the transaction directly to an on-stream action. This creates a highly interactive and rewarding viewer-to-streamer experience.
Payment processing is handled through PayPal, including all payment methods PayPal supports (such as credit cards). The tipping system transfers funds straight to the streamer’s linked PayPal account, deducting only standard transaction fees.
On the streamer side, everything is configurable through the Sound Alerts dashboard. Each creator can customize their Tipping Page theme, alerts, pricing and more at dashboard.soundalerts.com, making the setup process quick and intuitive.
Each streamer’s Tipping Page is available under a personalized URL following the format soundalerts.com/@channelName. For example, if a creator’s Twitch channel is twitch.tv/BastianBrouwers, their public Tipping Page, if configured and enabled in the Sound Alerts Dashboard, is accessible at soundalerts.com/@BastianBrouwers. This makes sharing the page simple and ensures that viewers can always find the correct link to support their favorite streamer.
The final result is a highly flexible tipping system that provides reliable payment processing, streamlined setup for streamers, and an engaging viewer experience—all backed by modern web architecture and scalable cloud infrastructure.
- A leaderboard highlighting both the most-played sounds and the highest PayPal contributions.
- A dedicated Chat Commands route showing all active commands available in the broadcaster’s Twitch chat, giving viewers and streamers quick insight into their channel’s interactive options.
The core functionality centers around allowing viewers to select sounds, videos, TTS-messages (Text-to-Speech via various TTS-Clients such as Google-TTS or MonsterTTS), or random alerts and send tips to their favorite broadcaster.
Once a payment is completed, the system automatically triggers the selected alert in the streamer’s broadcast environment, connecting the transaction directly to an on-stream action. This creates a highly interactive and rewarding viewer-to-streamer experience.
Payment processing is handled through PayPal, including all payment methods PayPal supports (such as credit cards). The tipping system transfers funds straight to the streamer’s linked PayPal account, deducting only standard transaction fees.
On the streamer side, everything is configurable through the Sound Alerts dashboard. Each creator can customize their Tipping Page theme, alerts, pricing and more at dashboard.soundalerts.com, making the setup process quick and intuitive.
Each streamer’s Tipping Page is available under a personalized URL following the format soundalerts.com/@channelName. For example, if a creator’s Twitch channel is twitch.tv/BastianBrouwers, their public Tipping Page, if configured and enabled in the Sound Alerts Dashboard, is accessible at soundalerts.com/@BastianBrouwers. This makes sharing the page simple and ensures that viewers can always find the correct link to support their favorite streamer.
Design & Implementation Workflow
The initial visual direction and component structure were prepared in Figma, where the UI team defined the layout, branding, and theming concepts. My responsibility was to translate these designs into responsive, modular Nuxt components while implementing the underlying payment and API logic. Collaboration focused on maintaining design accuracy while ensuring technical feasibility—especially for customizable themes and complex user flows. We implemented a set of selectable themes across all pages, allowing broadcasters to personalize their Tipping Page with one of the following color styles: purple, orange, turquoise, blue, green, gray, blush, yellow, and ocean.The final result is a highly flexible tipping system that provides reliable payment processing, streamlined setup for streamers, and an engaging viewer experience—all backed by modern web architecture and scalable cloud infrastructure.
Additional Features
- A live tip feed displaying the latest 10 contributions, including messages, media, and the alerts triggered by each tip.- A leaderboard highlighting both the most-played sounds and the highest PayPal contributions.
- A dedicated Chat Commands route showing all active commands available in the broadcaster’s Twitch chat, giving viewers and streamers quick insight into their channel’s interactive options.
