--- title: Build a Scavenger Hunt App with Thunkable | Hour of Code 2022 image: https://blog.thunkable.com/hubfs/Thunkable%20HOC%202022.png --- [![logo-reverse (1)](https://blog.thunkable.com/hs-fs/hubfs/logo-reverse%20(1).png?width=300&height=57&name=logo-reverse%20(1).png "logo-reverse (1)")](https://thunkable.com) HOUR OF CODE 2022 # Build a Scavenger Hunt App with Thunkable Join us in this Hour of Code activity to build a scavenger hunt app for you and your friends! When done building your app, you can check off each item in the list by taking pictures on your mobile device. Start your own project on a separate page by clicking the button and following along with the videos below. ![](https://blog.thunkable.com/hs-fs/hubfs/Thunkable%20HOC%202022%20Landing%20Page%20Image%20(5).png?width=600&height=450&name=Thunkable%20HOC%202022%20Landing%20Page%20Image%20(5).png) [Launch Thunkable Project](https://thunkable.github.io/digital-asset/hoc/redirect2022.html) ## What You'll Need ## Before you start building your scavenger hunt app, make sure you have the following:   Device with internet access   Access to the [Thunkable Workspace. ](https://x.thunkable.com/hoc?utm_source=thunkable_blog&utm_medium=activity_page&utm_campaign=hourofcode)   Mobile device with [Thunkable Live](https://docs.thunkable.com/live-test) to test your app (optional) ![](https://blog.thunkable.com/hs-fs/hubfs/Thunkable.png?width=250&height=149&name=Thunkable.png) ## Ready to Go? Let's Build! --- ## ![Hour of Code Steps](https://blog.thunkable.com/hs-fs/hubfs/Hour%20of%20Code%20Steps.png?width=63&height=63&name=Hour%20of%20Code%20Steps.png)    ## Display an Image Taken on Mobile Device ## The first step to building your app is taking a picture on your mobile device and displaying it on the screen. Here is what we'll cover: - Add image component to display an image - Add button component to capture an image - Use blocks to display the image taken on your mobile device - Add label to describe the image --- ## ![2-2](https://blog.thunkable.com/hs-fs/hubfs/2-2.png?width=63&height=63&name=2-2.png)    ## Detect Items in an Image ## Next, let's use image recognition to identify items in an image. - Build an "if" statement block  - Test out true/false logic - If true, make the screen color green - Combine with blocks from Video 1 --- ## ![3-3](https://blog.thunkable.com/hs-fs/hubfs/3-3.png?width=63&height=63&name=3-3.png)    ## Create a List of Items for Your Scavenger Hunt ## Now, let's make a list of items and combine what you learned in Videos 1 and 2.  - Drag Data Viewer List into your app - Create a table for your data sources - Display data from your table in the list - When you tap an item from your list, the item row turns green --- ## ![4](https://blog.thunkable.com/hs-fs/hubfs/4.png?width=63&height=63&name=4.png)    ## Check Off Items in Your List ## It's time to check off the items in your scavenger hunt! - Check off a selected item only if the description matches - When an item is found, make just the row of that item green --- ## ![Hour of Code Steps (1)](https://blog.thunkable.com/hs-fs/hubfs/Hour%20of%20Code%20Steps%20(1).png?width=63&height=63&name=Hour%20of%20Code%20Steps%20(1).png)     ## Customize Your App Design ## Finally, let's design how your app will look. Get creative and put everything together in this final tutorial! - Add a welcome splash screen - Create a button to navigate to the next screen - Add background images, which you can download [here](https://blog.thunkable.com/hubfs/Thunkable%20Hour%20of%20Code%20Images/Thunkable%20Images.zip?hsLang=en) (or make your own!) ## Congratulations on Finishing your Scavenger Hunt App! Explore your world for more items, and share your app to play with your friends and family! Now that you've finished your Hour of Code, make sure to get your certificate below. [I'm Finished with my Hour of Code!](https://studio.code.org/congrats?i=_1_75d376f6df4456aa2f69845afceda227) Copyright © 2022 Thunkable, Inc.