Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/0xabdulkhaliq/knight-travails

Experience the Art of Knight traversal, a blend of Graphs and BFS Algorithms
https://github.com/0xabdulkhaliq/knight-travails

0xabdulkhalid algorithms animation bfs css graph html javascript webpack

Last synced: 12 days ago
JSON representation

Experience the Art of Knight traversal, a blend of Graphs and BFS Algorithms

Awesome Lists containing this project

README

        




Knight Travails


**❝** Find the optimal path for your Knight's journey. **❞**




❯  
View Demo
 · 
Report Bug
 · 
Request Feature
  ❮




Mobile Preview


## Installation

> [!NOTE]
> If you prefer not to install it locally, you can also access the [live demo](https://knight-travails.vercel.app/) version

To set up the Knight Travails Application locally, follow these steps:

1. Clone the GitHub repository to your local machine:

```bash
git clone https://github.com/0xabdulkhalid/knight-travails.git
```

2. Navigate to the project's directory:

```bash
cd knight-travails
```

3. Install the project's dependencies using npm:

```bash
npm install
```

4. Build the project to bundle JavaScript, minify HTML and CSS, and move images:

```bash
npm run build
```

5. The build files can be found on `dist` (distribution) directory.


## Features

- **Graph Theory:** The project's core algorithm is rooted in graph theory, leveraging graphs to represent and solve the knight's traversal problem.

- **BFS Algorithm:** The BFS (Breadth-First Search) algorithm is utilized to find the optimal path for the knight's journey.

- **Adjacency List:** An adjacency list data structure is employed to efficiently represent graph connections, facilitating the pathfinding process.

- **Manual Knight Placement:** Users can manually position the knight on the chessboard, setting the starting point for the traversal.

- **Random Knight Placement:** For added intrigue, the project provides the option to randomly place the knight on the chessboard.

- **Select End Point:** Users can designate the destination point for the knight's journey, initiating a search for the best path.

- **Animated Travail**: Experience the smooth and realistic knight movement as it traverses the chessboard in a true L-shape, making the knight's journey a visually captivating experience.

- **Clear Functionality:** Users can effortlessly clear the chessboard, resetting the knight's position and path, enabling fresh exploration of scenarios.

- **Seamless Theme Switching**: Enjoy a light or dark theme at your convenience, and your preferred theme is automatically saved in local storage for a consistent experience across visits.

- **ES6 Modules**: JavaScript code is organized into ES6 modules for improved maintainability.

- **Webpack Bundling**: Optimize resource loading by bundling JavaScript modules with Webpack.

- **Optimized for Any Screen**: Effortlessly adapt to screens of all sizes, ensuring a flawless experience on both desktop and mobile devices.

- **Cross-Browser Compatibility**: Ensure smooth performance across various web browsers.

- **Code Formatting Guidelines**: The project adheres to coding standards and maintains code consistency by implementing ESLint along with Prettier for code formatting.


## Pagespeed Insights Score

- ||
| :-----: |
| Overall Score 99.4%, Average of Mobile and Desktop
[ Mobile devices score is only shown below ] |
| |
| Scoreboard |
| |
| Check out [**Pagespeed Insights**](https://pagespeed.web.dev/analysis/https-knight-travails-vercel-app/zkarwfm4q3?form_factor=mobile) to get live score |
||


## Built With

![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)   ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)   ![JavaScript](https://img.shields.io/badge/ES6%20Modules%20-%23F7DF1E.svg?style=for-the-badge&logo=javascript&logoColor=black)   ![Webpack](https://img.shields.io/badge/webpack-%238DD6F9.svg?style=for-the-badge&logo=webpack&logoColor=black)   ![html-minifier](https://img.shields.io/badge/html%20minifier-A90533?style=for-the-badge&logo=html5&logoColor=white)   ![CSS3](https://img.shields.io/badge/css_minifier-2C2D72.svg?style=for-the-badge&logo=css3&logoColor=white)


## Tools Used



![NPM](https://img.shields.io/badge/npm-CB3837?style=for-the-badge&logo=npm&logoColor=white)   ![Google](https://img.shields.io/badge/google-DA4437?style=for-the-badge&logo=google&logoColor=white)   ![Prettier](https://img.shields.io/badge/prettier-1A2C34?style=for-the-badge&logo=prettier&logoColor=F7BA3E)   ![Eslint](https://img.shields.io/badge/eslint-3A33D1?style=for-the-badge&logo=eslint&logoColor=white)   ![Visual Studio Code](https://img.shields.io/badge/VS%20Code-0078d7.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white)   ![Git](https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white)   ![Figma](https://img.shields.io/badge/Figma-F24E1E?style=for-the-badge&logo=figma&logoColor=white)


## Let's Connect 👋


Linkedin Profile
  


mail/
  


Github Profile