Project Name: Seegall

Level of Achievement: Apollo 11

About:

Webapp that offers visualisation tools for different basic algorithms, as well as a place for users to create visualisations for their own code. These visualisations will come in the form of animations with detailed explanations that can show how certain algorithms/codes work. Our forum is a place where they can ask each other for help and share their visualisations. Check out our web application at: https://seegall-frontend.herokuapp.com/ For those interested in the backend of the application, please visit the repo.

Target Audience(s):

Visual learners who have just started programming, students who struggle with understanding algorithms.

Aims:

To help visual learners understand basic algorithms through animations and to foster a community of passionate programmers willing to help one another on understanding algorithms and code better through the forums. We also hope to encourage users to be more independent in learning with our Create function.

Motivations:

1. We are visual learners thus have a hard time understanding some algorithms.
2. Some answers from stackoverflow are hard to understand and visualise.
3. It is difficult to understand what went wrong with our own code and we would like to have a tool to help with that.

User Stories:

1. As a student who is a visual learner, I want to be able to create visualisations of my own codes to understand the process of how it works which helps in debugging.
2. As a teaching assistant or professor, it would help students understand the algorithms clearer and aid in answering algorithm-specific questions.
3. Due to its interactive nature, students are more inclined to try out the algorithms offered on the website which can broaden their academic horizons.

Features:

1. Algorithm visualiser: Help users to visualise how basic algorithms work with step-by-step explanations and side-by-side code viewing for easy reference.
2. Forums: Allow users to ask for help visualising their code or share their code visualisations. This facilitates discussion and the sharing of ideas.
3. Create: Users can create simple visualisations of their codes to help them debug line-by-line and understand their thought process better. (currently only supports Sorting visualisations via Javascript)

Scope of Project:

To combine the usefulness of interactive algorithm visualisation and a shared learning space to develop the passion to understand more algorithms!

How are we better than current solutions?

Current Solutions Our Value Add Visualgo Forums function catered specifically to algorithm problems can help students learn even better as they share ideas and knowledge among one another. Create function can host users’ codes and produce (sorting) visualisations. PythonTutor Visualise Algorithm explains algorithms through animations and very visual representation that python tutor does not provide. Create function can host users’ codes and produce (sorting) visualisations.

Design of the flow:

Link to final prototype: https://tinyurl.com/seegallfinalprototype *do feel free to tap around our prototype

Expansion plans:

Create:

1. Support visualisation of other types of algorithms, especially recursive codes
2. Support more language input as we currently only support Javascript codes
3. Support more commands for different animations Algorithms:
4. Add more visualisations, especially recursive and graphical visualisations Forum:
5. Allow users to include tags in their posts
6. Sort by tags under “Tag”
7. Implement a Search bar for easy access for users to interested topics
8. Enable markdown for responses so that users may write code to better improve the quality of response
9. Edit post functionality/ edit response Log In:
10. Email Verification
11. Changing email General: Working on the feedback given by our group test in our expansion plans. This includes changing the positioning of some elements, editing some elements and further improving our current processes. Link to feedback form responses: https://tinyurl.com/seegallfeedbackresponse

Technical Documentation:

https://tinyurl.com/seegalltechdocu

User Guide:

https://tinyurl.com/seegalluserguide

Authentication Showcase:

https://tinyurl.com/seegallauthentication

Application Showcase:

https://tinyurl.com/seegallfinalvideo

Tech Stack used:

Firebase, ExpressJS, ReactJS, NodeJS

Project Log:

Full Project Log with Details: https://tinyurl.com/seegallprojectlog