Added helpful descriptions and improved Modal UX for prerequisites #19

categorizedPrerequisiteContent.js

@@ -2,123 +2,149 @@ const categorizedVideos = {
     "Linear Algebra" : [
         {
         title : "Linear Algebra by 3blue1brown",
-        url : "https://www.3blue1brown.com/topics/linear-algebra"
+        url : "https://www.3blue1brown.com/topics/linear-algebra",
+        description: "Visual and intuitive introduction to linear algebra concepts including vectors, matrices, and transformations. Perfect for beginners."
         },
         {
             title:"Mathematics for Machine Learning",
             url:"https://mml-book.github.io/book/mml-book.pdf",
-            notes:"This book is a great resource for learning linear algebra for machine learning."
+            notes:"This book is a great resource for learning linear algebra for machine learning.",
+            description: "Comprehensive textbook covering mathematical foundations of ML including linear algebra, vector calculus, and probability."
         },
         {
             title:"The Complete Mathematics of Neural Networks and Deep Learning",
-            url:"https://www.youtube.com/watch?v=Ixl3nykKG9M"
+            url:"https://www.youtube.com/watch?v=Ixl3nykKG9M",
+            description: "Deep dive into the mathematical concepts behind neural networks, covering linear algebra and calculus applications."
         }
     ],
     "Calculus" : [
        {
         title : "Calculus by Khan Academy",
         url : "https://www.khanacademy.org/math/calculus-1",
+        description: "Step-by-step lessons covering derivatives, integrals, and limits with practice exercises and instant feedback."
        }, 
        {
         title : "Multivariable Calculus by Khan Academy",
-        url : "https://www.khanacademy.org/math/multivariable-calculus"
+        url : "https://www.khanacademy.org/math/multivariable-calculus",
+        description: "Extends calculus to functions of multiple variables, essential for understanding ML optimization algorithms."
        },
        {
         title:"Mathematics for Machine Learning",
         url:"https://mml-book.github.io/book/mml-book.pdf",
-        notes:"This book is a great resource for learning calculus for machine learning."
+        notes:"This book is a great resource for learning calculus for machine learning.",
+        description: "Comprehensive textbook covering mathematical foundations of ML including linear algebra, vector calculus, and probability."
        },
        {
         title:"Matrix Calculus",
         url:"https://explained.ai/matrix-calculus/index.html",
-        notes:"This is a great resource for learning matrix calculus you need for deep learning."
+        notes:"This is a great resource for learning matrix calculus you need for deep learning.",
+        description: "Focused tutorial on matrix derivatives and gradients, crucial for understanding backpropagation in neural networks."
        }
     ],
     "Probability and Statistics" : [
         {
         title : "Probability and Statistics by Khan Academy",
-        url : "https://www.khanacademy.org/math/statistics-probability"
+        url : "https://www.khanacademy.org/math/statistics-probability",
+        description: "Interactive lessons covering probability distributions, statistical inference, and hypothesis testing with practice problems."
         },
         {
             title:"Mathematics for Machine Learning",
             url:"https://mml-book.github.io/book/mml-book.pdf",
-            notes:"This book is a great resource for learning probability and statistics for machine learning."
+            notes:"This book is a great resource for learning probability and statistics for machine learning.",
+            description: "Comprehensive textbook covering mathematical foundations of ML including linear algebra, vector calculus, and probability."
         },
         {
             title:"Probability by Math is Fun",
             url:'https://www.mathsisfun.com/data/probability.html',
-            notes :"This is a text-based tutorial."
+            notes :"This is a text-based tutorial.",
+            description: "Beginner-friendly text-based introduction to probability concepts with simple examples and interactive demonstrations."
         },
         {
             title:"Probability Distribution",
-            url:"https://en.wikipedia.org/wiki/Probability_distribution"
+            url:"https://en.wikipedia.org/wiki/Probability_distribution",
+            description: "Reference guide to different types of probability distributions commonly used in machine learning and statistics."
         }
     ], 
     "Matrices" : [
         {
         title : "Matrices by Khan Academy",
-        url : "https://www.khanacademy.org/math/precalculus/x9e81a4f98389efdf:matrices"
+        url : "https://www.khanacademy.org/math/precalculus/x9e81a4f98389efdf:matrices",
+        description: "Complete introduction to matrices covering operations, determinants, and transformations with step-by-step examples."
         },
         {
             title:"Mathematics for Machine Learning",
             url:"https://mml-book.github.io/book/mml-book.pdf",
-            notes:"This book is a great resource for learning matrices for machine learning."
+            notes:"This book is a great resource for learning matrices for machine learning.",
+            description: "Comprehensive textbook covering mathematical foundations of ML including linear algebra, vector calculus, and probability."
         },
         {
             title:"Matrix Multiplication",
-            url:"https://en.wikipedia.org/wiki/Matrix_multiplication"
+            url:"https://en.wikipedia.org/wiki/Matrix_multiplication",
+            description: "Detailed explanation of matrix multiplication operations, fundamental to understanding neural network computations."
         }
     ],
     "Python" : [
         {
             title : "Python Programming MOOC by University of Helsinki",
-            url : "https://programming-25.mooc.fi/"    
+            url : "https://programming-25.mooc.fi/",
+            description: "Comprehensive, free university course with automated exercises and instant feedback. Great for complete beginners."
         },
         {
-            title : "CS50’s Introduction to Programming with Python by Harvard University",
-            url : "https://cs50.harvard.edu/python/"
+            title : "CS50's Introduction to Programming with Python by Harvard University",
+            url : "https://cs50.harvard.edu/python/",
+            description: "Harvard's renowned introduction to programming using Python, with problem sets and a final project."
         },
         {
             title : "Python OneShot by Programming with Mosh",
-            url : "https://youtu.be/_uQrJ0TkZlc?si=oguXvxcUqD8R9Jxm"
+            url : "https://youtu.be/_uQrJ0TkZlc?si=oguXvxcUqD8R9Jxm",
+            description: "Complete Python crash course covering basics to intermediate concepts in one comprehensive 6-hour video."
         },
         {
             title : "Learn Python as fast as possible by Tech with Tim",
-            url : "https://youtu.be/VchuKL44s6E?si=ehRmRPTXeuYYIuzj"
+            url : "https://youtu.be/VchuKL44s6E?si=ehRmRPTXeuYYIuzj",
+            description: "Rapid-fire Python fundamentals tutorial perfect for those who want to learn syntax quickly."
         },
         {
             title : "Python OneShot by CodeWithHarry",
-            url : "https://youtu.be/UrsmFxEIp5k?si=5-ucpex7cyZk3cuf"
+            url : "https://youtu.be/UrsmFxEIp5k?si=5-ucpex7cyZk3cuf",
+            description: "Beginner-friendly Python tutorial in Hindi/English covering all fundamental concepts with practical examples."
         },
         {
             title : "Python Like You Mean It",
-            url : "https://www.pythonlikeyoumeanit.com/index.html"
+            url : "https://www.pythonlikeyoumeanit.com/index.html",
+            description: "Text-based resource focused on teaching Python for scientific computing and data analysis with NumPy."
         },
         {
             title : "Python by Learn by Example",
             url : "https://www.learnbyexample.org/python/",
-            notes : "This is a text-based tutorial."
+            notes : "This is a text-based tutorial.",
+            description: "Quick reference guide with practical Python examples and code snippets organized by topic."
         },
         {
             title : "Python DOCS",
             url : "https://docs.python.org/3/tutorial/index.html",
-            notes : "Official Python Documentation"
+            notes : "Official Python Documentation",
+            description: "Official Python tutorial and documentation - the authoritative source for Python language features."
         },
         {
             title:"Learn Python with Interactive Exercises",
             url:"https://pychallenger.com/",
-            notes : "This is a interactive tutorial. Its a great site."
+            notes : "This is a interactive tutorial. Its a great site.",
+            description: "Practice Python through interactive coding challenges ranging from beginner to advanced levels."
         },
         {
             title:"Python for Data Analysis Book",
-            url:"https://wesmckinney.com/book/"
+            url:"https://wesmckinney.com/book/",
+            description: "Essential guide to data manipulation and analysis using pandas, NumPy, and other Python data science tools."
         },
         {
             title:"Free Python Books",
             url:"https://github.com/pamoroso/free-python-books",
-            notes:"This is a github repo with free python books."
+            notes:"This is a github repo with free python books.",
+            description: "Curated collection of free Python ebooks covering everything from basics to advanced topics and frameworks."
         }
     ]
 }
 
 export default categorizedVideos;
