Twitch Fruit

A twitch widget platform. Customize widgets for your live-stream, easily add them to your favorite streaming software.

Check it out!

Next.js, Express.js

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

  1. Nginx Configuration: Delved into the configuration of Nginx to address and resolve CORS issues, enhancing the security and functionality of the application.
  2. 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.
  3. Twitch API Integration: Gained hands-on experience with the Twitch API, understanding its capabilities, especially in terms of subscription events and user authentication.
  4. Redis for Session Management: Implemented Redis for session management, ensuring efficient and scalable handling of user sessions.
  5. 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.
  6. 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.