ParserPro

Inspiration

As computer science students, all of us have encountered struggles with code interpretation, especially when working in group environments. Although there now exist many modern websites and tools centered around deciphering code and tutorials (w3schools, MDN web docs, etc), it can be difficult to find advice tailored to one's specific situation. Instead of spending hours on end searching for the perfect StackOverflow solution amidst a whirlwind of links and tabs, we wanted to develop an app that would act as a one-stop-shop to code visualization, understanding, and professional development.

What it does

ParserPro is a code interpreter designed to be used by students, businesses, and developers. It takes in the user's code and as the user highlights specific sections of code, ParserPro interprets that specific section of code and provides detailed explanations. The features include, explanations, visualizations, and binary trees. Ultimately, the concept of tailor made and extremely specialized code interpretation (down to the last line) can be extremely valuable for open source developers, students working in groups, and business workplace environments where multiple people have to interpret each other's code. For example, an aspiring developer looking to contribute to Mozilla's many open source projects can find ParserPro helpful for deciphering code written by other users and debugging their own submissions.

How we built it

We developed ParserPro by starting with a basic framework of HTML and CSS. Initially, we focused on the text highlighting and parsing, which was done through javascript. In the process of making requests to Groqcloud’s API, we wanted to secure our api key (.env), and therefore used a javascript web server running on Render to store our environment variables. The UI of the app was built with CSS, whilst components such as embedded HTML pages were built with iframes. Information retrieved from the main index.html file is stored in script.js javascript variables, which is then used to generate Groqcloud chat completions. These chat completions are used in mainly three ways: explanation of code, extraction of variables (sorter type, data array) for visualization, and extraction of variables (data array) for tree construction. The visualization was coded in Javascript.

Challenges we ran into

We struggled with making sure we only made API requests when we needed them. Dealing with the data that was output and displaying it properly to be used in the other parts of our program took a bit of time and work to get down. For example, once the highlighted data was retrieved from the index.html file, it was challenging to display the corresponding chat completion on an embedded element (iframe). There was an issue with the timing order of the scripts that required us to reorder and change the way we had the project structured. We implemented JSON to store our global variables and created additional tests to ensure the execution was occurring in the correct order. Additionally, we initially encountered challenges with hosting the web server (yarn, npm build).

Accomplishments that we're proud of

With the idea to model the codepen and analysis area to resemble that of a modern IDE, we are proud of the front end design we developed. Instead of fumbling through tabs, links, and advertisements, users can feel as if they were programming in a live environment, only with additional features such as visualizations and explanations at their fingertips. As a value added feature, we found it extremely satisfying to finally implement live data visualization and tree construction. We feel that our final project allows for stress-free, direct communication with the user, and that we achieved the initial vision that we had. We feel that this project can fill a niche in the market, building on and improving on existing technologies to foster a better overall user experience.

What we learned

Throughout the development process, we faced many issues that we didn’t expect. Going into it, we weren’t sure exactly how we would implement our vision but we knew we would figure it out. We learned how to display a smaller page that changes without changing the larger one through the use of iframes. Additionally, we learned how to manage the data inputted throughout our files so that it stayed consistent and didn’t produce any errors. The biggest takeaway we got from completing this project wasn’t a specific technology we learned, but rather the experience we got from debugging a project of this scale in a relatively short time period.

What's next for ParserPro

We considered the idea of having a language translator, just like how Android Studio has an inbuilt translator for Java to Kotlin. For example, if the a has proficient knowledge in C#, they can see exactly how the same code would be used in javascript or any other language as well as informing the user what libraries and packages that are required to run the code. Useful resources and external links related to the users code were another feature we would like to implement in the future, using either rudimentary web scrapers or chat completions to retrieve websites to present to the user. Our main goal is to expand ParserPro to include features that streamline the development process. This can even include a debugger, difference checker, or any other features that specifically target user grievances.

Built With

• css
• groq
• html
• javascript
• render