Quickdraw with Firebase - A web journey

It is amazing to see how Firebase makes the lives of developers easier. Firebase has a presence across all platforms - Android, iOS and Web. Leveraging its lightweight Web SDKs, Introducing Quickdraw with Firebase a web app designed to show developers how they can build an engaging ground up with Firebase.

What is it?

Starting out as a hackathon project, our main aim was to create a fun experience with Firebase. We were Inspired by the AR project by Google Maps and Google Quickdraw and set out to build an application that can use an AI bot to understand human drawing. Our app provides a random object's name and gives the user 20 seconds to draw it. As you draw, an AI bot tries to guess what that object is. Yes, this is "Pictionary" as we all know, but now with an AI bot!

How did we build it?

We used multiple products from Firebase's powerful suite of tools to help build our app. Here's a breakdown of how the app works:

Using Cloud Functions for Firebase, a random object’s name is picked from our curated set of objects. As the user draws the picture on the web canvas, we again call a Cloud Function to make the AI bot (powered by TensorFlow) to find out what the object is. There are multiple rounds for the user to draw and the bot to find.

Our app stores the users score in Cloud Firestore and computes where the score ranks among all users who played the game that day by using Cloud Functions. This score is displayed on the completion screen of the app, with the hope that the player will be encouraged to try and beat their score and improve their ranking.

Finally we are using Google Analytics for Firebase to track statistics and user journeys to help us improve our user experience and Firebase Performance Monitoring to monitor the performance of our app in real time, identify areas of improvement and give our users the best app experience.

More to come...

Firebase made it much easier to build our app. With build tools like Firestore, Functions and Hosting, we were able to spend most of our time building the business logic of the application leaving Firebase to manage our storage and hosting needs. And the Firebase CLI made the publishing process a breeze with a simple command.

And now that we have launched, we are planning to leverage products like Remote Config to dynamically improve the experience of the application without the need to rebuild or redeploy the application.

Finally...

We hope this helps explain a bit about how we built this app and the different Firebase products we used. To learn more about the entire Firebase product family and how they can help you build, release and monitor your app and engage your users visit firebase.google.com.

We had a ton of fun building this web app and learnt a lot. By building our app with Firebase we didn’t have to worry about building any backend infrastructure and could focus on creating the best experience we could for our users. We hope you enjoy playing our app and we look forward to seeing what YOU build with Firebase!