This project will finally give you a chance to tie together everything you’ve learned so far. It’s a project with a lot of complexity so take it one step at a time. Working with Rails or Firebase as a backend is pretty straightforward, but you’ll be juggling some of the front end functionality too. This is entirely within the realm of the kind of thing you might be asked to build on the job (though of course not exactly). Are you ready???
Hopefully you got a chance to play “Where’s Waldo” (see here if unfamiliar) as a kid. You’re given a photograph with tons of stuff going on and you’re meant to locate several familiar characters.
Here, you’ll build an app that feels a whole lot like a photo tagging app. You’ll start with a large photograph which contains several elements the user is meant to find, e.g. Waldo, The Wizard, Wilma etc… name your own if you’d like to use your own photos. The user will make selections for each character and they will get feedback on whether they are correct or not.
To start with, you’ll need to choose a photo and identify where exactly each person is to start with and save that to your database. When the user clicks the photo, it should place a targeting box around the portion of the photo where the user has clicked. That box should contain a list of possible characters.
When the user selects one of these characters, you should check with your Rails Backend to see if that character is actually within the targeting box. Provide the user with appropriate feedback (e.g. if wrong, an error message). If correct, place a marker on the photo in the character’s location. In either case, remove the targeting box until the user clicks again.
Keep track of how long it takes between when the photo is first loaded and when the user finally identifies all characters (do this on the server side otherwise the user could hack their score). Once a round is complete, ask the user for his/her name and record that time. This will get a bit tricky since you’ll have anonymous users you need to keep track of!
This section contains helpful links to other content. It isn’t required, so consider it supplemental for if you need to dive deeper into something