diff --git a/app/components/testimonial.jsx b/app/components/testimonial.jsx index b413625..a8bdfc3 100755 --- a/app/components/testimonial.jsx +++ b/app/components/testimonial.jsx @@ -55,6 +55,12 @@ const TestimonialSection = () => { review: `The breadth of algorithms covered is impressive. From basic sorting to advanced graph algorithms, everything is presented in an accessible way. The only suggestion I have is to add more real-world application examples for each algorithm.`, stars: 4, }, + { + name: 'Kshitija Ghan', + email: '@kshitijaghan24', + review: `I got to know about Data Visualizer just a few days ago , yet i feel i learned a lot already . Great platform !!!`, + stars: 5, + }, ]; const [expandedReviews, setExpandedReviews] = useState({}); diff --git a/app/visualizer/page.jsx b/app/visualizer/page.jsx index 25ef304..133467a 100755 --- a/app/visualizer/page.jsx +++ b/app/visualizer/page.jsx @@ -210,12 +210,11 @@ const sections = [ path: "/visualizer/queue/types/singleEnded", }, { - name: "Double Ended Queue (Deque)", + name: "Double Ended Queue", path: "/visualizer/queue/types/deque", }, { name: "Circular Queue", path: "/visualizer/queue/types/circular" }, { name: "Priority Queue", path: "/visualizer/queue/types/priority" }, - { name: "Multiple Queue", path: "/visualizer/queue/types/multiple" }, ], }, { diff --git a/app/visualizer/queue/implementation/array/animation.jsx b/app/visualizer/queue/implementation/array/animation.jsx deleted file mode 100755 index dd91eb7..0000000 --- a/app/visualizer/queue/implementation/array/animation.jsx +++ /dev/null @@ -1,39 +0,0 @@ -"use client"; -import Footer from "@/app/components/footer"; -import ExploreOther from "@/app/components/ui/exploreOther"; -import Content from "@/app/visualizer/queue/implementation/array/content"; -import CodeBlock from "@/app/visualizer/queue/implementation/array/codeblock"; -import GoBackButton from "@/app/components/ui/goback"; -import BackToTop from "@/app/components/ui/backtotop"; - -const InfixToPostfixVisualizer = () => { - return ( -
-
- - { /* go back block here */} -
- -
- - { /* main logic here */} -

- Queue Implementation Using Array -

-
- -

- - -
-
- -
- ); -}; - -export default InfixToPostfixVisualizer; diff --git a/app/visualizer/queue/implementation/array/codeblock.jsx b/app/visualizer/queue/implementation/array/codeblock.jsx index d9ab2ca..487c04f 100755 --- a/app/visualizer/queue/implementation/array/codeblock.jsx +++ b/app/visualizer/queue/implementation/array/codeblock.jsx @@ -310,14 +310,14 @@ int main() { initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }} - className="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-colors duration-300" + className="bg-white dark:bg-neutral-950 rounded-xl shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-colors duration-300" > {/* Header */} -
+

- Queue Implementation (Enqueue & Dequeue) + Implementation (Enqueue & Dequeue)

