In the glorious tradition of Mystery Science Theater 3000, The Film Crew, RiffTrax, Cinematic Titanic, MST3k again, and others...

Now presenting: you.

RiffTube lets you add your own riffs to any video on YouTube. Watch, comment, create — your voice, your style, your movie night.

This project uses a Vite + React frontend and a Ruby on Rails API backend. They are booted separately but coordinated during development.

We recommend using Visual Studio Code for local development.

1. Open the project folder in VS Code
2. When prompted, install the recommended extensions:
   • Prettier (esbenp.prettier-vscode)
   • ESLint (dbaeumer.vscode-eslint)
   • RuboCop (rubocop.vscode-rubocop)
3. On save, your code will auto‑format for:
   • JavaScript & TypeScript (via Prettier + ESLint)
   • Ruby (via RuboCop)

The package.json includes scripts for checking and formatting code in both the frontend and backend.

To lint everything:

npm run lint

To format everything automatically:

npm run format

You can also target each side individually:

# Frontend only
npm run lint:frontend
npm run format:frontend

# Backend only
npm run lint:backend
npm run format:backend

To check if your frontend code is formatted correctly (without writing changes):

npm run check-format

Prettier is configured to:

• Automatically sort import statements
• Automatically sort Tailwind CSS classes
• Use plugins: @ianvs/prettier-plugin-sort-imports and prettier-plugin-tailwindcss

Tailwind class merging is handled by tailwind-merge, so dynamic class overrides stay clean and conflict-free.

Prettier configuration can be found in frontend/prettier.config.js or within frontend/package.json.

We use Storybook to build and document components in isolation.

To start Storybook locally:

npm run storybook

Then visit: http://localhost:6006

Use this during development to preview components and check for visual or logic regressions.

We’ve added a convenient script that installs both frontend and backend dependencies in one go:

npm run install:all

This runs npm install in frontend/ and bundle install in backend/.

RiffTube uses two .env files — one per app. Do not keep a root /.env with secrets.

Create backend/.env and add server‑only variables:

# Postgres (example)
DATABASE_USERNAME=your_postgres_username
DATABASE_PASSWORD=your_postgres_password
DATABASE_HOST=localhost
DATABASE_PORT=5432

# Google OAuth (OmniAuth)
GOOGLE_CLIENT_ID=xxxxxxxxxxxx.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=xxxxxxxxxxxxxxxx

# Where the API should redirect the browser after OAuth
FRONTEND_URL=http://localhost:5173

Create frontend/.env and add client-safe variables (must start with VITE_):

# Base URL for API calls from the browser
VITE_API_BASE_URL=http://localhost:3000/api/v1

# (Optional) Only if you use Google’s client-side SDK
# VITE_GOOGLE_CLIENT_ID=xxxxxxxxxxxx.apps.googleusercontent.com

cd backend
rails db:create
rails db:migrate

This will:

• Create the rifftube_development and rifftube_test databases
• Enable the uuid-ossp extension for UUID primary keys

From the project root, run:

npm run dev

This will concurrently start:

• Rails API → http://localhost:3000
• Vite frontend → http://localhost:5173

• backend/.env exists with database + OAuth settings
• frontend/.env exists with VITE_API_BASE_URL
• npm run install:all completed without errors
• rails db:create and rails db:migrate completed without errors
• Rails server (rails server) starts successfully
• Vite server (npm run dev) starts successfully
• Access Rails API at http://localhost:3000
• Access React frontend at http://localhost:5173
• Storybook accessible at http://localhost:6006

We follow Conventional Commits for a clear history and automated workflows.

Commit messages should:

• Use the imperative, present tense (e.g., add x to y, not added x to y)
• Begin with a type prefix: feat:, fix:, or chore:

Pull request conventions:

• Title: Must match your commit message
• Body: Include resolves #<issue-number> to automatically close the related issue

Example:

PR Title: feat: support time-traveling riffs from future disappointed users

PR Body:

resolves #303

- allows pre-emptive commentary before scenes even happen
- breaks causality but improves engagement metrics

This project uses semantic-release to automate changelog generation and versioning.

Releases are triggered by Conventional Commits on the main branch.

• Version numbers are automatically incremented
• Changelog entries are generated
• GitHub releases are published

• Vite
• React
• TypeScript
• Tailwind CSS
• tailwind-merge
• Storybook
• YouTube API
• Google Sign in
• Web Audio Recorder

• Ruby on Rails (API mode)
• PostgreSQL
• OmniAuth
• omniauth-google-oauth2
• Google Cloud Storage (planned)
• Google Cloud Text-to-Speech (planned)

• David Newberry — paxfeline
• Joscelyn Stancek — JossWritesCode

This project is licensed under the MIT License.