feat: Added leaderboard page, TODO: backend and aesthetics

Author: Devansh-bit

backend/src/api/handlers/notes.rs

@@ -167,6 +167,7 @@ async fn generate_preview_image(
 }
 
 // Integration into your upload_note function
+// TODO: Add semester and year fields
 pub async fn upload_note(
     State(state): State<RouterState>,
     Extension(user): Extension<User>,

backend/src/db/handlers/notes.rs

@@ -23,6 +23,7 @@ pub async fn update_note_preview_status(
     Ok(())
 }
 
+// TODO: Handle Year and Semester fields in the future, Add migrations removing reputation
 pub async fn create_note(
     db_wrapper: &DBPoolWrapper,
     new_note: CreateNote,

backend/src/db/handlers/users.rs

@@ -1,6 +1,8 @@
 use crate::db::db::DBPoolWrapper;
 use crate::db::models::User;
-use serde::Deserialize;
+use serde::{Deserialize, Serialize};
+use sqlx::FromRow;
+use uuid::Uuid;
 
 #[derive(Deserialize, Clone)]
 pub struct GoogleUserInfo {
@@ -10,6 +12,18 @@ pub struct GoogleUserInfo {
     pub picture: String,
 }
 
+#[derive(Debug, Serialize)]
+pub struct LeaderboardEntry {
+    pub id: Uuid,
+    pub full_name: String,
+    pub picture: String,
+    pub reputation: f64,
+    pub total_notes: i64,
+    pub total_upvotes: i64,
+    pub total_downloads: i64,
+    pub rank: i64,
+}
+
 pub async fn find_user_by_google_id(
     db_wrapper: &DBPoolWrapper,
     google_id: &str,
@@ -46,3 +60,149 @@ pub async fn find_or_create_user(
 
     Ok(new_user)
 }
+
+pub async fn get_leaderboard(
+    db_wrapper: &DBPoolWrapper,
+    limit: i64,
+) -> Result<Vec<LeaderboardEntry>, sqlx::Error> {
+    let rows = sqlx::query!(
+        r#"
+        WITH user_stats AS (
+            SELECT
+                u.id,
+                u.full_name,
+                u.picture,
+                COUNT(DISTINCT n.id) as total_notes,
+                COUNT(DISTINCT CASE WHEN v.is_upvote = true THEN v.id END) as total_upvotes,
+                COALESCE(SUM(n.downloads), 0) as total_downloads
+            FROM users u
+            LEFT JOIN notes n ON u.id = n.uploader_user_id
+            LEFT JOIN votes v ON n.id = v.note_id
+            GROUP BY u.id, u.full_name, u.picture
+        ),
+        user_reputation AS (
+            SELECT
+                id,
+                full_name,
+                picture,
+                total_notes,
+                total_upvotes,
+                total_downloads,
+                CASE
+                    WHEN total_notes > 0 THEN
+                        (total_upvotes::FLOAT / total_notes::FLOAT) *
+                        (total_notes + total_upvotes + total_downloads)
+                    ELSE 0
+                END as reputation
+            FROM user_stats
+        )
+        SELECT
+            id,
+            full_name,
+            picture,
+            reputation,
+            total_notes,
+            total_upvotes,
+            total_downloads,
+            RANK() OVER (ORDER BY reputation DESC, total_notes DESC) as rank
+        FROM user_reputation
+        ORDER BY rank
+        LIMIT $1
+        "#,
+        limit
+    )
+        .fetch_all(db_wrapper.pool())
+        .await?;
+
+    let leaderboard = rows
+        .into_iter()
+        .map(|row| LeaderboardEntry {
+            id: row.id,
+            full_name: row.full_name,
+            picture: row.picture,
+            reputation: row.reputation.unwrap_or(0.0),
+            total_notes: row.total_notes.unwrap_or(0),
+            total_upvotes: row.total_upvotes.unwrap_or(0),
+            total_downloads: row.total_downloads.unwrap_or(0),
+            rank: row.rank.unwrap_or(0),
+        })
+        .collect();
+
+    Ok(leaderboard)
+}
+
+pub async fn get_user_leaderboard_position(
+    db_wrapper: &DBPoolWrapper,
+    user_id: Uuid,
+) -> Result<Option<LeaderboardEntry>, sqlx::Error> {
+    let row = sqlx::query!(
+        r#"
+        WITH user_stats AS (
+            SELECT
+                u.id,
+                u.full_name,
+                u.picture,
+                COUNT(DISTINCT n.id) as total_notes,
+                COUNT(DISTINCT CASE WHEN v.is_upvote = true THEN v.id END) as total_upvotes,
+                COALESCE(SUM(n.downloads), 0) as total_downloads
+            FROM users u
+            LEFT JOIN notes n ON u.id = n.uploader_user_id
+            LEFT JOIN votes v ON n.id = v.note_id
+            GROUP BY u.id, u.full_name, u.picture
+        ),
+        user_reputation AS (
+            SELECT
+                id,
+                full_name,
+                picture,
+                total_notes,
+                total_upvotes,
+                total_downloads,
+                CASE
+                    WHEN total_notes > 0 THEN
+                        (total_upvotes::FLOAT / total_notes::FLOAT) *
+                        (total_notes + total_upvotes + total_downloads)
+                    ELSE 0
+                END as reputation
+            FROM user_stats
+        ),
+        ranked_users AS (
+            SELECT
+                id,
+                full_name,
+                picture,
+                reputation,
+                total_notes,
+                total_upvotes,
+                total_downloads,
+                RANK() OVER (ORDER BY reputation DESC, total_notes DESC) as rank
+            FROM user_reputation
+        )
+        SELECT
+            id,
+            full_name,
+            picture,
+            reputation,
+            total_notes,
+            total_upvotes,
+            total_downloads,
+            rank
+        FROM ranked_users
+        WHERE id = $1
+        "#,
+        user_id
+    )
+        .fetch_optional(db_wrapper.pool())
+        .await?;
+
+    Ok(row.map(|r| LeaderboardEntry {
+        id: r.id,
+        full_name: r.full_name,
+        picture: r.picture,
+        reputation: r.reputation.unwrap_or(0.0),
+        total_notes: r.total_notes.unwrap_or(0),
+        total_upvotes: r.total_upvotes.unwrap_or(0),
+        total_downloads: r.total_downloads.unwrap_or(0),
+        rank: r.rank.unwrap_or(0),
+    }))
+}

frontend/package-lock.json

@@ -16,7 +16,7 @@
     "lucide-react": "^0.539.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "react-router-dom": "^7.8.0"
+    "react-router-dom": "^7.9.4"
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",

frontend/package.json

@@ -1,13 +1,15 @@
 // App.tsx
 import React, { useState, useEffect, useCallback } from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { AuthProvider } from './contexts/AuthContext';
 import Header from './components/Header';
 import SearchBar from './components/SearchBar';
 import CourseGrid from './components/CourseGrid';
+import Leaderboard from './components/Leaderboard';
 import { notesApi } from './api/notesApi';
 import type { ResponseNote } from './types';
 
-const AppContent: React.FC = () => {
+const HomePage: React.FC = () => {
     const [searchQuery, setSearchQuery] = useState('');
     const [notes, setNotes] = useState<ResponseNote[]>([]);
     const [loading, setLoading] = useState(true);
@@ -57,33 +59,45 @@ const AppContent: React.FC = () => {
     };
 
     return (
-        <div className="min-h-screen bg-background flex flex-col">
-            <AuthProvider onSignIn={loadNotes}>
-                <Header onNoteUploaded={handleNoteUploaded} />
+        <>
+            <Header onNoteUploaded={handleNoteUploaded} />
 
-                <main className="flex-1 w-full px-6 sm:px-8 lg:px-12 xl:px-16 py-8">
-                    <div className="mb-8 max-w-3xl mx-auto">
-                        <SearchBar searchQuery={searchQuery} onSearchChange={handleSearchChange} />
-                    </div>
+            <main className="flex-1 w-full px-6 sm:px-8 lg:px-12 xl:px-16 py-8">
+                <div className="mb-8 max-w-3xl mx-auto">
+                    <SearchBar searchQuery={searchQuery} onSearchChange={handleSearchChange} />
+                </div>
 
-                    {error && (
-                        <div className="mb-6 p-4 bg-red-900 border border-red-700 rounded-lg text-red-300 max-w-3xl mx-auto">
-                            {error}
-                        </div>
-                    )}
+                {error && (
+                    <div className="mb-6 p-4 bg-red-900 border border-red-700 rounded-lg text-red-300 max-w-3xl mx-auto">
+                        {error}
+                    </div>
+                )}
 
-                    {loading ? (
-                        <div className="flex justify-center items-center py-12">
-                            <div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin"></div>
-                            <span className="ml-3 text-text-muted">Loading notes...</span>
-                        </div>
-                    ) : (
-                        <CourseGrid notes={notes} />
-                    )}
-                </main>
+                {loading ? (
+                    <div className="flex justify-center items-center py-12">
+                        <div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin"></div>
+                        <span className="ml-3 text-text-muted">Loading notes...</span>
+                    </div>
+                ) : (
+                    <CourseGrid notes={notes} />
+                )}
+            </main>
+        </>
+    );
+};
 
+const AppContent: React.FC = () => {
+    return (
+        <Router>
+            <AuthProvider>
+                <div className="min-h-screen bg-background flex flex-col">
+                    <Routes>
+                        <Route path="/" element={<HomePage />} />
+                        <Route path="/leaderboard" element={<Leaderboard />} />
+                    </Routes>
+                </div>
             </AuthProvider>
-        </div>
+        </Router>
     );
 };
 

frontend/src/App.tsx

@@ -0,0 +1,46 @@
+import { authenticatedFetch } from "./authApi.ts";
+
+export interface LeaderboardEntry {
+    id: string;
+    full_name: string;
+    picture: string;
+    reputation: number;
+    total_notes: number;
+    total_upvotes: number;
+    total_downloads: number;
+    rank: number;
+}
+
+class UserAPI {
+    private async fetchWithErrorHandling(url: string, options?: RequestInit): Promise<any> {
+        try {
+            const response = await authenticatedFetch(url, options);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            return await response.json();
+        } catch (error) {
+            console.error('API request failed:', error);
+            throw error;
+        }
+    }
+
+    // GET /api/users/leaderboard?limit=20
+    async getLeaderboard(limit: number = 20): Promise<LeaderboardEntry[]> {
+        const url = `/api/users/leaderboard?limit=${limit}`;
+        return this.fetchWithErrorHandling(url);
+    }
+
+    // GET /api/users/:user_id/leaderboard-position
+    async getUserLeaderboardPosition(userId: string): Promise<LeaderboardEntry | null> {
+        const url = `/api/users/${userId}/leaderboard-position`;
+        try {
+            return await this.fetchWithErrorHandling(url);
+        } catch (error) {
+            console.error('Failed to get user leaderboard position:', error);
+            return null;
+        }
+    }
+}
+
+export const userApi = new UserAPI();