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 💪



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