feat(leaderboard): add leaderboard functionaltiy

src/components/LeaderboardSkeleton.tsx

@@ -0,0 +1,22 @@
+export const LeaderboardRowSkeleton = () => {
+  return (
+    <div className="flex justify-between items-center animate-pulse">
+      <div className="flex items-center gap-3">
+        {/* Rank / Trophy */}
+        <div className="w-12 h-12 rounded-full bg-gray-200" />
+
+        {/* Avatar */}
+        <div className="w-12 h-12 rounded-full bg-gray-300" />
+
+        {/* Name */}
+        <div className="h-4 w-32 bg-gray-200 rounded" />
+      </div>
+
+      {/* XP */}
+      <div className="flex items-center gap-2">
+        <div className="h-4 w-10 bg-gray-200 rounded" />
+        <div className="w-5 h-5 rounded bg-gray-200" />
+      </div>
+    </div>
+  );
+};

src/pages/student/Practice.tsx

@@ -22,7 +22,7 @@ import { useNavigate } from "react-router-dom";
 export const Practice = () => {
   const navigate = useNavigate();
   return (
-    <main className="min-h-screen max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-4">
+    <main className="h-fit max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-4">
       <header className="flex justify-between items-center">
         <div className="w-fit bg-linear-to-br from-purple-500 to-purple-600 p-3 rounded-2xl">
           <BookOpen size={20} color="white" />

src/pages/student/Rewards.tsx

@@ -3,7 +3,7 @@ import firstTrophy from "../../assets/icons/first_trophy.png";
 import secondTrophy from "../../assets/icons/second_trophy.png";
 import thirdTrophy from "../../assets/icons/third_trophy.png";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 // import {
 //   Card,
 //   CardHeader,
@@ -27,34 +27,81 @@ import {
   DropdownMenuTrigger,
 } from "../../components/ui/dropdown-menu";
 import { formatTimeFilter, getRandomColor } from "../../lib/utils";
-import { Avatar, AvatarFallback } from "../../components/ui/avatar";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "../../components/ui/avatar";
 import { Zap } from "lucide-react";
+import type { Leaderboard } from "../../types/leaderboard";
+import { api } from "../../utils/api";
+import { Card, CardContent } from "../../components/ui/card";
+import { LeaderboardRowSkeleton } from "../../components/LeaderboardSkeleton";
 
 export const Rewards = () => {
   const user = useAuthStore((state) => state.user);
   const [time, setTime] = useState("bottom");
 
-  const leaderboard = [
-    { id: 1, name: "Alice", xp: 587 },
-    { id: 2, name: "Bob", xp: 560 },
-    { id: 3, name: "Charlie", xp: 540 },
-    { id: 4, name: "David", xp: 510 },
-    { id: 5, name: "Emma", xp: 495 },
-  ];
+  const [leaderboard, setLeaderboard] = useState<Leaderboard>();
+  const [loading, setLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    const fetchLeaderboard = async () => {
+      if (!user) return;
+
+      try {
+        setLoading(true);
+        const authStorage = localStorage.getItem("auth-storage");
+        if (!authStorage) return;
+
+        const parsed = JSON.parse(authStorage) as {
+          state?: { token?: string };
+        };
+
+        const token = parsed.state?.token;
+        if (!token) return;
+
+        const response = await api.fetchLeaderboard(token);
+
+        setLeaderboard(response);
+        setLoading(false);
+      } catch (error) {
+        setLoading(false);
+        console.error("Error fetching leaderboard: " + error);
+      }
+    };
+
+    fetchLeaderboard();
+  }, [user]);
+
   const trophies = [firstTrophy, secondTrophy, thirdTrophy];
 
+  const isTopThree = (leaderboard?.user_rank?.rank ?? Infinity) < 3;
+
   return (
-    <main className="flex flex-col gap-8 items-start min-h-screen mx-auto px-8 sm:px-6 lg:px-8 py-8">
+    <main className="flex flex-col gap-8  items-start mx-auto sm:px-6 lg:px-8 py-8">
       <header className="flex flex-col items-center h-fit w-full  gap-3">
         <h1 className="font-satoshi-black text-3xl">Leaderboards</h1>
-        <p className="font-satoshi-medium text-md text-gray-500">
-          Complete lessons to rise to the top.{" "}
-          <span className="underline">Start a lesson.</span>
-        </p>
+        {loading ? (
+          <div className="animate-pulse">
+            <div className="h-4 w-60 bg-gray-200 rounded" />
+          </div>
+        ) : (
+          <p className="font-satoshi-medium text-md text-gray-500">
+            Don't stop now! You're{" "}
+            <span className="text-purple-400">
+              #{leaderboard?.user_rank.rank}
+            </span>{" "}
+            in XP.
+          </p>
+        )}
       </header>
-      <section className="w-full">
-        <Tabs defaultValue="xp" className="space-y-6">
-          <TabsList className="bg-transparent p-0 w-full justify-between ">
+      <section className="w-full px-7">
+        <Tabs
+          defaultValue="xp"
+          className="space-y-6 h-[calc(100vh-250px)] flex flex-col"
+        >
+          <TabsList className="bg-transparent p-0 w-full justify-between shrink-0">
             <TabsTrigger
               value="xp"
               className="font-satoshi-bold px-4  tracking-wide text-md rounded-none border-b-2 data-[state=active]:font-satoshi-medium data-[state=active]:border-b-indigo-800 data-[state=active]:text-indigo-800"
@@ -100,49 +147,64 @@ export const Rewards = () => {
               </DropdownMenuContent>
             </DropdownMenu>
           </TabsList>
-          <TabsContent value="xp" className="space-y-6">
-            {leaderboard.map((user, index) => {
-              const isTopThree = index < 3;
+          <TabsContent
+            value="xp"
+            className="flex-1 overflow-y-auto space-y-6 pb-8"
+          >
+            {loading ? (
+              <div className="space-y-6">
+                {Array.from({ length: 6 }).map((_, i) => (
+                  <LeaderboardRowSkeleton key={i} />
+                ))}
+              </div>
+            ) : (
+              leaderboard?.top_users.map((user, index) => {
+                const isTopThree = index < 3;
 
-              return (
-                <div
-                  key={user.id}
-                  className="flex justify-between items-center"
-                >
-                  <div className="flex items-center gap-3">
-                    {isTopThree ? (
-                      <img
-                        src={trophies[index]}
-                        alt={`trophy_${index + 1}`}
-                        className="w-12 h-12"
-                      />
-                    ) : (
-                      <span className="w-12 text-center font-satoshi-bold text-gray-400">
-                        {index + 1}
-                      </span>
-                    )}
+                return (
+                  <div
+                    key={user.user_id}
+                    className="flex justify-between items-center"
+                  >
+                    <div className="flex items-center gap-3">
+                      {isTopThree ? (
+                        <img
+                          src={trophies[index]}
+                          alt={`trophy_${index + 1}`}
+                          className="w-12 h-12"
+                        />
+                      ) : (
+                        <span className="w-12 text-center font-satoshi-bold text-gray-400">
+                          {index + 1}
+                        </span>
+                      )}
 
-                    <Avatar className={`p-6 ${getRandomColor()}`}>
-                      <AvatarFallback className="text-white font-satoshi-bold">
-                        {user.name.slice(0, 1).toUpperCase()}
-                      </AvatarFallback>
-                    </Avatar>
+                      <Avatar className={`p-6 ${getRandomColor()}`}>
+                        <AvatarImage src={user.avatar_url} />
+                        <AvatarFallback className="text-white font-satoshi-bold">
+                          {user.name.slice(0, 1).toUpperCase()}
+                        </AvatarFallback>
+                      </Avatar>
 
-                    <p className="font-satoshi-medium text-gray-600">
-                      {user.name}
-                    </p>
+                      <p className="font-satoshi-medium text-gray-600">
+                        {user.name}
+                      </p>
+                    </div>
+
+                    <div className="flex items-center gap-1">
+                      <p className="font-satoshi-medium">{user.total_xp}</p>
+                      <Zap size={20} color="darkgreen" />
+                    </div>
                   </div>
-
-                  <div className="flex items-center gap-1">
-                    <p className="font-satoshi-medium">{user.xp}</p>
-                    <Zap size={20} color="darkgreen" />
-                  </div>
-                </div>
-              );
-            })}
+                );
+              })
+            )}
           </TabsContent>
-          <TabsContent value="questions" className="space-y-6">
-            {leaderboard.map((user, index) => {
+          <TabsContent
+            value="questions"
+            className="flex-1 overflow-y-auto space-y-6"
+          >
+            {/* {leaderboard.map((user, index) => {
               const isTopThree = index < 3;
 
               return (
@@ -180,10 +242,13 @@ export const Rewards = () => {
                   </div>
                 </div>
               );
-            })}
+            })} */}
           </TabsContent>
-          <TabsContent value="streak" className="space-y-6">
-            {leaderboard.map((user, index) => {
+          <TabsContent
+            value="streak"
+            className="flex-1 overflow-y-auto space-y-6"
+          >
+            {/* {leaderboard.map((user, index) => {
               const isTopThree = index < 3;
 
               return (
@@ -221,10 +286,66 @@ export const Rewards = () => {
                   </div>
                 </div>
               );
-            })}
+            })} */}
           </TabsContent>
         </Tabs>
       </section>
+      <Card className="fixed bottom-19 bg-linear-to-br from-purple-500 to-purple-600 w-full rounded-full py-4">
+        <CardContent className="flex justify-between items-center">
+          {loading ? (
+            <div className="flex justify-between items-center animate-pulse w-full">
+              <div className="flex items-center gap-3">
+                {/* Rank / Trophy */}
+                <div className="w-12 h-12 rounded-full bg-gray-200" />
+
+                {/* Avatar */}
+                <div className="w-12 h-12 rounded-full bg-gray-300" />
+
+                {/* Name */}
+                <div className="h-4 w-32 bg-gray-200 rounded" />
+              </div>
+
+              {/* XP */}
+              <div className="flex items-center gap-2">
+                <div className="h-4 w-10 bg-gray-200 rounded" />
+                <div className="w-5 h-5 rounded bg-gray-200" />
+              </div>
+            </div>
+          ) : (
+            <>
+              <div className="flex items-center gap-3">
+                {isTopThree ? (
+                  <img
+                    src={trophies[leaderboard?.user_rank?.rank ?? Infinity]}
+                    alt={`trophy_${leaderboard?.user_rank?.rank ?? Infinity}`}
+                    className="w-12 h-12"
+                  />
+                ) : (
+                  <span className="w-12 text-center font-satoshi-bold text-white">
+                    {leaderboard?.user_rank?.rank ?? Infinity}
+                  </span>
+                )}
+                <Avatar className={`p-6 ${getRandomColor()}`}>
+                  <AvatarImage src={leaderboard?.user_rank.avatar_url} />
+                  <AvatarFallback className="text-white font-satoshi-bold">
+                    {leaderboard?.user_rank.name.slice(0, 1).toUpperCase()}
+                  </AvatarFallback>
+                </Avatar>
+                <p className="font-satoshi-bold text-white">
+                  {leaderboard?.user_rank.name}
+                </p>
+              </div>
+
+              <div className="flex items-center gap-1">
+                <p className="font-satoshi-medium text-white">
+                  {leaderboard?.user_rank.total_xp}
+                </p>
+                <Zap size={20} color="white" />
+              </div>
+            </>
+          )}
+        </CardContent>
+      </Card>
     </main>
   );
 };

src/types/leaderboard.ts

@@ -0,0 +1,13 @@
+export type LeaderboardEntry = {
+  rank: number;
+  user_id: string;
+  name: string;
+  avatar_url: string;
+  total_xp: number;
+  current_level: number;
+};
+
+export interface Leaderboard {
+  top_users: LeaderboardEntry[];
+  user_rank: LeaderboardEntry;
+}

src/utils/api.ts

@@ -1,3 +1,4 @@
+import type { Leaderboard } from "../types/leaderboard";
 import type { Lesson, LessonsResponse } from "../types/lesson";
 import type {
   SessionAnswerResponse,
@@ -222,5 +223,9 @@ class ApiClient {
   async fetchTopicById(token: string, topicId: string): Promise<Topic> {
     return this.authenticatedRequest<Topic>(`/topics/${topicId}`, token);
   }
+
+  async fetchLeaderboard(token: string): Promise<Leaderboard> {
+    return this.authenticatedRequest<Leaderboard>(`/leaderboard/`, token);
+  }
 }
 export const api = new ApiClient(API_URL);