Skip to content

CodeFlow is an interactive algorithm visualizer that simplifies complex concepts into step-by-step animations. It features visualizations for binary search, N-Queens, prime numbers, and various sorting algorithms, enhancing understanding and engagement in learning. Explore, learn, and contribute to the project on GitHub.

Notifications You must be signed in to change notification settings

amancore/CodeFlow

Repository files navigation

Code Flow

Code Flow is a React-based project that provides interactive visualizations for a variety of algorithms. It breaks down complex concepts into step-by-step graphical representations, making it easier for learners to grasp algorithmic principles.

Overview

Currently, there are 6 main segments, with a total of 10 algorithms implemented, and plans to add more in the future.

Segments

  • Dijkstra: Visualize shortest path finding in graphs.
  • Prime Numbers: Explore the distribution and identification of prime numbers.
  • Binary Search: Demonstrate efficient searching in sorted arrays.
  • Recursion Tree: Map out recursive function calls and structures.

Implemented Algorithms

Graph Search

  • DFS (Depth-First Search)
  • BFS (Breadth-First Search)
  • Dijkstra
  • Recursive Maze Creation

Other Algorithms

  • Sieve of Eratosthenes (for prime numbers) =======
  • Graph Search
    • DFS
    • BFS
    • Dijkstra
    • Recursive Maze Creation
  • Sieve of Eratosthenes
  • N Queen Backtracking
  • Binary Search
  • Recursion
  • Fibonacci Number

Getting Started

Prerequisites

  • Node.js and npm (for development and running the project)
  • A modern web browser (e.g., Chrome, Firefox)
  • Git (to clone the repository)

Installation

  1. Clone the repository:
    git clone https://github.com/yourusername/code-flow.git
  2. Navigate to the project directory:
    cd CodeFlow
  3. Install dependencies:
    npm install
  4. Start the development server:
    npm start

The application will be available at http://localhost:3000.

Usage

  1. Open the app in your browser.
  2. Select an algorithm or segment from the menu.
  3. Interact with the visualization: step through processes, adjust parameters (e.g., array size, graph nodes), and observe the algorithm in action.
  4. Use controls to play, pause, reset, or speed up the animation.

Contributing

Contributions are welcome to expand the library of algorithms or improve existing visualizations! To contribute:

  1. Fork the repository.
  2. Create a new branch:
    git checkout -b feature/new-algorithm
  3. Make your changes and commit them:
    git commit -m 'Add new algorithm visualization'
  4. Push to the branch:
    git push origin feature/new-algorithm
  5. Open a pull request.

Contact

For questions, suggestions, or issues, feel free to open an issue on GitHub or reach out via xamancore@gmail.com.

Enjoy exploring algorithms with Code Flow! 🚀

About

CodeFlow is an interactive algorithm visualizer that simplifies complex concepts into step-by-step animations. It features visualizations for binary search, N-Queens, prime numbers, and various sorting algorithms, enhancing understanding and engagement in learning. Explore, learn, and contribute to the project on GitHub.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published