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

components/project/project-grid.tsx

@@ -13,8 +13,21 @@ import {
   FaLink,
   FaSearch,
   FaYoutube,
+  FaClock,
+  FaTags,
+  FaRoute,
+  FaBook,
 } from "react-icons/fa";
 import SearchBar from "./search-bar";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
 
 const PROJECTS_PER_PAGE = 6;
 
@@ -136,9 +149,12 @@ export default function ProjectGrid() {
                     transition: { duration: 0.2 },
                   }}
                   layout
-                  className="group relative overflow-hidden rounded-2xl border border-border backdrop-blur-xl transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl hover:shadow-primary/10"
+                  className="flex flex-col h-full group relative overflow-hidden rounded-2xl border border-border backdrop-blur-xl transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl hover:shadow-primary/10"
                 >
-                  <div className="relative aspect-video overflow-hidden">
+                  <Dialog>
+                  <DialogTrigger asChild>
+                      <div className="cursor-pointer outline-none flex-1 flex flex-col group/card">
+                        <div className="relative aspect-video overflow-hidden shrink-0">
                     <Image
                       src={`/projects/${item.projectImage}`}
                       alt={item.projectName}
@@ -151,7 +167,7 @@ export default function ProjectGrid() {
                     />
                     <div className="absolute inset-0 bg-linear-to-t from-black/60 via-black/20 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
                     <button
-                      onClick={() => toggleFavorite(item.projectName)}
+                      onClick={(e) => { e.preventDefault(); e.stopPropagation(); toggleFavorite(item.projectName); }}
                       aria-pressed={favorites.includes(item.projectName)}
                       aria-label={
                         favorites.includes(item.projectName)
@@ -168,7 +184,15 @@ export default function ProjectGrid() {
                     </button>
                   </div>
 
-                  <div className="relative flex flex-col gap-4 p-6">
+                  <div 
+                    className="relative flex flex-col gap-4 p-6 pb-6 flex-1 sm:cursor-pointer cursor-default"
+                    onClick={(e) => {
+                      if (typeof window !== 'undefined' && window.innerWidth < 640) {
+                        e.stopPropagation();
+                        e.preventDefault();
+                      }
+                    }}
+                  >
                     <div className="flex items-center justify-between gap-3">
                       <h3 className="text-lg font-semibold tracking-tight text-start">
                         {item.projectName}
@@ -204,10 +228,88 @@ export default function ProjectGrid() {
                         ))}
                       </div>
                     )}
+                      </div>
+                    </div>
+                    </DialogTrigger>
+
+                    <DialogContent className="sm:max-w-[800px] w-[95vw] max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
+                      <DialogHeader>
+                        <DialogTitle className="text-xl">{item.projectName}</DialogTitle>
+                        <DialogDescription className="text-sm mt-1.5">
+                          {item.description}
+                        </DialogDescription>
+                      </DialogHeader>
+
+                      <div className="relative aspect-video w-full overflow-hidden rounded-lg mt-2 border border-border/50">
+                        <Image
+                          src={`/projects/${item.projectImage}`}
+                          alt={item.projectName}
+                          fill
+                          className="object-cover"
+                          sizes="(max-width: 600px) 100vw, 600px"
+                        />
+                      </div>
 
