Stream Monitoring - Deployment Guide

This guide will walk you through setting up the Stream Monitoring application on your local machine.

---

Prerequisites

Before starting, ensure you have the following installed:

• Git
• Python 3.10+
• Node.js and npm
• A Google account (for YouTube API)
• A Supabase account

---

Step 1: Project Setup

Clone the Repository

git clone https://github.com/ZyrusAlvez/Stream-Monitoring.git
cd Stream-Monitoring

---

Step 2: Backend Configuration

Navigate to Backend Directory

cd backend

Create Environment File

Create a .env file in the backend folder with these exact variable names:

YOUTUBE_API_KEY=your_youtube_api_key_here
SUPABASE_URL=your_supabase_url_here
SUPABASE_KEY=your_supabase_key_here

Install Dependencies

pip install -r requirements.txt

Install Playwright

After installing the Python dependencies, you also need to install Playwright:

playwright install

⚠️ Don't start the server yet - we need to configure everything first!

---

Step 3: Frontend Configuration

Navigate to Frontend Directory

cd Stream-Monitoring/frontend

Create Environment File

Create a .env file in the frontend folder with these exact variable names:

VITE_SUPABASE_URL=your_supabase_url_here
VITE_SUPABASE_KEY=your_supabase_key_here
VITE_BACKEND_URL=http://localhost:8000

Install Dependencies

npm install

⚠️ Don't start the server yet - we need to set up the database and APIs first!

---

Step 4: YouTube API Setup

Create Google Cloud Project

1. Go to Google Cloud Console
2. Sign in with your Google account
3. Click Select a project (top bar) → New Project
4. Enter a project name and click Create
5. Ensure your new project is selected (check top bar)

Enable YouTube API

6. Navigate to APIs & Services → Library (left menu)
7. Search for YouTube Data API v3
8. Click on it and press Enable

Generate API Key

9. Go to APIs & Services → Credentials
10. Click Create Credentials → API Key
11. Copy the generated API key
12. Update YOUTUBE_API_KEY in your backend .env file

---

Step 5: Supabase Database Setup

Create Supabase Project

1. Visit Supabase Dashboard
2. Sign in and click New Project
3. Fill in:
   • Project name
   • Database password
   • Region
4. Click Create new project

Create Database Tables

5. In your project dashboard, go to SQL Editor (left sidebar)
6. Copy the following SQL script and paste it into the editor:

CREATE TABLE public."CustomSourceLogs" (
  log_id BIGINT GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
  created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
  status TEXT,
  timestamp TEXT,
  error TEXT,
  type TEXT
);


CREATE TABLE public."Folder" (
  folder_id UUID NOT NULL DEFAULT gen_random_uuid() PRIMARY KEY,
  created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
  url TEXT,
  name TEXT,
  type TEXT,
  ongoing BOOLEAN DEFAULT true,
  repetition BIGINT,
  interval BIGINT,
  start_time TEXT,
  next_call_time TEXT
);

CREATE TABLE public."Logs" (
  log_id BIGINT GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
  created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
  folder_id UUID NOT NULL,
  status TEXT,
  timestamp TEXT,
  url TEXT,
  error TEXT,
  CONSTRAINT Logs_folder_id_fkey FOREIGN KEY (folder_id) REFERENCES public."Folder" (folder_id) ON UPDATE CASCADE ON DELETE CASCADE
);


CREATE TABLE public."YoutubeChannelLogs" (
  created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
  status TEXT,
  error TEXT,
  log_id BIGINT GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
  folder_id UUID,
  results JSONB,
  timestamp TEXT,
  CONSTRAINT YoutubeChannelLogs_folder_id_fkey FOREIGN KEY (folder_id) REFERENCES public."Folder" (folder_id) ON UPDATE CASCADE ON DELETE CASCADE
);

7. Click RUN to execute the script
8. Verify tables were created in Table Editor → Tables
9. Go to Storage and click on the New Bucket
10. Enter bucket name "screenshots" and click create

---

Step 6: Authentication Setup

Create User Account

1. In Supabase dashboard, click Authentication (left sidebar)
2. Go to Users tab
3. Click Add User → Create new user
4. Enter your preferred email and password
5. Important: Remember both the email AND password - the password will be used for authentication when logging into the app

Configure Login Credentials

6. Open frontend/src/pages/Login.tsx
7. Find line 15 with the email variable:

const email = 'zyrusalvez13@gmail.com';

8. Replace the email address with the one you created in Step 4

---

Step 7: Connect to Supabase

Get Connection Details

1. In your Supabase project dashboard, click Connect (upper middle)
2. Select App frameworks
3. Copy the Project URL and anon/public key

Update Environment Files

4. Update both .env files:
   • Backend: Set SUPABASE_URL and SUPABASE_KEY
   • Frontend: Set VITE_SUPABASE_URL and VITE_SUPABASE_KEY

---

Step 8: Start the Servers

Now that everything is configured, you can start the servers!

Start Backend Server

Open a terminal and navigate to the backend directory:

cd Stream-Monitoring/backend
uvicorn main:app --reload

✅ Backend should now be running on http://localhost:8000

Start Frontend Server

Open a new terminal and navigate to the frontend directory:

cd Stream-Monitoring/frontend
npm run dev

✅ Frontend should now be running on http://localhost:5173

---

Step 9: Verification

If everything is set up correctly:

• Backend: Running on http://localhost:8000
• Frontend: Running on http://localhost:5173
• Database: Tables created and accessible
• Authentication: User account ready
• YouTube API: Enabled and key configured

You can now access your application at http://localhost:5173 and log in with the email and password you configured in Step 6!

---

🆘 Troubleshooting

Backend won't start?

• Check if Python dependencies are installed
• Ensure Playwright is installed (playwright install)
• Verify .env file has correct variable names
• Ensure port 8000 is available
• Make sure all environment variables are filled in

Frontend won't start?

• Check if Node.js and npm are installed
• Verify .env file has correct variable names with VITE_ prefix
• Run npm install again if needed
• Ensure port 5173 is available

API errors?

• Verify YouTube API key is valid and API is enabled
• Check Supabase URL and keys are correct
• Ensure database tables were created successfully

Authentication issues?

• Make sure you updated the email in Login.tsx
• Verify the user exists in Supabase Authentication
• Use the password you set when creating the user account in Step 6
• Check that Supabase keys are correctly set

If you encounter issues, please check:

1. All environment variables are correctly named and filled
2. All dependencies are installed (including Playwright)
3. Ports 8000 and 5173 are available
4. YouTube API and Supabase services are properly configured
5. Database tables are created
6. User account exists in Supabase with the correct email and password