What's That Space

You've played GeoGuesser, now get outside and do it IRL!

Comment 1

What's that space by Space Invaders (Team 13)

Available at https://whatsthat.space/ (it's designed for mobile (How to View Mobile View in Chrome))

Github at https://github.com/rafeeJ/UO-Hack

Presentation at https://docs.google.com/presentation/d/10gH-nAkfvkol3nwRUrlTFk5scTZZ_7PH27EZIoUwCaw/edit?usp=sharing

Inspiration

We have enjoyed GeoGuessr and see other fun location-based activities like Geocaching. We thought it would be fun to make our own location-based app that combined the two ideas while trying out some new tech!

Since Covid hit last march, it's been difficult to socialise and see friends and family. This led us to combine the Health and Community paths of the hack, we wanted to encourage people to get out and exercise, allow them to socialise (safely!) and discover their local area. There are plenty of local beauty spots all around us that we might not have seen before! What's That Space encourages people to get out, take pretty photos and challenge other people to discover the area.

What It Does

There are two types of players: Explorers and Creators (you can be both!).

Creators submit photos of beauty spots to the app, which get posted onto maps for the explorers to find. The catch: only the general location of the original photo's geolocation is provided to the explorer. This makes recreating the photo a fun challenge.

Explorers use the general location provided by the app to try their best to recreate the photo that the creator submitted. Explorers then receive points based on how quickly and how well they were able to recreate the Creator's photo. Complete challenges to rise up the global leaderboard and earn crypto rewards based on your score!

How We Built It

We first took some time to plan out our ideas and designs so we had something to quickly go off, this helped us all get on the same wavelength and get creating quickly!

The core of our project is built within Angular 10, this allowed us to quickly create an attractive UI with all the functionality we required. Plus Google's Firebase for the middleware and database layer. Firebase was helpful as it hosts all of the images, user data and authenticates all of the users for the app!

We also got to use the Google Maps API, it was fascinating to play around with this for the first time and manage to get a working map we could interact with. This allowed us to display challenges around the world (check it out we've added some sample ones!) and make the app feel more alive!

Alongside this, we added small extras such as using a Google Cloud VM, Python and DataStax Astra DB to generate Nimiq (Node.js based Crypto) cash links to reward users for their score (available in profile with a score > 0).

Challenges We Ran Into

We all tried to pick roles which were unfamiliar to us, and use new tools. This meant that there was a lot of learning! This was particularly true of Firebase as only 1/4 of us had any experience and it was crucial to our project working successfully, luckily through a lot of documentation we got a DB going, our app hosted and user authentication. Alongside this half of us hadn't used Angular, and decided to dive right in and not take a backseat, this took lots of working together to figure out a ton of bugs and get the design right, but we've now got something we're proud of!

Accomplishments That We're Proud Of

Rafee

I have an Angular background, so I took a backseat on the frontend logic and opted to focus on the style of the app. I implemented Google Material to make sure the design was professional, and for its mobile capabilities. I feel a lot more confident in my SCSS abilities after this hack, so I appreciate that. I also gained experience working with Domain.com and Cloudflare to ensure a HTTPS connection to the site. This was to ensure that user data cannot be leaked and that the webcam is properly utilised.

Tom

Before doing this project I had little experience with Angular and Firebase. I was impressed with how quickly these technologies allowed us to build a working product. I was particularly proud of the work I did to integrate the ngx-webcam package, this involved learning about the ImageData web interface, which was another first for me. I also set up Firebase Storage for saving the user's images and a private moderator page where moderators can accept or reject user submissions to the challenges.

Adam

I spend most of my time working with server code so this was my first experience working with a serverless architecture. I enjoyed encountering problems from a new perspective. Before this experience, I had almost no experience with Angular and Firebase and that meant that integrating communication between the two proved to be a real challenge. However, I learned a lot about the two during the hackathon and managed to establish a fully-fledged service which communicated between the two.

Jake

First and foremost I've enjoyed working with Firebase for the first time, and seeing how seamlessly google cloud services fit together. While quite a small part, I'm most proud of managing to add a rewards system (based on users points) which uses a Google VM serving a Python Flask API which uses the Nimiq (Node based Cryptocurrency/Ecosystem) to generate cash links as rewards (i.e. https://gyazo.com/975966d01662557d7fb861d18311fe51). Also using a SQL database for the first time in DataStax Astra to store user data to required allow reward generation.

As a Team

Taking part in a hackathon where we have to create a project end-to-end so quickly was a completely new experience for us all. Luckily we decided to create a clear plan and stick to it, focusing on making the app fun and easy to use! Throughout the hackathon, we (tried to) always check against our requirements and pre-defined workflows to ensure we were going in the right direction. It has been an interesting (fun) challenge managing the workload, our skills and a git repo with 4 people pushing constantly!

What We Learned

With this being our first hackathon we wanted to focus on two things; learning new things and creating an app we were proud of. It was a learning experience working to create something in such a small timeframe. We all took on a lot of learning using; Firebase, Angular & the Google Maps API.

As a result of our hard work and collaboration, we are really happy with the work we produced. From the beginning, we took the opportunity to put the project management theory we had learnt at university into action and we believe that the practical skills we picked up during the hackathon made a huge difference to our productivity.

Challenges

Sun Life - One of the key focuses of our app has been remote socialisation and we think our app does a great job of this! Having been through many lockdowns in the UK, our focus was allowing safe socialisation and trying to make personal connections. To do this we've focused on being able to get out in your local area and explore, able to leave challenges for your friends (and others)! Plus if you can't get out, you can do it all from Google Streetview in the comfort of your own home.

Domain.com - whatsthat.space - Our app is all about finding locations (finding out whats the space in the picture) and it fits great in a domain!

Google Cloud - We wanted to ensure that our app was accessible to anyone in the world (especially since we’re in europe not Ottawa!), so the scalability and flexibility of a cloud platform was essential! 3/4 of us had never used it before so it was a great learning experience, allowing us to implement hosting (to match our amazing domain name), our main database and user authentication. This was really useful for us as the huge range of services gave us everything we needed and it allowed us to play around with other things like cloud functions (for a message of the day - https://us-central1-uottowahack.cloudfunctions.net/function-3) and hosting an API on Google cloud VMs (generating rewards - http://65.52.241.124:5000/cash).

What's next for What's That Space

We would love to expand the app and make it more robust, expanding the points system and adding local leaderboards. Initially, we had hoped we could use AI image matching to spot images but quickly realised this was out of scope so we would love to add this in future or allow player verification so it doesn't rely on us!

Built With

Share this project:

Updates