Hack & Seek

in the year 2036 people do not go outside enough...

Comment 2

Inspiration

We were inspired by the online show Jet Lag: The Game, in which two teams of players play a large-scale hide and seek game across a large area. We felt that with the ever decreasing amount of time that people leave the house for a good old explore, a game format like that was the perfect way to reverse this trend of recent years. We feel that by 2036, at the rate we are moving we will almost never be leaving the house, and we wanted to do our part to help to get people outside again by giving them a fun activity to take part in with their friends.

What it does

Hack & Seek is a mobile app in which two players (a Hider and a Seeker) play a real-time game of hide and seek across London. The Hider is given time to find a hiding spot near any Tube station of their choice, and once they have hidden, the Seeker has to find them in as little time as possible. The Seeker has access to "questions" that they can ask of the Hider to narrow down their positon, such as requesting that they send an image of their closest landmark, or reveal whether they are within a certain range of the Seeker's current location. Our app packages this whole outdoor game experience into one smooth package.

How we built it

The app itself is built in React with TanStack, and uses OpenStreetMaps and Leaflet.js to show a map of London along with the locations of the players. The backend is written in Go and runs in a Docker container, using websockets to facilitate live real-time communication between the players. The whole project is built and deployed using Docker Compose onto an Oracle Cloud server, and is available as a Progressive Web App for ease of use. We also implemented image sharing using AWS S3 for image storage and AWS CloudFront for a CDN solution that worked well in our challenging network conditions.

Challenges we ran into

The sheer scale of having a live two-player game across a large distance was very challenging to overcome. When it came time to test our project, we found it very hard to keep a stable enough mobile data connection to keep the websocket connection open. This was especially difficult when any of the players want to use underground trains to travel, and were disconnected from all phone service entirely. We partially overcame this by engineering some reconnection logic into the Go server and React websocket handler, which allows for a bit more flexibility.

We also found the map interface very challenging to make, as none of us had any experience using GPS or mapping data in a project before.

Lastly, we found the deployment of the project very difficult. In order to test the project on our phones out in the wild, we had to set up a real production deployment complete with SSL for our website, API and websocket connections, which required some complex configuration that we struggled with for some time.

Accomplishments that we're proud of

On the backend, we were very proud of the robustness of our server logic. We gave it the most thorough hand-testing that we could manage in the Hackathon setting, and it stayed stable throughout all of our real-life testing. We were also proud of ourselves for getting the project deployed into a producton-ready environment within the hackathon to allow us to test it out on our phones in the real big city!

On the front-end, we were very proud of our ability to quickly learn about and integrate the mapping data into our project, given our collective lack of experience with the technology.

Most of all, we were proud of just how much fun our game was to play when we tried it in real life! After almost 24 straight hours of hacking, some fresh air and laughs were welcome, and we think it really proves how effective our project is at solving its target problem of getting people outside again.

What we learned

We learned a lot about just how much goes into a full-stack application, and about how difficult it is to try to design an app that is as impervious as possible to real-life conditions. We also learned how to make use mapping data, and making use of the GPS capabilities of the mobile devices we ran the project on to enhance the user experiece.

We also learned a lot about working well as a team under high pressure. Our app grew quickly in complexity, and keeping the three of us fully busy and utilised but not over-stressed was a hard balance to achieve, but we had a lot of fun and believe we did a good job of organising ourselves.

What's next for Hack & Seek

We are excited to improve the user experience of the app and further increase its stability under harsh network conditions. We would also like to add some more questions to the app, and some counter abilities for the Hiders to use against the Seekers to give themselves more of a fighting chance. The sky is the limit for this project, and we are really proud of what we have achieved so far! We only wish we had more time to work and test out our game.

Share this project:

Updates