Now that Henry has started school properly, he is learning to read, and each week he gets sent home with three “super power words” to learn. Back in 2020, when Owen was in reception, he had the same words to learn, except we were teaching him at home. At the time, I thought it would be cool to have an iPad app for Owen to practice on, but I did not have the skills to knock one up quickly, nor the time to learn. Fast forward three years, to when Henry is learning to read, and I am working as a software developer full time, and it is the sort of thing I can knock up in an evening after the boys have gone to bed. So I did – as soon as Henry came home with his first set of super power words!

I used Create React App to bootstrap a basic application, as Next.js would be overkill for something so simple. Then it was just a case of adding a function to randomly display the words, and a click handler to call it. Initially, I hardcoded the words, to get to a “minimum viable product”, where testing showed I needed to add some more logic to prevent the same word being shown twice in a row. The plan was always to share it on my GitHub, so I changed it to read a list of comma-separated words from environment variables, and whilst there added the option to change the heading to make the app usable for other people.

The “user acceptance testing” (showing it to Henry) identified that the words needed to be all in lowercase, except “I”, and that the “a” character was not displayed as taught at school, so I figured that teaching a four-year-old to read was one of the few valid use cases for the “Comic Sans MS” font and switched to that.

To get the app onto Henry’s iPad, as he does not like laptops, I used AWS Amplify, which combines a basic CICD pipeline and serverless hosting, for a cheap hosting solution for simple web apps. I was also able to hook it up to Henry’s domain name. Builds are triggered by pushing app changes to the main branch of the GitHub repository for the project. When Henry gets a new set of words it is just a case of updating the environment variables in the Amplify web console and re-running the latest build.

If you want to try for yourself, you can check out (or fork!) the repository, create a .env file, set your environment variables and run “npm start”. Or simply have a look at www.henrycraik.co.uk.