ClipShare is a modern, production-ready video sharing platform that allows users to upload, store, and discover short video clips. Think of it as a space-themed YouTube or TikTok where users can share their favorite moments, tutorials, or creative content with a beautiful cosmic aesthetic.

• Upload Videos: Users can drag & drop video files (up to 30MB) with titles and descriptions
• Cloud Storage: Videos are stored securely in Supabase Storage (not locally)
• Public Gallery: All uploaded videos are displayed in a beautiful grid layout
• Modal Player: Click any video to watch it in a full-screen modal player
• Real-time Updates: New uploads appear immediately in the gallery

1. Landing Page (/)

   • Beautiful space-themed homepage with animated stars
   • Call-to-action buttons to upload or browse videos
   • Feature highlights and app introduction

2. Upload Experience (/upload)

   • Drag & drop interface for video files
   • Real-time video preview before upload
   • Form fields for title and description
   • Progress indicators and success animations
   • Confetti celebration on successful upload

3. Gallery Experience (/gallery)

   • Grid layout of all uploaded video clips
   • Hover effects with play button overlays
   • Click to open videos in modal player
   • Metadata display (title, description, upload date/time)
   • Refresh functionality to load new content

4. Video Playback

   • Full-screen modal video player
   • Auto-play when modal opens
   • Complete video controls (play, pause, volume, fullscreen)
   • Easy close options (ESC key, click outside, X button)

ClipShare App
├── React 18 (UI Framework)
├── TypeScript (Type Safety)
├── Tailwind CSS (Styling)
├── Framer Motion (Animations)
├── React Router (Navigation)
└── Vite (Build Tool)

Supabase Backend
├── PostgreSQL Database (Metadata Storage)
├── Supabase Storage (Video File Storage)
├── Row Level Security (Access Control)
└── Real-time Subscriptions (Live Updates)

1. Upload: File → Supabase Storage → Database Record → UI Update
2. Display: Database Query → Video URLs → Gallery Rendering
3. Playback: Click Event → Modal Open → Video Stream from Storage

src/
├── components/
│   ├── StarField.tsx          # Animated background stars
│   ├── Navigation.tsx         # Top navigation bar with routing
│   ├── Home.tsx              # Landing page with features
│   ├── UploadForm.tsx        # Video upload interface
│   ├── Gallery.tsx           # Video gallery grid
│   ├── ClipCard.tsx          # Individual video card component
│   └── VideoModal.tsx        # Full-screen video player modal
├── lib/
│   └── supabase.ts           # Supabase client configuration
├── App.tsx                   # Main app with routing
├── main.tsx                  # React app entry point
└── index.css                 # Global Tailwind styles

• Creates animated starfield background
• Canvas-based star rendering with twinkling effects
• Responsive to window resizing
• Provides cosmic atmosphere

• Top navigation bar with logo and menu items
• Active route highlighting with animations
• Responsive design for mobile/desktop
• Smooth transitions between pages

• Landing page with hero section
• Feature showcase with icons and descriptions
• Call-to-action buttons for upload/gallery
• Animated elements and floating stars

• Drag & drop file upload interface
• Video preview with thumbnail generation
• Form validation and error handling
• Progress indicators and success states
• Integration with Supabase Storage API

• Fetches and displays all video clips
• Grid layout with responsive design
• Loading states and error handling
• Real-time updates from database
• Modal management for video playback

• Individual video thumbnail display
• Hover effects with play button overlay
• Metadata display (title, description, date)
• Click handler for modal opening
• Smooth animations and transitions

• Full-screen video player modal
• Auto-play functionality
• Keyboard navigation (ESC to close)
• Click-outside-to-close behavior
• Video controls and metadata display

clips {
  id: uuid (Primary Key)           # Unique identifier
  title: text (Required)           # Video title
  description: text (Required)     # Video description  
  video_url: text (Required)       # Public URL from Supabase Storage
  created_at: timestamptz          # Upload timestamp
}

videos/ (Supabase Storage Bucket)
├── Public Access: ✅ Enabled
├── File Size Limit: 30MB
├── Allowed Types: .mp4, .webm
└── Auto-generated URLs for streaming

• File Validation: Checks file type (.mp4, .webm) and size (max 30MB)
• Preview Generation: Shows video thumbnail before upload
• Cloud Upload: Files stored in Supabase Storage bucket
• Metadata Storage: Title, description, and URL saved to database
• Success Feedback: Confetti animation and success message

