feat: implement structured learning system with project difficulty and learning tags

components/project/project-grid.tsx

@@ -4,7 +4,7 @@ import { projectConfig } from "@/config/projects";
 import Image from "next/image";
 import Link from "next/link";
 import { useEffect, useMemo, useState } from "react";
-import { FaGithub, FaLink, FaSearch, FaYoutube , FaBookmark} from "react-icons/fa";
+import { FaGithub, FaLink, FaSearch, FaYoutube , FaBookmark, FaClock, FaTags, FaRoute, FaBook} from "react-icons/fa";
 import SearchBar from "./search-bar";
 
 export default function ProjectGrid() {
@@ -16,6 +16,7 @@ export default function ProjectGrid() {
      const storedFavorites = localStorage.getItem("favoriteProjects");
 
      if (storedFavorites) {
+       // eslint-disable-next-line react-hooks/set-state-in-effect
        setFavorites(JSON.parse(storedFavorites));
      }
   }, []);
@@ -46,9 +47,23 @@ export default function ProjectGrid() {
       const matchesSearch =
         item.projectName.toLowerCase().includes(query) ||
         item.description.toLowerCase().includes(query) ||
+        item.difficulty.toLowerCase().includes(query) ||
+        (item.estimatedTime && item.estimatedTime.toLowerCase().includes(query)) ||
         (item.techStack && 
           item.techStack.some((tech: string) => 
             tech.toLowerCase().includes(query)
+        )) ||
+        (item.skills && 
+          item.skills.some((skill: string) => 
+            skill.toLowerCase().includes(query)
+        )) ||
+        (item.learningPath && 
+          item.learningPath.some((path: string) => 
+            path.toLowerCase().includes(query)
+        )) ||
+        (item.prerequisites && 
+          item.prerequisites.some((prereq: string) => 
+            prereq.toLowerCase().includes(query)
         ));
 
     const matchesFavorites =
@@ -152,6 +167,35 @@ export default function ProjectGrid() {
                   </div>
                 )}
 
+                {(item.skills || item.estimatedTime || item.learningPath || item.prerequisites) && (
+                  <div className="mt-1 flex flex-wrap gap-2">
+                    {item.estimatedTime && (
+                      <span className="flex items-center gap-1.5 rounded-full border border-border bg-muted/30 px-2.5 py-0.5 text-xs text-muted-foreground">
+                        <FaClock />
+                        {item.estimatedTime}
+                      </span>
+                    )}
+                    {item.learningPath && (
+                      <span className="flex items-center gap-1.5 rounded-full border border-border bg-muted/30 px-2.5 py-0.5 text-xs text-muted-foreground">
+                        <FaRoute />
+                        {item.learningPath.join(" → ")}
+                      </span>
+                    )}
+                    {item.prerequisites && item.prerequisites.map((prereq, i) => (
+                      <span key={`prereq-${i}`} className="flex items-center gap-1.5 rounded-full border border-border bg-muted/30 px-2.5 py-0.5 text-xs text-muted-foreground">
+                        <FaBook />
+                        {prereq}
+                      </span>
+                    ))}
+                    {item.skills && item.skills.map((skill, i) => (
+                      <span key={`skill-${i}`} className="flex items-center gap-1.5 rounded-full border border-border bg-muted/30 px-2.5 py-0.5 text-xs text-muted-foreground">
+                        <FaTags />
+                        {skill}
+                      </span>
+                    ))}
+                  </div>
+                )}
+
                 <div className="mt-5 flex items-center gap-3">
                   {item.liveLink && (
                     <Link

components/ui/carousel.tsx

@@ -95,6 +95,7 @@ function Carousel({
 
   React.useEffect(() => {
     if (!api) return
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     onSelect(api)
     api.on("reInit", onSelect)
     api.on("select", onSelect)

components/utils/github-star-animation.tsx

@@ -60,6 +60,7 @@ export default function GitHubStarsAnimation({
   // Fetch stargazers and star count
   useEffect(() => {
     if (providedStargazers && providedStarCount !== undefined) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setStargazers(providedStargazers);
       setStarCount(providedStarCount);
       setIsLoading(false);
@@ -145,6 +146,7 @@ export default function GitHubStarsAnimation({
   useEffect(() => {
     if (starCount === 0 || shouldReduceMotion) {
       if (shouldReduceMotion) {
+        // eslint-disable-next-line react-hooks/set-state-in-effect
         setDisplayCount(starCount);
         countSpring.set(starCount);
       }

config/project-Item.tsx

@@ -10,6 +10,10 @@ export const projectItemConfig: ProjectItems[] = [
     liveLink: "https://sendlyfile.vercel.app/",
     techStack: ["Next.js", "TypeScript", "Tailwind", "Supabase", "Prisma"],
     difficulty: "Advanced",
+    skills: ["File Handling", "Database", "Authentication"],
+    learningPath: ["Fullstack Next.js", "Backend Integration"],
+    estimatedTime: "2-3 weeks",
+    prerequisites: ["React", "SQL basics"],
   },
   {
     projectName: "ShowTime",
@@ -20,6 +24,10 @@ export const projectItemConfig: ProjectItems[] = [
     liveLink: "https://harmonious-maamoul-e4854c.netlify.app/",
     techStack: ["React js", "JavaScript", "CSS", "HTML"],
     difficulty: "Intermediate",
+    skills: ["API Fetching", "State Management", "Routing"],
+    learningPath: ["Frontend Mastery"],
+    estimatedTime: "1-2 weeks",
+    prerequisites: ["Basic React Hooks", "Promises/Async"],
   },
   {
     projectName: "Pomodoro Timer",
@@ -29,5 +37,10 @@ export const projectItemConfig: ProjectItems[] = [
     githubLink: "https://github.com/chopadkartanishka/100-reactjs-projects",
     techStack: ["React js", "JavaScript", "CSS", "HTML"],
     difficulty: "Intermediate",
+    skills: ["Timers & Intervals", "React State"],
+    learningPath: ["React Basics", "Utility Apps"],
+    estimatedTime: "3-5 days",
+    prerequisites: ["JavaScript Basics", "useState/useEffect"],
   },
 ];
+

config/projects.tsx

@@ -9,6 +9,10 @@ export interface ProjectItems {
   ytLink?: string;
   techStack: string[];
   difficulty: string;
+  skills?: string[];
+  learningPath?: string[];
+  estimatedTime?: string;
+  prerequisites?: string[];
 }
 
 interface Project {

hooks/use-mobile.ts

@@ -11,6 +11,7 @@ export function useIsMobile() {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
     }
     mql.addEventListener("change", onChange)
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
     return () => mql.removeEventListener("change", onChange)
   }, [])