How We Built TwitchTitle

How We Built TwitchTitle.com for Bamboo Studio

At Bamboo Studio, we’re all about creating products that solve real problems for streamers and content creators. Our latest project, TwitchTitle.com, is designed to help Twitch streamers update their stream titles quickly and programmatically, saving them valuable time. Here’s how we built it, leveraging the power of Next.js and Supabase.

The Problem

Streamers often need to change their Twitch stream titles frequently, whether it’s to reflect a change in content, highlight a special event, or simply keep their streams fresh. Doing this manually through the Twitch dashboard can be tedious and disruptive, especially during a live stream. We wanted to create a solution that simplifies this process, allowing streamers to focus on engaging with their audience.

Our Stack: Next.js and Supabase

To build TwitchTitle.com, we chose Next.js for its versatility and excellent developer experience, and Supabase for its robust backend capabilities. This stack provided us with the tools needed to deliver a fast, scalable, and secure application.

Why Next.js?

Next.js offered us several key advantages:

• Server-Side Rendering (SSR): Ensures fast load times and better SEO, which is critical for a web app.
• API Routes: Allowed us to build serverless functions for interacting with Twitch’s API.
• React-Based: Familiar to our team, enabling rapid development and iteration.

Why Supabase?

Supabase provided:

• Authentication: Simplified integration with Twitch OAuth for secure streamer logins.
• Real-Time Database: Enabled instant updates for stream titles and configurations.
• Scalability: Ensured our app could handle a growing user base without performance hiccups.

Building the App

Authentication and Twitch Integration

The first step was setting up Twitch OAuth to allow streamers to log in securely. Supabase’s authentication system made this process straightforward. Once authenticated, users could grant our app permission to manage their Twitch streams.

Stream Title Updates

To enable programmatic title updates, we leveraged Twitch’s Helix API. Our backend API routes in Next.js handled the heavy lifting, sending requests to Twitch’s servers to update stream titles in real time.

Here’s a simplified version of the API route:

import { getAccessToken } from '@/utils/auth';
import axios from 'axios';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { title } = req.body;
    const accessToken = await getAccessToken(req);

    try {
      await axios.patch('https://api.twitch.tv/helix/channels', {
        title,
      }, {
        headers: {
          'Authorization': `Bearer ${accessToken}`,
          'Client-Id': process.env.TWITCH_CLIENT_ID,
        },
      });

      res.status(200).json({ message: 'Title updated successfully' });
    } catch (error) {
      console.error(error);
      res.status(500).json({ error: 'Failed to update title' });
    }
  } else {
    res.setHeader('Allow', ['POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

User Interface

We kept the user interface clean and intuitive. Streamers can:

1. Log in with Twitch.
2. View their current stream title.
3. Enter a new title and update it with a single click.

We used Tailwind CSS for styling, ensuring a responsive and visually appealing design.

Database Management

Using Supabase’s real-time database, we stored user preferences and title history. This feature lets users track past titles, which can be helpful for analytics or inspiration.

Challenges and Lessons Learned

Building TwitchTitle.com wasn’t without its hurdles. Here are a few challenges we faced:

• Rate Limits: Twitch API’s rate limits required us to optimize our requests and implement queuing mechanisms.
• OAuth Scopes: Ensuring we requested the correct permissions without overstepping was critical for user trust.
• Real-Time Updates: Keeping the UI in sync with the backend required careful integration of Supabase’s real-time features.

These challenges taught us the importance of thorough testing, efficient API usage, and clear communication with users about permissions and functionality.

Launch and Future Plans

TwitchTitle.com is now live and helping streamers streamline their workflows. But we’re not stopping here. Future updates will include:

• Title Scheduling: Allowing streamers to set titles to update automatically at specific times.
• Analytics Dashboard: Providing insights into the effectiveness of different stream titles.
• Localization: Expanding support for multiple languages.

Conclusion

TwitchTitle.com is a testament to the power of modern web development tools like Next.js and Supabase. By focusing on the needs of our users and leveraging the right technologies, we’ve created a product that makes life easier for streamers. We can’t wait to see how the community uses it and grows with it.

Check it out at TwitchTitle.com and let us know what you think!