Added the dsa and system design section for learning purpose

src/components/Dsa/Array.jsx

@@ -0,0 +1,143 @@
+// components/backend/Express.jsx
+import React from 'react';
+
+const notes = [
+  {
+    title: 'What is an Array?',
+    description: 'An array is a linear data structure used to store multiple values in a single variable, accessible via index.',
+    category: 'Array',
+    difficulty: 'Beginner',
+    icon: '📦',
+    code: `const fruits = ['apple', 'banana', 'cherry'];
+console.log(fruits[0]); // 'apple'`,
+    tips: [
+      'Indexing starts from 0',
+      'All elements are stored in contiguous memory',
+      'Good for storing related data items'
+    ]
+  },
+  {
+    title: 'Traversing an Array',
+    description: 'You can loop through an array to access or modify each element.',
+    category: 'Array',
+    difficulty: 'Beginner',
+    icon: '📦',
+    code: `const nums = [10, 20, 30];
+for (let i = 0; i < nums.length; i++) {
+  console.log(nums[i]);
+}`,
+    tips: [
+      'Use loops like for, while, or forEach',
+      'Avoid going out of bounds (i < arr.length)',
+      'Great for data processing tasks'
+    ]
+  },
+  {
+    title: 'Insert Element in Array',
+    description: 'You can add elements using push (end), unshift (start), or splice (anywhere).',
+    category: 'Array',
+    difficulty: 'Beginner',
+    icon: '📦',
+    code: `const arr = [1, 2, 4];
+arr.splice(2, 0, 3); // Insert 3 at index 2
+console.log(arr); // [1, 2, 3, 4]`,
+    tips: [
+      'push adds to end, unshift to start',
+      'splice can insert/remove elements at any position',
+      'Modifies original array'
+    ]
+  },
+  {
+    title: 'Delete Element from Array',
+    description: 'You can remove elements using pop, shift, or splice.',
+    category: 'Array',
+    difficulty: 'Beginner',
+    icon: '📦',
+    code: `const arr = [1, 2, 3, 4];
+arr.splice(2, 1); // Remove element at index 2
+console.log(arr); // [1, 2, 4]`,
+    tips: [
+      'pop removes last, shift removes first',
+      'splice can remove from any position',
+      'Deleting does not shift elements unless you use splice'
+    ]
+  },
+  {
+    title: 'Search in Array',
+    description: 'Check if an element exists in an array using loop, includes, or indexOf.',
+    category: 'Array',
+    difficulty: 'Beginner',
+    icon: '📦',
+    code: `const arr = [1, 3, 5, 7];
+console.log(arr.includes(3));  // true
+console.log(arr.indexOf(5));   // 2`,
+    tips: [
+      'indexOf returns -1 if not found',
+      'includes is cleaner for boolean check',
+      'Loop if you want to perform custom conditions'
+    ]
+  },
+  {
+    title: 'Find Maximum in Array',
+    description: 'Find the largest number by comparing all elements.',
+    category: 'Array',
+    difficulty: 'Beginner',
+    icon: '📦',
+    code: `const arr = [12, 3, 45, 2];
+let max = arr[0];
+for (let i = 1; i < arr.length; i++) {
+  if (arr[i] > max) max = arr[i];
+}
+console.log(max);`,
+    tips: [
+      'Initialize max with the first element',
+      'Can also use Math.max(...arr)',
+      'Works in O(n) time'
+    ]
+  }
+];
+
+
+const Array = () => {
+  return (
+    <div className="space-y-8">
+      <h1 className="text-3xl font-bold text-white mb-4">🚀 Array Basics</h1>
+      {notes.map((note, index) => (
+        <div key={index} className="bg-gradient-to-br from-[#1a1a2e] via-[#16213e] to-[#0f3460] text-white p-6 rounded-2xl shadow-md border border-gray-700/30">
+          <div className="flex items-center justify-between mb-4">
+            <div className="flex items-center gap-3">
+              <span className="text-2xl">{note.icon}</span>
+              <div>
+                <h2 className="text-xl font-semibold">{note.title}</h2>
+                <p className="text-sm text-gray-400 mt-1">{note.category} · {note.difficulty}</p>
+              </div>
+            </div>
+          </div>
+          <p className="text-gray-300 mb-4">{note.description}</p>
+
+          {note.code && (
+            <div className="mb-4">
+              <div className="text-sm font-medium text-purple-400 mb-1">Example Code:</div>
+              <pre className="bg-[#1e1e2f] text-sm text-emerald-500 rounded-md p-4 overflow-x-auto whitespace-pre-wrap">
+                <code>{note.code}</code>
+              </pre>
+            </div>
+          )}
+
+          {note.tips?.length > 0 && (
+            <div className="mt-2">
+              <div className="text-sm font-medium text-pink-400 mb-1">Tips:</div>
+              <ul className="list-disc list-inside space-y-1 text-sm text-gray-300">
+                {note.tips.map((tip, i) => (
+                  <li key={i}>👉 {tip}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Array;

src/components/Dsa/Greedy.jsx

@@ -0,0 +1,195 @@
+// components/backend/Express.jsx
+import React from 'react';
+
+const notes = [
+  {
+    title: 'What is a Greedy Algorithm?',
+    description: 'Greedy algorithms make the locally optimal choice at each step with the hope of finding the global optimum.',
+    category: 'Greedy',
+    difficulty: 'Beginner',
+    icon: '💰',
+    code: `// Basic greedy logic
+// Always choose best option at each step
+// Ex: Choose largest coin that fits into amount`,
+    tips: [
+      'Fast and simple to implement',
+      'Does not always give optimal result',
+      'Used in problems like activity selection, coin change, etc.'
+    ]
+  },
+  {
+    title: 'Minimum Coins to Make Change',
+    description: 'Use the fewest number of coins to make up a target amount.',
+    category: 'Greedy',
+    difficulty: 'Beginner',
+    icon: '💰',
+    code: `function minCoins(coins, amount) {
+  coins.sort((a, b) => b - a);
+  let count = 0;
+  for (let coin of coins) {
+    while (amount >= coin) {
+      amount -= coin;
+      count++;
+    }
+  }
+  return amount === 0 ? count : -1;
+}`,
+    tips: [
+      'Sort coins in descending order',
+      'Doesn’t always work with arbitrary coin values',
+      'Works well with standard denominations like [1, 2, 5, 10, ...]'
+    ]
+  },
+  {
+    title: 'Activity Selection Problem',
+    description: 'Select maximum number of non-overlapping activities based on end time.',
+    category: 'Greedy',
+    difficulty: 'Beginner',
+    icon: '💰',
+    code: `function maxActivities(activities) {
+  activities.sort((a, b) => a[1] - b[1]);
+  let count = 1, end = activities[0][1];
+  for (let i = 1; i < activities.length; i++) {
+    if (activities[i][0] >= end) {
+      count++;
+      end = activities[i][1];
+    }
+  }
+  return count;
+}
+// activities = [[start1, end1], [start2, end2], ...]`,
+    tips: [
+      'Sort by earliest end time',
+      'Pick activity only if it doesn’t overlap',
+      'Classic example of greedy strategy'
+    ]
+  },
+  {
+    title: 'Fractional Knapsack',
+    description: 'Maximize profit by picking fractions of items based on value/weight ratio.',
+    category: 'Greedy',
+    difficulty: 'Beginner',
+    icon: '💰',
+    code: `function fractionalKnapsack(items, capacity) {
+  items.sort((a, b) => (b.value / b.weight) - (a.value / a.weight));
+  let profit = 0;
+  for (let item of items) {
+    if (capacity >= item.weight) {
+      capacity -= item.weight;
+      profit += item.value;
+    } else {
+      profit += item.value * (capacity / item.weight);
+      break;
+    }
+  }
+  return profit;
+}
+// items = [{ value, weight }, ...]`,
+    tips: [
+      'Sort items by value/weight ratio',
+      'Take full item if space allows, else take a fraction',
+      'Greedy works because problem allows fractions'
+    ]
+  },
+  {
+    title: 'Job Sequencing Problem',
+    description: 'Schedule jobs to maximize total profit with given deadlines.',
+    category: 'Greedy',
+    difficulty: 'Beginner',
+    icon: '💰',
+    code: `function jobScheduling(jobs) {
+  jobs.sort((a, b) => b.profit - a.profit);
+  const maxDeadline = Math.max(...jobs.map(j => j.deadline));
+  const slots = Array(maxDeadline).fill(false);
+  let profit = 0;
+
+  for (let job of jobs) {
+    for (let j = job.deadline - 1; j >= 0; j--) {
+      if (!slots[j]) {
+        slots[j] = true;
+        profit += job.profit;
+        break;
+      }
+    }
+  }
+  return profit;
+}
+// jobs = [{ id, deadline, profit }]`,
+    tips: [
+      'Sort jobs by profit descending',
+      'Assign job to latest available slot before its deadline',
+      'Greedy works because we try to use least time for most profit'
+    ]
+  },
+  {
+    title: 'Maximize Number of Meetings in One Room',
+    description: 'Select maximum meetings that can happen without overlapping.',
+    category: 'Greedy',
+    difficulty: 'Beginner',
+    icon: '💰',
+    code: `function maxMeetings(start, end) {
+  const meetings = start.map((s, i) => ({ start: s, end: end[i] }));
+  meetings.sort((a, b) => a.end - b.end);
+
+  let count = 1, lastEnd = meetings[0].end;
+  for (let i = 1; i < meetings.length; i++) {
+    if (meetings[i].start > lastEnd) {
+      count++;
+      lastEnd = meetings[i].end;
+    }
+  }
+  return count;
+}`,
+    tips: [
+      'Same as activity selection logic',
+      'Sort by end times',
+      'Choose next meeting that starts after last meeting ends'
+    ]
+  }
+];
+
+
+
+const Greedy = () => {
+  return (
+    <div className="space-y-8">
+      <h1 className="text-3xl font-bold text-white mb-4">🚀 Greedy Basics</h1>
+      {notes.map((note, index) => (
+        <div key={index} className="bg-gradient-to-br from-[#1a1a2e] via-[#16213e] to-[#0f3460] text-white p-6 rounded-2xl shadow-md border border-gray-700/30">
+          <div className="flex items-center justify-between mb-4">
+            <div className="flex items-center gap-3">
+              <span className="text-2xl">{note.icon}</span>
+              <div>
+                <h2 className="text-xl font-semibold">{note.title}</h2>
+                <p className="text-sm text-gray-400 mt-1">{note.category} · {note.difficulty}</p>
+              </div>
+            </div>
+          </div>
+          <p className="text-gray-300 mb-4">{note.description}</p>
+
+          {note.code && (
+            <div className="mb-4">
+              <div className="text-sm font-medium text-purple-400 mb-1">Example Code:</div>
+              <pre className="bg-[#1e1e2f] text-sm text-emerald-500 rounded-md p-4 overflow-x-auto whitespace-pre-wrap">
+                <code>{note.code}</code>
+              </pre>
+            </div>
+          )}
+
+          {note.tips?.length > 0 && (
+            <div className="mt-2">
+              <div className="text-sm font-medium text-pink-400 mb-1">Tips:</div>
+              <ul className="list-disc list-inside space-y-1 text-sm text-gray-300">
+                {note.tips.map((tip, i) => (
+                  <li key={i}>👉 {tip}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Greedy;