+

src/components/Modal.jsx

@@ -1,25 +1,30 @@
 import React, { useState, useEffect } from 'react';
 import { X } from 'lucide-react';
 
+
 const Modal = ({ topic, onClose, videoSource, existingProgress = {}, onProgressUpdate, darkMode }) => {
   const topicVideos = videoSource[topic.name] || [];
 
+
   const completionPercentage = topicVideos.length > 0
     ? Math.round((topicVideos.filter(video => 
         existingProgress[`${topic.name}_${video.url}`] === true
       ).length / topicVideos.length) * 100)
     : 0;
 
+
   // Check if all videos are completed
   const isFullyCompleted = topicVideos.length > 0 && topicVideos.every(video => 
     existingProgress[`${topic.name}_${video.url}`] === true
   );
 
+
   const saveProgress = (videoUrl) => {
     const currentProgress = existingProgress[`${topic.name}_${videoUrl}`] || false;
     onProgressUpdate(topic.name, videoUrl, !currentProgress);
   };
 
+
   // Mark all videos as complete/incomplete
   const markAllAsComplete = () => {
     const newCompletionState = !isFullyCompleted;
@@ -37,6 +42,7 @@ const Modal = ({ topic, onClose, videoSource, existingProgress = {}, onProgressU
     onProgressUpdate(topic.name, null, null, bulkUpdates);
   };
 
+
   // Disable body scroll when modal is open
   useEffect(() => {
     document.body.style.overflow = "hidden"; // Prevent body scroll when modal is open
@@ -45,12 +51,14 @@ const Modal = ({ topic, onClose, videoSource, existingProgress = {}, onProgressU
     };
   }, []);
 
+
   // Animation classes
   const backdropClasses = "fixed inset-0 z-[100] bg-black/60 backdrop-blur-sm";
   const modalClasses = `relative w-full max-w-2xl rounded-xl shadow-2xl 
     ${darkMode ? 'bg-gray-900 text-white' : 'bg-white text-gray-900'}
     transform transition-all duration-300 ease-out`;
 
+
   return (
     <div className={`${backdropClasses} animate-fadeIn`}>
       <div className="fixed inset-0 flex items-center justify-center p-4 overflow-y-auto">
@@ -85,6 +93,7 @@ const Modal = ({ topic, onClose, videoSource, existingProgress = {}, onProgressU
             </div>
           </div>
 
+
           {/* Progress Bar */}
           <div className="px-6 py-4 bg-opacity-50 border-b border-gray-200 dark:border-gray-700">
             <div className="flex items-center justify-between">
@@ -103,6 +112,7 @@ const Modal = ({ topic, onClose, videoSource, existingProgress = {}, onProgressU
             </div>
           </div>
 
+
           {/* Content */}
           <div className="px-6 py-4 max-h-[60vh] overflow-y-auto">
             {topicVideos.length > 0 ? (
@@ -111,30 +121,42 @@ const Modal = ({ topic, onClose, videoSource, existingProgress = {}, onProgressU
                   <li key={index} className={`p-4 rounded-lg transition-colors
                     ${darkMode ? 'hover:bg-gray-800' : 'hover:bg-gray-50'}`}>
                     {content.url && (
-                      <div className="flex justify-between items-center gap-4">
-                        <a
-                          href={content.url}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className={`flex-1 ${darkMode ? 'text-blue-400' : 'text-blue-600'} hover:underline`}
-                        >
-                          {content.title}
-                        </a>
-                        <button
-                          onClick={() => saveProgress(content.url)}
-                          className={`px-4 py-2 rounded-lg transition-all duration-200 transform hover:scale-105
-                            ${existingProgress[`${topic.name}_${content.url}`]
-                              ? 'bg-green-500 text-white hover:bg-green-600'
-                              : darkMode 
-                                ? 'bg-gray-700 text-white hover:bg-gray-600'
-                                : 'bg-gray-200 text-gray-900 hover:bg-gray-300'
-                            }`}
-                        >
-                          {existingProgress[`${topic.name}_${content.url}`] ? 'Completed ✓' : 'Mark Complete'}
-                        </button>
+                      <div>
+                        <div className="flex justify-between items-start gap-4">
+                          <div className="flex-1">
+                            <a
+                              href={content.url}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className={`font-semibold ${darkMode ? 'text-blue-400' : 'text-blue-600'} hover:underline block`}
+                            >
+                              {content.title}
+                            </a>
+
+                            {content.description && (
+                              <p className={`mt-2 text-sm leading-relaxed ${darkMode ? 'text-gray-400' : 'text-gray-600'}`}>
+                                {content.description}
+                              </p>
+                            )}
+                          </div>
+
+                          <button
+                            onClick={() => saveProgress(content.url)}
+                            className={`px-4 py-2 rounded-lg transition-all duration-200 transform hover:scale-105 whitespace-nowrap flex-shrink-0
+                              ${existingProgress[`${topic.name}_${content.url}`]
+                                ? 'bg-green-500 text-white hover:bg-green-600'
+                                : darkMode 
+                                  ? 'bg-gray-700 text-white hover:bg-gray-600'
+                                  : 'bg-gray-200 text-gray-900 hover:bg-gray-300'
+                              }`}
+                          >
+                            {existingProgress[`${topic.name}_${content.url}`] ? 'Completed ✓' : 'Mark Complete'}
+                          </button>
+                        </div>
                       </div>
                     )}
 
+
                     {content.articleLink && content.articleTitle && (
                       <div className="mt-2">
                         <a
@@ -148,9 +170,9 @@ const Modal = ({ topic, onClose, videoSource, existingProgress = {}, onProgressU
                       </div>
                     )}
 
+
                     {content.notes && (
-                      <div className="mt-2 p-3 rounded-lg bg-opacity-10 
-                        ${darkMode ? 'bg-red-500' : 'bg-red-50'}">
+                      <div className={`mt-2 p-3 rounded-lg ${darkMode ? 'bg-red-500/10' : 'bg-red-50'}`}>
                         <p className={`text-sm ${darkMode ? 'text-red-400' : 'text-red-600'}`}>
                           📌 {content.notes}
                         </p>
@@ -166,6 +188,7 @@ const Modal = ({ topic, onClose, videoSource, existingProgress = {}, onProgressU
             )}
           </div>
 
+
           {/* Footer */}
           <div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700">
             <button
@@ -182,4 +205,5 @@ const Modal = ({ topic, onClose, videoSource, existingProgress = {}, onProgressU
   );
 };
 
+
 export default Modal;