Try it out yourself!
GIF
Visit https://vibeguide-frontend.onrender.com/ to see it live!

TTV Guide

👑 Bring back the original couch surfing king! 👑

Inspiration

The old school TV guide channel served as a generation's first experience with endless arrays of content to watch. For-you pages and personalized content have become the norm: let's slow down and enjoy a nice, steady stream of auto-scrolling content. True couch surfing has returned!

TTV Guide helps you discover what is going on right now in the live-stream world of Twitch. We couldn't help but bring the old school aesthetic along for the ride.

What it does

Grid-Based Navigation: Users navigate through a grid of live streams using mouse, scroll wheel, or arrow keys. Shift+arrow scrolls a full page (four rows), enabling rapid browsing through available streams.

Stream Preview & Discovery: Clicking on any streamer opens a mini-viewer to preview the live stream before committing to a full Twitch experience. Users can click "Watch on Twitch" to access the complete stream or click on a category to view all streams within that category.

Infinite Scroll & Auto-Refresh: The application functions as a standalone infinite scroll of top Twitch streams, with background page refreshes ensuring the most current streamers are always accessible at the top of the guide. Mini-viewer streams will cycle to keep the content fresh.

Visual Customization: Go wild with the AFK features while you see what's live! The TTV Guide logo serves as a settings menu offering two optional visual effects:

Extra CRT: Adds authentic CRT monitor visual effects for enhanced nostalgic presentation
Logo Bouncer: Implements a DVD screensaver-style bouncing logo effect

User Authentication & Personalization: Users can log in with their Twitch account to view their favorited streamers, marked with a heart icon within the guide.

How we built it

Frontend Development (John): No prior frontend experience, used Kiro's vibe chat to build the entire user interface through rapid prototyping and iterative conversation. The Figma MCP integration enabled transition of visual elements from prototypes into Kiro development. This approach resulted in the complete implementation of the grid system, page layout, navigation controls, infinite scroll functionality, and all visual effects.

Backend Development (Will): Used Kiro's vibe chat to generate backend code and leveraged Supabase MCP for database exploration during initial development. Used Kiro as project management tool throughout development, assisting with branch merging, conflict resolution, issue debugging, testing, and production deployment.

Full-Stack Integration (Andrew): Employed Kiro's spec-driven design methodology to create initial builds of the complete Twitch API integration. This approach enabled the decomposition of complex requirements into manageable implementation tasks, resulting in the integration of live stream data and user authentication.

Challenges we ran into

Merging of code was mostly flying blind, due to quick moving hackathon approach. We were able to successfully merge code and left it at that. On a few occasions, Kiro would respond to a request with 'Understood' and leave it at that -- after a little nudge, we were back in action.

Accomplishments that we're proud of

Full working build of TTV Guide completed over Halloween weekend!

What we learned

Using spec driven design when there is a clear plan of action in place, goes a long way. First integration with the twitch API. Token usage with supplied Kiro Pro+ tier was more than sufficient for our needs.