Role
- Developer
Tags
- ReactJS
- Firebase
The Ask
Armstrong International had a trade show scheduled and they needed some promotional materials. One of the goals was to create something memorable and engaging for the technicians that would be attending.
The Answer
We brainstormed a training manual disguised as a video game. I was part of the digital team heading the project and I was the sole developer tasked with building it out. It was a six week engagement and two weeks had passed before any code was written.
Armstrong had a few wish list items. They knew they were getting a website, we collaborated on the content, and we had a few design mockups, but something didn’t sit right with me. We were just building another website, how engaging can a website be when walking a trade show floor? It was possible, but it would be an uphill batlle. It became clear, we had more questions when we should have had answers.
Modernization
Despite working in a WordPress agency, I had been looking into new technologies. I always made time to see what’s on the horizon, tech wise. I was taking a ReactJS bootcamp and found a lot of value. It finally came up during a brainstorming session. Why not create a web app instead of our traditional WordPress sites for this project.
Before committing to building with ReactJS, I spun up a Headless WordPress app with ReactJS just to be sure shipping a production app was feasible. It took less than a day to complete and my confidence grew. I pitched the idea, a single-page app (SPA), with an offline mode–stakeholders were happy. It made sense to move forward with a brand new tech stack. We were going to pack the app with modern features. Real time analytics, offline capability, user registrations, the list just grew.
Breaking down big problems
Because I was the only developer in-house that knew anything about React, I was the sole developer on the project. I hadn’t even mastered using React yet, but like every web problem I’d had before, I went in breaking down the big problem into tiny, manageable problems.
And so I spent 4 weeks building the app. I learned how to register and authenticate users with ReactJS. I learned that SPAs are fantastic at component switching without needing to load a new page. I learned how to implement Google’s Firebase to manage user info, registration, and used Firestore’s real time database to track specifically when a user has completed the game and how quickly they progressed through.
The Outcome
The Brain / armstrongdoesitagain.com was completed well before the deadline so we added more features. We used original music that I had composed for each game level. There are fun animations throughout the game as well. Armstrong was impressed and it was so much of a success that they extended the competition so more users could win prizes. They gained valuable insight into their users and our agency picked up a new technology to offer our clients.