Randomizer Brasil

Hub da Comunidade Brasileira de Randomizers

A modern, high-performance web platform showcasing live streams and highlights from the Brazilian randomizer gaming community. Built with Next.js 16, TypeScript, and Tailwind CSS, featuring real-time Twitch API integration.

✨ Features

• 🎮 Live Streams - Real-time display of active randomizer streams with viewer counts
• 📺 Highlights - Curated highlight videos from the Rando Brasil Twitch channel
• ⚡ Performance Optimized - Following Vercel's React best practices
  • Set-based lookups (O(1) performance)
  • Dynamic imports with code-splitting
  • Server-side caching with automatic revalidation
  • React Suspense boundaries for streaming content
• 🎨 Modern Design - Neo-brutalist inspired UI with cyan accent theme
• 📱 Fully Responsive - Mobile-first design with adaptive navigation
• ♿ Accessible - WCAG compliant with proper ARIA labels

🚀 Tech Stack

• Framework: Next.js 16.1.4 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS v4
• UI Components: shadcn/ui
• Icons: Lucide React
• API: Twitch Helix API
• Fonts: Syne, DM Sans, JetBrains Mono (via next/font/google)

📋 Prerequisites

• Node.js 18.x or higher
• pnpm 8.x or higher (recommended) or npm
• Twitch Developer Account with Client ID and Secret
• Supabase Account (optional - for dynamic streamer management)

🛠️ Installation

1. Clone the repository

   git clone git@github.com:pedrorvelloso/randomizerbrasil.git
   cd randomizerbrasil

2. Install dependencies

   pnpm install

3. Set up environment variables

   Create a .env.local file in the root directory:

   # Twitch API Credentials (Required)
   TWITCH_CLIENT_ID=your_twitch_client_id
   TWITCH_CLIENT_SECRET=your_twitch_client_secret
   
   # Supabase Configuration (Optional - for database features)
   SUPABASE_URL=https://your-project.supabase.co
   SUPABASE_PUBLISHABLE_DEFAULT_KEY=your_supabase_anon_key
   
   # Featured User ID (Optional - defaults to randobrasil)
   FEATURED_USER_ID=530941879

   Get your credentials:

   • Twitch: Twitch Developer Console
   • Supabase: Supabase Dashboard → Settings → API

   Note: Supabase is optional. The app works with the static streamer list in data/data.ts if Supabase is not configured.

4. Run the development server

   pnpm dev

5. Open your browser

   Navigate to http://localhost:3000

📁 Project Structure

rbr/
├── app/                      # Next.js App Router
│   ├── about/               # About page
│   ├── api/                 # API routes
│   ├── layout.tsx           # Root layout
│   └── page.tsx             # Home page
├── components/              # React components
│   ├── features/            # Feature-specific components
│   │   ├── highlights/      # VOD/highlight components
│   │   └── streamers/       # Live stream components
│   ├── layout/              # Layout components
│   └── ui/                  # shadcn/ui components
├── lib/                     # Utility functions
│   └── twitch/              # Twitch API integration
│       ├── api.ts           # API functions
│       ├── cached.ts        # Cached wrappers
│       └── types.ts         # TypeScript types
├── data/                    # Static data
│   └── data.ts              # Game IDs and streamer list
└── public/                  # Static assets

🎯 Scripts

pnpm dev             # Start development server
pnpm build           # Build for production
pnpm start           # Start production server
pnpm lint            # Run ESLint

⚙️ Configuration

Twitch API

The app monitors specific streamers and game IDs defined in data/data.ts:

export const users = ["randobrasil", "xx_soket_xx", ...];
export const games = new Set(["5635", "9435", ...]); // Minish Cap, ALttP, OoT, etc.

Supabase Integration (Optional)

Supabase enables dynamic streamer management through a database:

• Without Supabase: Uses static users array from data/data.ts
• With Supabase: Merges database runners with static list (deduplicated)

Database Schema:

CREATE TABLE runners (
  id UUID PRIMARY KEY,
  stream_name TEXT NOT NULL,
  source TEXT CHECK (source IN ('discord', 'manual')),
  source_id TEXT,
  created_at TIMESTAMP DEFAULT NOW()
);

Configure in .env.local with your Supabase project credentials.

Cache Settings

• Streamers: 60 seconds (live data)
• Highlights: 5 minutes (less volatile)

Adjust in lib/twitch/cached.ts:

export const getCachedStreamers = unstable_cache(
  async () => getOnlineStreamers(),
  ['twitch-streamers'],
  { revalidate: 60 }
)

Featured User

Control which user's highlights are displayed on the home page:

FEATURED_USER_ID=530941879  # Defaults to randobrasil

🎨 Design System

Colors

• Brand Cyan: #00D9FF
• Background: #0A0E27 (dark navy)
• Foreground: #FFFFFF
• Accent: #00FFB3

Typography

• Headings: Syne (bold, uppercase)
• Body: DM Sans
• Monospace: JetBrains Mono

🚢 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import project in Vercel Dashboard
3. Add environment variables
4. Deploy

Other Platforms

The app is a standard Next.js application and can be deployed to any platform supporting Node.js:

• Netlify
• Railway
• Render

🔧 Performance Optimizations

This project implements Vercel's React best practices:

• Set-based lookups - Game ID filtering uses Set.has() for O(1) performance
• Dynamic imports - Mobile menu loads on-demand to reduce initial bundle
• Hoisted style objects - Prevents unnecessary re-renders
• React Suspense - Streaming server-rendered content
• Image optimization - Next.js Image component with priority loading

📝 License

This project is licensed under the MIT License.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📧 Contact

Pedro Velloso - @pedrorvelloso

Project Link: https://github.com/pedrorvelloso/randomizerbrasil

---

Built with ❤️ for the Brazilian Randomizer Community