Skip to content

NatanProtector/algorithm-viewer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Algorithm Viewer

Algorithm Viewer is an interactive application designed to visualize famous computer science algorithms such as Dijkstra, Depth-First Search (DFS), and Breadth-First Search (BFS). The app features an intuitive interface that lets users apply these algorithms to custom-built data structures, making it both educational and engaging.

This project showcases my frontend development skills and experiments with clean coding practices, adhering to the SOLID methodology.


Features

🎯 Algorithm Visualization

  • Visualize classic algorithms like:
    • Dijkstra: Find the shortest path in weighted graphs.
    • DFS: Explore nodes deeply in a depth-wise manner.
    • BFS: Traverse nodes level by level.

🛠 Custom Data Structures

  • Build and customize your own data structures.
  • Apply algorithms dynamically and observe their operations in real-time.

🖥 Clean, User-Friendly Interface

  • Designed for simplicity, making it easy to explore complex concepts.
  • Interactive controls for seamless user experience.

Motivation

🌟 Experimentation

The primary focus during development was to:

  • Explore frontend architectures and organize complex features.
  • Practice writing clean, maintainable code using SOLID principles.

📚 Educational Utility

This app doubles as a tool for students and educators to understand and teach algorithms through hands-on interaction.


Future Plans

While the app is currently on hold as I’ve returned to college, I plan to use it in the upcoming semester to explore DevOps concepts. My focus will include:

  • Implementing CI/CD pipelines for efficient testing and deployment.
  • Integrating modern DevOps practices into the app's workflow.

Technologies Used

  • Frontend: React.js with custom hooks and component-driven architecture.
  • State Management: Redux for predictable and scalable state management.
  • Styling: CSS modules for maintainable and modular styles.
  • Development Practices: SOLID methodology and clean code principles.

How to Use

  1. Build Your Data Structure: Use the interface to create nodes and connections.
  2. Choose an Algorithm: Select one of the available algorithms to run on the structure.
  3. Visualize: Watch the step-by-step execution and gain insights into its workings.

Development Status

  • Current Status:
    • Development paused while I focus on college studies.
  • Next Phase:
    • DevOps integration in the next semester to implement CI/CD pipelines.

If you'd like to contribute or have any suggestions, feel free to reach out!

About

An online visual tool for learning algorithms

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published