diff --git a/src/components/Dsa/Array.jsx b/src/components/Dsa/Array.jsx
new file mode 100644
index 0000000..4465c8c
--- /dev/null
+++ b/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 (
+
+
🚀 Array Basics
+ {notes.map((note, index) => (
+
+
+
+ {note.icon}
+
+
{note.title}
+
{note.category} · {note.difficulty}
+
+
+
+
{note.description}
+
+ {note.code && (
+
+
Example Code:
+
+ {note.code}
+
+
+ )}
+
+ {note.tips?.length > 0 && (
+
+
Tips:
+
+ {note.tips.map((tip, i) => (
+
👉 {tip}
+ ))}
+
+
+ )}
+
+ ))}
+
+ );
+};
+
+export default Array;
diff --git a/src/components/Dsa/Greedy.jsx b/src/components/Dsa/Greedy.jsx
new file mode 100644
index 0000000..df89e1f
--- /dev/null
+++ b/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 (
+
+
🚀 Greedy Basics
+ {notes.map((note, index) => (
+
+
+
+ {note.icon}
+
+
{note.title}
+
{note.category} · {note.difficulty}
+
+
+
+
{note.description}
+
+ {note.code && (
+
+
Example Code:
+
+ {note.code}
+
+
+ )}
+
+ {note.tips?.length > 0 && (
+
+
Tips:
+
+ {note.tips.map((tip, i) => (
+
👉 {tip}
+ ))}
+
+
+ )}
+
+ ))}
+
+ );
+};
+
+export default Greedy;
diff --git a/src/components/Dsa/Queue.jsx b/src/components/Dsa/Queue.jsx
new file mode 100644
index 0000000..f49ad38
--- /dev/null
+++ b/src/components/Dsa/Queue.jsx
@@ -0,0 +1,215 @@
+// components/backend/Express.jsx
+import React from 'react';
+
+const notes = [
+ {
+ title: 'What is a Queue?',
+ description: 'A Queue is a linear data structure that follows the First In First Out (FIFO) principle.',
+ category: 'Queue',
+ difficulty: 'Beginner',
+ icon: '🚶',
+ code: `// Simple queue using array
+const queue = [];
+queue.push(1); // enqueue
+queue.push(2);
+console.log(queue.shift()); // dequeue => 1`,
+ tips: [
+ 'Insertion at the rear (push)',
+ 'Deletion from the front (shift)',
+ 'Used in scheduling, BFS, etc.'
+ ]
+ },
+ {
+ title: 'Implement Queue Class',
+ description: 'Create a queue class with enqueue, dequeue, front, and isEmpty methods.',
+ category: 'Queue',
+ difficulty: 'Beginner',
+ icon: '🚶',
+ code: `class Queue {
+ constructor() {
+ this.items = [];
+ }
+
+ enqueue(item) {
+ this.items.push(item);
+ }
+
+ dequeue() {
+ return this.items.shift();
+ }
+
+ front() {
+ return this.items[0];
+ }
+
+ isEmpty() {
+ return this.items.length === 0;
+ }
+}`,
+ tips: [
+ 'Use array methods: push + shift',
+ 'Can use linked list for O(1) dequeue',
+ 'Useful in many real-world processes'
+ ]
+ },
+ {
+ title: 'Reverse a Queue',
+ description: 'Reverse the order of elements in a queue using recursion or stack.',
+ category: 'Queue',
+ difficulty: 'Beginner',
+ icon: '🚶',
+ code: `function reverseQueue(queue) {
+ if (queue.length === 0) return;
+ const front = queue.shift();
+ reverseQueue(queue);
+ queue.push(front);
+}
+// Example: let q = [1, 2, 3]; reverseQueue(q);`,
+ tips: [
+ 'Recursive approach is elegant',
+ 'Can also use a stack to reverse',
+ 'Don’t mutate the queue outside function'
+ ]
+ },
+ {
+ title: 'Queue using Two Stacks',
+ description: 'Simulate queue behavior using two stacks (for enqueue and dequeue).',
+ category: 'Queue',
+ difficulty: 'Beginner',
+ icon: '🚶',
+ code: `class MyQueue {
+ constructor() {
+ this.stack1 = [];
+ this.stack2 = [];
+ }
+
+ enqueue(x) {
+ this.stack1.push(x);
+ }
+
+ dequeue() {
+ if (!this.stack2.length) {
+ while (this.stack1.length) {
+ this.stack2.push(this.stack1.pop());
+ }
+ }
+ return this.stack2.pop();
+ }
+}`,
+ tips: [
+ 'Dequeue from stack2',
+ 'Transfer elements only when needed',
+ 'Amortized O(1) for operations'
+ ]
+ },
+ {
+ title: 'Circular Queue',
+ description: 'A circular queue uses a fixed-size array and wraps around to reuse space.',
+ category: 'Queue',
+ difficulty: 'Beginner',
+ icon: '🚶',
+ code: `class CircularQueue {
+ constructor(size) {
+ this.queue = new Array(size);
+ this.size = size;
+ this.front = -1;
+ this.rear = -1;
+ }
+
+ enqueue(value) {
+ if ((this.rear + 1) % this.size === this.front) return 'Full';
+ if (this.front === -1) this.front = 0;
+ this.rear = (this.rear + 1) % this.size;
+ this.queue[this.rear] = value;
+ }
+
+ dequeue() {
+ if (this.front === -1) return 'Empty';
+ const temp = this.queue[this.front];
+ if (this.front === this.rear) this.front = this.rear = -1;
+ else this.front = (this.front + 1) % this.size;
+ return temp;
+ }
+}`,
+ tips: [
+ 'Efficient use of space',
+ 'Check full and empty conditions carefully',
+ 'Used in round-robin scheduling'
+ ]
+ },
+ {
+ title: 'Queue in BFS (Breadth First Search)',
+ description: 'Queue is used in BFS to process nodes level by level.',
+ category: 'Queue',
+ difficulty: 'Beginner',
+ icon: '🚶',
+ code: `function bfs(graph, start) {
+ const visited = new Set();
+ const queue = [start];
+
+ while (queue.length) {
+ const node = queue.shift();
+ if (!visited.has(node)) {
+ console.log(node);
+ visited.add(node);
+ for (let neighbor of graph[node]) {
+ queue.push(neighbor);
+ }
+ }
+ }
+}
+// graph: adjacency list`,
+ tips: [
+ 'Core of BFS algorithm',
+ 'Processes nodes level-wise',
+ 'Avoid revisiting using Set'
+ ]
+ }
+];
+
+
+
+
+const Queue = () => {
+ return (
+
+
🚀 Queue Basics
+ {notes.map((note, index) => (
+
+
+
+ {note.icon}
+
+
{note.title}
+
{note.category} · {note.difficulty}
+
+
+
+
{note.description}
+
+ {note.code && (
+
+
Example Code:
+
+ {note.code}
+
+
+ )}
+
+ {note.tips?.length > 0 && (
+
+
Tips:
+
+ {note.tips.map((tip, i) => (
+
👉 {tip}
+ ))}
+
+
+ )}
+
+ ))}
+
+ );
+};
+
+export default Queue;
diff --git a/src/components/Dsa/Stack.jsx b/src/components/Dsa/Stack.jsx
new file mode 100644
index 0000000..2b2169b
--- /dev/null
+++ b/src/components/Dsa/Stack.jsx
@@ -0,0 +1,197 @@
+// components/backend/Express.jsx
+import React from 'react';
+
+const notes = [
+ {
+ title: 'What is a Stack?',
+ description: 'A Stack is a linear data structure that follows the Last In First Out (LIFO) principle.',
+ category: 'Stack',
+ difficulty: 'Beginner',
+ icon: '📚',
+ code: `// Simple stack using array
+const stack = [];
+stack.push(1); // push
+stack.push(2);
+console.log(stack.pop()); // pop => 2`,
+ tips: [
+ 'Last element inserted is the first to be removed',
+ 'Use push and pop with arrays in JS',
+ 'Used in undo operations, parsing, etc.'
+ ]
+ },
+ {
+ title: 'Implement Stack Class',
+ description: 'Create a stack class with push, pop, top, and isEmpty methods.',
+ category: 'Stack',
+ difficulty: 'Beginner',
+ icon: '📚',
+ code: `class Stack {
+ constructor() {
+ this.items = [];
+ }
+
+ push(element) {
+ this.items.push(element);
+ }
+
+ pop() {
+ return this.items.pop();
+ }
+
+ top() {
+ return this.items[this.items.length - 1];
+ }
+
+ isEmpty() {
+ return this.items.length === 0;
+ }
+}`,
+ tips: [
+ 'Backed by an array',
+ 'Last element is always on the top',
+ 'Track size with .length'
+ ]
+ },
+ {
+ title: 'Valid Parentheses',
+ description: 'Use stack to check if a string has balanced parentheses.',
+ category: 'Stack',
+ difficulty: 'Beginner',
+ icon: '📚',
+ code: `function isValid(s) {
+ const stack = [];
+ const map = { ')': '(', '}': '{', ']': '[' };
+ for (let char of s) {
+ if (['(', '{', '['].includes(char)) {
+ stack.push(char);
+ } else {
+ if (stack.pop() !== map[char]) return false;
+ }
+ }
+ return stack.length === 0;
+}`,
+ tips: [
+ 'Push opening brackets',
+ 'Pop and match with closing brackets',
+ 'Stack should be empty at the end'
+ ]
+ },
+ {
+ title: 'Reverse a String using Stack',
+ description: 'Reverse characters of a string using stack push/pop operations.',
+ category: 'Stack',
+ difficulty: 'Beginner',
+ icon: '📚',
+ code: `function reverseString(str) {
+ const stack = str.split('');
+ let reversed = '';
+ while (stack.length) {
+ reversed += stack.pop();
+ }
+ return reversed;
+}`,
+ tips: [
+ 'Stack reverses order automatically',
+ 'Can also use array.reverse(), but this shows logic',
+ 'Great for interview questions'
+ ]
+ },
+ {
+ title: 'Evaluate Postfix Expression',
+ description: 'Evaluate postfix (Reverse Polish Notation) expressions using stack.',
+ category: 'Stack',
+ difficulty: 'Beginner',
+ icon: '📚',
+ code: `function evaluatePostfix(exp) {
+ const stack = [];
+ for (let token of exp) {
+ if (!isNaN(token)) {
+ stack.push(Number(token));
+ } else {
+ let b = stack.pop(), a = stack.pop();
+ if (token === '+') stack.push(a + b);
+ if (token === '-') stack.push(a - b);
+ if (token === '*') stack.push(a * b);
+ if (token === '/') stack.push(a / b);
+ }
+ }
+ return stack[0];
+}
+// Example: ["2", "3", "+", "4", "*"] => ((2+3)*4) = 20`,
+ tips: [
+ 'Operands go into stack',
+ 'Pop two values for each operator',
+ 'Evaluate and push result back'
+ ]
+ },
+ {
+ title: 'Next Greater Element',
+ description: 'Find the next greater element for each element in an array using a stack.',
+ category: 'Stack',
+ difficulty: 'Beginner',
+ icon: '📚',
+ code: `function nextGreater(nums) {
+ const stack = [];
+ const res = Array(nums.length).fill(-1);
+
+ for (let i = 0; i < nums.length; i++) {
+ while (stack.length && nums[i] > nums[stack[stack.length - 1]]) {
+ res[stack.pop()] = nums[i];
+ }
+ stack.push(i);
+ }
+ return res;
+}
+// Input: [4, 5, 2, 10] => Output: [5, 10, 10, -1]`,
+ tips: [
+ 'Use stack to track indices',
+ 'Pop while top element is smaller',
+ 'Classic use case of monotonic stack'
+ ]
+ }
+];
+
+
+const Stack = () => {
+ return (
+
+
🚀 Stack Basics
+ {notes.map((note, index) => (
+
+
+
+ {note.icon}
+
+
{note.title}
+
{note.category} · {note.difficulty}
+
+
+
+
{note.description}
+
+ {note.code && (
+
+
Example Code:
+
+ {note.code}
+
+
+ )}
+
+ {note.tips?.length > 0 && (
+
+
Tips:
+
+ {note.tips.map((tip, i) => (
+
👉 {tip}
+ ))}
+
+
+ )}
+
+ ))}
+
+ );
+};
+
+export default Stack;
diff --git a/src/components/Dsa/String.jsx b/src/components/Dsa/String.jsx
new file mode 100644
index 0000000..1a8c82f
--- /dev/null
+++ b/src/components/Dsa/String.jsx
@@ -0,0 +1,154 @@
+// components/backend/Express.jsx
+import React from 'react';
+
+const notes = [
+ {
+ title: 'What is a String?',
+ description: 'A string is a sequence of characters used to represent text. In most languages, it is treated like an array of characters.',
+ category: 'String',
+ difficulty: 'Beginner',
+ icon: '🧵',
+ code: `const str = "hello";
+console.log(str[1]); // 'e'`,
+ tips: [
+ 'Strings are immutable in JavaScript',
+ 'Use indexing to access characters',
+ 'Use string methods like slice, substr, etc.'
+ ]
+ },
+ {
+ title: 'Reverse a String',
+ description: 'Reverse the characters of a string using split, reverse, and join.',
+ category: 'String',
+ difficulty: 'Beginner',
+ icon: '🧵',
+ code: `function reverseString(str) {
+ return str.split('').reverse().join('');
+}
+console.log(reverseString("hello")); // "olleh"`,
+ tips: [
+ 'Split converts string to array',
+ 'Reverse the array',
+ 'Join combines it back into a string'
+ ]
+ },
+ {
+ title: 'Check for Palindrome',
+ description: 'A string is a palindrome if it reads the same forward and backward.',
+ category: 'String',
+ difficulty: 'Beginner',
+ icon: '🧵',
+ code: `function isPalindrome(str) {
+ const reversed = str.split('').reverse().join('');
+ return str === reversed;
+}
+console.log(isPalindrome("madam")); // true`,
+ tips: [
+ 'Use string reverse to compare',
+ 'Ignore case or spaces if needed',
+ 'Used in many coding interviews'
+ ]
+ },
+ {
+ title: 'Count Vowels in a String',
+ description: 'Count how many vowels (a, e, i, o, u) exist in a given string.',
+ category: 'String',
+ difficulty: 'Beginner',
+ icon: '🧵',
+ code: `function countVowels(str) {
+ const vowels = 'aeiouAEIOU';
+ let count = 0;
+ for (let char of str) {
+ if (vowels.includes(char)) count++;
+ }
+ return count;
+}`,
+ tips: [
+ 'Check against both upper and lowercase',
+ 'Use includes() for clean checking',
+ 'Loop over each character'
+ ]
+ },
+ {
+ title: 'Character Frequency Count',
+ description: 'Find the frequency of each character in a string.',
+ category: 'String',
+ difficulty: 'Beginner',
+ icon: '🧵',
+ code: `function charFrequency(str) {
+ const freq = {};
+ for (let char of str) {
+ freq[char] = (freq[char] || 0) + 1;
+ }
+ return freq;
+}
+console.log(charFrequency("hello"));`,
+ tips: [
+ 'Use an object to store frequencies',
+ 'Initialize count if not present',
+ 'Useful for anagrams and hashing'
+ ]
+ },
+ {
+ title: 'Check Anagrams',
+ description: 'Two strings are anagrams if they have the same characters in any order.',
+ category: 'String',
+ difficulty: 'Beginner',
+ icon: '🧵',
+ code: `function isAnagram(str1, str2) {
+ const normalize = s => s.split('').sort().join('');
+ return normalize(str1) === normalize(str2);
+}
+console.log(isAnagram("listen", "silent")); // true`,
+ tips: [
+ 'Sort and compare both strings',
+ 'Ignore case and whitespace if needed',
+ 'Important in interview questions'
+ ]
+ }
+];
+
+
+const String = () => {
+ return (
+