Dippy's Naturenauts

Description

Dippy's Naturenauts is a Progressive Web App that aims at inspiring kids to explore nature and learn along the way.

The onboarding process features an interactive chat with Dippy and the possibility of creating a custom avatar. After that, each user can participate in one of the 4 available activities; upon completion, a specific badge is awarded and a new chapter is added to the user's unique illustrated story.

For this project I led a team of 3 developers. The front end was built using React, Sass and CSS modules. The user's progress is handled by Redux, and stored persistently in the browser using localForage. The Service Worker is generated by Workbox, while the whole build task is run by webpack.

All the SVG illustrations (in particular the user's avatar and Dippy the dinosaur) were split into smaller SVG modules, reused across the whole site and composed together dynamically at runtime.

For the Tree Safari activity, the bark rubbing effect was achieved by leveraging the jsfeat computer vision library. For the Colour Hunt activity, time was invested in normalising and calibrating the camera's input, in order to improve the reliability of the colour recognition algorithm.

I gave a talk about this project at the PWA London Meetup (slides here). The project received a lot of positive feedback from the web community, including tweets from Alex Russel and Maximiliano Firtman. It also got shortlisted at the Dadi Awards.