Skip to content

Commit 2f8a7f8

Browse files
RahulScriptedRahulScripted
committed
60% done
1 parent 8c96024 commit 2f8a7f8

File tree

9 files changed

+321
-65
lines changed

9 files changed

+321
-65
lines changed

‎src/App.jsx

Lines changed: 50 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,60 @@
1-
import { Route, Routes } from "react-router-dom"
2-
import Footer from "./components/Footer/Footer"
3-
import Navbar from "./components/Navbar/Navbar"
4-
import Home from "./pages/Home"
5-
import PrivacyPolicy from "./components/Policy/privacyPolicy"
6-
import TermsOfUse from "./components/Usecase/TermsOfUse"
7-
import BuyMeCoffee from "./components/BuyCoffee/BuyMeCoffee"
8-
import Sorting from "./components/Algorithm/Sorting/Sorting"
9-
import BubbleSort from "./components/Algorithm/BubbleSort/BubbleSort"
10-
import SelectionSort from "./components/Algorithm/SelectionSort/SelectionSort"
11-
import InsertionSort from "./components/Algorithm/InsertionSort/InsertionSort"
12-
import MergeSort from "./components/Algorithm/MergeSort/MergeSort"
13-
import QuickSort from "./components/Algorithm/QuickSort/QuickSort"
14-
import RadixSort from "./components/Algorithm/RadixSort/RadixSort"
15-
import CountingSort from "./components/Algorithm/CountingSort/CountingSort"
16-
import ScrollToTop from "./components/ScrollToTop/ScrollToTop"
17-
1+
import { Route, Routes } from "react-router-dom";
2+
import Footer from "./components/Footer/Footer";
3+
import Navbar from "./components/Navbar/Navbar";
4+
import Home from "./pages/Home";
5+
import PrivacyPolicy from "./components/Policy/privacyPolicy";
6+
import TermsOfUse from "./components/Usecase/TermsOfUse";
7+
import BuyMeCoffee from "./components/BuyCoffee/BuyMeCoffee";
8+
import Sorting from "./components/Algorithm/Sorting/Sorting";
9+
import BubbleSort from "./components/Algorithm/BubbleSort/BubbleSort";
10+
import SelectionSort from "./components/Algorithm/SelectionSort/SelectionSort";
11+
import InsertionSort from "./components/Algorithm/InsertionSort/InsertionSort";
12+
import MergeSort from "./components/Algorithm/MergeSort/MergeSort";
13+
import QuickSort from "./components/Algorithm/QuickSort/QuickSort";
14+
import RadixSort from "./components/Algorithm/RadixSort/RadixSort";
15+
import CountingSort from "./components/Algorithm/CountingSort/CountingSort";
16+
import ScrollToTop from "./components/ScrollToTop/ScrollToTop";
17+
import { useEffect, useState } from "react";
18+
import PreLoader from "./components/Preloader/PreLoader";
1819

