Skip to content

Commit 6bd7d6d

Browse files
authored
Updates : fixed queue layouts fully
Feat : added circular queue layout update Fix : updated priority queue layout Fix : removed multiple queue Fix : fixed array implementation of queue Fix : added queue linked list implementation
2 parents 0f75c80 + db42873 commit 6bd7d6d

File tree

27 files changed

+1675
-3344
lines changed

27 files changed

+1675
-3344
lines changed

app/components/testimonial.jsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,12 @@ const TestimonialSection = () => {
5555
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.`,
5656
stars: 4,
5757
},
58+
{
59+
name: 'Kshitija Ghan',
60+
email: '@kshitijaghan24',
61+
review: `I got to know about Data Visualizer just a few days ago , yet i feel i learned a lot already . Great platform !!!`,
62+
stars: 5,
63+
},
5864
];
5965

6066
const [expandedReviews, setExpandedReviews] = useState({});

app/visualizer/page.jsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -210,12 +210,11 @@ const sections = [
210210
path: "/visualizer/queue/types/singleEnded",
211211
},
212212
{
213-
name: "Double Ended Queue (Deque)",
213+
name: "Double Ended Queue",
214214
path: "/visualizer/queue/types/deque",
215215
},
216216
{ name: "Circular Queue", path: "/visualizer/queue/types/circular" },
217217
{ name: "Priority Queue", path: "/visualizer/queue/types/priority" },
218-
{ name: "Multiple Queue", path: "/visualizer/queue/types/multiple" },
219218
],
220219
},
221220
{

app/visualizer/queue/implementation/array/animation.jsx

Lines changed: 0 additions & 39 deletions
This file was deleted.

app/visualizer/queue/implementation/array/codeblock.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -310,14 +310,14 @@ int main() {
310310
initial={{ opacity: 0, y: 20 }}
311311
animate={{ opacity: 1, y: 0 }}
312312
transition={{ duration: 0.3 }}
313-
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"
313+
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"
314314
>
315315
{/* Header */}
316-
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center p-4 bg-gray-50 dark:bg-gray-700/50 border-b border-gray-200 dark:border-gray-700">
316+
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center p-4 bg-gray-50 dark:bg-neutral-950 border-b border-gray-200 dark:border-gray-700">
317317
<div className="flex items-center mb-2 sm:mb-0">
318318
<FaCode className="text-blue-500 mr-2 text-lg" />
319319
<h3 className="text-lg font-semibold text-gray-800 dark:text-white">
320-
Queue Implementation (Enqueue & Dequeue)
320+
Implementation (Enqueue & Dequeue)
321321
</h3>
322322
</div>
323323

Lines changed: 147 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,58 @@
1+
"use client";
2+
import { useEffect, useState } from "react";
3+
14
const content = () => {
5+
const [theme, setTheme] = useState("light");
6+
const [mounted, setMounted] = useState(false);
7+
8+
useEffect(() => {
9+
const updateTheme = () => {
10+
const savedTheme = localStorage.getItem("theme") || "light";
11+
setTheme(savedTheme);
12+
};
13+
14+
updateTheme();
15+
setMounted(true);
16+
17+
window.addEventListener("storage", updateTheme);
18+
window.addEventListener("themeChange", updateTheme);
19+
20+
return () => {
21+
window.removeEventListener("storage", updateTheme);
22+
window.removeEventListener("themeChange", updateTheme);
23+
};
24+
}, []);
25+
226
const paragraph = [
327
`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.`,
428
`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.`,
529
`Queues are widely used in scenarios like printer job scheduling, call center systems, and network packet handling where order preservation is crucial.`,
630
];
731

832
const implementationSteps = [
9-
{ points: "Initialize an array of fixed size (for static implementation) or dynamic array" },
10-
{ points: "Initialize two pointers: front (for dequeue) and rear (for enqueue), both set to -1 initially" },
11-
{ points: "Implement boundary checks for overflow (full queue) and underflow (empty queue) conditions" },
12-
{ points: "For circular queue implementation, use modulo arithmetic for pointer updates" },
13-
];
14-
15-
const arrayImplementationCode = [
16-
{ code: "class Queue {" },
17-
{ code: " constructor(capacity) {" },
18-
{ code: " this.items = new Array(capacity);" },
19-
{ code: " this.capacity = capacity;" },
20-
{ code: " this.front = -1;" },
21-
{ code: " this.rear = -1;" },
22-
{ code: " this.size = 0;" },
23-
{ code: " }" },
24-
{ code: "" },
25-
{ code: " // Check if queue is full" },
26-
{ code: " isFull() {" },
27-
{ code: " return this.size === this.capacity;" },
28-
{ code: " }" },
29-
{ code: "" },
30-
{ code: " // Check if queue is empty" },
31-
{ code: " isEmpty() {" },
32-
{ code: " return this.size === 0;" },
33-
{ code: " }" },
33+
{
34+
points:
35+
"Initialize an array of fixed size (for static implementation) or dynamic array",
36+
},
37+
{
38+
points:
39+
"Initialize two pointers: front (for dequeue) and rear (for enqueue), both set to -1 initially",
40+
},
41+
{
42+
points:
43+
"Implement boundary checks for overflow (full queue) and underflow (empty queue) conditions",
44+
},
45+
{
46+
points:
47+
"For circular queue implementation, use modulo arithmetic for pointer updates",
48+
},
3449
];
3550

3651
const enqueueAlgorithm = [
37-
{ points: "Check if queue is full (if (rear == capacity - 1) for linear array)" },
52+
{
53+
points:
54+
"Check if queue is full (if (rear == capacity - 1) for linear array)",
55+
},
3856
{ points: "For empty queue, set both front and rear to 0" },
3957
{ points: "For circular queue: rear = (rear + 1) % capacity" },
4058
{ points: "Insert new element at items[rear]" },
@@ -51,22 +69,63 @@ const content = () => {
5169
];
5270

5371
const complexity = [
54-
{ points: "Enqueue Operation: O(1) - Amortized constant time for dynamic arrays" },
55-
{ points: "Dequeue Operation: O(1) - No shifting needed with pointer approach" },
72+
{
73+
points:
74+
"Enqueue Operation: O(1) - Amortized constant time for dynamic arrays",
75+
},
76+
{
77+
points:
78+
"Dequeue Operation: O(1) - No shifting needed with pointer approach",
79+
},
5680
{ points: "Peek Operation: O(1) - Direct access via front pointer" },
5781
{ points: "Space Usage: O(n) - Linear space for storing elements" },
5882
];
5983

6084
const prosCons = [
61-
{ points: "Pros: Simple implementation, cache-friendly (array elements contiguous in memory)" },
85+
{
86+
points:
87+
"Pros: Simple implementation, cache-friendly (array elements contiguous in memory)",
88+
},
6289
{ points: "Pros: Efficient O(1) operations with pointer tracking" },
6390
{ points: "Cons: Fixed size limitation in static array implementation" },
64-
{ points: "Cons: Wasted space in linear array implementation without circular approach" },
91+
{
92+
points:
93+
"Cons: Wasted space in linear array implementation without circular approach",
94+
},
6595
];
6696

6797
return (
68-
<main className="max-w-4xl mx-auto">
69-
<article className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
98+
<main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
99+
<div className="col-span-1">
100+
<div className="hidden md:block">
101+
{mounted && (
102+
<iframe
103+
key={theme}
104+
src={
105+
theme === "dark"
106+
? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
107+
: "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
108+
}
109+
width="100%"
110+
height="400"
111+
title="Daily DSA Challenge"
112+
></iframe>
113+
)}
114+
</div>
115+
<div className="flex justify-center">
116+
<span className="text-xs hidden md:block">
117+
Daily DSA Challenge by{" "}
118+
<a
119+
href="https://hw.glich.co/resources/daily"
120+
target="_blank"
121+
className="underline hover:text-blue-500 duration-300"
122+
>
123+
Hello World
124+
</a>
125+
</span>
126+
</div>
127+
</div>
128+
<article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
70129
{/* Queue Array Implementation Overview */}
71130
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
72131
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -89,31 +148,17 @@ const content = () => {
89148
<div className="prose dark:prose-invert max-w-none">
90149
<ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
91150
{implementationSteps.map((item, index) => (
92-
<li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
151+
<li
152+
key={index}
153+
className="text-gray-700 dark:text-gray-300 pl-2"
154+
>
93155
{item.points}
94156
</li>
95157
))}
96158
</ol>
97159
</div>
98160
</section>
99161

100-
{/* Basic Structure */}
101-
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
102-
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
103-
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
104-
Basic Class Structure
105-
</h1>
106-
<div className="prose dark:prose-invert max-w-none">
107-
<pre className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg overflow-x-auto">
108-
<code className="text-sm font-mono text-gray-800 dark:text-gray-200">
109-
{arrayImplementationCode.map((item, index) => (
110-
<div key={index}>{item.code}</div>
111-
))}
112-
</code>
113-
</pre>
114-
</div>
115-
</section>
116-
117162
{/* Enqueue Algorithm */}
118163
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
119164
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -123,16 +168,14 @@ const content = () => {
123168
<div className="prose dark:prose-invert max-w-none">
124169
<ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
125170
{enqueueAlgorithm.map((item, index) => (
126-
<li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
171+
<li
172+
key={index}
173+
className="text-gray-700 dark:text-gray-300 pl-2"
174+
>
127175
{item.points}
128176
</li>
129177
))}
130178
</ol>
131-
<div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
132-
<p className="text-gray-700 dark:text-gray-300 leading-relaxed">
133-
<strong>Circular Array Note:</strong> The modulo operation (<code className="font-mono">% capacity</code>) enables the circular behavior by wrapping the pointer to the start when it reaches the end.
134-
</p>
135-
</div>
136179
</div>
137180
</section>
138181

@@ -145,7 +188,10 @@ const content = () => {
145188
<div className="prose dark:prose-invert max-w-none">
146189
<ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
147190
{dequeueAlgorithm.map((item, index) => (
148-
<li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
191+
<li
192+
key={index}
193+
className="text-gray-700 dark:text-gray-300 pl-2"
194+
>
149195
{item.points}
150196
</li>
151197
))}
@@ -162,11 +208,14 @@ const content = () => {
162208
<div className="prose dark:prose-invert max-w-none">
163209
<ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
164210
{complexity.map((item, index) => (
165-
<li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
211+
<li
212+
key={index}
213+
className="text-gray-700 dark:text-gray-300 pl-2"
214+
>
166215
<span className="font-mono bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-sm">
167-
{item.points.split(':')[0]}:
216+
{item.points.split(":")[0]}:
168217
</span>
169-
<span className="ml-2">{item.points.split(':')[1]}</span>
218+
<span className="ml-2">{item.points.split(":")[1]}</span>
170219
</li>
171220
))}
172221
</ul>
@@ -182,7 +231,10 @@ const content = () => {
182231
<div className="prose dark:prose-invert max-w-none">
183232
<ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
184233
{prosCons.map((item, index) => (
185-
<li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
234+
<li
235+
key={index}
236+
className="text-gray-700 dark:text-gray-300 pl-2"
237+
>
186238
{item.points}
187239
</li>
188240
))}
@@ -193,8 +245,10 @@ const content = () => {
193245
{/* Additional Info */}
194246
<section className="p-6">
195247
<div className="prose dark:prose-invert max-w-none">
196-
<div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
197-
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Practical Considerations</h3>
248+
<div className="px-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
249+
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
250+
Practical Considerations
251+
</h3>
198252
<p className="text-gray-700 dark:text-gray-300 leading-relaxed">
199253
{paragraph[1]}
200254
</p>
@@ -205,8 +259,37 @@ const content = () => {
205259
</div>
206260
</section>
207261
</article>
262+
263+
{/* Mobile iframe at bottom */}
264+
<div className="block md:hidden w-full">
265+
{mounted && (
266+
<iframe
267+
key={theme}
268+
src={
269+
theme === "dark"
270+
? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
271+
: "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
272+
}
273+
width="100%"
274+
height="320"
275+
title="Daily DSA Challenge"
276+
></iframe>
277+
)}
278+
<div className="flex justify-center pb-8">
279+
<span className="text-xs">
280+
Daily DSA Challenge by{" "}
281+
<a
282+
href="https://hw.glich.co/resources/daily"
283+
target="_blank"
284+
className="underline hover:text-blue-500 duration-300"
285+
>
286+
Hello World
287+
</a>
288+
</span>
289+
</div>
290+
</div>
208291
</main>
209292
);
210293
};
211294

212-
export default content;
295+
export default content;

0 commit comments

Comments
 (0)