CodeLingo</>

Inspiration

We were inspired to create CodeLingo after seeing how beginners often struggle with understanding the flow and structure of code. Traditional methods of learning programming can feel abstract and challenging, especially when it comes to visualizing what happens behind the scenes. CodeLingo aims to bridge this gap by transforming code execution into clear, interactive visuals, making it easier for learners to grasp complex concepts and build confidence in their coding abilities.

What it does

When you log into CodeLingo, you can choose from two main modes of learning:

Learning Mode:

Learn with Preloaded Lessons: In this mode, you can explore different chapters on important programming topics like variables, functions, loops, and if-else statements. Each chapter comes with pre-written example code to help you understand the concept. Interactive Code Editor: You’ll see an editor where the example code is already loaded for you. But you’re free to change the code, add your own, or experiment with new ideas! Visual Representation: As you write and modify your code, a special visual panel will show you a graphical representation of your code’s structure. For example, if you write a function, you’ll see a box for the function and additional boxes for variables or conditions inside it. This makes it easy to understand how the different parts of your code work together. Run Your Code: At any time, you can hit the "Compile" button to run the code. The output will appear in the terminal below, showing you the results of your code. If there’s an error, you’ll see a message explaining what went wrong, but no boxes will be drawn for incorrect code.

Training Mode:

Practice with Challenges: In Training Mode, you’ll face a series of coding challenges that range from easy to difficult. These challenges might ask you to fill in missing code or predict the output of a given code snippet. Levels of Difficulty: You can choose between different difficulty levels and work your way up. As you progress, the problems will get harder, but they will help reinforce what you’ve learned in Learning Mode. Immediate Feedback: When you submit your answer, you’ll get instant feedback on whether your code is correct, along with the correct output or an error message if something is wrong. This lets you practice and improve in real-time!

How we built it

We built CodeLingo using Next.js and React for a seamless, interactive frontend experience, allowing users to write and explore code in real-time. The backend is powered by Flask as well as Next.js, which respectively parses the submitted code and generates a JSON representation of each step. This JSON data is then used to create dynamic, visual representations of code execution, enabling users to grasp coding concepts more intuitively. Our goal was to make learning programming more engaging and accessible through interactive visuals.

Challenges we ran into

Implementing the parser and the dynamic visualizer were the hardest parts of the project by far, since the code had to be read so intricately and there were so many cases to deal with. Defining scopes for the visualizer and simultaneously keeping track of changes in variable values were also extremely tricky to deal with. But our team showed immense courage to pull off such crazy tasks in such a short time of 36 hours.

Accomplishments that we're proud of

We pride ourselves in making sure we had a proper code-parser implementation in Python that can take in C++ code and return a detailed JSON file that keeps track of every step for execution and any changes in variable values. The visualizer is also a proud achievement of ours as it dynamically generates a representation of variable scopes with responsive design. We also are happy to have implemented a user-friendly frontend for this app.

What we learned

It is no joke interpreting and processing C++ using a hand-made "compiler" (or parser), and implementing such a complex tool in a time-sensitive environment was a true test of our own understanding of coding concepts such as function scopes, if-else scopes, public vs private variable differences, etc.

What's next for CodeLingo</>

We intend to keep working on it and extend it to other languages and also add even more flexibility with the interactive code editor and maybe also implement Github Copilot-esque features to provide more specific and personalized feedback to the user.