Added Profile Page

[RaunitArya]

This PR addresses the Issue #134 Building Profile Page from scratch with the given UI.

Changes Made:

• Created a Profile Page for the user
• Profile Page shows all the necessary information of the user (wins, games played, songs guessed, streak, avg guess time, etc)
• Also made the logo in the navbar a functionable button that will redirect user to landing page when clicked

[yep-yogesh]

Is this integrated with backend if yes how is it storing all the details? as alrdy cronjobs has been used to clear up room details after 15 mins of their creation

[RaunitArya]

Changes done to Save Match Data in MongoDB & Displaying in Profile Page:

1. Database Schema - User Model (User.js)

Added new fields to track game statistics:

{
  matchHistory: [{
    date: Date,
    partyName: String,
    place: String,      // "1ST", "2ND", "3RD", "4TH"
    points: Number
  }],
  wins: Number,          // Total wins (1st place finishes)
  gamesPlayed: Number,   // Total games played
  streak: Number,        // Current win streak
  bestStreak: Number,    // Highest win streak achieved
  songsGuessed: Number,  // Total songs guessed correctly
  averageGuessTime: Number // Average time to guess (in seconds)
}

2. Controller Functions (userController.js)

Created 3 new API endpoints:

• saveMatchResult
• updateSongsGuessed
• updateAverage

3. Added 3 new routes:

router.post("/match-result", saveMatchResult);
router.post("/update-songs-guessed", updateSongsGuessed);
router.post("/update-guess-time", updateAverageGuessTime);

4. Updated socketHandler.js

• Removed fetch() and Added Import User model for Direct database access instead of HTTP fetch calls.
• Added event handlers: update-songs-guessed event handler and update-guess-time event handler

5. Login.jsx & Signup.jsx

Avatar not getting saved to database
Changes:

• Added avatar validation (required for both email & Google login)
• After successful login/signup, calls /api/user/sync endpoint
• Sends { uid, name, avatar } to backend
• Backend saves user to MongoDB Users collection

6. GameRoom.jsx

Problem: Game ends but doesn't tell backend
Added:
a) State for tracking

const [correctGuessesCount, setCorrectGuessesCount] = useState(0);

b) Increment on correct guess

setCorrectGuessesCount((prev) => prev + 1);

c) Emit events on game end (line 447-457)

socket.on("game-over", ({ leaderboard }) => {
  // Emit game-finished event with all player data
  socket.emit("game-finished", {
    roomCode,
    roomData: { players: leaderboard }
  });

  // Emit songs guessed count
  socket.emit("update-songs-guessed", {
    uid: user.uid,
    count: correctGuessesCount
  });
});

7. Profile.jsx

Was showing mock data, not fetching data from db.

Bonus:

Also added Logout button in Profile Page.