# 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](https://www.browserstack.com/guide/view-mobile-version-of-website-on-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](https://www.geoguessr.com/) and see other fun location-based activities like [Geocaching](https://www.geocaching.com/play). 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](https://www.npmjs.com/package/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](https://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!
## Inspiration

Our inspiration came from the idea of emergencies and to help out the people in distress. So, if there is a minor emergency such as a Room has been locked and someone is stuck inside. He/She can Mark the place and comment it through the AR App allowing everyone in the nearby location to see and respond to it directly. This AR App allows you to receive help from not just your friends but by people who are nearby and are willing to help you out.

## What it does

This AR App posts messages in AR using GeoLocation of the user which allows people around the user with the App to see it and post messages themselves in real-time. This is a great way to help someone in distress, as sometimes they are unable to contact relatives, but someone might see their message from this App This AR App could be used as a social network to connect various people to each other.

## How we built it

For the AR portion of the App we used Swift for the Front-End and Back-End Portion of the apps while the while connecting to the Amazon Web Services through Dynamobd as the database. The website is made using HTML, CSS, and JavaScript with a small hint of the Google Maps API and the Facebook Login API with the website being hosted on Firebase. Facebook Login API is used for authentication of the user to login into the App itself, to start marking points around you. It was also used for the website to login the user into their screen which shows where the markers are placed! Google Maps API is used mainly for the website to view the markers around you.

## Challenges we ran into

Working with Amazon Web Service's Dynamobd for the back-end portion of this AR Hack. All of us were new to developing in iOS, using Swift and also using Amazon Web Services which made it very hard but an ambitious project! Another major difficulty we ran into was even though we are doing a iOS/Swift Hack, only one of us had a iPhone to test it on and 2 Macbooks which slowed down our progress and set us back on our timeline.

## Accomplishments that we're proud of

Throughout this hackathon, we had problems with programming in Swift as it was a new take for all of us. Throughout the duration of this hackathon, two of our members worked for the entire time to ensure that the AR App was completed. We are proud that even though we divided this into two mini projects, The Web Portion and the AR App itself, we were able to communicate between each other and be on the same path to avoid future problems.

## What we learned

Throughout this hackathon, the team members who programmed the AR portion of the App did not know Swift and learnt the language on Friday and went on to finishing the hack well before the deadline of this submission. Additionally, none of us knew Firebase and learning it along the way was a struggle for us, but we were able to come through and have the Firebase portion of the application working!

## What's next for shARe

Currently only supported for iOS devices, we want to furthur this application by getting support for Android and developing the Application for Android devices as we noticed only one of our team member was a Apple User while the rest were Android users and it would've been very beneficial if we hacked in Android!
## Inspiration

With each of us being proud ambassadors of the outdoors, it only made sense that we were attracted to creating something for adventurers of all kinds to connect with each other and show off their trips, but also to keep themselves and their fellow adventurers safe.

## What it does

Mountain Views is a social media and backcountry safety platform based on Android and the Web. On both Android and Web apps, users may post pictures, read and write trip reports, plan trips, and track locations of mutual followed users currently on trips. The Android application is paired with a Myo Armband, meant to be worn when on trips and if the unexpected happens and the user is in desperate need for a rescue, perform a preset sequence of gestures to automatically send the user's coordinates to local rescue authorities, family members, and followers through push, email, and text notifications.

## How we built it

Interconnecting our Android and Web apps, we strongly relied on the use of Amazon Web Services. While linking the two platforms, we ended up using AWS DynamoDB, S3, Cognito, SNS, Elastic Beanstalk, EC2, and Route 53. In terms of the web app, we developed it using HTML5, CSS3, as well JavaScript for the more variable portions including the login page. In order to integrate the backend, we used Node.js and Python to particularly implement DynamoDB and S3. On the Android side of things, the whole entirety of the web app and more was also implemented on the Android app with the use of Java and Google Play Services.

## Challenges we ran into

The hardest part of this was learning everything we needed to know for the hackathon while we were at the hackathon. This was the first hackathon for three of our four group members, so adjusting to the pressure that situations like this puts on you was harder than setting up any server.

## Accomplishments that we're proud of

We are most proud of our creation of a functional social media website made completely from scratch. Three months ago if you told me I would be doing something like this at the biggest hackathon in the world I would have laughed. The amount of sheer information that we absorbed this weekend is more than probably any other weekend of my life. We worked so hard on this platform, and it paid off.

## What we learned

We learned the most about AWS, web development, and Android development. Those were the three biggest parts of our project.

## What's next for Mountain Views

We hope to upload our application to the Google Play store, and we have registered the domain mountainviews.ca so that we can hopefully keep improving on what we have created this weekend. We understand that this platform not only has the potential to connect fellow adventurers, but also to save lives, so the more we improve Mountain Views, the more potential lives that could be saved.