Draggle

Inspiration

Initially conceived as a twist on the popular game Wordle, Draggle is a low-code tool aiming to help teach programming concepts through unscrambling code segments.

What it does

A user can input a topic of choice, this is then forwarded to an LLM which generates a question, a Python code solution and an explanation of the concept. The code is scrambled and displayed to the user who is tasked with reordering it.

How we built it

We first built a functional frontend using React and Tailwind without any LLM functionality. Then we incorporated a backend written in Python with fastapi, which acted as the middleman between our frontend and the LLM, transferring messages between them. It also did some additional processing and storage to avoid sending the solution to the frontend.

Challenges we ran into

None of us were too familiar with frontend, so most of our effort was directed at implementing it. Furthermore, there were a lot of bottlenecks on implementation as the backend and frontend needed to be tested frequently to ensure data was being passed between them correctly. Another challenge was the uncertainty of using an LLM, which could sometimes produce unpredictable results that had to be resolved through some iterative prompt engineering.

Accomplishments that we're proud of

We are proud of our frontend because it looks nice despite none of us having frontend experience. We also managed to complete a working MVP in good time which relieved some stress and made for a more enjoyable experience.

What we learned

Frontend development paradigms. Don't leave unfinished drinks on the table. We learned good time management and the value of communication skills and sharing of ideas.

What's next for Draggle

Improve feedback returned by the model for example, using a chat interface so questions can be asked and specific code snippets can be explained mid exercise. As we were under the pressure of time, we didn't think too much about the infrastructure of the codebase - instead opting to just implement features and construct an MVP as quickly as possible. Given more time, the codebase should be refined, in particular implementing containerization and proper data storage in the form of a DB.