Updated: February 26, 2023

No Comments

How to Build an MVP with React and Firebase in 2023

Table of Contents

An Introduction to Building an MVP with React and Firebase!

It is highly recommended that you should simplify and build only the minimum core features that might be required to launch a product into the marketplace. This particular thing helps you to determine if there is at all any market fit for your application.

All of this needs to be done before wasting time and money on a product that nobody’s interested in. Get in touch with React Native App Development Company. like CMARIX.

This thing is known as the minimum viable product or the MVP. Here we shall discuss how exactly to build an MVP with React and Firebase. Firebase, here, is a backend-as-a-service platform.

We shall not be developing the React + Firebase application step by step in order to take in the most value. Instead, over here, a working prototype shall be broken down and the key concepts shall be explained utilizing pseudo-like coding language. The actual code is quite verbose.

The actual code is mostly front-end logic ultimately designed to deal with several aspects such as state management, responsive UI design and accessibility.

The goal is to show you the complete architectural designs of building the ultimate web interfaces. The web interfaces shall be linked to a serverless back end. There will be the complete Firebase project that shall be utilized to locate in the GitHub repository.

At the end of the discussion, you will be able to apply the concepts in your own MVP website projects.

Why Utilize Firebase?

Suppose you are looking to build a website application on a completely serverless platform. You shall come across as a myriad of providers. The many providers shall offer all the essential services you require to build a certain product. The services include authentication, database, cloud functions, storage, analytics, and several more.

There can be the best of class for every service. Someone can have a really high learning curve. All of this is to figure out how to make all of the services work together in a certain application. Your product can be exposed to a lot of security risks. There are several endpoints that you can connect to a product development in order to work.

You can utilize the measures to protect an application. However, most of the developers are completely unaware of which security issues are required to be plugged.

A backend as a service platform is what Firebase is. Firebase very conveniently provides a huge number of very important services under a single roof. Hence, the learning curve is reduced. This also makes it easier to build secure websites and mobile applications.

The Firebase services involve authentication, database, storages, cloud functions, analytics and even hosting.

The Prerequisites

The tutorial has been constructed for the intermediate to the very advanced react developers. These are the react developers who want to very quickly learn how to utilize Firebase for their projects. A few additional topics have been provided that you require to be familiar with before proceeding.

The Firebase Project Plan

The project we shall be looking at is a very simple online library. This very simple online library organizes data properly into books, authors and categories. Here is an entity relationship diagram below.

The application logic has been properly organized into screen containers (pages or views), presentational components (forms, tables), layout components (footer, navbar), shareable UI components (alerts, modals, page headers), and also the firebase services (database, storage).

We first illustrate the architecture of the main project.

We shall also be utilizing the following folder structure to organize the coding. There is the -> symbol that denotes an example. This is an example of exactly how a functional component is named. You can check out guides for more information on the naming conventions for the front-end applications.

Firebase Project Setup

The project that shall be utilized will be scaffolded utilizing a Vite + react template. You need to simply open a terminal and execute a set of particular commands to set up the project in the workspace.

Do not launch the dev server just as yet. We are always required to set up the Firebase back end first. We shall do that in the next step.

The Setting Up of Firebase

You can simply head over to Firebase and also sign in with the Google account. Next, you need to create an entirely new Firebase project and sign in with a Google account. Then, a new firebase project is required to be created and it needs to be called SitePointBooks.

Google Analytics need not be enabled for the particular project. Press the create project button.

A new website app needs to be created in the firebase console. It shall be called Sitepoint-books-app. The firebase console can be easily accessed as demonstrated in many websites. There is the next step then. Your app needs to be given a name.

The name can be the same as the project name. then click the register app.

There is the add firebase SDK section where you can select Use npm and also copy the output. Also, there are a wide number of the firebase SDKs that are available. All over the internet and the world wide web, there are articles regarding this.

You can definitely make a note of the firebase config and also click continue to console.

You can note here that firebase API keys are extremely safe to expose to the public. There is also access to the back-end resources as guarded via firebase security rules. Also, they can only be accessed by a greatly authenticated user.

We will need to disable all of them unfortunately for this tutorial because we will not be dealing with Firebase authentication.

Get a quick setup by simply copying the provided script into a firebase.js file. We always prefer saving the firebase configuration settings utilizing an .env.local file. We have a lot of firebase configuration examples as well.

These firebase configuration settings should not be utilized as they have been created for a completely temporary project.

We all need to note that this particular stuff only prevents the storing of the Firebase configuration keys in the repository. You can always build and deploy the application. It is extremely easy for a malicious attacker to gain access to these keys through the browser inspection tools.

The importance of setting up authentication is hence demonstrated.

The firebase back end is empty currently. We shall populate this with data.

Cloud Storages

A service that allows developers to completely store images, video, audio, and other user-generated content is Firebase's cloud storage. We shall only utilize this to store images for this tutorial. You can all head over to the storage pages. Click on the get started button. A popup wizard always appears.

You need to simply accept the default rules. You are also required to choose a simple location for the default bucket. A storage bucket shall be created for you in a very short while after clicking on done.

The following actions need to be created on the next page. The following folders need to be created. The folders are for the categories and the books. The images that have been provided via the zip file need to be uploaded. You need to have the following structure. You need to click on the rules tab.

The security rules need to be completely updated to allow the authenticated app to access the files. The following settings need to be noted that shall expose the storage backend completely to the public.

Firebase always utilizes a pretty custom language that is based on Common expression language. The common expression language defines the security rules. The learning curve is strictly involved. We shall not be able to discuss this in this article.

You can always check out the official docs on this particular topic.

You can completely populate the Cloud storage with all of the provided images. You can always proceed with the following steps.

Cloud Firestore

Hire Dedicated Developers from CMARIX. You can head over to the firestore database page in your console. Click the create database button. We shall utilize cloud firestore for the database completely. The cloud firestore is a scalable NoSQL database.

It allows the developers to structure the data by utilizing the collections. The older firebase real-time database is also a NoSQL database. However, it stores all of the data in a completely flat nested JSON structure that is difficult to query.

Once the database is initialized, we can always proceed with populating the database. You need to be aware that the firebase database UI does not support automatic linking at all. There is complete validation while linking the two collections.