Firebase REST API or how not to bother with a server for a pet project


I want a simple backend for storing data that is used on the frontend, but I don’t want to install Firebase dependencies. And I also want to deploy all this on Vercel.

There was such a desire when developing my pet project (without tutorials on YouTube, etc.). Stack: React, TypeScript, RTK. The first thing I remember is JSON Plaseholder. But this service has a limitation: You cannot design the API yourself.

JSON Placeholder resources

JSON Placeholder resources

Continuing the search, I found the service Mockend, but the service is paid and provides only 14 days of free trial. We, the Junes, do not yet earn $ 1kk per nano-second, so this option disappears on its own, although it looks very convenient.

And then I remember the advice of a classmate at the academy (HTML academyHello) – firebase from Google. The service is very cool with a lot of possibilities, but there is a nuance. It consists in installing firebase dependencies in the root of the project, which I did not want to do at all. I wanted to use the REST API for CRUD operations without all these things that are not familiar to me firebaseConfig, initializeApp, collections etc.

Install the SDK and initialize Firebase

Install the SDK and initialize Firebase

Access Firebase in your app

Access Firebase in your app

Yes, by installing everything according to the documentation, you have a huge number of possibilities, but this method did not suit me. In fact, I didn’t really want to figure it all out for the sake of a simple to-do application (in fact, it turned out to be not so simple and not quite to do). All I needed was to design my own API and interact with it using standard HTTP requests using axios.

product categories

product categories

So, the choice of service is made. Firebase has many products for different needs.
For CRUD operations with data, 2 services are suitable for me: Realtime Database And Firestore Database. The differences are not yet clear to me, but it seems like Firestore Database for more “heavy” applications, while Realtime Database more for chats, etc., where you do not need to store a large amount of data.
I start studying the documentation and find that in a more or less familiar form, the REST API has Realtime Database, but again there is a nuance.

REST API Realtime Database from documentation

REST API Realtime Database from documentation

The nuance is that in the database the data is created in the form of an object with properties whose value is the object with the current task. The property names of the root object (in my case tasks) assigns firebase itself. It is this name that the server returns to us upon successful POST. So I came up with the following data structure:

my project data structure

my project data structure

Having this information, I needed to somehow upload the data to the server, with the help of which I would already create the frontend frame (without writing a fish. I wanted to work immediately with real data). Helped me with this Postman. Having written an example structure that would suit me, I made my first POST request to the created server. Now I have data on the remote server 🙂

But for work, I needed data in a slightly different form. I needed property id with the value of the same unique id that Firebase assigns.
In total, I have 2 types of data:
– type of data received / sent to the server and stored in the Store
– data type that is used directly in the components.

data types for application operation

data types for application operation

The data in the form in which they came from the server, I store in the store. By not cunning manipulations, I transform this data into the desired form already when calling useSelector:

converting data when a selector is called

converting data when a selector is called

Ready.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *