Live Lingo

• 

  Home Page

• 

  Language Selection

• 

  Live Chat

Inspiration

I've talked to my friend who moved to Germany and started to learn German. He mentioned that he would attend the classes, but the best way to learn the language was by talking to real people. I've had this idea of a realtime video platform for language learners for quite some time, and this hackathon was a great time to do it.

What it does

The project is called Live Lingo, and it enables people to match with people who speak a particular language and talk or chat with them in real time. Users can select the language and their proficiency. The app can suggest an example topic about which the users can talk.

How we built it

I learned about this hackathon 3 days before the deadline, so I used a tech stack with which personally I could move quickly.

The front end is built with React, Next.JS, and Chakra UI with Agora SDKs for live video and chat. I used TRPC/NextAPI and Redis for the backend as a database. For the authentication, I used OAuth with Google and Github providers.

Challenges we ran into

I had a small issue with the Agora SDK/Next.js combo where Next tried to render on the server where the window object wasn't available. I came up with the solution to import the module dynamically only for the front end, which in theory, also improves page load time.

Additionally, I had a small issue with generating RTC/RTM tokens on the server and pairing them. Agora's documentation was really helpful in solving this issue.

Accomplishments that we're proud of

I'm proud that I was able to do the MVP quickly, and the entire development was fun. I need more time to go to the full product, but I'm really happy with the current app.

What we learned

I learned a lot about RTC technologies and a live video.

What's next for Live Lingo

In the future, I plan to add additional features like live language quizzes, profiles with interests, and analyze pronunciations in live video.

Built With

• agora
• chakra
• nextjs
• react
• redis
• trpc
• typescript
• vercel