Building web app using Firebase - Part 1 (Create Firebase Project)

Google Firebase

In the following example, We will develop the most efficient way to build a website. Unfortunately, people tend to over-engineer a website by using more and more tech stacks; yes, it will boost productivity later, but sure, the learning curve if you are not familiar with the stack; it just drains your energy and wastes your remaining precious time living on this planet Earth (which you only have once), which is very beautiful to explore rather than if you are just sitting there doing something about human-invented technology.

The solution is Firebase; this gonna be a cheat sheet for whenever you want to start building a new project or if you are just a beginner using Google firebase. This will guide you through creating a website from scratch. No server setup required; no dev-ops skills needed, with NoSQL database to not be bothered by the SQL and its slowness and many problems with locking, foreign keys, maximum column size, and so on.

Let’s just start building a web on the cloud with Firebase:

Create a new Firebase Project

For if you have never used Firebase at all, start by:
1. Visit the Firebase console at
2. Then, you need to add a new firebase project
3. Then navigate to that firebase project you just created
4. Explore through all the menus and features and make yourself familiar with the Firebase console dashboard

Create a new App configuration and Install Firebase CLI

After your firebase project has been created, add a new App to your project. You can have multiple types of apps in one Firebase project, either web, game, or mobile app. To set up a new app:

1. Visit the Project settings
2. And then Add Web App, or if you develop for mobile app choose otherwise
3. Then follow the instruction typically, you are suggested to install Firebase CLI:
npm install -g firebase-tools
4. Then test the firebase CLI by Logging in using your Google account:
firebase login

Create a real-time database

Firebase Realtime Database or Firestore (two different things with the same concept) is a Serverless Document DB or NoSQL DB that requires no setting, and it’s automatically ready to use right after you create a new Firebase project.

NoSQL, unlike Relational databases, for example, MySQL, Oracle, or Postgres, you named it. A firebase DB doesn’t need you to know about SQL or database schema or setting up primary key, field type, etc. It’s basically like a document or folder on your computer; you just have to put data into it.

In document DB, the more challenging thing would be to structure the data to make things convenient to access when the data is getting more complex. Also, not forget that you must set up security rules so that only the right authorized user can read or write the data, based on the system design that your application requires.

Let’s start by creating our first Document that stores something like user detail.

1. Before moving further, let's disable writing to the database, so nobody can't write to your database for security reasons
2. Choose the Realtime database from the menu
3. Choose tab Rules, then set ".write" to false
4. This will disable anyone from writing anything to your database. Only if you are using Admin SDK or the next chapter will we set some rules to allow only the right user to alter the data
5. Now your DB is secured, let's create a new document/data/path or whatever you want to call, and name it:
- user_detail: for storing your registered user detail
6. You can add some initials data into it, just for testing

You don’t need to write any APIs to read or write data on a Firebase Realtime database or Firestore; the primary API for the Reading and Write operation is already implemented and ready to use on your Client Application via Rest API. You can also read the documentation to access your Firestore data using Rest API

But most apps are never straightforward Cruds; there needs to be some logic in between. For example, to implement the Rest API, we need to write some Firebase Functions using nodeJs and Express. 

Let’s move on to the actual coding in the next part. 

Popular posts from this blog

ERROR 1348 Column Password Is Not Updatable When Updating MySQL Root Password

Spring Kafka - how to use ReplyingKafkaTemplate send and reply synchronously

Intellij Error: Spring class file has wrong version 61.0, should be 55.0

How To Create Spring Boot Project Using Netbeans

How To Use React Ckeditor Upload File Image With Demo and Example Codes