6seven

The world is 👀 - Compete for everyone's eyes on your 6.7 second video.

6seven is a real-time video-sharing platform where users upload and watch 6.7-second videos. The platform features live viewer tracking, real-time likes, and an active video rotation system that changes the featured video every 6 seconds.

Features

• 🎥 Video Recording & Upload: Record and upload 6.7-second videos directly in the browser
• 👀 Real-time Viewer Tracking: See how many people are currently watching each video
• ❤️ Likes System: Like videos and see real-time like counts
• 🔄 Active Video Rotation: Featured video automatically changes every 6 seconds via cron job
• 📊 User Profiles: Display names and profile pictures
• 🔐 Authentication: Email-based authentication with Supabase
• 📱 Mobile Optimized: Responsive design optimized for mobile devices
• ⚡ Real-time Updates: Live updates via Supabase real-time subscriptions

Tech Stack

• Framework: Next.js 16 with React 19
• Language: TypeScript
• Database: Supabase (PostgreSQL)
• Video Hosting: Mux
• Authentication: Supabase Auth
• UI Components: Radix UI + Custom components
• Styling: Tailwind CSS
• Form Validation: Zod + React Hook Form
• Analytics: Vercel Analytics & Speed Insights
• AI: Google Generative AI (for video trendiness analysis)

Prerequisites

• Node.js 18+ and npm
• A Supabase project
• A Mux account with API credentials
• (Optional) Google Generative AI API key for trendiness analysis

Getting Started

1. Clone the repository

git clone https://github.com/yourusername/6seven.git
cd 6seven

2. Install dependencies

npm install

3. Set up environment variables

Create a .env file in the root directory:

# Supabase
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

# Mux
MUX_TOKEN_ID=your_mux_token_id
MUX_TOKEN_SECRET=your_mux_token_secret
NEXT_PUBLIC_MUX_KEY=your_mux_public_key

# Google Generative AI (optional, for trendiness analysis)
GOOGLE_GENAI_API_KEY=your_google_genai_api_key

4. Set up the database

1. Go to your Supabase dashboard
2. Navigate to SQL Editor
3. Copy and paste the contents of supabase/migrations/000_combined_migrations.sql
4. Run the SQL script

For more details, see supabase/README.md.

5. Set up the cron job

The active video rotation requires a cron job to be set up in Supabase.

6. Generate database types (optional)

npm run gen-db-types

This generates TypeScript types from your Supabase schema.

7. Run the development server

npm run dev

Open http://localhost:3000 in your browser.

Available Scripts

• npm run dev - Start the development server
• npm run build - Build the application for production
• npm run start - Start the production server
• npm run lint - Run ESLint
• npm run gen-db-types - Generate TypeScript types from Supabase schema

Project Structure

6seven/
├── app/                    # Next.js app directory
│   ├── account/           # User account page
│   ├── actions/           # Server actions
│   ├── api/               # API routes
│   ├── auth/              # Authentication routes
│   ├── login/             # Login page
│   ├── upload/            # Video upload page
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Home page (main video feed)
├── components/            # React components
│   ├── ui/               # Reusable UI components
│   ├── auth-dialog.tsx   # Authentication dialog
│   ├── video-player.tsx  # Video player component
│   └── video-recorder.tsx # Video recording component
├── hooks/                # Custom React hooks
├── lib/                  # Utility functions and configurations
│   ├── supabase.*.ts     # Supabase client configurations
│   ├── mux.server.ts     # Mux server utilities
│   └── database.types.ts # Generated database types
├── supabase/             # Database migrations
│   └── migrations/       # SQL migration files
└── public/               # Static assets

Key Features Explained

Active Video Rotation

The platform uses a cron job (via Supabase pg_cron) that runs every 6 seconds to select a random video and set it as the "active video". All users see the same active video at any given time, creating a synchronized viewing experience.

Real-time Viewer Tracking

When a user opens the app, their presence is tracked via:

• Initial heartbeat on page load
• Periodic heartbeats every 15 seconds
• Automatic cleanup on page unload/visibility change

The viewer count updates in real-time for all users watching the same video.

Video Upload Flow

1. User records a 6.7-second video using the browser's MediaRecorder API
2. Video is uploaded to Mux for processing
3. Video metadata is stored in Supabase
4. Video becomes eligible for selection as the active video