Inspiration

Our team recognized the difficulties we have had while trying to learn new algorithms and solve data structure problems. We wanted to build something which both increased our enjoyment for learning and assisted our intuition when it came to solving those kinds of problems.

What it does

The tool is primarily educational and aids the process of understanding how complex data structures and algorithms manipulate data. It consists of two parts: the code editor and the data visualization. The code editor will automatically detect the first initialized array and any operations made to manipulate it's elements. The code mirror will compile your code, assuming it's not faulty, and initialize the initial array in our visualization tool. Running the visualization tool will trigger animations that represent manipulations. The tool also has built in preset sorting algorithms to show users how algorithms sort arrays through physical animations.

How we built it

Frontend: React, vanilla HTML/CSS Backend: Flask, Python

Challenges we ran into

  • Figuring out how to interpret the inputted python
  • Making a design we like

Accomplishments that we're proud of

  • We wanted to code everything without the use of any ai api's, to both give us a greater challenge and our increase understanding and control over the code we wrote. Although it was tempting we ended up with a more robust solution by maintaining our commitments.
  • Creating an educational tool for students, knowing we can help increase many people's understanding with our tool.

What we learned

  • Time spent fine tuning an idea into a great idea is much more important than blindly charging into a problem and finding out you have to rehaul an entire codebase 5 hours in :/

What's next for ImagArray

  • Handle other data structures
  • Better visualization and support for large nested loops with lots of pointers and variables
  • Better error handling for errors in the code mirror
  • Integration with libraries such as NumPy
  • View time & space complexity for the program

Slides: https://docs.google.com/presentation/d/1U_ctLPMaNCkL25WhHnezQ9bnOASAS2eQ/edit?usp=sharing&ouid=116870696657725148366&rtpof=true&sd=true

Share this project:

Updates