## What You'll Build A React web app that shows which VTubers are live right now and what streams are coming up. Auto-refreshes every 60 seconds. No backend required - runs entirely in the browser. ## Prerequisites - Node.js 18+ and npm - Basic knowledge of React and JavaScript - A RapidAPI API key (subscribed to VTuber Schedule) ## Step 1 - Create the React App ``` npx create-react-app vtuber-dashboard cd vtuber-dashboard npm install axios ``` Create a .env file in the root: ``` REACT_APP_RAPIDAPI_KEY=your_api_key_here ``` ## Step 2 - Create the API Helper Create src/api.js: ``` import axios from 'axios'; const client = axios.create({ baseURL: 'https://vtuber-schedule.p.rapidapi.com', headers: { 'X-RapidAPI-Host': 'vtuber-schedule.p.rapidapi.com', 'X-RapidAPI-Key': process.env.REACT_APP_RAPIDAPI_KEY } }); export const getLiveStreams = (org = 'Hololive') => client.get('/v1/live', { params: { org, limit: 25 } }); export const getUpcomingStreams = (org = 'Hololive') => client.get('/v1/upcoming', { params: { org, hours: 6, limit: 25 } }); ``` ## Step 3 - Build the Stream Card Component Create src/StreamCard.js: ``` export default function StreamCard({ stream }) { return (

{stream.title}

{stream.status === 'live' && ( LIVE - {stream.live_viewers?.toLocaleString()} viewers )} {stream.status === 'upcoming' && ( UPCOMING - {new Date(stream.start_scheduled).toLocaleTimeString()} )}

); } ``` ## Step 4 - Build the Main Dashboard Replace src/App.js: ``` import { useState, useEffect } from 'react'; import { getLiveStreams, getUpcomingStreams } from './api'; import StreamCard from './StreamCard'; export default function App() { const [liveStreams, setLiveStreams] = useState([]); const [upcoming, setUpcoming] = useState([]); const [org, setOrg] = useState('Hololive'); const [loading, setLoading] = useState(true); const [lastUpdated, setLastUpdated] = useState(null); const orgs = ['Hololive', 'Nijisanji', 'VShojo', 'indie']; const fetchData = async () => { setLoading(true); try { const [liveRes, upcomingRes] = await Promise.all([ getLiveStreams(org), getUpcomingStreams(org) ]); setLiveStreams(liveRes.data.streams || []); setUpcoming(upcomingRes.data.streams || []); setLastUpdated(new Date()); } catch (err) { console.error('Failed to fetch streams:', err); } setLoading(false); }; useEffect(() => { fetchData(); const interval = setInterval(fetchData, 60000); return () => clearInterval(interval); }, [org]); return (

VTuber Live Dashboard

{orgs.map(o => ( <button key={o} onClick={() => setOrg(o)} style={{ padding: '6px 16px', background: org === o ? '#7c3aed' : '#2d2d4e', color: 'white', border: 'none', borderRadius: '20px', cursor: 'pointer' }} > {o} </button> ))} {lastUpdated && ( Updated {lastUpdated.toLocaleTimeString()} )}

{loading ? (

Loading streams...

) : ( <>

Live Now ({liveStreams.length})

{liveStreams.map(s => <StreamCard key={s.id} stream={s} />)}

Upcoming (next 6h) ({upcoming.length})

{upcoming.map(s => <StreamCard key={s.id} stream={s} />)}

</> )}

); } ``` ## Step 5 - Run the App ``` npm start ``` Open http://localhost:3000 in your browser. You should see a dark dashboard with: - Live VTuber streams with viewer counts - Upcoming streams with start times - Filter buttons for different organizations - Auto-refresh every 60 seconds ## Deploy to Production ``` npm run build ``` Deploy the build/ folder to: - **Vercel**: npx vercel --prod - **Netlify**: drag and drop the build/ folder - **GitHub Pages**: use gh-pages package Remember to set REACT_APP_RAPIDAPI_KEY as an environment variable in your deployment platform. ## Security Note For production apps, never expose your RapidAPI key in the frontend. Instead, create a small backend proxy (Express, FastAPI, etc.) that holds the key server-side and your frontend calls your own backend.