A twitch widget platform. Customize widgets for your live-stream, easily add them to your favorite streaming software.
Check it out!
I've created a railway template for this app for easy deployment!
Railway Template
Authentication
Leveraging the power of OAuth 2.0, TwitchFruit provides a secure login mechanism, ensuring user data is protected and accessed only with proper authorization.
Real-time Updates
With the integration of Server-Sent Events (SSE), TwitchFruit offers real-time updates directly to the user's dashboard. Whether it's a new follower alert or a change in stream status, users are always in the know.
Webhooks
TwitchFruit utilizes Twitch's webhook functionality to receive instant notifications about specific events, ensuring the application is always up-to-date with the latest happenings on Twitch.
Customize Widgets for your stream
Easily Integrate into your Live-Stream!
Copy the URL and paste in your streaming software as a browser source.
What I Learned
- Nginx Configuration: Delved into the configuration of Nginx to address and resolve CORS issues, enhancing the security and functionality of the application.
- Ngrok Tool: Learned to use Ngrok, a powerful tool that creates a secure tunnel to localhost, allowing for the testing of webhooks and other network-related functionalities in a local development environment.
- Twitch API Integration: Gained hands-on experience with the Twitch API, understanding its capabilities, especially in terms of subscription events and user authentication.
- Redis for Session Management: Implemented Redis for session management, ensuring efficient and scalable handling of user sessions.
- Server-Sent Events (SSE): Explored the use of SSE for real-time communication between the server and the frontend, enabling instant updates to the user interface.
- Express App Structuring: As the backend of the application grew, I recognized the importance of a well-structured Express app. This led to the implementation of best practices and patterns, ensuring maintainability and scalability.
Challenges Overcomed
- Cookie Handling for Twitch Authentication: One of the initial challenges faced was related to Twitch authentication. The cookies required for authentication were not being sent in the headers. After thorough investigation, I identified the root cause and made necessary configuration changes to ensure that cookies were properly included in the headers, resolving the authentication issue.
- SSL Requirement for Twitch Subscription Events: To test Twitch subscription events on my local development environment, I needed a URL with SSL. This led to the discovery and implementation of Ngrok, which provided a secure tunnel to my local port.
- Data Verification with Twitch: Encountered challenges in verifying that users were authorized to perform certain actions, especially when it came to opening chests using signed typed data. A minor discrepancy, such as a single space, led to hours of debugging to ensure data integrity.
- Token Management: Ensuring that access and refresh tokens were securely stored and efficiently retrieved was crucial. Implementing Redis for this purpose provided a robust solution, but it required careful handling to ensure tokens were always up-to-date and valid.
- Real-time Updates with SSE: Implementing SSE to provide real-time updates to users presented its own set of challenges, especially when it came to managing multiple clients and ensuring that each client received the correct updates.
- API Deprecated: An API endpoint I relied upon for fetching the followers count had been deprecated. This posed a potential setback as the followers count was integral to our platform's user analytics. However, undeterred by this obstacle, I delved into the updated API documentation, identified the new endpoint, and made the necessary modifications to our codebase.
