How to Create TODO list app with Firebase + React 🔥


  • Firebase
  • React
  • TODOLIST app
  • Hosted online

3 fundamentals of REACT


  • Gets cleared after refreshed



  • useReducer() // alternative to useState() hooks 🔥
  • useState() // for the state management
  • useEffect() //for the side effects

Run Dynamic JavaScript with JSX 🚀

JSX = JavaScript + HTML hybrid

event.preventDefault(); // will stop the REFRESH !!!

  • Break your code up into components when using REACT JS

🔥 FIREBASE (database)

  • Real-time database 😃

🌏Hosted online (on firebase)

✔️FULL CRUD Functionality (Create, Read, Update & Delete)

✔️Material-UI for the design (front-end)

  • npm install @material-ui/core
  • yarn add @material-ui/core

✔️React-Icons for the design (front-end)

  • npm install react-icons

✔️Used REACT

  • REACT Hooks (useState, useEffect, useReducer)

Review the code on github 💪




Front-End Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Device Mobile Number — React Native

Insert Interval: Leetcode Medium — Blind 75 (Intervals)

Simple and powerful setup for React-Express application

Write Shorter Loops with Array Methods

Features of Different Javascript Framework : Node Js, BackBone JS, Ext Js

Mastering the Node.js REPL (part 3)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ahmet Suhan Oka

Ahmet Suhan Oka

Front-End Developer

More from Medium

Creating Protected Routes With React Router V6

How to export/import named React.lazy component

Redux: React’s Single Source of Truth for State

Hamburger menu with React and Tailwind Css