What is Firebase?
Are you a frontend developer who is looking for a faster way to create a backend? So, am I. I learned Ruby on Rails as a backend in school and would always use that. During my research for a quicker solution, I found Firebase.
Firebase is a Backend as a Service (BaaS) system that allows users to focus on frontend development. Firebase can be easy to utilize with just a little bit of setup and is even free until you hit a certain amount of traffic. Firebase has a lot of features that I am still learning but I utilized enough of it for this project to realize its true power. Some features include user authentication, cloud database, cloud storage, crash and performance reports, analytics, and even growth functionality.
I was creating a Netflix clone for a project I was working on when I first started to use Firebase. So, I needed user authentication and a cloud database. Let’s see how easy it was to get Firebase attached to my application.
- I created a Firebase application on the Firebase console.
2. I installed Firebase in my project with npm install firebase
3. I created a seed file called seed.js with my data in JSON format.
4. I created a file in my project called firebase.prod.js for my Firebase connection. This is where I also seeded my database. This will NOT run until step 5 is completed.
Be careful to only run the seedDatabase(firebase) line only one time and then remove it AFTER step 5 or you will have duplicates in your database.
5. We have to connect Firebase to our project in the index.js using context. We wrap our app around the Firebase context provider.
6. Since we are using React context, we are able to connect our Firebase context to any page without props . So, we use the firebase methods within our handleSignin method to authenticate the user and sign them in with their email and password.
If it is successful, we push them to the browse page else, we handle the error.
7. On The Firebase website, we have to go to the authentication tab. Then, we have to go to Sign-in method. Then, ensure that Email/Password is enabled.
8. Now it’s time to get the content from the cloud Firestore and utilize it. This method takes in a ‘target’ which is a collection name and return an array of the content for that target.
Collections Available: Films, Series. Each have 25 items in them. These arrays are then returned to the browse page where they are displayed.
In Conclusion, I learned a ton about the Firestore and how it makes a backend so much easier. I know this seems like a lot of code and effort to just get user authentication and a database but, it doesn’t take as long as it seems and it will get much easier with practice. Using Firebase cuts out all of the backend work and lets users focus on the frontend which is awesome!
Netflix Clone GitHub Repo — To reference
