Why Firebase!

The first time I came in contact with Firebase was back in 2015. It was when Google had announced that they had bought Firebase. As a Front-End developer, I fell in love with it immediately because it made my life so much easier. The reason is that I only need to focus on my features for my application instead of doing all of the boilerplate code for auth, database calls, etc.

For me, firebase is like the holy grail when it comes to the backend. Firebase takes care of everything for you and can easily save you a lot of time.

In this post, I will cover how you can make CRUD(CRUD stands for Create, Read, Update, Delete).

I have been doing talks on Firebase and on how you can use it with CRUD. I got a lot of questions that I couldn’t cover with that amount of time. So I’m planning on doing more talks and more blogposts on Firebase with more topics. I would be extremely happy if I could show more fellow developers how fast you can set-up services with Firebase and how easy it is to use.

Firebase offers a lot of services for you to use

I will be using React because of the simple reason that I love React. As you can see in the picture below, Firebase offers a lot of services you can use. For this blog CRUD — application I will be using the services authentication, Firestone, and Storage.

Let’s start already…

The first thing you need to do is head over to firebase.google.com sign up for a free account. Then you can create a new project and name it whatever you want. Firebase has a very generous free tier that you can use for all your development projects.

After you have signed up you will see your dashboard

As soon as you have logged in to your dashboard console.firebase.google.com and created your project you will see on your left side all the services that firebase has to offer.

First, we need to choose what kind of authentication we want to use. Firebase has a lot of authentication they offer out of the box for you to use. You can see them in the pic below.

So far this is what firebase is offering

Go ahead and click on “Email/Password”, since that is the one that we will use and activate it. Now we need to set up our React project so open up your terminal, cd into your project folder.

Then we need to add the firebase npm package and you can follow the docs on how to do that. After you have followed firebase docs on how to set up firebase we can start using it.

In my opinion on firebase, you only need a couple of lines to do the most things like register a new user, log in a user, write to the database, etc. If you would build your backend so that you can register a new user, it will take some time to set up something like that.

Code never lies

I will now show you the code that you need to be able to register a new user. You can get this code from the docs and try to register a new user.

All the code you need to be able to register a new user

That is all the code you need to be able to register a new user. Go over to your dashboard and you will see the new user that you have registered.

How does the user log in? Well, you guessed it! This is all the code that you need for the user to log in.

This is how you sign in a user, easy right?

Great, now I want to write/read to my database

The first thing that you need to do is let firebase create your firestore database. Head over to your dashboard and open up your project. On your left side, you will see all the services that firebase offers. Click on the “database” and let the firebase create a new firestore for you.

This is all you need to do to be able to add data to your Firestone.

Now that we have added some data to our firestore we want to be able to read that data. Let me show you how you do that.

If you want to be able to delete data from your firestore this is all the code you need to be able to delete data from the firestore.

You need to pass the “id” of that document that you want to delete

Well, how do you update your data? Let me show you the code for that.

Make sure you match the keys you want to update.

What about uploading media?

For that, we want to use firebase storage. Head over to your dashboard and click on “storage” on your left side menu.

You can upload any binary files that you want and this is how we do that.

Not much code, right

After you have uploaded your binary file you will get a “downloadURL” that you can save to your firestore document.

I like firebase

That is all the code you need to be able to authenticate, CRUD to the database, and upload binary files to the firebase storage. If you go over to the firebase docs you will see that they have a really easy guide and API.

I will have more talks about firebase and show you how to make a simple application with React-native and firebase.