DEV Community

Cover image for Firebase Typescript with React example: CRUD Application
Tien Nguyen
Tien Nguyen

Posted on

Firebase Typescript with React example: CRUD Application

In this tutorial, I will show you step by step to build a React Typescript Firebase CRUD example with Realtime Database.

Full Article:

Using Cloud Firestore instead:
React Typescript Firestore example: Build a CRUD App

Firebase Typescript with React Overview

We're gonna build an React Typescript Firebase CRUD Application using firebase library in which:

  • Each Tutorial has key, title, description, published status.
  • We can create, retrieve, update, delete Tutorials (CRUD operations) from Firebase Realtime Database

Here are the screenshots:

  • Create a new Tutorial:


Firebase Realtime Database right after the Operation:


  • Retrieve all Tutorials with details when clicking on a Tutorial:


  • Change status to Published/Pending using Publish/UnPublish button:


  • Update the Tutorial details with Update button:


  • Delete the Tutorial using Delete button:


  • Delete all Tutorials with Remove All button:



  • React 17/16
  • firebase 8
  • typescript 4.3.5
  • react-router-dom 5
  • bootstrap 4.6.0

Project Structure


  • firebase.ts configures information to connect with Firebase Project and export Firebase Database service.
  • services/tutorial.service.ts exports TutorialDataService that uses firebase's Database Reference to interact with Firebase Database.
  • There are 3 components that uses TutorialDataService:
    • add-tutorial for creating new item
    • tutorials-list contains list of items, parent of tutorial
    • tutorial shows item details
  • App.tsx contains Browser Router view and navigation bar.

For step by step instruction and Github source code, please visit:

You can also find how to create React HTTP Client for working with Restful API in:
React Typescript example Project with Axios and Web API

Or Cloud Firestore for serverless:
React Typescript Firestore example: Build a CRUD App

Further Reading


Top comments (0)