• Real-time Loading: Fetches latest videos from database
• Responsive Grid: Adapts to screen size (1-3 columns)
• Lazy Loading: Videos load metadata first, then thumbnails
• Error Handling: Graceful fallbacks for failed loads
• Refresh Capability: Manual refresh button for new content

• Modal Interface: Full-screen overlay for focused viewing
• Auto-play: Videos start playing when modal opens
• Full Controls: Play, pause, volume, seek, fullscreen
• Keyboard Support: ESC key to close, space to play/pause
• Mobile Optimized: Touch-friendly controls and gestures

• Smooth Animations: Framer Motion for all transitions
• Loading States: Spinners and skeletons during data fetching
• Error States: User-friendly error messages and retry options
• Success States: Celebrations and confirmations for actions
• Responsive Design: Works perfectly on mobile, tablet, desktop

• Space Aesthetic: Deep blues, purples, and cosmic gradients
• Glass Morphism: Translucent cards with backdrop blur
• Gradient Accents: Purple-to-pink gradients for highlights
• Animated Elements: Floating stars, smooth transitions

Primary Colors:
- Purple: #8B5CF6 (buttons, accents)
- Pink: #EC4899 (gradients, highlights)
- Blue: #06B6D4 (links, secondary actions)

Background Colors:
- Deep Space: #0c0c1e (main background)
- Space Blue: #1a1a2e (secondary background)
- Dark Blue: #16213e (tertiary background)

Text Colors:
- White: #FFFFFF (primary text)
- Light Gray: #E5E7EB (secondary text)
- Medium Gray: #9CA3AF (tertiary text)

• Headings: Bold, gradient text effects
• Body Text: Clean, readable sans-serif
• Code: Monospace for technical elements

• React Hooks: useState, useEffect for local state
• No Redux: Simple app doesn't require complex state management
• Real-time Updates: Direct Supabase queries for fresh data

• Client-side Validation: File type and size checks
• Preview Generation: URL.createObjectURL for thumbnails
• Upload Progress: Real-time upload status feedback
• Error Recovery: Retry mechanisms for failed uploads

• Lazy Loading: Components and images load on demand
• Code Splitting: Route-based code splitting with React Router
• Image Optimization: Proper video thumbnail generation
• Caching: Browser caching for static assets

• Row Level Security: Supabase RLS policies for data access
• File Validation: Server-side file type and size validation
• Public Access: Controlled public access to video content
• CORS Handling: Proper cross-origin resource sharing

npm run build    # Creates optimized production build
npm run preview  # Preview production build locally

VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

• CDN Delivery: Supabase provides global CDN for video streaming
• Scalability: Handles thousands of videos and concurrent users
• Monitoring: Built-in Supabase analytics and logging
• Backup: Automatic backups through Supabase

• Family video sharing
• Travel moment collections
• Creative portfolio showcase
• Tutorial and educational content

• Team video updates
• Product demonstrations
• Customer testimonials
• Training material sharing

• User-generated content
• Contest submissions
• Event highlights
• Social video sharing

• User Authentication: Personal accounts and private videos
• Video Categories: Organize content by topics/tags
• Search Functionality: Find videos by title or description
• Like/Comment System: Social interaction features
• Video Editing: Basic trim/crop functionality
• Playlist Creation: Organize videos into collections
• Analytics Dashboard: View counts and engagement metrics

• Video Compression: Automatic optimization for web delivery
• Multiple Formats: Support for more video formats
• Thumbnail Generation: Automatic thumbnail creation
• Progressive Loading: Better loading experience for large videos
• Offline Support: Service worker for offline viewing

We welcome contributions! Here's how the codebase is organized for contributors:

1. Setup: Clone repo, install dependencies, configure Supabase
2. Development: Use npm run dev for hot-reload development
3. Testing: Manual testing of upload/playback functionality
4. Building: Use npm run build to create production build

• TypeScript: Full type safety throughout the application
• ESLint: Code linting for consistency
• Prettier: Code formatting (if configured)
• Component Structure: One component per file, clear naming

This project is licensed under the MIT License - see the LICENSE file for details.

• Supabase for providing excellent backend-as-a-service platform
• Tailwind CSS for the utility-first CSS framework
• Framer Motion for smooth animations and transitions
• Lucide React for beautiful, consistent icons
• React Team for the amazing frontend framework