realingo

thumbnail
realingo home screen
a sample conversation in realingo, with translated text in red.

Inspiration

When brainstorming for this hackathon, we were thinking about what our least favorite parts of school were, and how we could improve on them. Eventually, the subject of language classes came up, and we agreed that we would rather be slowly burnt alive than have to sit through another Spanish vocab lesson. Therefore, we decided to create an application that optimizes the language learning process, following proven principles and fun elements.

What it does

Realingo simulates fictional scenarios in one of the 85+ languages available. The user is given an objective along with some other context on the situation and instructed to navigate their way through the given scenario speaking a foreign language. Amongst the scenario is a range of difficulty and silliness.

How we built it

realingo was made with React, NextJS, tailwindcss, and Framer Motion. The services involved in operation are the OpenAI API and Upstash redis database for caching and rate limiting. It was deployed on Vercel and makes use of the Edge Runtime.

Challenges we ran into

Being in a different timezone than this hackathon was intended for posed a big challenge. We lost almost a full day of work due to school. Therefore, we were on a time crunch from the moment we started the project. Also, containing our showcase video within a reasonable time proved to be far more difficult than expected.

Accomplishments that we're proud of

We're proud of the application's capability to operate in any language, rather than simply hardcoding it to work in Spanish or French or something else commonly taught in schools, thus making it much more accessible than typical language learning apps. Additionally, the various scenarios we came up with, the finely tailored prompts attributed to each of them, and the general ideas are especially noteworthy. Lastly, from a bird's eye view, the website just looks really cool and I am more than content about that.

What we learned

We learned how to fully leverage the power of NextJS server and client components to create a highly interactive but secure application. We also learned further in-depth how to make gpt-3.5-turbo work in specialized applications, along with various CSS effects and animations to improve the look of the website. Some minute details, such as the autocomplete dropdown, were tasks that we had never attempted before, and even though the end result was simple, the process was substantially educational.

What's next for realingo

There are high odds that we will attempt to incorporate mobile adaptability for realingo, as the majority of people do their language learning on their mobile devices (Such as on Duolingo, Rosetta Stone, Babble, etc.). There will also be an increase in the amount of prompts available, for all kinds of difficulties.