Fix: Enhance JoinRoom Component with Better Error Handling and Performance

.gitignore

@@ -9,6 +9,7 @@
 # Client ignores
 # ------------------
 client/node_modules/
+client/config/firebase.js
 client/dist/
 client/.vite/
 client/.env

Bruno/Room APIs/Create Room.bru

@@ -0,0 +1,36 @@
+meta {
+  name: Create Room
+  type: http
+  seq: 1
+}
+
+post {
+  url: https://guessync.onrender.com/api/room/create
+  body: json
+  auth: inherit
+}
+
+headers {
+  Authorization: Bearer eyJhbGciOiJSUzI1NiIsImtpZCI6IjNiZjA1MzkxMzk2OTEzYTc4ZWM4MGY0MjcwMzM4NjM2NDA2MTBhZGMiLCJ0eXAiOiJKV1QifQ.eyJuYW1lIjoiWW9nZXNoIiwiaXNzIjoiaHR0cHM6Ly9zZWN1cmV0b2tlbi5nb29nbGUuY29tL25vdC1ndWVzc3luYyIsImF1ZCI6Im5vdC1ndWVzc3luYyIsImF1dGhfdGltZSI6MTc1MDU5NDQ1MywidXNlcl9pZCI6InBwYmJqd21ueFBRTU90NXl0amh4aEx5eHA3TjIiLCJzdWIiOiJwcGJiandtbnhQUU1PdDV5dGpoeGhMeXhwN04yIiwiaWF0IjoxNzUwNTk0NDU1LCJleHAiOjE3NTA1OTgwNTUsImVtYWlsIjoidGVzdDFAdGVzdC5jb20iLCJlbWFpbF92ZXJpZmllZCI6ZmFsc2UsImZpcmViYXNlIjp7ImlkZW50aXRpZXMiOnsiZW1haWwiOlsidGVzdDFAdGVzdC5jb20iXX0sInNpZ25faW5fcHJvdmlkZXIiOiJwYXNzd29yZCJ9fQ.aw15qoR4P8ZcoClnvbP_fUitg32gRWCSJs6cWyHCo3qjZyCNysmk8ZDU_e03nFDWVMY6oClm_-sEtq_OZCA7fPxrFLNBI5akkRfaooY1wDeg5YciFi6MtyN_1aA4zWLyeouO0As3KAYE5JyzAxWcYbTG9okFII19QyvfGL84MkcMzZuys9S9XKU5SOfYwFDBj2X8NZD5K1U97KWAf1oznKDuMqu8mDCWu7aGus4VBhXj_9HtiZ8xOuD5PKjWzBzJUSwWg2_Svb-_hNXpf37h1Co2rm3yVTm3TMgeU8n7I22YRAF_oORbxRsnSz6GmhMcJm_kvbqyYNbUjlq15y4X1w
+  Content-Type: application/json
+}
+
+body:json {
+  {
+    "uid": "user_123",
+    "name": "Yogesh",
+    "avatar": "https://i.imgur.com/avatar.png",
+    "useSpotify": true,
+    "playlistId": "37i9dQZF1DXcBWIGoYBM5M", 
+    "code": "123456",
+    "rounds": 5,
+    "duration": 15,
+    "languages": ["Tamil", "Hindi"],
+   "rules": {
+    "showHints": true,
+    "enableChat": true
+  }
+    "language": "tamil"
+  }
+
+}

Bruno/Room APIs/Join Room.bru

