You are an expert AI developer tasked with creating a single-page React application for 'MeowCam', a platform focused on ephemeral video sharing. The core idea is to allow users to stream live video for a predefined duration, shareable via a unique URL, after which the content is automatically deleted. This promotes privacy and transient communication.
PROJECT OVERVIEW:
MeowCam aims to solve the problem of digital permanence and privacy concerns associated with traditional video sharing platforms. It provides a space for users to share moments live, knowing that the content will disappear automatically after a set time, leaving no trace. The core value proposition is "Share your moments, not your history."
TECH STACK:
- **Frontend Framework:** React (using Create React App for simplicity or Vite for speed).
- **Styling:** Tailwind CSS for rapid UI development and a consistent design system.
- **State Management:** React Context API for global state (e.g., user session, broadcast status) and `useState`/`useReducer` for local component state. For more complex state, consider Zustand or Jotai.
- **Video Streaming:** WebRTC API for peer-to-peer or server-mediated live streaming. Libraries like `react-use-webrtc` can be explored.
- **Routing:** React Router DOM for managing different views within the single page application (e.g., Home, Broadcast, Watch).
- **Unique IDs:** A library like `uuid` for generating unique broadcast IDs.
- **API (if needed for persistent data like user accounts or broadcast metadata):** For MVP, we can rely on client-side logic and potentially a simple backend (e.g., Firebase, Supabase) for managing broadcast lifecycle if direct peer-to-peer isn't feasible for all sharing scenarios. For this prompt, we'll focus on client-side capabilities and simulate backend interactions where necessary.
- **Deployment:** Vercel or Netlify for easy CI/CD and hosting.
CORE FEATURES:
1. **Broadcast Creation:**
* **User Flow:** User clicks 'Start Broadcast'. They are prompted to select a duration (e.g., 1, 5, 10 minutes). After selection, the webcam feed is activated. A unique broadcast URL is generated and displayed to the user.
* **Details:** Access webcam using `navigator.mediaDevices.getUserMedia`. Use WebRTC to establish a stream. The stream is associated with a unique ID. A timer is initiated on the client-side (or managed server-side if a backend is used).
2. **Ephemeral Sharing:**
* **User Flow:** The broadcaster copies the generated URL and shares it with viewers.
* **Details:** The URL will be structured like `meow.camera/#<broadcast_id>`. The `broadcast_id` uniquely identifies the ephemeral stream.
3. **Live Viewing:**
* **User Flow:** A viewer clicks the shared URL. The application loads, detects the `broadcast_id` from the URL hash, and attempts to connect to the stream.
* **Details:** If the broadcast is active and the duration hasn't expired, the viewer sees the live video feed. If the broadcast ID is invalid or expired, an appropriate message is displayed.
4. **Automatic Expiration:**
* **User Flow:** Once the pre-defined duration is reached, the stream automatically stops for both the broadcaster and viewers. The content is no longer accessible.
* **Details:** A timer mechanism (client-side or server-driven) tracks the broadcast duration. Upon expiration, the stream connection is terminated, and the broadcast ID is marked as invalid or removed from active status.
UI/UX DESIGN:
- **Layout:** Single Page Application (SPA). Clean, minimalist interface. Focus on the camera feed and sharing functionality.
* **Home Page:** Call to action buttons: "Start Broadcast", "Watch Broadcast (Enter ID)".
* **Broadcast Page:** Camera preview, duration selector, large "Start Broadcast" button, generated URL display with copy button, active broadcast timer.
* **Watch Page:** Video player area, display of broadcaster's identifier (if any), timer showing remaining time.
- **Color Palette:** Primarily dark mode for a modern, immersive feel. Accent colors (e.g., a vibrant blue or green) for calls to action and active states. Use `bg-gray-900`, `text-white`, `text-gray-300`, `accent-blue-500`.
- **Typography:** Clean, sans-serif fonts like Inter or Roboto. Clear hierarchy using font weights and sizes.
- **Responsive Design:** Mobile-first approach. Ensure usability on all screen sizes using Tailwind CSS's responsive modifiers (`sm:`, `md:`, `lg:`).
* On mobile, buttons and controls should be easily tappable.
* On larger screens, the layout might expand to show more information or a larger video feed.
COMPONENT BREAKDOWN:
- `App.js`: Main application component, sets up routing.
- `HomePage.js`: Entry point. Contains buttons for starting and joining broadcasts.
* Props: `onStartBroadcast`, `onJoinBroadcast` (callbacks).
- `BroadcastSetup.js`: Component for selecting duration and initiating broadcast.
* State: `selectedDuration`.
* Props: `onBroadcastStart` (callback).
- `BroadcasterView.js`: Component for the user who is broadcasting.
* State: `localStream`, `broadcastId`, `timer`, `isBroadcasting`, `sharingUrl`.
* Props: None directly, manages its own state and logic.
* Lifecycle: Initializes webcam, sets up WebRTC, starts timer.
- `ViewerPage.js`: Component for users watching a broadcast.
* State: `remoteStream`, `broadcastId`, `remainingTime`, `isLoading`, `error`.
* Props: `broadcastId` (from URL).
* Lifecycle: Parses URL, attempts to connect to stream, handles timer display.
- `UrlDisplay.js`: Displays the broadcast URL and a copy button.
* Props: `url`.
- `Timer.js`: Displays the countdown timer.
* Props: `duration`, `onTimerEnd`.
- `VideoPlayer.js`: Reusable component to display video stream (local or remote).
* Props: `stream` (MediaStream object).
- `Header.js`, `Footer.js`: Basic layout components.
DATA MODEL:
- **Client-Side State:**
* `isBroadcasting`: boolean
* `isWatching`: boolean
* `broadcastId`: string | null
* `localStream`: MediaStream | null
* `remoteStream`: MediaStream | null
* `timer`: { startTime: number, duration: number, remaining: number } | null
* `sharingUrl`: string | null
* `error`: string | null
- **Mock Data for Broadcasts (Conceptual - would be managed server-side if scaled):**
```json
[
{
"id": "a1b2c3d4-e5f6-7890-1234-567890abcdef",
"startTime": 1678886400000, // Unix timestamp
"duration": 300000, // 5 minutes in milliseconds
"isActive": true
},
{
"id": "f0e9d8c7-b6a5-4321-fedc-ba9876543210",
"startTime": 1678887000000,
"duration": 600000, // 10 minutes in milliseconds
"isActive": true
}
]
```
*Note: For the MVP, the existence and validity of a `broadcastId` might be checked purely client-side via `localStorage` or session state, simulating backend persistence for simplicity. A true backend would manage `startTime`, `duration`, and `isActive` status.*
ANIMATIONS & INTERACTIONS:
- **Hover Effects:** Subtle scale or background color changes on buttons (`hover:scale-105`, `hover:bg-blue-600`).
- **Transitions:** Smooth transitions for modal popups or component reveals (`transition-opacity duration-300`).
- **Loading States:** Display spinners or skeleton loaders when fetching streams or connecting (`<Spinner />` component). Indicate loading within buttons (`<button disabled>Loading...</button>`).
- **Micro-interactions:** Button press feedback, URL copied confirmation message.
- **Stream Start/Stop:** Visual cues like a pulsing red light icon when broadcasting.
EDGE CASES:
- **No Webcam Access:** Prompt user for permission. Display a clear error message if denied. Provide fallback instructions.
- **Unsupported Browser:** Check for WebRTC support (`'RTCPeerConnection' in window`). Display a compatibility message.
- **Invalid Broadcast ID:** Handle 404-like scenarios gracefully. Display "Broadcast not found or has expired."
- **Empty State:** When no broadcasts are active or available, display informative messages.
- **Network Issues:** Implement basic retry logic for stream connections. Display network status indicators.
- **Permissions:** Clearly explain why webcam/mic access is needed.
- **Accessibility (a11y):** Use semantic HTML, ARIA attributes where necessary (e.g., for buttons, status messages), ensure sufficient color contrast, and provide keyboard navigation support.
- **Timer Accuracy:** Use `Date.now()` for more reliable time calculations compared to `setTimeout` intervals alone, especially for long durations.
SAMPLE DATA:
- **Broadcast ID:** `a1b2c3d4-e5f6-7890-1234-567890abcdef` (Example UUID)
- **Sharing URL:** `https://meow.camera/#a1b2c3d4-e5f6-7890-1234-567890abcdef`
- **Duration Options:** `[{ label: '1 Minute', value: 60000 }, { label: '5 Minutes', value: 300000 }, { label: '10 Minutes', value: 600000 }]`
- **Error Messages:**
* `'Error accessing webcam. Please grant permission.'`
* `'Browser does not support WebRTC.'`
* `'Broadcast not found or has expired.'`
* `'Network connection lost. Attempting to reconnect...'`
- **Mock Stream State (Conceptual):**
```javascript
// In BroadcasterView state
localStream: streamObject, // The MediaStream object from getUserMedia
broadcastId: 'a1b2c3d4-e5f6-7890-1234-567890abcdef',
timer: { startTime: Date.now(), duration: 300000, remaining: 295000 },
isBroadcasting: true,
sharingUrl: 'https://meow.camera/#a1b2c3d4-e5f6-7890-1234-567890abcdef'
// In ViewerPage state
remoteStream: streamObject, // The MediaStream object from RTCPeerConnection
broadcastId: 'a1b2c3d4-e5f6-7890-1234-567890abcdef',
remainingTime: 295000,
isLoading: false,
error: null
```
DEPLOYMENT NOTES:
- **Environment Variables:** Use `.env` file for base URL, API keys (if applicable). Ensure `NODE_ENV` is set correctly for production builds.
- **Build Process:** Use `npm run build` or `yarn build`. Ensure the output is served correctly by the hosting provider.
- **HTTPS:** WebRTC requires a secure context (HTTPS). Ensure deployment environment supports this.
- **WebRTC Signaling:** For reliable connections beyond simple LAN sharing, a signaling server (e.g., using WebSockets with Node.js/Express or managed services like Firebase Realtime Database/Pusher) would be necessary to coordinate peer connections. The MVP might simplify this by relying on direct P2P where possible or assuming a basic server setup exists if scaling is intended.
- **Performance:** Optimize image sizes, use code splitting if the app grows, memoize components where necessary (`React.memo`). Ensure efficient state updates.
- **CORS:** If using a separate backend API for signaling or metadata, configure CORS headers appropriately.
- **Domain:** Set up DNS for the chosen domain name (`meow.camera`).