OlympiConnect

Inspiration

Our inspiration for this app was our love for sports and coming from different cultures and societies. One thing that connects sports and many different cultures is the Olympics. The Olympics is also a massive event in the world, meaning it was very popular and gave lots of resources for us to use. The Olympics being such a big event means there is always something to learn or talk about therefore a quiz and chat app was the perfect program to make.

What it does

Home Page

Our app allows users to find out more about the Olympics by looking at the history of the Olympics in general while also showing about the great legacy that the Olympics creates. It also provides links to the Olympic website about the legacy it has created and continues to create. The app allows users to learn about other cultures by looking up a country of their liking out of the 206 National Olympic Committees. Once the country is looked up the page will update to show the countries Olympic history giving a brief description. Then also will show a fun/interesting fact underneath the history. Also on the home page there is a sign up/log in page. This then will unlock the chat page allowing the user to chat with other users within the app. This means that they can connect with others to learn more about other cultures in the world.

Quiz Page

When the user clicks on the quiz page it will then start a quiz. The quiz is 10 questions long and chooses 10 random questions from a dataset of 100 questions. Each question has 4 options to choose from with one correct answer. After the user has answered all 10 questions then it will show them their score out of 10. It will also show whether they got each question right or wrong. If the user got the question wrong it will also show them the correct answer letting them gain more knowledge.

Chat Page

The chat page is only accessible when the user logs in otherwise a message is displayed on the chat page saying that they must log in to access the chat function. When the user is logged in, they will be able to access a large group chat which everyone who is logged into will be able to access. This will let users connect directly with others from around the world learning even more about different cultures while also sharing their own experiences within sport and Olympic knowledge.

How we built it

Home Page

We decided that we wanted to create a mobile app, also thinking it could be versatile so could be run on both Android and iOS. With this we decided that we were going to use React Native to code our app. After learning the basics we dove straight in by creating the app skeleton with a tab navigation bar at the bottom linking to the 3 main pages. Then we needed to test it so used the mobile app 'expo go' to run the app on our phone to test it. Once each page was created we then split up to create each page and different algorithms needed to make the app work. For the Home page links were added to it that sent the user to the different pages, this included the legacy page. On the legacy page a link was added linking to the official Olympic legacy website giving the users extra information if they wanted it. Also country history page was created contains a text box, two titles and two areas were variables would be displayed. When the user inputted into the text box the program would search for the input in the list of countries in the data set. If it was not nothing would be displayed so no errors would be thrown trying to fetch information on a country that didn't exist. If the country did exist the history and an interesting/fun fact was fetched from the data set and displayed on the page.

Quiz Page

The quiz function first began with designing the user interface, have an output box for the questions, input buttons for the answers, a submit button and a text area showing progress. Then next was choosing 10 random qurstions from the array of 100 questions, making sure there is no repeats. There was checking if the answer is correct by comparing the selected answer to the actual answer. Finally, an output page was presented, listing the questions shown and if they were correct or not, indicating green or red accordingly. Wrong questions output the correct answer for that question and there is a display for the percentage correct.

Chat Page

The chat page was made by locking the core functionality to only if you had a session token meaning you were logged in. If logged in your username would be fetched from the database using your id from your session and your id would be added to a conversation with a static conversationid such that everyone is added to the same group chat and your display name would be set to your username. This would make all sign-up users be inside a massive group chat for all to vibe together with.

Challenges we ran into

Our main problem we ran into was implementing a chat function into the app. We decided to use Talkjs to create a group chat where users from around the world can communicate with each other. The issue with the chat was that it was not render properly within the app. Also, the Durhack version of Talkjs did not support expo, meaning it was difficult to test as we had to build the app to run on android, instead of being able to use expo go to quickly test it.

Accomplishments that we're proud of

Using, learning and getting used to new programming languages, such as react native, running things on a mobile phone. There was heavier use of command lines and usage of more git, developing confidence with all these new interfaces. Teamwork, task management, time management and endurance. It was an accomplishing feeling tackling such new and challenging problems. Additionally learned Panda to help with datasets and overall learned a lot, and exposure to such experience helped bring out more creative ideas and knowledge of new applications. It felt productive completing many features.

What we learned

We have learnt how to manipulate data with pandas, create applications with expo, build an Android app, add programs to PATH, read documentation to implement APIs, create serverless backends with Supabase and that you can create multiple logins with one email by inserting a + sign before the @ symbol. Many of these things were completely new to us such as using Talkjs for the very first time and coding in Native React. Also we were trying to manipulate large datasets using pandas to create questions. Although some of us having limited experience of pandas, the size and complexity of creating questions and answered allowed us to learn more concepts.

What's next for OlympiConnect

Next for OlympiConnect there are few things we brainstormed but could not fit inside our plan given the limited time to program. One thing was an auto-translation on the chat page. This would allow to bridge the gap between users as not everyone will speak the same language. To do this we could still use Talkjs and implement the Google cloud translate api to translate messages for each user into their own language. The other improvement for OlympiConnect was to do with the quiz. We would allow different types of questions by letting the user choose which topic they wanted to be quizzed on while also having open ended questions marked by ai. Also the user data could be stored then setting up a leaderboard to allow users to compete with each other potentially seeing which regions/countries are doing the best.