@@ -0,0 +1,26 @@
+meta {
+  name: Join Room
+  type: http
+  seq: 2
+}
+
+post {
+  url: https://guessync.onrender.com/api/room/join
+  body: json
+  auth: inherit
+}
+
+headers {
+  Authorization: Bearer eyJhbGciOiJSUzI1NiIsImtpZCI6IjNiZjA1MzkxMzk2OTEzYTc4ZWM4MGY0MjcwMzM4NjM2NDA2MTBhZGMiLCJ0eXAiOiJKV1QifQ.eyJuYW1lIjoiWW9nZXNoIiwiaXNzIjoiaHR0cHM6Ly9zZWN1cmV0b2tlbi5nb29nbGUuY29tL25vdC1ndWVzc3luYyIsImF1ZCI6Im5vdC1ndWVzc3luYyIsImF1dGhfdGltZSI6MTc1MDU5NDQ1MywidXNlcl9pZCI6InBwYmJqd21ueFBRTU90NXl0amh4aEx5eHA3TjIiLCJzdWIiOiJwcGJiandtbnhQUU1PdDV5dGpoeGhMeXhwN04yIiwiaWF0IjoxNzUwNTk0NDU1LCJleHAiOjE3NTA1OTgwNTUsImVtYWlsIjoidGVzdDFAdGVzdC5jb20iLCJlbWFpbF92ZXJpZmllZCI6ZmFsc2UsImZpcmViYXNlIjp7ImlkZW50aXRpZXMiOnsiZW1haWwiOlsidGVzdDFAdGVzdC5jb20iXX0sInNpZ25faW5fcHJvdmlkZXIiOiJwYXNzd29yZCJ9fQ.aw15qoR4P8ZcoClnvbP_fUitg32gRWCSJs6cWyHCo3qjZyCNysmk8ZDU_e03nFDWVMY6oClm_-sEtq_OZCA7fPxrFLNBI5akkRfaooY1wDeg5YciFi6MtyN_1aA4zWLyeouO0As3KAYE5JyzAxWcYbTG9okFII19QyvfGL84MkcMzZuys9S9XKU5SOfYwFDBj2X8NZD5K1U97KWAf1oznKDuMqu8mDCWu7aGus4VBhXj_9HtiZ8xOuD5PKjWzBzJUSwWg2_Svb-_hNXpf37h1Co2rm3yVTm3TMgeU8n7I22YRAF_oORbxRsnSz6GmhMcJm_kvbqyYNbUjlq15y4X1w
+  Content-Type: application/json
+}
+
+body:json {
+  {
+    "uid": "user_456",
+    "name": "Ryan",
+    "avatar": "https://i.imgur.com/avatar2.png",
+    "code": "123456"
+  }
+
+}

Bruno/Room APIs/folder.bru

@@ -0,0 +1,3 @@
+meta {
+  name: Room APIs
+}

Bruno/Song GET/Song-b-index.bru

@@ -0,0 +1,16 @@
+meta {
+  name: Song-b-index
+  type: http
+  seq: 1
+}
+
+get {
+  url: https://guessync.onrender.com/api/song/by-index?roomCode=123486&index=0
+  body: none
+  auth: inherit
+}
+
+params:query {
+  roomCode: 123486
+  index: 0
+}

Bruno/Song GET/folder.bru

@@ -0,0 +1,3 @@
+meta {
+  name: Song GET
+}

Bruno/User GET/User Authentication UID.bru

@@ -0,0 +1,15 @@
+meta {
+  name: User Authentication UID
+  type: http
+  seq: 1
+}
+
+get {
+  url: https://guessync.onrender.com/api/auth/me
+  body: none
+  auth: inherit
+}
+
+headers {
+  Authorization: Bearer eyJhbGciOiJSUzI1NiIsImtpZCI6IjNiZjA1MzkxMzk2OTEzYTc4ZWM4MGY0MjcwMzM4NjM2NDA2MTBhZGMiLCJ0eXAiOiJKV1QifQ.eyJuYW1lIjoiWW9nZXNoIiwiaXNzIjoiaHR0cHM6Ly9zZWN1cmV0b2tlbi5nb29nbGUuY29tL25vdC1ndWVzc3luYyIsImF1ZCI6Im5vdC1ndWVzc3luYyIsImF1dGhfdGltZSI6MTc1MDU5NDQ1MywidXNlcl9pZCI6InBwYmJqd21ueFBRTU90NXl0amh4aEx5eHA3TjIiLCJzdWIiOiJwcGJiandtbnhQUU1PdDV5dGpoeGhMeXhwN04yIiwiaWF0IjoxNzUwNTk0NDU1LCJleHAiOjE3NTA1OTgwNTUsImVtYWlsIjoidGVzdDFAdGVzdC5jb20iLCJlbWFpbF92ZXJpZmllZCI6ZmFsc2UsImZpcmViYXNlIjp7ImlkZW50aXRpZXMiOnsiZW1haWwiOlsidGVzdDFAdGVzdC5jb20iXX0sInNpZ25faW5fcHJvdmlkZXIiOiJwYXNzd29yZCJ9fQ.aw15qoR4P8ZcoClnvbP_fUitg32gRWCSJs6cWyHCo3qjZyCNysmk8ZDU_e03nFDWVMY6oClm_-sEtq_OZCA7fPxrFLNBI5akkRfaooY1wDeg5YciFi6MtyN_1aA4zWLyeouO0As3KAYE5JyzAxWcYbTG9okFII19QyvfGL84MkcMzZuys9S9XKU5SOfYwFDBj2X8NZD5K1U97KWAf1oznKDuMqu8mDCWu7aGus4VBhXj_9HtiZ8xOuD5PKjWzBzJUSwWg2_Svb-_hNXpf37h1Co2rm3yVTm3TMgeU8n7I22YRAF_oORbxRsnSz6GmhMcJm_kvbqyYNbUjlq15y4X1w
+}

