LangConnect

• 

  short logo

• 

• 

• 

• 

• 

Inspiration

A lot of high schoolers like us have the privilege to learn languages in school. People who move to different countries often can’t afford expensive language classes and do not have the resources they need to thrive in their day-to-day lives. Through our project, users can earn points by doing a certain amount of language conversations through video calls where they can go from practicing the simplest phrases to a level where they can communicate with a native speaker.

What it does

LangConnect links together users from all over to explore the essence of language learning through an interactive interface and one-on-one user interaction. Using a variety of apis and firebase database, we were able to allow users to contact each other through video conferences and chat messages that could be found on the navigation bar on the top and the messaging icon on the popup when the user hovers over a profile.

How we built it

We started with a basic react framework, then added firebase functionality with information about each user which we obtained through the signup process. We implemented our video-call api and our chat api to allow users to communicate. We created the tabs on the left which allows the user to toggle between personalized lists of other users that they can learn from and users they can teach. Lastly, we included a user dashboard to view statistics like the amount of calls and points. Bootstrap saved a lot of time in creating html and css from scratch, but we also ended up creating our own code and components to suit our web app.

Challenges we ran into

We learned React the day-of and had issues with implementing node.js on the computers we were using. Finding the correct APIs with proper documentation and within our price range was also where a large portion of time was wasted. The documentation for the APIs were confusing and lacked proper descriptions for it to be successfully integrated into the application. We were unfamiliar with the structure of the React projects and struggled with the routing system between components and rendering.

Accomplishments that we're proud of

Through the duration of the Hacks for Hackers Hackathon, we learned invaluable skills in web design and querying and created an application that we hope would inspire and promote language learning. We are proud of the many features we were able to complete during the 2 day event and the learning experience that came with it.

What we learned

We learned how to use react + bootstrap to create adaptable and professional-looking web pages. We also learned how to pull data from firebase to display and filter results to customize for the user and how to use video conference and messaging APIs to create an appropriate setting for users to interact.

What's next for LangConnect

During the time of the hackathon, there were several other features we wanted to implement which includes the friends list, user profile page, and tutorial API. The friends list would enable users to be able to save and remember who they had contacted and friended previously for tutoring sessions. The users profile page would add a further level of functionality by allowing the user to change their names, languages, profiles and many more. A tutorial API would boost accessibility of the application by explaining the complex functions of the application and how to use it.

Built With

• bootstrap
• css
• firebase
• getstream.io
• react
• videosdk