1920
function App() {
21+
// Hooks
22+
const [loading, setLoading] = useState(true);
23+
useEffect(() => {
24+
setTimeout(() => setLoading(false), 5000);
25+
}, []);
2026

2127
return (
2228
<div className="relative flex flex-col gap-20 bg-black text-white w-full min-h-screen p-5 sm:p-7 md:p-10">
29+
{/* For Preloading */}
30+
{loading ? (
31+
<PreLoader />
32+
) : (
33+
<>
34+
<div className="fixed z-10 bottom-5 left-5">
35+
<BuyMeCoffee />
36+
</div>
2337

24-
{/* Coffee */}
25-
<div className="fixed z-10 bottom-5 left-5">
26-
<BuyMeCoffee />
27-
</div>
28-
29-
{/* Scroll to Top */}
30-
<ScrollToTop />
38+
<ScrollToTop />
3139

32-
<Navbar />
33-
<Routes>
34-
<Route path="/" element={<Home />} />
35-
<Route path="/bubble-sort" element={<BubbleSort />} />
36-
<Route path="/selection-sort" element={<SelectionSort />} />
37-
<Route path="/insertion-sort" element={<InsertionSort />} />
38-
<Route path="/merge-sort" element={<MergeSort />} />
39-
<Route path="/quick-sort" element={<QuickSort />} />
40-
<Route path="/radix-sort" element={<RadixSort />} />
41-
<Route path="/counting-sort" element={<CountingSort />} />
42-
<Route path="/privacy-policy" element={<PrivacyPolicy />} />
43-
<Route path="/terms-of-service" element={<TermsOfUse />} />
44-
</Routes>
45-
<Footer />
40+
<Navbar />
41+
<Routes>
42+
<Route path="/" element={<Home />} />
43+
<Route path="/bubble-sort" element={<BubbleSort />} />
44+
<Route path="/selection-sort" element={<SelectionSort />} />
45+
<Route path="/insertion-sort" element={<InsertionSort />} />
46+
<Route path="/merge-sort" element={<MergeSort />} />
47+
<Route path="/quick-sort" element={<QuickSort />} />
48+
<Route path="/radix-sort" element={<RadixSort />} />
49+
<Route path="/counting-sort" element={<CountingSort />} />
50+
<Route path="/privacy-policy" element={<PrivacyPolicy />} />
51+
<Route path="/terms-of-service" element={<TermsOfUse />} />
52+
</Routes>
53+
<Footer />
54+
</>
55+
)}
4656
</div>
47-
)
57+
);
4858
}
4959

50-
export default App
60+
export default App;

