CRUD Firebase Firestore with ReactJS + Typescript PART 2: Implement the CRUD Functions

Hello, this is the part 2 of the previous story.

CRUD Firebase Firestore with ReactJS + Typescript PART 1 : Config the Project

Previously We’ve created the Firebase project and config the firebase in ReactJS. Now I’ll explain how to implement the CRUD functions in ReactJS project.

Create file named todo.ts inside src/db/repositories folder.

This file will implement the CRUD functions of todo collection that We’ve created in Firebase Firestore console.

The todo.ts codes will like below.

*Explanation in codes

Time to create the view.

First create a file named style.css inside views/app folder.

Then make the src/views/app/style.css codes like below.

Then in src/views/app/index.tsx.

In this story I just put all the CRUD logic codes inside the src/views/app/index.tsx.

So the codes will like below.

*Explanation on codes.
*All functions from todo repository implemented here.

Then open or refresh the home page of application.

The result will like below.

Then when I try to add new todo.

Updating the new todo.

Deleting new todo.

CONCLUTION:

Using Firebase Firestore as database is quite easy, also it’s serverless that make the developer no need to create a separate back end services for the frontend apps. With the power of Typescript I can mapping the object from the Firestore query result and make the codes cleaner.

See you on the next story.