Letter & Learn

Chat with your penpals in a new language and use Gemini to learn vocabulary!

Comment

Inspiration

Many students learn a language at school, but end up easily forgetting what they've learnt because they aren't frequently using it. As bilingual speakers, everyone on our team could only achieve fluency in our second language because we had a community of native speakers. However, for those who don't have access to such a community, it becomes quite a challenge to try achieve fluency.

For underprivileged Cambodian children, this is a huge disadvantage. If a Cambodian can speak English, their income can increase by 5 times, which is a bountiful salary to feed a family of at least 5. However, these children do not always interact with English speakers and yet many are desperate to learn English as it is the gateway to a better job.

With this app, we are hoping this will be an organic way of building vocabulary, creating pen pals anywhere in the world and a low-cost opportunity to practice English (or any language) as often as they want.

What it does

This project is essentially a chat app that allows you to communicate with any online user based on the language they're learning. If there is a word that the user wants to use in their chat but does not yet know the term, they can chat with a Gemini chatbot. With hints, description, or synonyms the user provides, can the chatbot return only a suggestive list of terms.

The chat and the chatbot will all remain in the language the user is learning. Though this is an uncomfortable process for the user, this restriction will challenge the user to expand their vocabulary and constantly apply it in their conversations.

How we built it

To build this app, we used a combination of Next.js, TypeScript, and Firebase for our stack. Through this mix of technologies, we were able to hit the ground running and quickly build the core of our application, which was our chat. Using built-in real-time observers offered by Firebase, we were able to provide a responsive chatting experience for our users while including customizable chat rooms. Firebase also allowed us to include a simple, but effective authentication process for our users to ensure a secure login and registration process.

From our chats page, users are also able to chat with Gemini, which comes in the form of its 1.5 Pro model. To implement it, we tailored a prompt for Gemini to best enhance the user’s experience when learning new vocab words and/or phrases.

Challenges we ran into

One of the biggest complications we faced in this project was configuring Gemini to create an easy step-by-step learning process for the user. We didn’t want to restrict the user with what they could say to Gemini while also providing enough freedom, so that users can take full advantage of what Gemini has to offer. That being said, some railroading was necessary to guide the user strictly write in the learning language and restrict Gemini to only return a list of vocabularies, but we believe we were able to strike that balance with a few iterations.

Setting up user authentication and cookies throughout the application was another challenge that plagued the application the longest. With Next.js offering middleware to handle server side cookie checks and redirects, this process was somewhat simplified. The problem then became ensuring that authentication was properly checked throughout and that the user would be redirected if they were on a page they weren’t supposed to be on. This required some additional authentication checks and cookie-based redirects on the browser side to ensure no authentication issues slipped through.

Accomplishments that we're proud of

For our entire team, a big accomplishment was creating this application using a tech stack we had very little experience with. Especially when it came to something like Firebase, we all came to it with no experience making the planning of our database and data handling all the more complex. Thankfully, the simplicity offered by Firebase in regards to setting up real-time observers and interactions with Firestore greatly reduced our collective learning curve.

Building this application from scratch with the added time pressure of the Hackathon’s deadline was also a huge accomplishment for us. We had always wanted to flesh out this idea of a language learning chat app, so doing the Hackathon pushed us into developing this application and giving our all to learning what we had to for this project.

Since this was also our first experience using the Gemini API, or any AI API for that matter, it was also a great learning experience in tailoring prompts for Gemini and catering a chatting experience that would serve a specific purpose for the user. We had all had personal experiences using Gemini as a tool for various things, but never had we tried guiding the interactions with Gemini as “outside” observers. Gemini most certainly provided the necessary flexibility to offer a chatting experience that would both serve our app’s purpose and be satisfying for the user.

What we learned

The greatest takeaway we had from this project and this hackathon in general was the benefit offered by Gemini. When we were in the initial ideation stages of this app, we weren’t sure whether we could ever bring this idea to fruition due to the complexity that building a language learning assistant entailed. Even before, we had discussed the extensive tech stack necessary to build this assistant and the complication from restrictive rules. Because we knew that Gemini already had this capability, it stripped away the overwhelming feeling that prevented us from starting this project. Now we know that utilizing Gemini in the way that we did showed us how much simpler it was to create an intuitive learning experience.

What's next for Letter & Learn

With more time, we hope to include a word bank where the user can save any term seen or used in their chats or with the chatbot. However, when the term is saved, a definition will not immediately be shown. Instead, the user will go through a series of hints before being asked to provide a guess of what they think the definition is. Afterwards, the user's version and the dictionary version will be revealed and the user will have to choice of choosing which definition they would like to save with the term.

Beyond this feature, this project was originally intended to help a local non-profit organization help children in Cambodia learn English. Thanks to this Hackathon, we are hopeful that this could be a potential learning tool. We plan to adhere to this goal and have children start testing out this app to test this proof of concept.

Built With

Share this project:

Updates