-                    <div className="mt-5 flex items-center gap-3">
+                      <div className="flex flex-wrap items-center gap-3 mt-4">
+                        {item.liveLink && (
+                          <Link href={item.liveLink} target="_blank" className="flex items-center gap-2 text-sm font-medium bg-primary text-primary-foreground px-4 py-2 rounded-full hover:opacity-90 transition-opacity shadow-sm shadow-primary/20">
+                            <FaLink /> Live Preview
+                          </Link>
+                        )}
+                        {item.githubLink && (
+                          <Link href={item.githubLink} target="_blank" className="flex items-center gap-2 text-sm font-medium bg-muted text-foreground px-4 py-2 rounded-full hover:bg-muted/80 transition-colors border border-border">
+                            <FaGithub /> Source Code
+                          </Link>
+                        )}
+                        {item.ytLink && (
+                          <Link href={item.ytLink} target="_blank" className="flex items-center gap-2 text-sm font-medium bg-red-500/10 text-red-500 px-4 py-2 rounded-full hover:bg-red-500/20 transition-colors border border-red-500/20">
+                            <FaYoutube /> Tutorial
+                          </Link>
+                        )}
+                      </div>
+
+                      {(item.skills || item.estimatedTime || item.learningPath || item.prerequisites) && (
+                        <div className="grid sm:grid-cols-2 gap-4 pt-4 mt-2 border-t border-border/50">
+                          {item.estimatedTime && (
+                            <div className="flex flex-col gap-1.5">
+                              <h4 className="text-sm font-semibold flex items-center gap-2"><FaClock className="text-muted-foreground" /> Estimated Time</h4>
+                              <p className="text-sm text-muted-foreground pl-6">{item.estimatedTime}</p>
+                            </div>
+                          )}
+                          {item.learningPath && (
+                            <div className="flex flex-col gap-1.5">
+                              <h4 className="text-sm font-semibold flex items-center gap-2"><FaRoute className="text-muted-foreground" /> Learning Path</h4>
+                              <p className="text-sm text-muted-foreground pl-6">{item.learningPath.join(" → ")}</p>
+                            </div>
+                          )}
+                          {item.prerequisites && (
+                            <div className="flex flex-col gap-1.5 sm:col-span-2">
+                              <h4 className="text-sm font-semibold flex items-center gap-2"><FaBook className="text-muted-foreground" /> Prerequisites</h4>
+                              <div className="flex flex-wrap gap-2 pl-6 mt-1">
+                                {item.prerequisites.map((prereq, i) => (
+                                  <span key={`modal-prereq-${i}`} className="rounded-full border border-border bg-muted/50 px-2.5 py-0.5 text-xs text-muted-foreground">{prereq}</span>
+                                ))}
+                              </div>
+                            </div>
+                          )}
+                          {item.skills && (
+                            <div className="flex flex-col gap-1.5 sm:col-span-2">
+                              <h4 className="text-sm font-semibold flex items-center gap-2"><FaTags className="text-muted-foreground" /> Skills Taught</h4>
+                              <div className="flex flex-wrap gap-2 pl-6 mt-1">
+                                {item.skills.map((skill, i) => (
+                                  <span key={`modal-skill-${i}`} className="rounded-full border border-border bg-muted/50 px-2.5 py-0.5 text-xs text-muted-foreground">{skill}</span>
+                                ))}
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </DialogContent>
+
+                    <div className="mt-auto flex items-center gap-3 p-6 pt-5 relative z-10 border-t border-border/10 pointer-events-auto">
                       {item.liveLink && (
                         <Link
+                          onClick={(e) => e.stopPropagation()}
                           href={item.liveLink}
                           target="_blank"
                           className="flex h-9 w-9 items-center justify-center rounded-full border border-border bg-background transition-all duration-300 hover:scale-110 hover:bg-muted"
@@ -218,6 +320,7 @@ export default function ProjectGrid() {
 
                       {item.githubLink && (
                         <Link
+                          onClick={(e) => e.stopPropagation()}
                           href={item.githubLink}
                           target="_blank"
                           className="flex h-9 w-9 items-center justify-center rounded-full border border-border bg-background transition-all duration-300 hover:scale-110 hover:bg-muted"
@@ -228,6 +331,7 @@ export default function ProjectGrid() {
 
                       {item.ytLink && (
                         <Link
+                          onClick={(e) => e.stopPropagation()}
                           href={item.ytLink}
                           target="_blank"
                           className="flex h-9 w-9 items-center justify-center rounded-full border border-border bg-background transition-all duration-300 hover:scale-110 hover:bg-red-500 hover:text-white"
@@ -236,7 +340,7 @@ export default function ProjectGrid() {
                         </Link>
                       )}
                     </div>
-                  </div>
+                  </Dialog>
                 </motion.div>
               ))}
             </AnimatePresence>

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,14 +37,22 @@ 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: "Kitchenly",
     description:"Recipe Manager + Smart Shopping List helps users capture recipes (URL, upload, or manual), standardize ingredients, scale servings, and automatically generate optimized shopping lists grouped by store sections with aggregated quantities—reducing duplicates and making shopping faster and more efficient.",
     projectImage: "kitchenly.png",
     githubLink: "https://github.com/Aarya1402/kitchenly",
     techStack: ["Next js","Tailwind CSS","PostgreSQL", "Prisma"], 
-    difficulty: "Intermediate"
+    difficulty: "Intermediate",
+    skills: ["Database Modeling", "API Routes", "State Management"],
+    learningPath: ["Full-stack Next.js", "Data Aggregation"],
+    estimatedTime: "2-3 weeks",
+    prerequisites: ["React Fundamentals", "Basic SQL/Prisma"],
   },
   {
     projectName: "SpeedTap",
@@ -47,6 +63,10 @@ export const projectItemConfig: ProjectItems[] = [
     liveLink: "https://speed-tap-two.vercel.app/",
     techStack: ["React js", "TypeScript", "CSS", "Vite"],
     difficulty: "Beginner",
+    skills: ["State Management", "Event Handling", "Timers"],
+    learningPath: ["React Basics", "Game Development"],
+    estimatedTime: "2-4 days",
+    prerequisites: ["React Hooks", "Basic Math Logic"],
   },
   {
     projectName: "SplitSmart",
@@ -56,7 +76,11 @@ export const projectItemConfig: ProjectItems[] = [
     githubLink: "https://github.com/ParthBhuptani/splitsmart",
     liveLink: "https://splitsmart-expense.vercel.app",
     techStack: ["React js", "Tailwind css", "TypeScript"],
-    difficulty: "Intermediate"
+    difficulty: "Intermediate",
+    skills: ["Local Storage", "Complex State", "Form Handling"],
+    learningPath: ["Frontend Mastery", "Utility Apps"],
+    estimatedTime: "1-2 weeks",
+    prerequisites: ["TypeScript Basics", "React Context/State"],
   },
   {
     projectName: "Text Cipher",
@@ -66,5 +90,10 @@ export const projectItemConfig: ProjectItems[] = [
     liveLink: "https://text-cipher.vercel.app/",
     techStack: ["React", "Tailwind CSS", "TypeScript"],
     difficulty: "Beginner",
+    skills: ["String Manipulation", "Encoding/Decoding"],
+    learningPath: ["React Basics", "Cryptography Basics"],
+    estimatedTime: "1-3 days",
+    prerequisites: ["JavaScript Strings"],
   },
 ];
+

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.