New-O-Lingo- duck duck code - VDN5

A web app that provides an interactive slang language learning experience to assist immigrants in their immersion into the Western culture.

Comment

Note: The video is from when we did not connect the backend.

Inspiration

Our inspiration comes from personal experience and the lives of others around us. When migrating to a new country to study, one is bound to have some challenges when living somewhere new. One of these challenges could be the language barrier (specifically modern slang). With New-O-Lingo we hope to promote peace and inclusion in society with our solution. By offering a platform that focuses on everyday phrases and slang used by students and locals our solution will help international students feel at peace that they are using the right word in the right context and that their colleagues and friends easing their interactions and breaking down miscommunication barriers.

What it does

New-O-Lingo presents an interactive web app where international students can learn phrases used by students and others everyday like "we are cooked," and "I want to get a double double from Tim Hortons" in order to immerse and support their inclusion to Western society. Through the use of our phrase cards, users can observe the common phrases and their corresponding meaning and save their favourite terms. Suppose a user knows the definition for a phrase but not what the exact phrase is, they would be able to look for the meaning (they can even filter or search for its given category!) and find the word that matches it. By creating an account on New-O-Lingo, they will be able to access our phrase cards and functionality of saving their favourite phrases for future use. Additionally, by clicking a phrase card and expanding it they will be able to see its common use, which category it came from, and its definition. This will create the perfect environment for learning these new phrases and ensuring that with examples it will stick in the memory of the user.

How we built it

We built our web app using the next.js and node.js framework to create an interactive web app that showcases our main functionality like the dashboard which displays all available phrases to learn in the format of "word cards," users can save their favourite cards for future reference. We used SQL to create our database of terms and the functionality of filtering using a search bar, adding a phrase to the saved display, and more. We used express to help us with the connection between our SQL back end and react front end. And finally, we used css and html for basic styling and the beginning construction of our web app.

Challenges we ran into

We ran into a couple of challenges throughout our implementation but through teamwork we were able to remedy them

  1. It took some time to formulate an idea but after going through the topics we were able to relate to the inclusion topic based on personal experience and the experiences of those around us and base an idea around that.
  2. We had issues with setting up our react project for the first time which definitely halted our implementation time but we worked together to make sure that there would be no future issues and that our react framework was set up properly

Accomplishments that we're proud of

We accomplished so much in this hackathon! Several of us had never used node.js, react, and next.js and the fact that we were able to work together and help each other learn the functionality, syntax, and of course dealing with bugs in our code is a great representation of our collaboration and team work. Additionally, the backend functionality (especially connecting our SQL database to our frontend) was very new and we are proud that we were able to connect it effectively and demonstrate a working product.

What we learned

As mentioned, we learned a lot about the connections between frontend and backend when it comes to implementing SQL into a react project. It took a lot of trial and error but it was an excellent learning experience that will be beneficial in future projects and hackathons. Some of us also learned the use of react and its functionality which will be an incredibly useful skill for future hackathons and projects.

What's next for New-O-Lingo- duck duck code - VDN5

For the future, we would like to implement game-like features into our web app to encourage frequent usage of the platform as consistency with language learning ensures that the new terms are remembered by the user. Additionally, we would like to include more terms and across more categories; to guarantee a full coverage of all possible terms to foster a complete learning experience for new modern language learners.

Share this project:

Updates