diff --git a/app/visualizer/queue/implementation/array/content.jsx b/app/visualizer/queue/implementation/array/content.jsx index 4070562..f43bde2 100755 --- a/app/visualizer/queue/implementation/array/content.jsx +++ b/app/visualizer/queue/implementation/array/content.jsx @@ -1,4 +1,28 @@ +"use client"; +import { useEffect, useState } from "react"; + const content = () => { + const [theme, setTheme] = useState("light"); + const [mounted, setMounted] = useState(false); + + useEffect(() => { + const updateTheme = () => { + const savedTheme = localStorage.getItem("theme") || "light"; + setTheme(savedTheme); + }; + + updateTheme(); + setMounted(true); + + window.addEventListener("storage", updateTheme); + window.addEventListener("themeChange", updateTheme); + + return () => { + window.removeEventListener("storage", updateTheme); + window.removeEventListener("themeChange", updateTheme); + }; + }, []); + const paragraph = [ `Implementing a Queue using an array is a fundamental approach where we use a fixed-size or dynamic array to store elements while maintaining FIFO order. The array implementation requires careful handling of front and rear pointers to efficiently enqueue and dequeue elements.`, `In a circular array implementation, we treat the array as circular to maximize space utilization. When either pointer reaches the end of the array, it wraps around to the beginning.`, @@ -6,35 +30,29 @@ const content = () => { ]; const implementationSteps = [ - { points: "Initialize an array of fixed size (for static implementation) or dynamic array" }, - { points: "Initialize two pointers: front (for dequeue) and rear (for enqueue), both set to -1 initially" }, - { points: "Implement boundary checks for overflow (full queue) and underflow (empty queue) conditions" }, - { points: "For circular queue implementation, use modulo arithmetic for pointer updates" }, - ]; - - const arrayImplementationCode = [ - { code: "class Queue {" }, - { code: " constructor(capacity) {" }, - { code: " this.items = new Array(capacity);" }, - { code: " this.capacity = capacity;" }, - { code: " this.front = -1;" }, - { code: " this.rear = -1;" }, - { code: " this.size = 0;" }, - { code: " }" }, - { code: "" }, - { code: " // Check if queue is full" }, - { code: " isFull() {" }, - { code: " return this.size === this.capacity;" }, - { code: " }" }, - { code: "" }, - { code: " // Check if queue is empty" }, - { code: " isEmpty() {" }, - { code: " return this.size === 0;" }, - { code: " }" }, + { + points: + "Initialize an array of fixed size (for static implementation) or dynamic array", + }, + { + points: + "Initialize two pointers: front (for dequeue) and rear (for enqueue), both set to -1 initially", + }, + { + points: + "Implement boundary checks for overflow (full queue) and underflow (empty queue) conditions", + }, + { + points: + "For circular queue implementation, use modulo arithmetic for pointer updates", + }, ]; const enqueueAlgorithm = [ - { points: "Check if queue is full (if (rear == capacity - 1) for linear array)" }, + { + points: + "Check if queue is full (if (rear == capacity - 1) for linear array)", + }, { points: "For empty queue, set both front and rear to 0" }, { points: "For circular queue: rear = (rear + 1) % capacity" }, { points: "Insert new element at items[rear]" }, @@ -51,22 +69,63 @@ const content = () => { ]; const complexity = [ - { points: "Enqueue Operation: O(1) - Amortized constant time for dynamic arrays" }, - { points: "Dequeue Operation: O(1) - No shifting needed with pointer approach" }, + { + points: + "Enqueue Operation: O(1) - Amortized constant time for dynamic arrays", + }, + { + points: + "Dequeue Operation: O(1) - No shifting needed with pointer approach", + }, { points: "Peek Operation: O(1) - Direct access via front pointer" }, { points: "Space Usage: O(n) - Linear space for storing elements" }, ]; const prosCons = [ - { points: "Pros: Simple implementation, cache-friendly (array elements contiguous in memory)" }, + { + points: + "Pros: Simple implementation, cache-friendly (array elements contiguous in memory)", + }, { points: "Pros: Efficient O(1) operations with pointer tracking" }, { points: "Cons: Fixed size limitation in static array implementation" }, - { points: "Cons: Wasted space in linear array implementation without circular approach" }, + { + points: + "Cons: Wasted space in linear array implementation without circular approach", + }, ]; return ( -
-
+
+
+
+ {mounted && ( + + )} +
+
+ + Daily DSA Challenge by{" "} + + Hello World + + +
+
+
{/* Queue Array Implementation Overview */}

@@ -89,7 +148,10 @@ const content = () => {
    {implementationSteps.map((item, index) => ( -
  1. +
  2. {item.points}
    3. ))} @@ -97,23 +159,6 @@ const content = () => {

- {/* Basic Structure */} -
-

- - Basic Class Structure -

-
- 
-              
-                {arrayImplementationCode.map((item, index) => (
-                  
{item.code}

-                ))}
-              
-
-
-
- {/* Enqueue Algorithm */}

@@ -123,16 +168,14 @@ const content = () => {
    {enqueueAlgorithm.map((item, index) => ( -
  1. +
  2. {item.points}
    3. ))}
-
-

- Circular Array Note: The modulo operation (% capacity) enables the circular behavior by wrapping the pointer to the start when it reaches the end. -

-

@@ -145,7 +188,10 @@ const content = () => {
    {dequeueAlgorithm.map((item, index) => ( -
  1. +
  2. {item.points}
    3. ))} @@ -162,11 +208,14 @@ const content = () => {
      {complexity.map((item, index) => ( -
    • +
    • - {item.points.split(':')[0]}: + {item.points.split(":")[0]}: - {item.points.split(':')[1]} + {item.points.split(":")[1]}
      • ))}
    @@ -182,7 +231,10 @@ const content = () => {
      {prosCons.map((item, index) => ( -
    • +
    • {item.points}
      • ))} @@ -193,8 +245,10 @@ const content = () => { {/* Additional Info */}
      -
      -

      Practical Considerations

      +
      +

      + Practical Considerations +

      {paragraph[1]}

      @@ -205,8 +259,37 @@ const content = () => {
+ + {/* Mobile iframe at bottom */} +
+ {mounted && ( + + )} +
+ + Daily DSA Challenge by{" "} + + Hello World + + +
+
); }; -export default content; \ No newline at end of file +export default content; diff --git a/app/visualizer/queue/implementation/array/page.jsx b/app/visualizer/queue/implementation/array/page.jsx index 34910f0..7e8452c 100755 --- a/app/visualizer/queue/implementation/array/page.jsx +++ b/app/visualizer/queue/implementation/array/page.jsx @@ -1,33 +1,104 @@ -import Animation from "@/app/visualizer/queue/implementation/array/animation"; import Navbar from "@/app/components/navbarinner"; +import Breadcrumbs from "@/app/components/ui/Breadcrumbs"; +import ArticleActions from "@/app/components/ui/ArticleActions"; +import Content from "@/app/visualizer/queue/implementation/array/content"; +import Code from "@/app/visualizer/queue/implementation/array/codeblock"; +import ModuleCard from "@/app/components/ui/ModuleCard"; +import { MODULE_MAPS } from "@/lib/modulesMap"; +import ExploreOther from '@/app/components/ui/exploreOther'; +import Footer from '@/app/components/footer'; +import BackToTop from '@/app/components/ui/backtotop'; export const metadata = { - title: 'Queue Implementation Using Array | Visualize Queue Operations in JS, C, Python, Java', - description: 'Learn Queue implementation using arrays with real-time visualizations and code examples in JavaScript, C, Python, and Java. Understand how Enqueue and Dequeue work step-by-step without quizzes. Ideal for DSA beginners.', + title: + "Queue Implementation Using Array | Visualize Queue Operations in JS, C, Python, Java", + description: + "Learn Queue implementation using arrays with real-time visualizations and code examples in JavaScript, C, Python, and Java. Understand how Enqueue and Dequeue work step-by-step without quizzes. Ideal for DSA beginners.", keywords: [ - 'Queue Implementation', - 'Queue using Array', - 'Enqueue Dequeue Operations', - 'Queue Data Structure', - 'Queue Visualization', - 'DSA Queue Tutorial', - 'Queue in JavaScript', - 'Queue in C', - 'Queue in Python', - 'Queue in Java', - 'Learn Queue', - 'Interactive Queue Visualizer', - 'Array based Queue', - 'DSA for Beginners', + "Queue Implementation", + "Queue using Array", + "Enqueue Dequeue Operations", + "Queue Data Structure", + "Queue Visualization", + "DSA Queue Tutorial", + "Queue in JavaScript", + "Queue in C", + "Queue in Python", + "Queue in Java", + "Learn Queue", + "Interactive Queue Visualizer", + "Array based Queue", + "DSA for Beginners", ], - robots: 'index, follow', + robots: "index, follow", + openGraph: { + images: [ + { + url: "/og/queue/queueArray.png", + width: 1200, + height: 630, + alt: "Implementation of Queue using Array Algorithm Visualization", + }, + ], + }, }; export default function Page() { + const paths = [ + { name: "Home", href: "/" }, + { name: "Visualizer", href: "/visualizer" }, + { name: "Queue using Array", href: "" }, + ]; + return ( <> - - +
+ +
+ +
+
+
+ +
+
+
+

+ Queue +

+
+

+ Using Array +

+ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + +
); -}; \ No newline at end of file +} diff --git a/app/visualizer/queue/implementation/linkedList/animation.jsx b/app/visualizer/queue/implementation/linkedList/animation.jsx deleted file mode 100755 index 89c1253..0000000 --- a/app/visualizer/queue/implementation/linkedList/animation.jsx +++ /dev/null @@ -1,39 +0,0 @@ -"use client"; -import Footer from "@/app/components/footer"; -import ExploreOther from "@/app/components/ui/exploreOther"; -import Content from "@/app/visualizer/queue/implementation/linkedList/content"; -import CodeBlock from "@/app/visualizer/queue/implementation/linkedList/codeBlock"; -import GoBackButton from "@/app/components/ui/goback"; -import BackToTop from "@/app/components/ui/backtotop"; - -const InfixToPostfixVisualizer = () => { - return ( -
-
- - { /* go back block here */} -
- -
- - { /* main logic here */} -

- Queue Implementation Using Linked List -

-
- -

- - -
-
- -
-
- ); -}; - -export default InfixToPostfixVisualizer; diff --git a/app/visualizer/queue/implementation/linkedList/codeBlock.jsx b/app/visualizer/queue/implementation/linkedList/codeBlock.jsx index 8c17153..3d0a1b3 100755 --- a/app/visualizer/queue/implementation/linkedList/codeBlock.jsx +++ b/app/visualizer/queue/implementation/linkedList/codeBlock.jsx @@ -350,14 +350,14 @@ int main() { initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }} - className="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-colors duration-300" + className="bg-white dark:bg-neutral-950 rounded-xl shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-colors duration-300" > {/* Header */} -
+

- Queue Implementation (Enqueue & Dequeue) + Implementation Enqueue & Dequeue

diff --git a/app/visualizer/queue/implementation/linkedList/content.jsx b/app/visualizer/queue/implementation/linkedList/content.jsx index 06ceb35..abdbbed 100755 --- a/app/visualizer/queue/implementation/linkedList/content.jsx +++ b/app/visualizer/queue/implementation/linkedList/content.jsx @@ -1,4 +1,28 @@ +"use client"; +import { useEffect, useState } from "react"; + const content = () => { + const [theme, setTheme] = useState("light"); + const [mounted, setMounted] = useState(false); + + useEffect(() => { + const updateTheme = () => { + const savedTheme = localStorage.getItem("theme") || "light"; + setTheme(savedTheme); + }; + + updateTheme(); + setMounted(true); + + window.addEventListener("storage", updateTheme); + window.addEventListener("themeChange", updateTheme); + + return () => { + window.removeEventListener("storage", updateTheme); + window.removeEventListener("themeChange", updateTheme); + }; + }, []); + const paragraph = [ `Implementing a Queue using a linked list provides dynamic memory allocation and efficient insertion/removal operations. Unlike array implementation, linked list queues don't have fixed capacity limitations and can grow dynamically as needed.`, `Each node in the linked list contains the data and a pointer to the next node. The front pointer points to the first node (for dequeue), while the rear pointer points to the last node (for enqueue).`, @@ -13,26 +37,6 @@ const content = () => { { points: "Maintain proper pointer connections during operations" }, ]; - const llImplementationCode = [ - { code: "class Node {" }, - { code: " constructor(data) {" }, - { code: " this.data = data;" }, - { code: " this.next = null;" }, - { code: " }" }, - { code: "}" }, - { code: "" }, - { code: "class LinkedListQueue {" }, - { code: " constructor() {" }, - { code: " this.front = null;" }, - { code: " this.rear = null;" }, - { code: " this.size = 0;" }, - { code: " }" }, - { code: "" }, - { code: " isEmpty() {" }, - { code: " return this.front === null;" }, - { code: " }" }, - ]; - const enqueueAlgorithm = [ { points: "Create a new node with the given data" }, { points: "If queue is empty, set both front and rear to the new node" }, @@ -64,17 +68,38 @@ const content = () => { { points: "Cons: Not cache-friendly (nodes may be scattered in memory)" }, ]; - const visualization = [ - { step: "Initial empty queue:", state: "front → null, rear → null" }, - { step: "Enqueue(10):", state: "front → [10|•] → null, rear → [10|•]" }, - { step: "Enqueue(20):", state: "front → [10|•] → [20|•] → null, rear → [20|•]" }, - { step: "Enqueue(30):", state: "front → [10|•] → [20|•] → [30|•] → null, rear → [30|•]" }, - { step: "Dequeue():", state: "Returns 10, front → [20|•] → [30|•] → null, rear → [30|•]" }, - ]; - return ( -
-
+
+
+
+ {mounted && ( + + )} +
+
+ + Daily DSA Challenge by{" "} + + Hello World + + +
+
+
{/* Queue Linked List Implementation Overview */}

@@ -105,28 +130,6 @@ const content = () => {

- {/* Basic Structure */} -
-

- - Basic Class Structure -

-
- 
-              
-                {llImplementationCode.map((item, index) => (
-                  
{item.code}

-                ))}
-              
-
-
-

- Note: Each node contains the data and a reference to the next node. The queue maintains references to both ends (front and rear) for efficient operations. -

-
-
-
- {/* Enqueue Algorithm */}

@@ -141,23 +144,6 @@ const content = () => { ))} -
-
-
-
Before Enqueue:
-
-
front → [A|•] → [B|•] → null
-
-
-
-
After Enqueue(C):
-
-
front → [A|•] → [B|•] → [C|•] → null
-
(rear updated)
-
-
-
-

@@ -175,49 +161,6 @@ const content = () => { ))} -
-
-
-
Before Dequeue:
-
-
front → [A|•] → [B|•] → [C|•] → null
-
-
-
-
After Dequeue():
-
-
front → [B|•] → [C|•] → null
-
(returns A)
-
-
-
-
-
- - - {/* Visualization */} -
-

- - Operation Visualization -

-
- - - - - - - - - {visualization.map((item, index) => ( - - - - - ))} - -
StepQueue State
{item.step}{item.state}
@@ -261,7 +204,7 @@ const content = () => { {/* Additional Info */}
-
+

When to Use Linked List Queue

{paragraph[2]} @@ -275,6 +218,35 @@ const content = () => {

+ + {/* Mobile iframe at bottom */} +
+ {mounted && ( + + )} +
+ + Daily DSA Challenge by{" "} + + Hello World + + +
+
); }; diff --git a/app/visualizer/queue/implementation/linkedList/page.jsx b/app/visualizer/queue/implementation/linkedList/page.jsx index 1b206bc..3af6eb3 100755 --- a/app/visualizer/queue/implementation/linkedList/page.jsx +++ b/app/visualizer/queue/implementation/linkedList/page.jsx @@ -1,34 +1,105 @@ -import Animation from "@/app/visualizer/queue/implementation/linkedList/animation"; import Navbar from "@/app/components/navbarinner"; +import Breadcrumbs from "@/app/components/ui/Breadcrumbs"; +import ArticleActions from "@/app/components/ui/ArticleActions"; +import Content from "@/app/visualizer/queue/implementation/linkedList/content"; +import Code from "@/app/visualizer/queue/implementation/linkedList/codeBlock"; +import ModuleCard from "@/app/components/ui/ModuleCard"; +import { MODULE_MAPS } from "@/lib/modulesMap"; +import ExploreOther from "@/app/components/ui/exploreOther"; +import Footer from "@/app/components/footer"; +import BackToTop from "@/app/components/ui/backtotop"; export const metadata = { - title: 'Queue Implementation Using Linked List | Visualize Queue in JS, C, Python, Java', - description: 'Explore Queue implementation using Linked List with real-time visualizations and code examples in JavaScript, C, Python, and Java. Understand how Enqueue and Dequeue work in a dynamic memory structure. Perfect for DSA beginners and interview prep.', + title: + "Queue Implementation Using Linked List | Visualize Queue in JS, C, Python, Java", + description: + "Explore Queue implementation using Linked List with real-time visualizations and code examples in JavaScript, C, Python, and Java. Understand how Enqueue and Dequeue work in a dynamic memory structure. Perfect for DSA beginners and interview prep.", keywords: [ - 'Queue Implementation', - 'Queue using Linked List', - 'Enqueue Dequeue Operations', - 'Queue Data Structure', - 'Linked List Queue', - 'Queue Visualization', - 'DSA Queue Tutorial', - 'Queue in JavaScript', - 'Queue in C', - 'Queue in Python', - 'Queue in Java', - 'Learn Queue', - 'Interactive DSA Tools', - 'DSA with Linked List', - 'DSA for Beginners', + "Queue Implementation", + "Queue using Linked List", + "Enqueue Dequeue Operations", + "Queue Data Structure", + "Linked List Queue", + "Queue Visualization", + "DSA Queue Tutorial", + "Queue in JavaScript", + "Queue in C", + "Queue in Python", + "Queue in Java", + "Learn Queue", + "Interactive DSA Tools", + "DSA with Linked List", + "DSA for Beginners", ], - robots: 'index, follow', + robots: "index, follow", + openGraph: { + images: [ + { + url: "/og/queue/queueLinkedList.png", + width: 1200, + height: 630, + alt: "Implementation of Queue using Linked List Algorithm Visualization", + }, + ], + }, }; export default function Page() { + const paths = [ + { name: "Home", href: "/" }, + { name: "Visualizer", href: "/visualizer" }, + { name: "Queue using Linked List", href: "" }, + ]; + return ( <> - - +
+ +
+ +
+
+
+ +
+
+
+

+ Queue +

+
+

+ Using Linked List +

+ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + +
-
- -