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

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,6 +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"],
   },
   {
     projectName: "SpeedTap",
@@ -60,3 +72,4 @@ export const projectItemConfig: ProjectItems[] = [
     difficulty: "Beginner",
   },
 ];
+

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 {

contributing.md

@@ -118,8 +118,12 @@ Add your project details inside the `project-Item.tsx` file.
     githubLink: "github-link",
     liveLink: "live-link", // optional
     ytLink: "yt-link", // optional
-    techStack: ["React js"], // it is ans array ["React js", "Next js", "Tailwind css"]
-    difficulty: "Beginner" // Beginner | Intermediate | Advanced
+    techStack: ["React js"], // it is an array ["React js", "Next js", "Tailwind css"]
+    difficulty: "Beginner", // Beginner | Intermediate | Advanced
+    skills: ["Routing", "State Management"], // Optional: array of skills taught
+    learningPath: ["Frontend Mastery"], // Optional: learning path categories
+    estimatedTime: "2-3 weeks", // Optional: estimated time to complete
+    prerequisites: ["React Basics"] // Optional: prerequisite knowledge
 }
 ```
 ### Difficulty Levels
@@ -132,6 +136,14 @@ Allowed values:
 - `Intermediate`
 - `Advanced`
 
+### Structured Learning Fields (Optional but Recommended)
+
+To make projects more beginner-friendly, please consider adding these structured learning fields:
+- `skills`: A list of core concepts learned (e.g., `["API Fetching", "State Management"]`)
+- `learningPath`: Recommended learning tracks (e.g., `["React Basics", "Fullstack Next.js"]`)
+- `estimatedTime`: Expected time to build (e.g., `"2-3 days"`, `"1 week"`)
+- `prerequisites`: Required knowledge before starting (e.g., `"JavaScript Basics"`)
+
 Ensure:
 
 - The image path matches the file in the `public/projects` folder.