Make sure to have https:// and not http://.to access the demo

(In case the demo Link doesn't work below)

https://isomorphictest.000webhostapp.com

** Works on all modern browsers **

Inspiration

My original idea was about using image recognition AI to recognize skin conditions and offer recommendations to people on what to do, whether if it was infected, a disease, its severity, etc. However, I ran into problems converting my frozen graph (trained data) so it would work on a standard phone and plus it became around 200 mb.

This was 3 days before the due date.

I foresaw a lot of potential problems even if I got it work, so I thought it’s time to start a new idea that uses everything I ALREADY knew how to do. This would come out quick, and I could use pieces from my other projects.

So, as a gamer who really loved Pokemon Go in the first month where literally all the people who didn’t ever interact in person came out and interacted. It was bliss. How could I reignite that fire in a sustainable way lasting a long time? Well, the solution I thought of is playing a game organized online by the community with benefits to organizers, but played in the real world! ** Wham, Scavenger hunt is born. **

What it does

When you load the website, you’ll be greeted by a “Found” button and a bunch of circles on a zoomed map of your location. The circles are an “approximate” location of what is hidden there. You can upload new hunts and submit hunts.

Here’s how a user would use it.
  1. Press a circle on the map to see more details: Name of the hunt, prizes or additional details, and an image of what you need to look for.
  2. Hunt for the item! Press “Found”.
  3. Upload a selfie of you and the object with your name and email.
  4. Press Upload to upload the image.
  5. Press Send to send it all out!
  6. When the organizers reviews and accepts your photo, you can earn prizes or points!
Here’s how an organizer would use it.
  1. Press the menu button on the top left, select “Create Your Hunt!”
  2. Fill in the details and add ONE photo of the object you’ve hidden.
  3. On the map below, select an approximate location of people can find it.
  4. Press Upload to upload the image.
  5. Press Send to send it all out!
  6. Your hunt should now be live :D

How I built it

I built this using create-react-app. The first thing I did was take a look at the existing projects I’ve completed. I copied over the scripts I wrote for a Community Reporting App I pitched some months ago. I started with that as a template.

Next, I started to make the changes to the ol map components to product the main screen. My last implementation of openlayers was far simpler.

Once this was completed and tested to work properly in a local setting, I moved to get it up on Google firebase so anyone can upload hunts and selfies. Realizing I might run out of time, I ditched authentication all together.

Uploaded to free hosting sites and did a little bit of user testing with some of my friends. Improved the UI abit.

Now I have about 30h left before submission time. So, app is pretty much done. Time to work on this application :)

Challenges I ran into

  1. Ran into the problem that I couldn't solve the problems with my original idea in time
  2. Idea changed in last 3 days of competition
  3. How to produce a new idea quickly.
  4. Openlayers 5 had too many breaking changes, reverted to 4
  5. Passing data from Openlayer’s features to my react components were difficult. Documentation was also pretty poor. Found some other people’s examples and used those as my documentation. Made it work.
  6. I have 2 projects due this week (this being one of them), and another project and competition in Ottawa the next week. It’s been a fun time management adventure.

Accomplishments that I'm proud of

  • Learned more about AI even though I didn’t end up using it for my original idea
  • Solved the openlayers headaches.
  • App is built and it is working!
  • I got what I setout to do done! Feels magical.

What I learned

  • Openlayers API
  • Working with Asynchronous calls across different components
  • Firebase working with storage and database together.
  • AI image training & object detection via python
  • js.tensorflow for AI training in the web
  • Creating frozen graphs that could be saved, retrained, and reused later. (don’t actually know how to convert and deploy it in a real setting)

What's next for Scavenger Hunt!

  • Make the UI more beautiful
  • Test it with businesses that wants gamified exposures
  • Test it with people that want to explore their communities.
  • Have account authentication
  • See if I develop this as an Augmented Reality App and move it forward. Has potential to be like pokemon go, but much more sustainable and for a wider audience.

BONUS Bridge on and offline experiences

Scavenger Hunt! Is an Augmented Reality Experience that bridges online and offline experiences by allowing customers to get to know a community online, and interact with it in a fun and engaging way offline too.

The scavenger hunts themselves are interacting with the real world, while creating it and getting involved can be done online. Successful real world hunts translate to success online with benefits offline too (via real prizes and interacting with the community)! My app drives people together offline when there are Scavenger Hunt events, and gather online community where people can post and talk about hunts. Businesses can also use this avenue to promote their products and bring customers physically in and around the store for a fun game.

Built With

Share this project:
×

Updates