Building an Instagram Clone: Week 1 — Firebase 101
This week, I started a new tutorial project. Building clones is one of my favorite challenges — there’s something so rewarding about building a clone of something I use in real life. So when I saw Scrimba had a tutorial on how to build an Instagram clone with lots of technology I’ve been itching to practice or learn, I knew I had to take it on. It’s a fairly lengthy project so I’ll be breaking it up over the next few weeks. This week I’ll be focusing on something brand new to me: setting up Firebase.
What is Firebase?
Firebase will act as our data store, as well as handle user authentication. It is a NoSQL database backed by Google and is a tool I’ve seen frequently used to build applications (especially in these kinds of clone challenges), so I’ve been eager to get some experience with it. For this tutorial, a seed data file will be provided but I will likely make some changes to make it my own down the road.
Setting Up Firebase Firestore
Once you select “create a project”, it takes you through a simple and self-explanatory creation form asking for details such as name and if you’d like to opt-in or out of analytics. From there you’ll see an option to set up the database and it will again walk you through the steps, this time asking you to select production or test mode and your location. Then, you’ll need to edit the rules in the “rules” tab so that it will allow reading and writing in the appropriate cases.
Setting Up Firebase Authentication
It is incredibly simple to set up authentication with Firebase! For this project, I’ll just be using email/password login, but Firebase has lots of options. All you have to do is navigate to Authentication on the sidebar, then the “sign-in method tab”, and toggle your preferred method to “enabled”.
Integrating Firebase
Now that Firebase is set up, we need to connect it to our project. I created a folder called lib within the src folder, and within that created a file called firebase.js. Here, we define const config as our API key, authdomain, etc. given to us at setup. We also need to define and export Firebase so we can use it elsewhere.
With just a few more tweaks, Firebase is set up, integrated, and ready to use!
