One of our team members plays osu! competitively, and commented on the presence of professional osu! at Virginia Tech. This led our team to note the lack of an accessible central information source for professional osu! tournaments. We realized a project that would display this information would be good practice with both front end app development and back end database and API management, and decided to commit to the project.

What it does

The app shows a list of recent professional tournament matches for a video game called _ osu! _, and displays the score of each match, the teams involved in a match, as well as the time of each match.

How we built it

The front end of the app was built in React Native with the NativeBase component library. The app queries our own FastAPI on a Linode server to pull match data from our CockoachDB match database. Because match data, including match score, is historically not stored in a single public database, but rather posted on a wiki, we wrote Python code to scrape the wiki and then store it in our database.

Challenges we ran into

This was our team's first time using React, CockroachDB, and FastAPI.

React Native has slight differences in syntax, components, and component attributes from regular ReactJS, which was initially confusing and led to our team referencing irrelevant documentation until we learned of the differences. An unfortunate amount of time was spent centering objects within their parent.

The configuration of nginx to deploy FastAPI to the Linode server was initially challenging.

Accomplishments that we're proud of

This was our team's first time using React and React Native, so we're proud to be able to pull data from our own server and into our application.

What we learned

Our team gained an better idea of how to use React Native, the lifecycle functions within React Native (useState, useEffect hooks), how to format data coming from an API, and how to deploy both an API and a database on a cloud server.

What's next

This project can be expanded upon by pulling live matches into the database and displaying regular score updates on the app. In addition, the app could be expanded with more tabs, which might display more detailed match information or team information.

Image of App

Image of app

Built With

Share this project: