• Post category:StudyBullet-3
  • Reading time:4 mins read


Create a simple todo app to learn the CRUD operation which suit many social applications

What you will learn

Serverless NextJS development

CRUD operation with Firebase firestore

Learn React Hooks, React Context and React components

Build client-side and fullstack ReactJS apps with NextJS

Description

In this course, we will teach you How to setup the firebase with latest version v9. Firebase allows us to build application in serveless way, we do not need to spend a lot of time to setup the backend.

We will create a simple Todo app with NextJS and Firestore, which let us learn how to do the CRUD operation by using these two great tools

We will walk through how to setup the firebase, make the query to read the todos. We also will simplify the process of styling by using the Material UI.

After that we will create the input form for the user to adding a new todo. No matter the user is insert, update or delete, it will have an alert message show to the users to let them know their operation success.


Get Instant Notification of New Courses on our Telegram channel.


We will also implement the detect function to detect whether the user want to update or delete the todo. The UI will change accordingly base on the user selection.

So if you also want to learn how to make query on Firebase Firestore, how to deal with the timestamp problem, letting the JavaScript understand the Firebase timestamp object, how to take a specific document to update. The course is for you.

English
language

Content

Introduction
Setup Firebase
Read data from Firebase Firestore
Style the todo item with material UI
Create input form with material UI
Create submit function to submit to Firebase Firestore
Create Snackbar alert with Material UI
Delete the todo
Detect the input Area
Update the document in Firebase Firestore