From d74d5e530ee2fcffa3ff7acb6bea79eb239adc30 Mon Sep 17 00:00:00 2001
From: kushwahramkumar2003 <kushwahramkumar2003@gmail.com>
Date: Tue, 1 Oct 2024 02:19:12 +0530
Subject: [PATCH 1/3] schema updated for store userProgress

---
 .../migration.sql                             | 23 +++++++++++++++++++
 packages/db/prisma/schema.prisma              | 17 ++++++++++++++
 2 files changed, 40 insertions(+)
 create mode 100644 packages/db/prisma/migrations/20240930174340_add_user_progress/migration.sql

diff --git a/packages/db/prisma/migrations/20240930174340_add_user_progress/migration.sql b/packages/db/prisma/migrations/20240930174340_add_user_progress/migration.sql
new file mode 100644
index 00000000..6d760987
--- /dev/null
+++ b/packages/db/prisma/migrations/20240930174340_add_user_progress/migration.sql
@@ -0,0 +1,23 @@
+-- CreateTable
+CREATE TABLE "UserProgress" (
+    "id" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "trackId" TEXT NOT NULL,
+    "problemId" TEXT NOT NULL,
+    "completed" BOOLEAN NOT NULL DEFAULT false,
+    "lastVisited" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "UserProgress_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "UserProgress_userId_trackId_problemId_key" ON "UserProgress"("userId", "trackId", "problemId");
+
+-- AddForeignKey
+ALTER TABLE "UserProgress" ADD CONSTRAINT "UserProgress_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "UserProgress" ADD CONSTRAINT "UserProgress_trackId_fkey" FOREIGN KEY ("trackId") REFERENCES "Track"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "UserProgress" ADD CONSTRAINT "UserProgress_problemId_fkey" FOREIGN KEY ("problemId") REFERENCES "Problem"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/packages/db/prisma/schema.prisma b/packages/db/prisma/schema.prisma
index 328b595b..bd5b3005 100644
--- a/packages/db/prisma/schema.prisma
+++ b/packages/db/prisma/schema.prisma
@@ -51,6 +51,7 @@ model User {
   accounts      Account[]
   sessions      Session[]
   quizScores    QuizScore[]
+  progress UserProgress[]
 }
 
 model VerificationToken {
@@ -72,6 +73,7 @@ model Track {
   hidden      Boolean         @default(false)
   cohort      Int             @default(0)
   createdAt   DateTime        @default(now())
+  userProgress UserProgress[]
 }
 
 model Categories {
@@ -98,6 +100,7 @@ model Problem {
   type             ProblemType
   trackProblems    TrackProblems[]
   quizScores       QuizScore[]
+  userProgress UserProgress[]
 }
 model TrackProblems {
   track   Track  @relation(fields: [trackId], references: [id])
@@ -133,4 +136,18 @@ model QuizScore {
   problem       Problem  @relation(fields: [problemId], references: [id])
   problemId     String
   createdAt     DateTime @default(now())
+}
+
+model UserProgress {
+  id        String   @id @default(uuid())
+  userId    String
+  trackId   String
+  problemId String
+  completed Boolean  @default(false)
+  lastVisited DateTime @default(now())
+  user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+  track     Track    @relation(fields: [trackId], references: [id], onDelete: Cascade)
+  problem   Problem  @relation(fields: [problemId], references: [id], onDelete: Cascade)
+
+  @@unique([userId, trackId, problemId])
 }
\ No newline at end of file

From e63bd393bf9754ed6b9ce8e08e89aaea5396b90c Mon Sep 17 00:00:00 2001
From: kushwahramkumar2003 <kushwahramkumar2003@gmail.com>
Date: Tue, 1 Oct 2024 02:20:18 +0530
Subject: [PATCH 2/3] new server action created for userProgress feature

---
 apps/web/components/utils.tsx | 67 ++++++++++++++++++++++++++++++++++-
 1 file changed, 66 insertions(+), 1 deletion(-)

diff --git a/apps/web/components/utils.tsx b/apps/web/components/utils.tsx
index bdc0837f..bc33d055 100644
--- a/apps/web/components/utils.tsx
+++ b/apps/web/components/utils.tsx
@@ -1,7 +1,9 @@
 "use server";
-import { MCQQuestion, Prisma, Problem, Track, TrackProblems } from "@prisma/client";
+import { MCQQuestion, Prisma, Problem, Track, TrackProblems, UserProgress } from "@prisma/client";
 import db from "@repo/db/client";
 import { cache } from "../../../packages/db/Cache";
+import { getServerSession } from "next-auth";
+import { authOptions } from "../lib/auth";
 
 interface Tracks extends Track {
   problems: { problem: Problem }[];
@@ -478,3 +480,66 @@ export async function deleteCategory(categoryId: string) {
     },
   });
 }
+
+export async function setProgress(trackId: string, problemId: string, completed: boolean) {
+  const session = await getServerSession(authOptions);
+  if (!session?.user?.email) {
+    throw new Error("User not authenticated");
+  }
+
+  const user = await db.user.findUnique({
+    where: { email: session.user.email },
+  });
+
+  if (!user) {
+    throw new Error("User not found");
+  }
+
+  await db.userProgress.upsert({
+    where: {
+      userId_trackId_problemId: {
+        userId: user.id,
+        trackId,
+        problemId,
+      },
+    },
+    update: {
+      completed,
+      lastVisited: new Date(),
+    },
+    create: {
+      userId: user.id,
+      trackId,
+      problemId,
+      completed,
+      lastVisited: new Date(),
+    },
+  });
+}
+
+export const getUserProgress = async (): Promise<UserProgress[]> => {
+  const session = await getServerSession(authOptions);
+  if (!session?.user?.email) {
+    return [];
+  }
+
+  let userProgress: UserProgress[] = [];
+
+  if (session?.user?.email) {
+    const user = await db.user.findUnique({
+      where: { email: session.user.email },
+    });
+
+    if (user) {
+      userProgress = await db.userProgress.findMany({
+        where: {
+          userId: user.id,
+        },
+        orderBy: {
+          lastVisited: "desc",
+        },
+      });
+    }
+  }
+  return userProgress;
+};

From d6aa1f65b12fb623b1b5c9ce787c0cf8cc06910c Mon Sep 17 00:00:00 2001
From: kushwahramkumar2003 <kushwahramkumar2003@gmail.com>
Date: Tue, 1 Oct 2024 02:22:38 +0530
Subject: [PATCH 3/3] track user progress feature added

---
 apps/web/components/LessonView.tsx   |   6 ++
 apps/web/components/TrackCard-2.tsx  |  77 ++++++++-------
 apps/web/components/TrackPreview.tsx | 136 +++++++++++++++++++--------
 apps/web/components/Tracks.tsx       |  37 ++++----
 apps/web/screens/Landing.tsx         |   5 +-
 5 files changed, 166 insertions(+), 95 deletions(-)

diff --git a/apps/web/components/LessonView.tsx b/apps/web/components/LessonView.tsx
index 5bc5d737..2284da70 100644
--- a/apps/web/components/LessonView.tsx
+++ b/apps/web/components/LessonView.tsx
@@ -5,6 +5,7 @@ import RedirectToLoginCard from "./RedirectToLoginCard";
 import { getServerSession } from "next-auth";
 import { authOptions } from "../lib/auth";
 import { AppbarClient } from "./AppbarClient";
+import { setProgress } from "./utils";
 
 export const LessonView = async ({
   problem,
@@ -34,6 +35,11 @@ export const LessonView = async ({
     );
   }
 
+  // Update progress when the lesson is viewed
+  if (session?.user) {
+    await setProgress(track.id, problem.id, true);
+  }
+
   if (problem.type === "MCQ") {
     return <MCQRenderer problem={problem} track={track} showAppBar={!!showAppBar} problemIndex={problemIndex} />;
   }
diff --git a/apps/web/components/TrackCard-2.tsx b/apps/web/components/TrackCard-2.tsx
index 0238c882..59c8c7cf 100644
--- a/apps/web/components/TrackCard-2.tsx
+++ b/apps/web/components/TrackCard-2.tsx
@@ -1,8 +1,11 @@
-import { useEffect, useRef, useState } from "react";
+"use client";
+
+import { useRef, useState } from "react";
 import { motion, useAnimation } from "framer-motion";
-import { Track, Problem } from "@prisma/client";
+import { Track, Problem, UserProgress } from "@prisma/client";
 import { TrackPreview } from "./TrackPreview";
 import { formatDistanceToNow } from "date-fns";
+import { useSession } from "next-auth/react";
 
 interface TrackCardProps extends Track {
   problems: Problem[];
@@ -14,37 +17,26 @@ interface TrackCardProps extends Track {
   }[];
 }
 
-export function TrackCard2({ track }: { track: TrackCardProps }) {
+export function TrackCard2({ track, userProgress }: { track: TrackCardProps; userProgress: UserProgress[] }) {
   const controls = useAnimation();
   const ref = useRef<HTMLDivElement | null>(null);
   const [showPreview, setShowPreview] = useState<boolean>(false);
-
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry && entry.isIntersecting) {
-          controls.start("visible");
-        }
-      },
-      { threshold: 0.3 }
-    );
-
-    if (ref.current) {
-      observer.observe(ref.current);
-    }
-
-    return () => {
-      if (ref.current) {
-        observer.unobserve(ref.current);
-      }
-    };
-  }, [controls]);
+  const { data: session } = useSession();
 
   const variants = {
-    hidden: { opacity: 0 },
+    // hidden: { opacity: 0 },
     visible: { opacity: 1, transition: { duration: 0.1, ease: "easeOut" } },
   };
 
+  const completedProblems = userProgress.filter((p) => p.completed).length;
+  const progressPercentage = (completedProblems / track.problems.length) * 100;
+  const isCompleted = progressPercentage === 100;
+
+  const lastVisitedProblem =
+    userProgress.length > 0
+      ? userProgress.reduce((prev, current) => (prev.lastVisited > current.lastVisited ? prev : current))
+      : null;
+
   return (
     <>
       <motion.div
@@ -52,33 +44,50 @@ export function TrackCard2({ track }: { track: TrackCardProps }) {
         initial="hidden"
         animate={controls}
         variants={variants}
-        className="flex items-start flex-row gap-4 cursor-pointer transition-all  bg-primary/5 backdrop-blur-xl duration-300 hover:-translate-y-1 rounded-xl p-4 justify-between md:items-center"
+        className="bg-primary/5 flex cursor-pointer flex-row items-start justify-between gap-4 rounded-xl p-4 backdrop-blur-xl transition-all duration-300 hover:-translate-y-1 md:items-center"
         onClick={() => setShowPreview(true)}
       >
-        <img src={track.image} alt={track.title} className="size-20 aspect-square object-cover rounded-xl" />
-        <div className="flex flex-col md:flex-row gap-4 w-full md:items-center justify-between">
+        <img src={track.image} alt={track.title} className="aspect-square size-20 rounded-xl object-cover" />
+        <div className="flex w-full flex-col justify-between gap-4 md:flex-row md:items-center">
           <div className="flex flex-col gap-2">
-            <h3 className="text-xl md:text-2xl tracking-tighter font-semibold lg:line-clamp-1">{track.title}</h3>
+            <h3 className="text-xl font-semibold tracking-tighter md:text-2xl lg:line-clamp-1">{track.title}</h3>
             {track.categories.map((item) => (
               <p
                 key={item.category.id}
-                className="bg-secondary/25 border border-primary/10 rounded-lg px-3 py-2 text-sm w-fit cursor-default"
+                className="bg-secondary/25 border-primary/10 w-fit cursor-default rounded-lg border px-3 py-2 text-sm"
               >
                 {item.category.category}
               </p>
             ))}
           </div>
-          <div className="flex flex-row md:flex-col gap-2 w-full md:w-[30%] md:items-end items-center">
-            <p className="text-primary/80 md:text-lg tracking-tight text-blue-500 font-semibold">
+          <div className="flex w-full flex-row items-center gap-2 md:w-[30%] md:flex-col md:items-end">
+            <p className="text-primary/80 font-semibold tracking-tight text-blue-500 md:text-lg">
               {track.problems.length} Chapters
             </p>
-            <p className="flex tracking-tight gap-2 text-primary/60 text-sm md:text-base">
+            <p className="text-primary/60 flex gap-2 text-sm tracking-tight md:text-base">
               {formatDistanceToNow(new Date(track.createdAt), { addSuffix: true })}
             </p>
+            {(session?.user || userProgress.length > 0) && (
+              <div className="flex items-center gap-2">
+                <div className="h-2.5 w-full rounded-full bg-gray-200 dark:bg-gray-700">
+                  <div className="h-2.5 rounded-full bg-blue-600" style={{ width: `${progressPercentage}%` }}></div>
+                </div>
+                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                  {progressPercentage.toFixed(0)}%
+                </span>
+              </div>
+            )}
           </div>
         </div>
       </motion.div>
-      <TrackPreview showPreview={showPreview} setShowPreview={setShowPreview} track={track} />
+      <TrackPreview
+        showPreview={showPreview}
+        setShowPreview={setShowPreview}
+        track={track}
+        isCompleted={isCompleted}
+        lastVisitedProblem={lastVisitedProblem}
+        userProgress={userProgress}
+      />
     </>
   );
 }
diff --git a/apps/web/components/TrackPreview.tsx b/apps/web/components/TrackPreview.tsx
index d3b85e0d..8d47ee05 100644
--- a/apps/web/components/TrackPreview.tsx
+++ b/apps/web/components/TrackPreview.tsx
@@ -1,16 +1,26 @@
 "use client";
+
 import React, { useState, useEffect } from "react";
 import Link from "next/link";
-import { Button } from "../../../packages/ui/src/shad/ui/button";
-import { Dialog, DialogContent } from "../../../packages/ui/src/shad/ui/dailog";
-import { ArrowRight } from "lucide-react";
+import { ArrowRight, Play, Redo, CheckCircle } from "lucide-react";
 import { formatDistanceToNow } from "date-fns";
+import { Track, Problem, UserProgress, Categories } from "@prisma/client";
+import { useSession } from "next-auth/react";
+import { Button, Dialog, DialogContent } from "@repo/ui";
 
-type TrackPreviewProps = {
+interface TrackPreviewProps {
   showPreview: boolean;
   setShowPreview: (val: boolean) => void;
-  track: any;
-};
+  track: Track & {
+    problems: Problem[];
+    categories: {
+      category: Categories;
+    }[];
+  };
+  isCompleted: boolean;
+  lastVisitedProblem: UserProgress | null;
+  userProgress: UserProgress[];
+}
 
 const truncateDescription = (text: string, wordLimit: number) => {
   const words = text.split(" ");
@@ -20,74 +30,120 @@ const truncateDescription = (text: string, wordLimit: number) => {
   return text;
 };
 
-export function TrackPreview({ showPreview, setShowPreview, track }: TrackPreviewProps) {
+export function TrackPreview({
+  showPreview,
+  setShowPreview,
+  track,
+  isCompleted,
+  lastVisitedProblem,
+  userProgress,
+}: TrackPreviewProps) {
   const [isMediumOrLarger, setIsMediumOrLarger] = useState(false);
-
-  const updateScreenSize = () => {
-    setIsMediumOrLarger(window.innerWidth >= 768);
-  };
+  const { data: session } = useSession();
+  const [completedProblems, setCompletedProblems] = useState<string[]>([]);
+  const [lastVisited, setLastVisited] = useState<string | null>(null);
 
   useEffect(() => {
-    updateScreenSize(); // Set the initial state
-    window.addEventListener("resize", updateScreenSize); // Add resize listener
+    const updateScreenSize = () => {
+      setIsMediumOrLarger(window.innerWidth >= 768);
+    };
+
+    updateScreenSize();
+    window.addEventListener("resize", updateScreenSize);
 
     return () => {
-      window.removeEventListener("resize", updateScreenSize); // Cleanup listener on unmount
+      window.removeEventListener("resize", updateScreenSize);
     };
   }, []);
 
+  useEffect(() => {
+    if (session?.user) {
+      setCompletedProblems(userProgress.filter((p) => p.completed).map((p) => p.problemId));
+      setLastVisited(lastVisitedProblem?.problemId || null);
+    }
+  }, [session, track.id, userProgress, lastVisitedProblem]);
+
   const truncatedDescription = isMediumOrLarger ? track.description : truncateDescription(track.description, 15);
 
+  const progressPercentage = (completedProblems.length / track.problems.length) * 100;
+
   return (
     <Dialog open={showPreview} onOpenChange={() => setShowPreview(false)}>
       <DialogContent className="flex items-center gap-4">
-        <div className="flex flex-col gap-4 w-full">
-          <img src={track.image} className="h-[25vh] w-full object-cover rounded-lg" />
-          <div className="flex flex-col gap-4 bg-primary/5 rounded-lg p-4">
+        <div className="flex w-full flex-col gap-4">
+          <img src={track.image} className="h-[25vh] w-full rounded-lg object-cover" alt={track.title} />
+          <div className="bg-primary/5 flex flex-col gap-4 rounded-lg p-4">
             <div className="flex flex-col gap-4">
-              <h3 className="text-xl md:text-2xl font-semibold w-full tracking-tight">{track.title}</h3>
+              <h3 className="w-full text-xl font-semibold tracking-tight md:text-2xl">{track.title}</h3>
               <div className="flex items-center gap-4">
-                {track.categories.map((item: any, idx: number) => (
+                {track.categories.map((item) => (
                   <p
                     key={item.category.id}
-                    className="bg-secondary/25 border border-primary/10 rounded-lg px-3 py-2 text-sm w-fit cursor-default"
+                    className="bg-secondary/25 border-primary/10 w-fit cursor-default rounded-lg border px-3 py-2 text-sm"
                   >
-                    {item.category.category}{" "}
+                    {item.category.category}
                   </p>
                 ))}
               </div>
             </div>
-            <p className="md:text-lg tracking-tighter line-clamp-3 text-primary/60">{truncatedDescription}</p>
+            <p className="text-primary/60 line-clamp-3 tracking-tighter md:text-lg">{truncatedDescription}</p>
           </div>
-          <div className="flex flex-col gap-4 w-full">
-            <div className="flex gap-2 items-center">
-              <p className="flex tracking-tighter gap-2 text-primary text-lg md:text-xl font-semibold">
+          <div className="flex w-full flex-col gap-4">
+            <div className="flex items-center gap-2">
+              <p className="text-primary flex gap-2 text-lg font-semibold tracking-tighter md:text-xl">
                 {track.problems.length} Chapters
               </p>
-              <p className="flex tracking-tight gap-2 text-primary/60 md:text-lg">
+              <p className="text-primary/60 flex gap-2 tracking-tight md:text-lg">
                 {formatDistanceToNow(new Date(track.createdAt), { addSuffix: true })}
               </p>
             </div>
-            <div className="max-h-[25vh] overflow-y-auto flex flex-col gap-3 w-full py-2">
-              {track.problems.map((topic: any, idx: number) => (
-                <Link key={topic.id} href={`/tracks/${track.id}/${track.problems[idx]?.id}`}>
-                  <div className="cursor-pointer hover:-translate-y-1 flex items-center justify-between bg-primary/5 rounded-lg px-4 py-3 hover:bg-primary/10 transition-all duration-300 scroll-smooth w-full">
+            <div className="flex max-h-[25vh] w-full flex-col gap-3 overflow-y-auto py-2">
+              {track.problems.map((topic) => (
+                <Link key={topic.id} href={`/tracks/${track.id}/${topic.id}`}>
+                  <div className="bg-primary/5 hover:bg-primary/10 flex w-full cursor-pointer items-center justify-between scroll-smooth rounded-lg px-4 py-3 transition-all duration-300 hover:-translate-y-1">
                     {topic.title}
-                    <ArrowRight className="size-4" />
+                    {completedProblems.includes(topic.id) ? (
+                      <CheckCircle className="size-4 text-green-500" />
+                    ) : (
+                      <ArrowRight className="size-4" />
+                    )}
                   </div>
                 </Link>
               ))}
             </div>
           </div>
-          <Link href={track.problems.length ? `/tracks/${track.id}/${track.problems[0]?.id}` : ""}>
-            <Button
-              size={"lg"}
-              className="flex items-center justify-center bg-blue-600 text-white hover:bg-blue-500 transition-all duration-300"
-              onClick={(e) => e.stopPropagation()}
-            >
-              Start
-            </Button>
-          </Link>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <div className="h-2.5 w-24 rounded-full bg-gray-200 dark:bg-gray-700">
+                <div className="h-2.5 rounded-full bg-blue-600" style={{ width: `${progressPercentage}%` }}></div>
+              </div>
+              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                {progressPercentage.toFixed(0)}% Complete
+              </span>
+            </div>
+            <div className="flex gap-2">
+              <Link href={`/tracks/${track.id}/${track.problems[0]?.id}`}>
+                <Button size="sm" variant="outline" className="flex items-center gap-2">
+                  <Play className="size-4" />
+                  Start from beginning
+                </Button>
+              </Link>
+              {lastVisited && lastVisited !== track.problems[0]?.id && (
+                <Link href={`/tracks/${track.id}/${lastVisited}`}>
+                  <Button size="sm" variant="outline" className="flex items-center gap-2">
+                    <Redo className="size-4" />
+                    Resume
+                  </Button>
+                </Link>
+              )}
+              {isCompleted && (
+                <Button size="sm" variant="outline" className="flex items-center gap-2" disabled>
+                  <CheckCircle className="size-4" />
+                  Completed
+                </Button>
+              )}
+            </div>
+          </div>
         </div>
       </DialogContent>
     </Dialog>
diff --git a/apps/web/components/Tracks.tsx b/apps/web/components/Tracks.tsx
index d9af482c..62704ec5 100644
--- a/apps/web/components/Tracks.tsx
+++ b/apps/web/components/Tracks.tsx
@@ -2,7 +2,7 @@
 import { TrackCard2 } from "./TrackCard-2";
 import { category } from "@repo/store";
 import { useEffect, useState } from "react";
-import { Track, Problem } from "@prisma/client";
+import { Track, Problem, Categories, UserProgress } from "@prisma/client";
 import { useRecoilState } from "recoil";
 import {
   Select,
@@ -36,7 +36,8 @@ export interface TrackPros extends Track {
 
 interface TracksWithCategoriesProps {
   tracks: TrackPros[];
-  categories: { id: string; category: string }[];
+  categories: Categories[];
+  userProgress: UserProgress[];
 }
 
 enum CohortGroup {
@@ -45,7 +46,7 @@ enum CohortGroup {
   Three = 3,
 }
 
-export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
+export const Tracks = ({ tracks, categories, userProgress }: TracksWithCategoriesProps) => {
   const [selectedCategory, setSelectedCategory] = useRecoilState(category);
   const [filteredTracks, setFilteredTracks] = useState<TrackPros[]>(tracks);
   const [visibleTracks, setVisibleTracks] = useState<TrackPros[]>([]);
@@ -128,11 +129,11 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
       initial={{ y: -20, opacity: 0 }}
       animate={{ y: 0, opacity: 1 }}
       transition={{ duration: 0.5, ease: "easeInOut", type: "spring", damping: 10, delay: 0.5 }}
-      className="flex max-w-5xl flex-col gap-4 w-full mx-auto p-4"
+      className="mx-auto flex w-full max-w-5xl flex-col gap-4 p-4"
       id="tracks"
     >
-      <div className="flex w-full gap-4 justify-between items-center flex-col md:flex-row">
-        <div className="flex items-center gap-2 p-2 rounded-lg bg-primary/5 mx-auto md:mx-0 justify-center">
+      <div className="flex w-full flex-col items-center justify-between gap-4 md:flex-row">
+        <div className="bg-primary/5 mx-auto flex items-center justify-center gap-2 rounded-lg p-2 md:mx-0">
           <Button
             size={"lg"}
             variant={"ghost"}
@@ -141,7 +142,7 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
           >
             Cohort 2.0
           </Button>
-          <Separator className="w-0.5 h-4 bg-primary/25" />
+          <Separator className="bg-primary/25 h-4 w-0.5" />
           <Button
             size={"lg"}
             variant={"ghost"}
@@ -151,9 +152,9 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
             Cohort 3.0
           </Button>
         </div>
-        <div className="flex gap-2 p-2.5 bg-primary/5 rounded-lg w-full md:w-fit">
+        <div className="bg-primary/5 flex w-full gap-2 rounded-lg p-2.5 md:w-fit">
           {/* Filter by Categories */}
-          <div className="flex gap-2 items-center ">
+          <div className="flex items-center gap-2">
             <Select onValueChange={(e) => setSelectedCategory(e === "All" ? "" : e)}>
               <SelectTrigger className="w-[250px]">
                 <SelectValue placeholder={selectedCategory || "All"} />
@@ -187,12 +188,12 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
       </div>
 
       {/* Tracks with Animation */}
-      <motion.ul className="flex flex-col gap-4 w-full" variants={trackAnimation} initial="hidden" animate="show">
+      <motion.ul className="flex w-full flex-col gap-4" variants={trackAnimation} initial="hidden" animate="show">
         {loading ? (
           Array.from({ length: tracksPerPage }).map((_, idx) => (
             <div
               key={idx}
-              className="flex items-center space-x-4 w-full h-24 bg-neutral-100 dark:bg-neutral-900 p-4 rounded-xl"
+              className="flex h-24 w-full items-center space-x-4 rounded-xl bg-neutral-100 p-4 dark:bg-neutral-900"
             >
               <Skeleton className="h-12 w-12 rounded-2xl" />
               <div className="space-y-2">
@@ -202,13 +203,13 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
             </div>
           ))
         ) : visibleTracks.length === 0 ? (
-          <p className="text-center font-medium tracking-tighter text-lg max-w-screen-sm px-4 mx-auto">
+          <p className="mx-auto max-w-screen-sm px-4 text-center text-lg font-medium tracking-tighter">
             ☹️ Sorry - currently there are no tracks available.
           </p>
         ) : (
-          filteredTracks.map((t) => (
+          visibleTracks.map((t) => (
             <motion.li key={t.id} className="w-full" variants={{ hidden: { opacity: 0 }, show: { opacity: 1 } }}>
-              <TrackCard2 track={t} />
+              <TrackCard2 track={t} userProgress={userProgress.filter((up) => up.trackId === t.id)} />
             </motion.li>
           ))
         )}
@@ -216,7 +217,7 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
 
       {/* Skeleton */}
       {filteredTracks.length < tracksPerPage && (
-        <div className="flex items-center space-x-4 w-full h-24 bg-neutral-100 dark:bg-neutral-900 p-4 rounded-xl">
+        <div className="flex h-24 w-full items-center space-x-4 rounded-xl bg-neutral-100 p-4 dark:bg-neutral-900">
           <Skeleton className="h-12 w-12 rounded-2xl" />
           <div className="space-y-2">
             <Skeleton className="h-4 w-[250px]" />
@@ -225,7 +226,7 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
         </div>
       )}
       {/* Pagination Controls */}
-      <div className="flex justify-end items-end mt-4 w-full">
+      <div className="mt-4 flex w-full items-end justify-end">
         <Pagination>
           <PaginationContent>
             <PaginationItem className="cursor-pointer">
@@ -248,9 +249,7 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
               </>
             )}
 
-            <PaginationItem
-            className="cursor-pointer"
-            >
+            <PaginationItem className="cursor-pointer">
               <PaginationNext
                 onClick={() => {
                   setCurrentPage((prev) => Math.min(prev + 1, totalPages));
diff --git a/apps/web/screens/Landing.tsx b/apps/web/screens/Landing.tsx
index 3fe06545..b2ad9730 100644
--- a/apps/web/screens/Landing.tsx
+++ b/apps/web/screens/Landing.tsx
@@ -1,5 +1,5 @@
 import { AppbarClient } from "../components/AppbarClient";
-import { getAllCategories } from "../components/utils";
+import { getAllCategories, getUserProgress } from "../components/utils";
 import { getAllTracks } from "../components/utils";
 import Footer from "./footer";
 import Hero from "../components/Hero";
@@ -9,12 +9,13 @@ import FooterCTA from "./footer-cta";
 export async function Landing() {
   const tracks = await getAllTracks();
   const categories = await getAllCategories(); // Fetch categories
+  const userProgress = await getUserProgress();
 
   return (
     <div className="flex flex-col">
       <AppbarClient />
       <Hero tracks={tracks} />
-      <Tracks tracks={tracks} categories={categories} />
+      <Tracks tracks={tracks} categories={categories} userProgress={userProgress} />
       <FooterCTA />
       <Footer />
     </div>