Twitch Weekly Recap Website

A full-stack web app that delivers personalized daily recaps of a user’s followed Twitch streamers from the past week.
The project uses React, Vite, and Tailwind CSS for the frontend, and Node.js with Express for the backend.

Features

• Twitch OAuth Authentication – Users securely log in with their Twitch account.
• Automated Data Collection – Backend service interacts with the Twitch API to gather user-specific data (streams, VODs, and clips).
• Personalized Recaps – Aggregates a user’s followed streamers into a curated recap:
  • Highlight reels
  • Top clips
  • Full VODs
• Interactive Dashboards – Dynamic frontend pages for browsing recaps.
• Scalable Design – Backend fetch logic dynamically adjusts to new Twitch data.

Pages

1. Home Page – Landing page with user authentication and recap overview.
2. Dashboard Page – Displays highlights, top clips, and VODs from the current day.
3. Profile Page – View user profile information such as account age, profile picture, followed steamers, and subcribed channels

Each page leverages reusable React components for rendering lists of streamers, clips, and VODs.

Tech Stack

• Frontend: React, Vite, Tailwind CSS, React Router
• Backend: Node.js, Express
• API: Twitch Helix API
• Authentication: Twitch OAuth
• Hosting: Vercel (frontend), Render (backend)

Getting Started

Prerequisites

• Twitch Developer account for API credentials
• Authorized callback URL within twitch developers account

Setup

1. Clone the repository:

   git clone https://github.com/RyanSierra06/Twitch-Weekly-Recap-Website.git
   cd Twitch-Weekly-Recap-Website

2. Install dependencies for both frontend and backend:

   cd backend && npm install
   cd ../frontend && npm install
   

3. Configure environment variables for the frontend:

      FRONTEND_BASE_URL=http://localhost:5173
   
      NODE_ENV=development
   
      PORT=4000
   
      SESSION_SECRET='Your Session Secret'
   
      TWITCH_CALLBACK_URL=http://localhost:4000/auth/twitch/callback
   
      TWITCH_CLIENT_ID='Your Twitch Client ID'
   
      TWITCH_SECRET='Your Twitch Secret'

4. Configure environment variables for the backend:

      VITE_BACKEND_BASE_URL=http://localhost:4000

5. Run the backend server:

      cd backend
      node index.js

6. Run the frontend:

      cd frontend
      npm run dev

7. Your frontend and backend will be available at http://localhost:5173 and http://localhost:4000 respectively