Every year, thousands of FIRST Lego League (FLL) teams work on an innovation project of some type. This is in addition to the actual Lego-based robotics competition where they solve a number of robotics-based challenges. The competitions can be a lot of fun, definitely full of energy! The annual challenge (not the robot part) is always something new. This year it was creating a solution to make people more active.
This year, my two younger kids' FIRST Lego League team had an idea about building a scavenger hunt in a nearby park. They came to me with the idea to build a mobile app, and talked about all these bells and whistles. Like any good engineer, I talked them down to something more realistic and achievable. Plus something that's in my wheelhouse.
Our joint solution was to build a mobile-friendly web site. This gets away from publishing to multiple app stores, paying a developer fee on one of them in particular, and working around bugs from multiple codebases across the different platforms. Of course now that the web app is built, it would be possible to port it through something like Phonegap or NativeScript, but I think the web app will be just fine.
So let's talk about the scavenger hunt! This team created a list of things to find along the walking paths, took photos of them, and came up with the application's rules:
- There are 2 different scavenger hunts
- Show as many as 10 items at a time
- Each item has a photo that can zoom in
- Each item has a checkbox
- Once they're all checked, you win - celebrate with fireworks
Items to find are things like certain kinds of trees, categories of animals (reptile, bird), or park locations like the gazebo or the lake. The team also wanted to make sure we had links to find more wildlife info.
After the app is published somewhere, we will put a sign up with a QR code that will link directly to the web app.
Work begins
On our first work night, we set up VSCode LiveShare so that we could all work on the code together at the same time. This was a huge pain to set up, but was an incredible collaborative tool once it was all working.
I showed the kids HTML, CSS, and JavaScript and we built the structure and outline of the web site. It's just three pages, one JavaScript app that we powered with Vue.js, and light CSS styling on top of Bootstrap. Once it was all done, we practiced pulling and pushing the code into GitHub. Mind you these kids are 10-14 years old. It was really awesome to see them understand it conceptually and then take it home and still push a few more changes!
On the last team night before the QR code sign was printed up, I integrated our Git repo with Netlify - we were up and running in our forever-home within two minutes!
Some of this technology really is just getting so much better. From the libraries I easily integrated, to the free hosting, it was a lot of fun to set up. Maybe the best part though was doing a project like this with my own kids. I loved it, and I hope we can do more things like this in the future.
So without further ado, Scavenger Stroll for Wannamaker Park in North Charleston, SC:
https://wannamaker-scavenger-stroll-2020.netlify.app/
I hope you enjoy it, and I hope it inspires you to do something great.