Rainbow Road Hunt
React & Firebase
TLDR: I made a photo tagging game with React/Firebase and you should play it => here
If you are reading this you probably know that some time ago I've decided to change careers and progress from the field of project management to software development. While digging into the origins of web dev and the underlying concepts was super interesting and a necessary step to give me a solid base, the fun part begins when you realise how much development has happened since JavaScript was introduced. The sheer amount of frameworks, infrastructure, modifications and all flavours of tinkering which has been built on top is astounding.
I decided to concentrate and learn on one of them - React JS for a few reasons:
-
It allows you to break down the user interface into small, reusable components. This approach makes the code more modular, easier to maintain, and more efficient to update.
-
React's virtual DOM, combined with its component-based architecture, makes it highly performant. It allows for fast rendering, efficient updates, and minimal wastage of resources.
-
The learning curve is not too steep and the React JS community is big and supportive, with plenty of resources available to help you get started.
-
The framework also provides a streamlined approach to managing state and rendering updates, reducing the risk of bugs and making the code more efficient.
After a deep dive into the framework I decided to build a fun little where's waldo type game based on internet famous "Rainbow Road" image by Daniel Keogh
Here's a sneak peak at the interface but DON'T CHEAT!
Right from the start, architecting and planning the applications was much easier due to React's modular and component-based approach. The framework allows you to break down complex user interfaces into smaller, reusable components that can be combined to create more complex structures. If something is borked it's easy to narrow it down to a single component rather than dealing with a tightly coupled app easily JavaScript. Once you get the hang of it debugging is a breeze as well and state/props handling becomes second nature as well.
I decided to randomly select the BaaS provider for the project as well and we landed on... drumroll... Firebase! Google's friendly neighbourhood suite of cloud computing services is really straightforward to use and integrate in your React application. For the purposes of this project I used a Firestore NoSQL database and Google's hosting services.
Overall making this was a bunch of fun and made me appreciate how far did web development come to make it easier for engineers to put things together very quickly while still maintaining structure and being ready to scale
With that said... Hope you enjoy the game => Rainbow Road Hunt