VTUBE
Spec doc · v1.0

VTUBE

Everything a video-sharing platform needs, mapped module by module.

This is a build specification, not a working product — the full feature checklist, the color system, and the stack behind a video platform: upload and transcoding, playback, discovery, comments, channels, moderation, and the security work nobody notices until it's missing.

75
Features mapped
12
Modules
55 / 20
Core / Advanced
6
Color tokens
PHP 8.4 Tailwind CSS 4 Font Awesome 7 jQuery 4
Module checklist

Everything the build needs

Twelve modules, each with the features that make it real. Core is the minimum to call this a working platform; Advanced is what separates it from a weekend project. Check items off as you scope your own build.

Showing 75 of 75
Checklist progress 0 / 55 core scoped

Accounts & Auth

Who can watch, upload, and moderate.

8

Upload & Processing

A raw file drop becomes a playable video.

8

Playback & Player

The watch page, first frame to next-up.

8

Discovery & Search

The right video, in front of the right viewer.

7

Engagement

Reactions and comments — the loop that brings people back.

7

Channels & Creators

A home base and a way to grow an audience.

6

Playlists & Library

Where saved videos live between visits.

4

Notifications

Tell people when something they follow happens.

5

Moderation & Admin

Keep the platform safe without slowing creators down.

5

Sharing & SEO

Easy to find, embed, and link outside the platform.

5

Security & Infrastructure

The plumbing that keeps everything fast and safe.

7

Accessibility & Responsiveness

Usable on any device, by anyone, no excuses.

5
Design tokens

Color palette

Six tokens, one job each. Click a swatch to copy its hex and preview it on a real component.

Live preview YouTube Red
LIVE 12:47
JV
Rebuilding the upload pipeline
Jordan Vega
128K views · 3 days ago

Click any swatch to preview it here — and copy the hex to your clipboard.

Semantic states
Success #16A34A
Warning #D97706
Info #2563EB
Danger #CC0000
Type system

Typography

Display · Archivo 700–900
Every upload, on air.

Page titles, hero type, section headers. Used with restraint — never for body copy.

Body · Inter 400–600

Paragraphs, form fields, buttons, and every piece of UI copy. Set for long-form reading at normal sizes, with enough weight range to carry labels and emphasis without switching families.

Default body face across the whole product.

Mono · JetBrains Mono 400–600
00:12:47 · 128,402 views
#FF0000

Timecodes, view counts, hex values — anywhere a number needs to feel measured, not decorative.

Tech stack

Built with

core
PHP 8.4

Property hooks and the new array_find() / array_any() helpers keep controllers short — no framework required to ship this.

core
Tailwind CSS 4

CSS-first configuration via @theme, used here through the Play CDN for prototyping. Swap in the CLI/PostCSS build before shipping.

core
Font Awesome 7

One icon set for the entire product — player controls, nav, badges, and every checkbox on this page.

core
jQuery 4

Handles the interactive parts of this very page — filtering, the palette preview, and the scroll-spy nav.

Recommended companions
MySQL / MariaDB
Relational storage for users, videos, and comments.
FFmpeg
Transcodes uploads and pulls thumbnail frames.
Redis / a queue worker
Runs transcoding and email jobs off the request cycle.
Object storage + CDN
Keeps large video files close to viewers.
Deployment & Setup

Step-by-Step Installation System

Follow these steps to deploy and run the Cathode / VTube video platform locally or on a production server. From environment configuration to database seeding and the background media transcode worker.

01
Runtime
PHP 8.4+ (CLI & PDO)
02
Database
SQLite 3 / MySQL 8
03
Media Engine
FFmpeg / Libx264
04
Setup Time
< 2 Minutes
1

System Prerequisites & Verification

Ensure PHP 8.4, SQLite/PDO extensions, and FFmpeg are available.

Step 1 of 6

Open your terminal and verify the required command line utilities:

# Check PHP version and FFmpeg availability
$ php -v
$ ffmpeg -version
Required PHP extensions: pdo_sqlite, fileinfo, mbstring, and json (all enabled by default in standard PHP 8.4).
2

Environment Configuration & Storage Setup

Configure environment variables and initialize upload directories.

Step 2 of 6

Create the .env configuration file from the template and prepare the storage directory:

# Create environment config
$ copy .env.example .env (Windows) # or cp .env.example .env (Linux/macOS)
Key Env Variables
APP_NAME=Cathode
APP_ENV=development
DB_CONNECTION=sqlite
DB_DATABASE=database/database.sqlite
Media Limits
MAX_UPLOAD_SIZE=500MB
FFMPEG_PATH=ffmpeg
STORAGE_DIR=public/uploads
ALLOW_PUBLIC_REGISTRATION=true
3

Database Migration & Seed Data

Run schema creation and populate default channels, sample videos, and admin account.

Step 3 of 6

Run the automated CLI migration script to generate tables (users, videos, comments, playlists, subscriptions, history, notifications) and seed initial demo data:

# Initialize database schema & seed rich demo dataset
$ php cli/migrate.php
Default Seeded Accounts:
Admin / Creator Account
Email: admin@cathode.tv
Password: admin123
Standard Viewer Account
Email: viewer@cathode.tv
Password: viewer123
4

Media Transcoding & Thumbnail Pipeline

How uploaded video files are transcoded, thumbnailed, and served.

Step 4 of 6

Cathode includes an integrated media processing service with graceful fallback. When FFmpeg is present, it generates 1080p/720p/480p renditions and extracts video poster frames automatically:

Upload

Validates MIME types (MP4, WebM, MOV) and streams chunked payloads.

Transcode

H.264/AAC multi-resolution encoding with adaptive bitrate flags.

Thumbnails

Extracts auto-keyframes at 10%, 50%, and 80% intervals for selection.

5

Start Background Job Queue (Optional / Recommended)

Execute heavy media transcoding and email alerts asynchronously.

Step 5 of 6

To process heavy encoding jobs without blocking the HTTP request thread, run the worker in a separate terminal window:

# Run background queue daemon
$ php cli/worker.php

If running in standalone dev mode without a worker, synchronous fallback processing is automatically engaged.

6

Launch Development Server & Access App

Start the application and begin exploring the full video platform.

Step 6 of 6

Launch the local web server:

# Start built-in PHP HTTP server
$ php -S localhost:8000 index.php