# 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

As first-year students, we have experienced the difficulties of navigating our way around our new home. We wanted to facilitate the transition to university by helping students learn more about their university campus.

## What it does

A social media app for students to share daily images of their campus and earn points by accurately guessing the locations of their friend's image. After guessing, students can explore the location in full with detailed maps, including within university buildings.

## How we built it

Mapped-in SDK was used to display user locations in relation to surrounding buildings and help identify different campus areas. Reactjs was used as a mobile website as the SDK was unavailable for mobile. Express and Node for backend, and MongoDB Atlas serves as the backend for flexible datatypes.

## Challenges we ran into

* Developing in an unfamiliar framework (React) after learning that Android Studio was not feasible
* Bypassing CORS permissions when accessing the user's camera

## Accomplishments that we're proud of

* Using a new SDK purposely to address an issue that was relevant to our team
* Going through the development process, and gaining a range of experiences over a short period of time

## What we learned

* Planning time effectively and redirecting our goals accordingly
* How to learn by collaborating with team members to SDK experts, as well as reading documentation.
* Our tech stack

## What's next for LooGuessr

* creating more social elements, such as a global leaderboard/tournaments to increase engagement beyond first years
* considering freemium components, such as extra guesses, 360-view, and interpersonal wagers
* showcasing 360-picture view by stitching together a video recording from the user
* addressing privacy concerns with image face blur and an option for delaying showing the image
## Inspiration## Inspiration

As the summer break nears its end, we and our friends planned numerous trips around the city. Although we did have a positive experience overall, due to poor planning, we wasted a lot of time and our schedule always took unexpected turns. Thus, we wanted to tackle this issue and optimize our meaningful time with our friends. Consequently, we decided to find a solution to improve event planning as a whole. Despite having no experience in app development, we decided to design a prototype mobile application since it would be an effective way to give access to others around the globe.

## What it Does

“What’s the Plan” is an app prototype that essentially takes away all the main complaints that people have when planning a group or solo outing whether it be big or small. To begin there is a calendar section where you are able to set the days you are unavailable, and the app will compare your calendar to the others in your group (which were previously added into the group event via social media quick adding) This will then allow the app to set on a date without the hassle of confirming a date one by one with everyone involved. This furthermore also adjusts itself when group members have changes of plans and sends out notifications to adjust dates. In addition to finding a date that works, finding activities that work for everyone while also being indecisive on what to do was a common problem, to remedy this the ideas sections comes in handy. Here all members can add in their ideas, linked to an actual place where we can go using the built in search algorithm that will use keywords and give back options based off of star ratings, user interactions and location proximity. This will allow the app to right away know where the idea will take place and for more detail to be involved in the voting section, where everyone can vote days in advance of the trip on the different activities. Once all the activities are decided they are seamlessly converted into a readable itinerary that is compact, but can be broken down for more detail on any specific activity. It can be save to drive in the case that Wi-Fi is unavailable. All sections include a messenger icon, which can be swapped with any other linked social media, which links the app to any group chat of choice so that messaging and planning can be done seamlessly through cross- app interaction. Finally, the to-bring/ to-do list section is split into 2 parts: a solo list that is personal and is for yourself, and a group list where all the event-goers can have a communal list for anything that they will share as to not pack the same thing too many times.

## How we built it

After extensive brainstorming on the service and the many features, google jamboard was used to draw a very simple sketch of our desired app design. Afterwards we sought to create an app prototype design which was subsequently developed using the Figma software applying both UI and UX knowledge we were introduced to during the workshop events. We felt that this strategy suited our abilities as well as what we were interested in learning over the course of the event. We used the many resources at our disposal to design an app which has several features and many sections.

## Challenges we ran into

The primary challenge of our project was the lack of programming knowledge in general. Initially, we were driven to learn an app development software as fast as we could within the hackathon duration. Needless to say, we quickly recognized that none of us were experienced enough to learn such a diverse skill in such a short amount of time. Instead, as engineering students, we opted to design a prototype using Figma. For our first hackathon, we decided to thus focus on the aesthetics, UI and overall idea of the app.

The second issue was the rise of conflicting ideas within the team. Initially, we had decided the primary features of the app and each designed a different part of the application. Long story short, it turned out that we all had different ideas and creations. When we assembled all of our designs in one, it looked completely out of place. Because of this, we had to discuss the themes and aesthetic details before actually designing the frames. One advantage in creating three unique creations was that we could throw all of our ideas into a final, refined prototype. Overall, we learned that diverse ideas within a team are advantageous because we are able to build upon each others’ thought processes.

## Accomplishments that we're proud of

As this was our first hackathon we were very intimidated by the expectations to develop a solution to a problem during the limited competition period. By the end of the competition, we were able to apply our knowledge and experience to think of a real-life problem and create a feasible solution to it while developing a business pitch and thinking about the economics of the situation, which is a situation that resembles projects in the workplace that goes beyond the classroom. We are very proud of these accomplishments and are also very happy to gain skills in UI/UX design, and business and presentation skills. This positive experience has encouraged us to reach further and participate in future hackathons.

## What we learned

During the extensive weekend hackathon we have learned a multitude of both soft and technical skills. Technically, we gained experience in UI/UX design and learned to use the design software Figma. We also learned about the general idea of app development and the idea generating process. In terms of soft skills, business presentation and writing along with teamwork, conflict management, and compromise were some of the most critical skills that we took away from this hackathon. Both of these areas are highly applicable and beneficial to our future careers and academics. In addition, we learned many interesting and cool new skills through the many workshops that were held over the week. We particularly enjoyed the UI/UX workshops as it was most applicable to our project.

## What's next for “What's the plan”?

“What’s the plan?” is still very much in its prototyping phase and would definitely greatly benefit from the help of software engineers to bring it to life. The imaginative design and problem that it solves will definitely be able to be a great help to anyone whether it be to plan a move, a wedding, an event with friends, or travelling on your own. We hope to be able to bring all these features to life to be able to make having fun be as stress free and as consistent as possible, while allowing our users to be able to experience things they would never have before.