Skip to content

Commit b31b61c

Browse files
author
Ross
committed
update license and readme
0 parents  commit b31b61c

114 files changed

Lines changed: 15852 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.gitignore‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
.yarn/install-state.gz
8+
9+
# testing
10+
/coverage
11+
12+
# next.js
13+
/.next/
14+
/out/
15+
16+
# production
17+
/build
18+
19+
# misc
20+
.DS_Store
21+
*.pem
22+
23+
# debug
24+
npm-debug.log*
25+
yarn-debug.log*
26+
yarn-error.log*
27+
28+
# local env files
29+
.env*.local
30+
31+
# vercel
32+
.vercel
33+
34+
# typescript
35+
*.tsbuildinfo
36+
next-env.d.ts
37+
38+
.vercel

‎.gitlab-ci.yml‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
stages:
2+
- test
3+
4+
test:
5+
image: node:latest
6+
script:
7+
- npm install
8+
- npm test

‎LICENSE‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
MIT License
2+
3+
Copyright (c) 2026 Cheng-Yuan King
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, subject to the following conditions:
10+
11+
The above copyright notice and this permission notice shall be included in all
12+
copies or substantial portions of the Software.
13+
14+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
20+
SOFTWARE.

‎README.md‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
# Algorithm Visualizer – Sorting and Pathfinding
2+
3+
Algorithm Visualizer is an **interactive web application** that demonstrates classic **sorting algorithms** and **pathfinding algorithms** through real-time visualizations designed to support teaching and learning core Computer Science concepts.
4+
5+
The project helps users understand how algorithms behave step by step by combining animated visual feedback with adjustable controls such as **data size, speed, and grid obstacles**.
6+
7+
---
8+
9+
## Key Features
10+
11+
✔ Interactive sorting algorithm visualizations
12+
✔ Dijkstra pathfinding visualization on a grid
13+
✔ Adjustable dataset size and animation speed
14+
✔ Obstacle placement with configurable start and end nodes
15+
✔ Real-time algorithm animation for learning and demonstration
16+
✔ Responsive web interface
17+
✔ Unit testing with Jest
18+
✔ End-to-end testing with Cypress
19+
20+
---
21+
22+
## Technologies Used
23+
24+
- **Next.js**
25+
- **TypeScript**
26+
- **Tailwind CSS**
27+
- **Jest**
28+
- **Cypress**
29+
- **React-based UI architecture**
30+
31+
---
32+
33+
## Project Architecture
34+
35+
The application is structured into separate components for **UI rendering, algorithm logic, animation control, and testing**.
36+
37+
### Sorting Visualizer
38+
39+
- Bubble Sort
40+
- Selection Sort
41+
- Insertion Sort
42+
- Merge Sort
43+
- Heap Sort
44+
- Quick Sort
45+
46+
### Pathfinding Visualizer
47+
48+
- Dijkstra’s Algorithm
49+
- Adjustable start and end points
50+
- Grid obstacle placement
51+
- Interactive control panel
52+
53+
### Testing
54+
55+
- **Jest** for unit testing
56+
- **Cypress** for end-to-end browser testing
57+
58+
---
59+
60+
## Live Demo
61+
62+
**Live Demo:**
63+
[Algorithm Visualizer on Vercel](https://algorithm-visualizer-q15cskgbv-rosscyking1115s-projects.vercel.app/)
64+
65+
---
66+
67+
## Project Structure
68+
69+
```text
70+
algorithm-visualizer
71+
│
72+
├── app/
73+
├── components/
74+
├── cypress/
75+
├── public/
76+
│ └── screenshots/
77+
│ ├── home.png
78+
│ ├── sorting.png
79+
│ └── pathfinding.png
80+
├── tests/
81+
├── utils/
82+
├── README.md
83+
├── package.json
84+
└── LICENSE
85+
```
86+
87+
---
88+
89+
## Application Screenshots
90+
91+
### Home / Control Interface
92+
93+
![Home](public/screenshots/home.png)
94+
95+
### Sorting Visualization
96+
97+
![Sorting](public/screenshots/sorting.png)
98+
99+
### Pathfinding Visualization
100+
101+
![Pathfinding](public/screenshots/pathfinding.png)
102+
103+
---
104+
105+
## Running the Project
106+
107+
### Requirements
108+
109+
- Node.js **18+**
110+
- npm
111+
112+
### Setup
113+
114+
Clone the repository:
115+
116+
```bash
117+
git clone https://github.com/rosscyking1115/algorithm-visualizer.git
118+
cd algorithm-visualizer
119+
```
120+
121+
Install dependencies:
122+
123+
```bash
124+
npm install
125+
```
126+
127+
Run the development server:
128+
129+
```bash
130+
npm run dev
131+
```
132+
133+
Then open:
134+
135+
```text
136+
http://localhost:3000
137+
```
138+
139+
---
140+
141+
## Future Improvements
142+
143+
- Add more pathfinding algorithms such as **A\*** and **BFS**
144+
- Add algorithm complexity explanations directly in the interface
145+
- Improve mobile responsiveness
146+
- Add sound or step-by-step playback mode
147+
- Support custom array input and maze generation
148+
149+
---
150+
151+
## Skills Demonstrated
152+
153+
- TypeScript
154+
- Next.js
155+
- Frontend component architecture
156+
- Algorithm visualization
157+
- UI state management
158+
- Web-based interactive design
159+
- Unit testing
160+
- End-to-end testing
161+
162+
---
163+
164+
## Notes
165+
166+
This project was originally developed as part of undergraduate study in **Computer Science at Queen’s University Belfast**, and has been refined and presented here as a portfolio project focused on **interactive algorithm education and frontend software engineering**.
167+
168+
---
169+
170+
## Author
171+
172+
**Cheng-Yuan King**

‎app/Pathfinding/page.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
"use client";
2+
import React, { useState } from "react";
3+
import PathFinding from "@/pathFindingAlgorithms/main";
4+
5+
const SearchingPage = () => {
6+
return (
7+
<div className="container mx-auto px-4 py-8">
8+
<h1 className="text-5xl font-bold mb-8">Pathfinding Visualizer</h1>
9+
<PathFinding />
10+
</div>
11+
);
12+
};
13+
14+
export default SearchingPage;

‎app/Sorting/page.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
"use client";
2+
3+
import React, { useState } from "react";
4+
import Main from "@/sortingAlgorithms/main";
5+
6+
export default function Home() {
7+
return (
8+
<div className="container mx-auto px-4 py-8">
9+
<h1 className="text-5xl font-bold mb-8">Sorting Visualizer</h1>
10+
<Main />
11+
</div>
12+
);
13+
}

‎app/favicon 2.ico‎

25.3 KB
Binary file not shown.

‎app/favicon.ico‎

25.3 KB
Binary file not shown.

‎app/globals 2.css‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
* {
6+
margin: 0;
7+
padding: 0;
8+
box-sizing: border-box;
9+
scroll-behavior: smooth;
10+
}
11+
12+
@layer base {
13+
body {
14+
@apply font-sans;
15+
}
16+
}
17+
18+
@layer utilities {
19+
.hover-glow:hover {
20+
text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
21+
}
22+
23+
.hover-bold:hover {
24+
font-weight: 700;
25+
}
26+
}
27+
28+
@keyframes moveFog {
29+
0% {
30+
background-position: 0% 50%;
31+
}
32+
100% {
33+
background-position: 200% 50%;
34+
}
35+
}
36+
37+
.foggy-banner {
38+
position: relative;
39+
overflow: hidden;
40+
}
41+
42+
.foggy-banner::before {
43+
content: '';
44+
position: absolute;
45+
top: 0;
46+
left: 0;
47+
width: 100%;
48+
height: 100%;
49+
background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
50+
animation: moveFog 30s linear infinite;
51+
}
52+

‎app/globals.css‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
* {
6+
margin: 0;
7+
padding: 0;
8+
box-sizing: border-box;
9+
scroll-behavior: smooth;
10+
}
11+
12+
@layer base {
13+
body {
14+
@apply font-sans;
15+
}
16+
}
17+
18+
@layer utilities {
19+
.hover-glow:hover {
20+
text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
21+
}
22+
23+
.hover-bold:hover {
24+
font-weight: 700;
25+
}
26+
}
27+
28+
@keyframes moveFog {
29+
0% {
30+
background-position: 0% 50%;
31+
}
32+
100% {
33+
background-position: 200% 50%;
34+
}
35+
}
36+
37+
.foggy-banner {
38+
position: relative;
39+
overflow: hidden;
40+
}
41+
42+
.foggy-banner::before {
43+
content: '';
44+
position: absolute;
45+
top: 0;
46+
left: 0;
47+
width: 100%;
48+
height: 100%;
49+
background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
50+
animation: moveFog 30s linear infinite;
51+
}
52+

0 commit comments

Comments
 (0)