‎src/components/Algorithm/Sorting/Sorting.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -369,7 +369,7 @@ const Sorting = ({
369369
type="monotone"
370370
dataKey="worstCase"
371371
stroke="#EF4444"
372-
name="Worst Case (O(n²))"
372+
name="Worst Case"
373373
strokeWidth={2}
374374
/>
375375

@@ -378,7 +378,7 @@ const Sorting = ({
378378
type="monotone"
379379
dataKey="averageCase"
380380
stroke="#8B5CF6"
381-
name="Average Case (O(n²))"
381+
name="Average Case"
382382
strokeWidth={2}
383383
/>
384384

@@ -387,7 +387,7 @@ const Sorting = ({
387387
type="monotone"
388388
dataKey="bestCase"
389389
stroke="#10B981"
390-
name="Best Case (O(n))"
390+
name="Best Case"
391391
strokeWidth={2}
392392
/>
393393
</LineChart>
@@ -441,7 +441,7 @@ const Sorting = ({
441441
type="monotone"
442442
dataKey="complexity"
443443
stroke="#3B82F6"
444-
name="Space Complexity O(1)"
444+
name="Space Complexity"
445445
strokeWidth={2}
446446
/>
447447
</LineChart>

‎src/components/BuyCoffee/BuyMeCoffee.jsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,19 @@ const BuyMeCoffee = () => {
44
return (
55
<div className="relative flex items-center justify-center">
66
{/* Animated Border */}
7-
<div className="relative z-10 flex w-[225px] h-[50px] cursor-pointer items-center overflow-hidden rounded-lg p-[1.5px]">
8-
<div className="animate-rotate absolute inset-0 h-full w-full rounded-full bg-[conic-gradient(#772FEB_20deg,transparent_120deg)]"></div>
7+
<div className="relative z-10 flex w-[150px] sm:w-[225px] h-[50px] cursor-pointer items-center overflow-hidden rounded-lg p-[1.5px]">
8+
<div className="animate-rotate absolute inset-0 h-full w-full rounded-full bg-[conic-gradient(#BD5FFF_20deg,transparent_120deg)]"></div>
99

1010
{/* Buy Me a Coffee Button */}
1111
<div className="relative z-20 flex w-full h-full items-center justify-center rounded-lg bg-[#111]">
1212
<a
13-
href="https://www.buymeacoffee.com/invite/RahulGoswami"
13+
href="https://www.buymeacoffee.com/RahulGoswami"
1414
target="_blank"
1515
rel="noopener noreferrer"
1616
className="text-white font-bold"
1717
>
18-
☕ Buy Me a Coffee
18+
☕ <span className="hidden sm:inline">Buy Me a Coffee</span>
19+
<span className="sm:hidden">Support</span>
1920
</a>
2021
</div>
2122
</div>

‎src/components/Comparison/ComparisonBetweenAlgorithm.jsx

Lines changed: 129 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,136 @@
1-
import React from 'react'
1+
import { Check, X } from "lucide-react";
2+
import React from "react";
23

34
const ComparisonBetweenAlgorithm = () => {
5+
// Sorting algorithm -> data
6+
const dataOfSortingAlgo = [
7+
{
8+
name: "Bubble Sort",
9+
best: "O(n)",
10+
avg: "O(n²)",
11+
worst: "O(n²)",
12+
space: "O(1)",
13+
stable: "Yes",
14+
uses: "Simple educational purposes",
15+
},
16+
17+
{
18+
name: "Selection Sort",
19+
best: "O(n²)",
20+
avg: "O(n²)",
21+
worst: "O(n²)",
22+
space: "O(1)",
23+
stable: "No",
24+
uses: "When memory writes are costly",
25+
},
26+
{
27+
name: "Insertion Sort",
28+
best: "O(n)",
29+
avg: "O(n²)",
30+
worst: "O(n²)",
31+
space: "O(1)",
32+
stable: "Yes",
33+
uses: "Small datasets, nearly sorted lists",
34+
},
35+
{
36+
name: "Merge Sort",
37+
best: "O(n log n)",
38+
avg: "O(n log n)",
39+
worst: "O(n log n)",
40+
space: "O(n)",
41+
stable: "Yes",
42+
uses: "Large datasets, linked lists",
43+
},
44+
{
45+
name: "Quick Sort",
46+
best: "O(n log n)",
47+
avg: "O(n log n)",
48+
worst: "O(n²)",
49+
space: "O(log n)",
50+
stable: "No",
51+
uses: "General-purpose sorting",
52+
},
53+
{
54+
name: "Radix Sort",
55+
best: "O(nk)",
56+
avg: "O(nk)",
57+
worst: "O(nk)",
58+
space: "O(n + k)",
59+
stable: "Yes",
60+
uses: "Sorting large numbers",
61+
},
62+
{
63+
name: "Counting Sort",
64+
best: "O(n + k)",
65+
avg: "O(n + k)",
66+
worst: "O(n + k)",
67+
space: "O(k)",
68+
stable: "Yes",
69+
uses: "Small range of integers",
70+
},
71+
];
72+
73+
474
return (
5-
<div className='flex flex-col items-center justify-center w-full gap-10'>
75+
<div className="flex flex-col items-center justify-center w-full gap-5">
76+
77+
{/* Title */}
78+
<h1 className="bg-gradient-to-r from-violet-500 via-violet-300 to-violet-700 text-3xl text-center md:text-5xl bg-clip-text text-transparent h-auto md:h-[100px] font-bold">
79+
Comparison
80+
</h1>
81+
82+
{/* Table */}
83+
<div className="w-full overflow-x-auto">
84+
<table className="w-full text-center border-collapse border border-gray-300">
85+
86+
{/* Head of the table */}
87+
<thead>
88+
<tr>
89+
<th className="border border-gray-400 px-4 py-2">Sorting Technique</th>
90+
<th className="border border-gray-400 px-4 py-2">Time Complexity(Best)</th>
91+
<th className="border border-gray-400 px-4 py-2">Time Complexity(Average)</th>
92+
<th className="border border-gray-400 px-4 py-2">Time Complexity(Worst)</th>
93+
<th className="border border-gray-400 px-4 py-2">Space Complexity</th>
94+
<th className="border border-gray-400 px-4 py-2">Stable</th>
95+
<th className="border border-gray-400 px-4 py-2">Use Cases</th>
96+
</tr>
97+
</thead>
98+
99+
{/* Body of the table */}
100+
<tbody>
101+
{dataOfSortingAlgo.map((algo,idx) => (
102+
<tr key={idx} className='border border-gray-300 text-sm md:text-base'>
103+
104+
{/* Name of the algorithm */}
105+
<td className='border border-gray-400 px-4 py-2'>{algo.name}</td>
106+
107+
{/* Time Complexity -> Best */}
108+
<td className='border border-gray-400 px-4 py-2'>{algo.best}</td>
109+
110+
{/* Time Complexity -> Average */}
111+
<td className='border border-gray-400 px-4 py-2'>{algo.avg}</td>
112+
113+
{/* Time Complexity -> Worst */}
114+
<td className='border border-gray-400 px-4 py-2'>{algo.worst}</td>
115+
116+
{/* Space Complexity */}
117+
<td className='border border-gray-400 px-4 py-2'>{algo.space}</td>
6118

7-
{/* Title */}
8-
<h1 className="bg-gradient-to-r from-violet-500 via-violet-300 to-violet-700 text-3xl text-center md:text-5xl bg-clip-text text-transparent h-auto md:h-[100px] font-bold">Comparison</h1>
119+
{/* Stability */}
120+
<td className=' px-4 py-2 flex items-center justify-center'>
121+
{algo.stable === "Yes" ? <Check className="text-green-500 w-5 h-12" /> : <X className="text-red-500 w-5 h-12" />
122+
}
123+
</td>
9124

125+
{/* Use Cases */}
126+
<td className='border border-gray-400 px-4 py-2'>{algo.uses}</td>
127+
</tr>
128+
))}
129+
</tbody>
130+
</table>
131+
</div>
10132
</div>
11-
)
12-
}
133+
);
134+
};
13135

14-
export default ComparisonBetweenAlgorithm
136+
export default ComparisonBetweenAlgorithm;

‎src/components/Footer/Footer.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const Footer = () => {
2525
</Link>
2626
</div>
2727
</div>
28-
<div className="mt-2 flex justify-center space-x-4 group">
28+
<div className="mt-2 mb-[60px] md:mb-[20px] flex justify-center space-x-4 group">
2929
{/* GitHub Link */}
3030
<a
3131
href="https://github.com/RahulScripted"

‎src/components/Hero/HeroSection.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const HeroSection = () => {
1818

1919
{/* Paragraph */}
2020
<p className="w-full md:max-w-5xl text-sm md:text-base text-gray-300">
21-
Explore, understand, and compare different sorting algorithms with real-time animations. Adjust speed, size, and see how each algorithm works step by step! Gain deeper insights with performance comparisons, visualize sorting complexities, and interact with customizable datasets to improve your understanding of algorithm efficiency!
21+
Explore, understand, and compare different sorting algorithms with real-time animations. Adjust speed, size, and see how each algorithm works step by step! <span className="hidden sm:inline">Gain deeper insights with performance comparisons, visualize sorting complexities, and interact with customizable datasets to improve your understanding of algorithm efficiency!</span>
2222
</p>
2323
</div>
2424
);

‎src/components/Policy/privacyPolicy.jsx

Lines changed: 66 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,72 @@
1+
import { ArrowLeft } from "lucide-react";
12
import React from "react";
3+
import { useNavigate } from "react-router-dom";
4+
5+
const PrivacyPolicy = () => {
6+
7+
const navigate = useNavigate()
28

3-
const privacyPolicy = () => {
49
return (
5-
<div>Privacy policy</div>
10+
<div className="w-full bg-black absolute top-0 left-0 min-h-screen p-5 md:p-10">
11+
12+
{/* Back Button */}
13+
<ArrowLeft onClick={() => navigate('/')} className="text-white w-6 h-6 md:w-8 md:h-8 rounded-full hover:bg-red-500 cursor-pointer absolute top-2 md:top-5 left-2 md:left-5 p-1" />
14+
15+
16+
{/* All Privacy Policy */}
17+
<h1 className="mb-10 w-full text-center bg-gradient-to-r from-violet-700 via-violet-300 to-violet-700 text-transparent bg-clip-text text-3xl md:text-4xl h-auto md:h-[70px] font-bold">Privacy Policy</h1>
18+
19+
<p>
20+
Welcome to <span className="text-center bg-gradient-to-r from-violet-700 via-violet-300 to-violet-700 text-transparent bg-clip-text font-bold text-xl">SortLab</span>. Your privacy is important to us. This Privacy Policy explains how we collect, use, and protect your information when you use our sorting visualization web application.
21+
</p>
22+
23+
<h2 className="mt-5 font-semibold text-2xl">1. Information We Do Not Collect</h2>
24+
<p className="mt-2 text-sm text-gray-300">
25+
We respect your privacy and do not collect, store, or share any personal information when you use our Service. Our sorting visualizer operates without requiring sign-ups, logins, or any form of user authentication.
26+
</p>
27+
28+
<h2 className="mt-5 font-semibold text-2xl">2. Non-Personal Data Collection</h2>
29+
<p className="mt-2 text-sm text-gray-300">
30+
While we do not collect personally identifiable information, we may use cookies or analytics tools to gather non-personal usage data, including:
31+
</p>
32+
<ol className="pl-5">
33+
<li className="mt-1">1. Browser type and version</li>
34+
<li className="mt-1">2. Device type (desktop, mobile, etc.)</li>
35+
<li className="mt-1">3. Time spent on the website</li>
36+
<li className="mt-1">4. Interactions with the sorting visualizer</li>
37+
</ol>
38+
<p className="mt-2 text-sm text-gray-300">
39+
This data is used solely for improving the performance and functionality of our Service.
40+
</p>
41+
42+
<h2 className="mt-5 font-semibold text-2xl">3. Cookies and Tracking Technologies</h2>
43+
<p className="mt-2 text-sm text-gray-300">
44+
We may use cookies or similar technologies to enhance user experience. You can disable cookies through your browser settings, but this may affect certain functionalities of the Service.
45+
</p>
46+
47+
<h2 className="mt-5 font-semibold text-2xl">4. Third-Party Links</h2>
48+
<p className="mt-2 text-sm text-gray-300">
49+
Our website may contain links to third-party websites or services. We are not responsible for the privacy practices or content of these external sites. We encourage you to review their privacy policies before interacting with them.
50+
</p>
51+
52+
<h2 className="mt-5 font-semibold text-2xl">5. Data Security</h2>
53+
<p className="mt-2 text-sm text-gray-300">
54+
We take reasonable measures to ensure the security of our website and the non-personal data we collect. However, since we do not store personal data, there is no risk of unauthorized access to such
55+
information.
56+
</p>
57+
58+
<h2 className="mt-5 font-semibold text-2xl">6. Changes to This Privacy Policy</h2>
59+
<p className="mt-2 text-sm text-gray-300">
60+
We may update this Privacy Policy from time to time. Any changes will be posted on this page with an updated effective date. Continued use of our Service after modifications constitute acceptance of the revised policy.
61+
</p>
62+
63+
<h2 className="mt-5 font-semibold text-2xl">7. Contact Us</h2>
64+
<p className="mt-2 mb-[70px] text-sm text-gray-300">
65+
If you have any questions about this Privacy Policy, please contact us at: <span className="text-blue-500 hover:underline cursor-pointer">goswami.rahul1002@gmail.com</span>. By using our sorting visualizer, you agree to this Privacy Policy. If
66+
you do not agree, please discontinue use of the Service.
67+
</p>
68+
</div>
669
);
770
};
871

9-
export default privacyPolicy;
72+
export default PrivacyPolicy;

0 commit comments

Comments
 (0)