Better Post-Sign-In User Flow: Build Profile, Leaderboard, and Start Debate UI

[rixitgithub]

Implemented the Post-Sign-In User Flow with Profile, Leaderboard, and Start Debate UI Sections

Description

This pull request enhances the post-signin experience for DebateAI by providing a clear, engaging landing page for authenticated users. After signing in, users are immediately directed to a page where they can:

• View and edit their Profile: See personal details, debate statistics, Elo rating, and update their information (including profile picture upload with preview).
• Check the Leaderboard: View dynamic rankings of top debaters, complete with interactive and responsive stat displays.
• Initiate a Debate: Use a dedicated interface to start a debate by filling out a simple form (topic, description, etc.).

These changes not only improve navigation and user engagement but also lay a robust foundation for future real-time debate functionality.

---

Context

Previously, users were redirected to a generic homepage after signing in, which offered no clear direction or personalized content. This PR addresses that by:

• Redirecting authenticated users to a dedicated landing page.
• Offering a detailed Profile page that aggregates user data and performance metrics.
• Presenting a dynamic Leaderboard to foster competition.
• Allowing users to start a debate directly, enhancing interactivity and engagement.

These enhancements align with the project’s vision for an interactive debate platform and help improve overall user retention.

---

Changes Made

Frontend (React/TypeScript)

• Routing (App.tsx):

  • Added ProtectedRoute to secure authenticated routes using AuthContext.
  • Configured AppRoutes to redirect signed-in users to /startDebate while directing unauthenticated users to the public landing page.
  • Nested protected routes within a Layout component for consistent UI across pages.

• Layout Components:

  • Layout.tsx: Wraps protected routes with a sidebar and header.
  • Sidebar.tsx: Displays navigation links (Start Debate, Leaderboard, Profile, About) with icons.
  • Header.tsx: Contains breadcrumbs, notifications, and mobile drawer support for smaller screens.

• Profile Page (Profile.tsx):

  • Fetches user data (name, email, bio, Elo, avatar) via getProfile API.
  • Provides an editable form for updating display name and bio.
  • Visualizes performance metrics using charts (donut chart for wins/losses/draws and a line chart for Elo history).
  • Displays recent debates and a mini-leaderboard.

• Leaderboard Page (Leaderboard.tsx):

  • Retrieves and displays dynamic rankings using fetchLeaderboardData.
  • Highlights the current user’s rank and implements “Show More” pagination.
  • Includes stat cards for metrics like total registered debaters and debates today.

• Start Debate Page (StartDebate.tsx):

  • Presents a simple form for users to initiate a debate, including fields for topic and description.
  • Validates inputs and guides users through the debate creation process.

• Services:

  • Integrated API calls (getProfile, updateProfile, fetchLeaderboardData) with token-based authentication.

Backend (Go/Gin/MongoDB)

• Main Setup (main.go):

  • Configured the Gin router with CORS for localhost:5173 and set trusted proxies.
  • Added a WebSocket endpoint (/ws) for future real-time features.

• Controllers (backend/controllers/):

  • GetLeaderboard: Fetches users sorted by Elo, constructs a ranked list, and returns placeholder stats.
  • GetProfile: Retrieves user profile data, including debate history, stats (wins, losses, draws), and Elo history.
  • UpdateProfile: Updates the display name and bio for the authenticated user.
  • UpdateEloAfterDebate: Implements Elo calculation (using a K-factor of 32) and updates ratings post-debate.

• Models:

  • User: Defines the user schema with fields like EloRating, DisplayName, and AvatarURL.
  • Debate: Stores debate records including topic, result, and Elo change.

• Routes:

  • Mapped controller functions to public endpoints and protected endpoints (secured with AuthMiddleware).

---

How to Test

Setup

1. Backend:
   • Ensure MongoDB is running and seeded with test data using utils.SeedDebateData and utils.PopulateTestUsers.
   • Start the backend with:

     go run main.go

2. Frontend:
   • Start the frontend (assuming Vite is used) with:

     npm run dev

   • The application should be accessible on localhost:5173.

Test Cases

• Sign-in Redirect:
  Sign in with a test account and verify that you are redirected to /startDebate.

• Profile Page:

  • Navigate to /profile and check that user details, charts, and recent debates are correctly displayed.
  • Edit your name and bio, then save changes to confirm persistence.

• Leaderboard Page:

  • Visit /leaderboard and verify that rankings and stats are loaded.
  • Use the "Show More" button to display additional entries.

• Start Debate Page:

  • Navigate to /startDebate and fill out the debate initiation form.
  • Verify that the form validates inputs and that the debate is created as expected.

• Protected Routes:

  • Log out and attempt to access a protected route (e.g., /profile). Confirm that you are redirected to the sign-in page.

• API Endpoints:

  • Test API calls such as GET /user/fetchprofile, PUT /user/updateprofile, and GET /leaderboard using a tool like Postman to ensure they return the expected data.

---

Video Comparisons

Before Implementation Video:

post_signin_flow_before.mp4

Before Implementation

After Implementation Video:

post_signin_flow_after.mp4

After Implementation

---

Screenshots

Feature	Desktop View	Mobile View
Profile Page
Leaderboard Page

Checklist

• Code compiles and runs locally (both frontend and backend).
• Protected routes enforce authentication properly.
• Profile and Leaderboard data fetch successfully.
• Responsive design verified on mobile and desktop.
• API endpoints secured with AuthMiddleware.

---

Reviewers

• Mentors: @ceilican , @keshav-nischal

---

Additional Notes

• The Elo calculation currently uses a simple helper; consider using math.Pow for improved precision.
• The frontend utilizes a UI component library (e.g., ShadCN) for elements like Card and Button—ensure it’s installed.
• Some backend statistics (e.g., "Debates Today") are placeholders; these will be updated in a future PR.

---

Closes #68

Please let me know if you have any questions or need further modifications. Your feedback is welcome!