feat(frontend): Initialize audio streaming web app

Sets up React + Vite + TypeScript frontend structure.

- Adds Tailwind CSS v4 and Lucide icons.
- Implements modular architecture with Zustand state management.
- Adds detailed views for Home, Broadcaster, and Listener.
- Updates README with backend integration notes.

Author: rahim-jr

README.md

@@ -1,144 +1,18 @@
-# bgce-stream
 
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![Go Version](https://img.shields.io/badge/Go-1.19%2B-blue.svg)](https://golang.org/)
-[![WebRTC](https://img.shields.io/badge/WebRTC-Supported-green.svg)](https://webrtc.org/)
-[![Contributions Welcome](https://img.shields.io/badge/Contributions-Welcome-brightgreen.svg)](CONTRIBUTING.md)
+## Backend Integration Notes
 
-> **Simple audio streaming for small communities** - Create rooms instantly, share links, and start streaming music or voice with friends.
+To transform this frontend into a fully functional streaming application, the backend must handle the following events and data flow:
 
-## 🎵 What is bgce-stream?
+### Socket Events
+- **`join-stream`**: Payload `{ username: string, role: string }`. Server should add user to the room and broadcast update.
+- **`start-broadcast`**: Server marks the stream as live.
+- **`end-broadcast`**: Server cleans up room and notifies listeners.
+- **`toggle-mic`**: Payload `{ isMuted: boolean }`. Server broadcasts this state to all listeners to update their UI.
+- **`user-joined` / `user-left`**: Broadcast to all clients to update the `UserList`.
 
-bgce-stream is a lightweight, browser-based audio streaming platform designed for small-to-medium communities ("bhai-brother" groups). It enables instant room creation, shareable links, and high-quality audio streaming without complex setup or UI overhauls.
+### WebRTC / Streaming
+- **Signaling Server**: Implement Webrtc signaling (offer, answer, ice-candidate exchanges).
+- **Media Server (Optional)**: For scaling to many listeners, use an SFU (Selective Forwarding Unit) like meediasoup or Janus instead of mesh networking.
 
-### Key Features
-
-- 🚀 **One-click room creation** - Generate unique, shareable links instantly
-- 🎤 **Simple streaming experience** - Just click and stream
-- 🎛️ **Audio enhancement** - Automatic gain control, noise filtering, and music mode
-- 🔊 **Preserve audio richness** - Not compressed like standard voice calls
-- 🌐 **Browser-based** - No downloads, works on any modern browser
-- 👥 **Community-focused** - Designed for small groups (3-5 users)
-
-## 🚀 Quick Start
-
-### Prerequisites
-
-- **Backend**: Go 1.19 or higher
-- **Frontend**: Modern web browser with WebRTC support
-- **Network**: Stable internet connection
-
-### Installation
-
-1. **Clone the repository**:
-   ```bash
-   git clone https://github.com/your-username/bgce-stream.git
-   cd bgce-stream
-   ```
-
-2. **Start the backend server**:
-   ```bash
-   cd backend
-   go mod tidy
-   go run ./cmd/server
-   ```
-
-3. **Open the frontend**:
-   ```bash
-   cd frontend
-   # Use any static file server, e.g.:
-   python -m http.server 3000
-   # or
-   npx serve public
-   ```
-
-4. **Access the application**:
-   - Open `http://localhost:3000` in your browser
-   - Click "Create Room" to get started
-
-## 📖 Documentation
-
-- **[Contributing Guide](docs/CONTRIBUTING.md)** - How to contribute to bgce-stream
-- **[Roadmap](docs/ROADMAP.md)** - Development plans and upcoming features
-- **[v0.1.0 Release Notes](docs/releases/v0.1.0/README.md)** - Current MVP features
-- **[Backend README](backend/README.md)** - Backend-specific documentation
-
-<!-- ## 🏗️ Architecture
-
-### Backend (Go)
-- **REST API** for room management
-- **WebSocket signaling** for WebRTC peer connections
-- **Room management** with automatic cleanup
-- **CORS support** for cross-origin requests
-
-### Frontend (Vanilla JavaScript)
-- **WebRTC P2P mesh** for direct peer connections
-- **Web Audio API** for audio processing
-- **Responsive design** for desktop and mobile
-- **Progressive enhancement** for browser compatibility
-
-### Audio Processing
-- **Automatic Gain Control (AGC)** - Adjusts volume automatically
-- **Noise Suppression** - Reduces background noise
-- **Music Mode** - Enhanced settings for instrument tones
-- **High-quality audio** - Preserves audio richness via Opus tuning
-
-## 🎯 Use Cases
-
-- **Music jamming sessions** - Share and play music together
-- **Voice chats** - High-quality voice conversations
-- **Online rehearsals** - Practice sessions with band members
-- **Community meetings** - Small group discussions
-- **Gaming voice chat** - Low-latency audio for gaming -->
-
-## 🤝 Contributing
-
-We welcome contributions! Please see our [Contributing Guide](docs/CONTRIBUTING.md) for details.
-
-## 📋 Roadmap
-
-See [Roadmap](docs/ROADMAP.md) for detailed development plans and upcoming features for bgce-stream.
-
-## 🛠️ Technology Stack
-
-### Backend
-- **Go** - High-performance server
-- **Gorilla WebSocket** - WebSocket implementation
-- **Standard Library** - Minimal dependencies
-
-### Frontend
-- **Vanilla JavaScript** - No frameworks
-- **WebRTC** - Peer-to-peer connections
-- **Web Audio API** - Audio processing
-- **CSS3** - Modern styling
-
-### Infrastructure
-- **GitHub** - Version control and collaboration
-- **GitHub Actions** - CI/CD (planned)
-- **Docker** - Containerization (planned)
-
-## 📄 License
-
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
-
-## 🙏 Acknowledgments
-
-- **WebRTC community** - For the amazing real-time communication technology
-- **Go community** - For the excellent ecosystem and tools
-- **Contributors** - Everyone who helps make this project better
-- **Users** - For feedback and support
-
-## 📞 Support
-
-- **GitHub Issues** - Bug reports and feature requests
-- **GitHub Discussions** - Questions and general discussion
-- **Email** - [Contact maintainers](mailto:rahim.cse.diu@gmail.com)
-
-## 🌟 Star History
-
-[![Star History Chart](https://api.star-history.com/svg?repos=your-username/bgce-stream&type=Date)](https://star-history.com/#your-username/bgce-stream&Date)
-
----
-
-### Made with ❤️ for the community
->>>>>>> Stashed changes
+### API Endpoints (Optional)
+- **`GET /api/status`**: To check if a broadcast is currently live before joining.

SETUP.md

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/.gitignore

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

frontend/README.md

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

frontend/eslint.config.js

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>frontend</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>