Bruno/User GET/folder.bru

@@ -0,0 +1,3 @@
+meta {
+  name: User GET
+}

Bruno/bruno.json

@@ -0,0 +1,9 @@
+{
+  "version": "1",
+  "name": "Bruno",
+  "type": "collection",
+  "ignore": [
+    "node_modules",
+    ".git"
+  ]
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Yogesh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,212 @@
+<p align="center">
+  <img src="./client/src/assets/guessync.gif" alt="Guessync Demo" width="1000" />
+</p>
+
+<h1 align="center">
+  <a href="https://guessync.netlify.app/">
+    <img src="./client/public/wordmark.png" alt="Guessync" height="80" />
+  </a>
+</h1>
+
+<p align="center">
+  <b>A full-stack real-time multiplayer music guessing game</b> <br/>
+  Compete with friends, guess songs, and use AI-powered hints!
+</p>
+
+---
+
+## Features
+
+- **Spotify playlist integration** for song sourcing  
+- **YouTube audio streaming** for playback  
+- **AI-powered hints** using OpenAI  
+- **Real-time guessing & chat** via Socket.IO  
+- **Typo-tolerant matching** with Fuse.js  
+- **Secure authentication** (Firebase)  
+- **Modern frontend** (React + Vite + Tailwind)  
+- **Leaderboard scoring** in real time  
+- **MongoDB Atlas** for scalable data storage  
+
+---
+
+## Tech Stack
+
+### Frontend
+- React + Vite  
+- Tailwind CSS  
+- Firebase Authentication  
+- Socket.IO Client  
+
+### Backend
+- Node.js + Express.js  
+- MongoDB (Mongoose)  
+- Firebase Admin SDK (auth verification)  
+- Socket.IO Server  
+- Spotify API + YouTube API  
+- Gemini API (AI hint generation)  
+- Bruno (API testing)  
+
+---
+
+## Deployment
+
+- **Frontend:** [Guessync on Netlify](https://guessync.netlify.app/)  
+- **Backend:** [Guessync on Render](https://guessync.onrender.com/)  
+- **Database:** MongoDB Atlas
+
+---
+
+## Local Development (Step-by-step)
+
+Follow these steps to run both backend (Express) and frontend (Vite + React) locally.
+
+- Backend runs on: http://localhost:5000
+- Frontend runs on: http://localhost:5173
+
+### 1) Prerequisites
+- Node.js 18+ and npm (or yarn/pnpm)
+- A MongoDB database (Atlas or local)
+- Firebase project (for Auth)
+- Optional, but recommended:
+  - Spotify API credentials (song sourcing)
+  - YouTube API key (audio)
+  - Gemini/OpenAI key (AI hints)
+
+### 2) Clone and enter the project
+```bash
+git clone <your-fork-or-repo-url>
+cd Guessync
+```
+
+### 3) Configure environment files
+
+Use the provided examples to create your .env files.
+
+- macOS/Linux:
+```bash
+cp server/.env.example server/.env
+cp client/.env.example client/.env
+```
+
+- Windows PowerShell:
+```powershell
+Copy-Item server/.env.example server/.env
+Copy-Item client/.env.example client/.env
+```
+
+Now fill the values:
+
+Server (.env):
+- MONGO_URI: Your MongoDB connection string (Atlas or local, e.g. mongodb://127.0.0.1:27017/guessync)
+- PORT: 5000 (default)
+- SPOTIFY_CLIENT_ID / SPOTIFY_CLIENT_SECRET: From Spotify Developer Dashboard
+- YOUTUBE_API_KEY: From Google Cloud Console
+- GEMINI_API_KEY: From Google AI Studio (optional if you won’t use AI hints)
+- Firebase service account:
+  - In Firebase console: Project settings → Service accounts → Generate new private key
+  - Paste fields into .env. Important: keep FIREBASE_PRIVATE_KEY wrapped in quotes and with escaped newlines:
+    FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\n...your key...\n-----END PRIVATE KEY-----\n"
+
+Client (.env):
+- VITE_FIREBASE_*: From Firebase project settings → General → Your apps (Web app)
+
+Tip: Never commit .env. It’s ignored by .gitignore already.
+
+### 4) Install dependencies
+
+From project root, install in both apps:
+
+```bash
+cd server && npm install
+cd ../client && npm install
+```
+
+### 5) Run backend and frontend
+
+Open two terminals:
+
+- Terminal A (Backend):
+```bash
+cd server
+npm run dev
+# Expect: "Server running on port 5000"
+```
+
+- Terminal B (Frontend):
+```bash
+cd client
+npm run dev
+# Open the shown local URL, usually http://localhost:5173
+```
+
+### 6) Log in and try the app
+- Use Email/Password or Google via Firebase
+- Pick an avatar
+- Create a room or join with a code
+- Open a second browser window to simulate a friend joining
+
+---
+
+## Common Issues & Troubleshooting
+
+- CORS error in browser console:
+  - The backend only allows these origins by default:
+    - http://localhost:5173
+    - https://guessync.netlify.app
+  - If your dev URL differs (e.g. 127.0.0.1:5173), add it in server/server.js (allowedOrigins array).
+
+- Rate limiting (HTTP 429):
+  - /api/room/create and /api/auth/login are limited to 5 requests/min (see server/server.js with express-rate-limit).
+  - Wait a minute or increase limits for local dev only.
+
+- Firebase “invalid credential” or “private key” errors:
+  - Ensure FIREBASE_PRIVATE_KEY uses escaped newlines and is wrapped in quotes:
+    "-----BEGIN PRIVATE KEY-----\n...lines...\n-----END PRIVATE KEY-----\n"
+  - Make sure Client VITE_FIREBASE_* matches the same Firebase project.
+
+- MongoDB connection errors:
+  - For Atlas, whitelist your IP or set “Allow access from anywhere”.
+  - Verify MONGO_URI is correct and the cluster is running.
+
+- Vite port already in use:
+  - Run a different port:
+    npm run dev -- --port 5174
+
+- Socket connection issues:
+  - Backend must be running on http://localhost:5000.
+  - Ensure your frontend’s socket base URL matches backend.
+
+---
+
+## Scripts
+
+Backend (server/package.json):
+- npm run dev → Nodemon on server.js
+
+Frontend (client/package.json):
+- npm run dev → Vite dev server
+- npm run build → Production build
+
+---
+
+## Project Structure (high-level)
+
+- server/ (Express, Socket.IO, MongoDB, Firebase Admin, routes, cron)
+  - server.js (entry)
+  - routes/, sockets/, config/, cronJobs/
+  - .env.example
+- client/ (React + Vite, Tailwind, Firebase Auth, Socket.IO client)
+  - src/pages, src/components, src/assets
+  - vite.config.js, tailwind config
+  - .env.example
+
+---
+
+## Contributing
+
+1) Fork the repo  
+2) Create a feature branch  
+3) Commit with clear messages  
+4) Open a PR with a brief description and screenshots if relevant
+
+Thanks for contributing!

client/.env.example

@@ -0,0 +1,8 @@
+# Firebase (for Vite + Frontend)
+VITE_FIREBASE_API_KEY="your_firebase_api_key"
+VITE_FIREBASE_AUTH_DOMAIN="your_project.firebaseapp.com"
+VITE_FIREBASE_PROJECT_ID="your_firebase_project_id"
+VITE_FIREBASE_STORAGE_BUCKET="your_project.firebasestorage.app"
+VITE_FIREBASE_MESSAGING_SENDER_ID="your_firebase_messaging_sender_id"
+VITE_FIREBASE_APP_ID="your_firebase_app_id"
+

client/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Guessync</title>