ramforth/MultiChatOverlay
3
2
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

chore: Added redirect URL. APP_BASE_URL set in .env

Browse Source
This commit is contained in:
ramforth
2025-11-17 00:46:15 +01:00
parent 98c1417bf1
commit 9b44c088b8
5 changed files with 27 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
DEVELOPMENT_PLAN.md
View File

@@ -9,40 +9,33 @@ The goal is to create a service where streamers can log in using their platform
## 2. Technology Stack
* **Team Communications:** Discord and Nextcloud, primarily. This can change. There's a list of links in the [README.md](README.md)
* **Backend:** Python 3.9+ (FastAPI)
* **Backend:** Python 3.13+ (FastAPI)
* **Database:** SQLite (for initial development) with SQLAlchemy ORM
* **Frontend:** Vanilla HTML, CSS, and JavaScript
* **Chat Listeners:** `twitchio` (Twitch), `pytchat` (YouTube)
## 3. Implementation Roadmap
### Phase 1: Basic Setup & Twitch Chat Listener (Python)
1. **Project Structure:** Establish a clear directory structure for PHP, Python, Node.js, and static assets.
2. **Python Environment:** Set up a Python virtual environment and install `twitchio`.
3. **Twitch Chat Listener (Python Script):** Create a standalone Python script that connects to Twitch chat, listens for messages, and prints them to standard output. This script will be run as a background process.
4. **Twitch OAuth2 (Python):** Implement a simple Python script or a PHP endpoint to handle Twitch OAuth2 to obtain user access tokens. Store these securely in MySQL.
### Phase 1: User Authentication & Database (FastAPI)
1. **Project Skeleton:** Establish the core FastAPI application structure, dependencies, and version control.
2. **Database Schema:** Define the data models for users and settings using SQLAlchemy.
3. **Twitch OAuth2:** Implement the server-side OAuth2 flow within FastAPI to authenticate users and securely store encrypted tokens in the database.
4. **Session Management:** Create a system to manage logged-in user sessions.
5. **Basic Frontend:** Develop a simple login page.
### Phase 2: MySQL Database & User Management (PHP)
1. **MySQL Setup:** Set up a MySQL database and create a `users` table to store user information (Twitch ID, username, access token, refresh token).
2. **PHP Web Server:** Configure a basic PHP web server.
3. **User Registration/Login (PHP):** Implement PHP scripts for user registration and login, integrating with the MySQL database.
4. **Dashboard (PHP/HTML):** Create a basic dashboard where logged-in users can see their Twitch connection status and their unique overlay URL.
### Phase 2: User Dashboard & Configuration
1. **Dashboard UI:** Create a dashboard page accessible only to authenticated users.
2. **Settings API:** Build API endpoints for users to save and retrieve their overlay settings (e.g., custom CSS).
3. **Overlay URL Generation:** Display a unique, persistent overlay URL for each user on their dashboard.
### Phase 3: WebSocket Server (Node.js) & Overlay (HTML/CSS/JS)
1. **Node.js Environment:** Set up a Node.js environment and install `ws` (WebSocket library).
2. **WebSocket Server (Node.js):** Create a Node.js WebSocket server that:
* Accepts connections from overlay clients.
* Receives chat messages from the Python Twitch listener (via a simple inter-process communication mechanism, e.g., writing to a file or a local socket).
* Broadcasts messages to connected overlay clients.
3. **Overlay Frontend (HTML/CSS/JS):** Create a basic `overlay.html` that:
* Connects to the Node.js WebSocket server.
* Displays incoming chat messages.
4. **Inter-process Communication:** Implement a mechanism for the Python Twitch listener to send messages to the Node.js WebSocket server.
### Phase 3: Dynamic Listeners & Basic Overlay
1. **Dynamic Listener Manager:** Design and build a background service that starts and stops chat listener processes (`twitchio`, `pytchat`) based on user activity.
2. **Real-time Message Broadcasting:** Implement a WebSocket system within FastAPI to push chat messages to the correct user's overlay in real-time.
3. **Basic Overlay UI:** Create the `overlay.html` page that connects to the WebSocket and renders incoming chat messages.
### Phase 4: Integration & Refinement
1. **Dynamic Listener Management:** Develop a system (e.g., a PHP script or a Node.js API) to start and stop Python Twitch listener processes based on user activity.
2. **YouTube Integration:** Add YouTube chat listening capabilities (Python `pytchat`) and integrate with the existing system. This will be implemented after the core Twitch functionality is stable.
3. **Advanced Overlay Customization:** Implement options for users to customize their overlay.
1. **YouTube Integration:** Implement the full YouTube OAuth2 flow and integrate the `pytchat` listener into the dynamic listener manager.
2. **Advanced Overlay Customization:** Add more features for users to customize their overlay's appearance and behavior.
## 4. Requirements for Completion (Initial Version)