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: https://www.bezkoder.com/firebase-typescript-react/

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-typescript-react-crud-create

Firebase Realtime Database right after the Operation:

firebase-typescript-react-crud-create-db

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

firebase-typescript-react-crud-retrieve

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

firebase-typescript-react-crud-update-status

  • Update the Tutorial details with Update button:

firebase-typescript-react-crud-update

  • Delete the Tutorial using Delete button:

firebase-typescript-react-crud-delete

  • Delete all Tutorials with Remove All button:

firebase-typescript-react-crud-delete-all

Technology

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

Project Structure

firebase-typescript-react-crud-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:
https://www.bezkoder.com/firebase-typescript-react/

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

Fullstack:

Top comments (0)