Build a TODO App with React and Firebase • Rename a Project • PART 21

Build a TODO App with React and Firebase • Rename a Project • PART 21

Build a TODO app with React and Firebase • Rename a Project • In this course I will walk you through all the steps needed from start to finish to code a To Do App using React JS and firebase. I will explain the logic behind each line of code before typing the code, I'm going to use diagrams and animations so you can follow up easily and have a better understanding of what's going on behind the scenes of our App/Code.

Build a TODO app with React and Firebase • Rename a Project • PART 21

GitHub Repo LINK https://github.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase

COURSE DESCRIPTION

In this course I will walk you through all the steps needed from start to finish to code a To Do App using React JS and firebase. I will explain the logic behind each line of code before typing the code, I'm going to use diagrams and animations so you can follow up easily and have a better understanding of what's going on behind the scenes of our App/Code.

In our To Do App the user can add a to do by filling a form (Controlled component) that has an input for the to do text, an input for date and time (We wi use the date and time pickers from Material UI), and he/she can select the project he/she wants to add the to-do to.

The user can filter the todos by date (Today, Next 7 days, All days) or by project, se when he/she clicks on project, only the to dos under that project will appear.

The user can add, remove or edit a to do. When editing a to do the user won't need to hit a "save button" to save the changes cause the changes ei be saved automatically.

The user can add, remove, rename a project. When removing a project, all the todos under that project will be removed.

When the user completes a to do, we show a line through the text of the to do and show a Circle Check Icon instead of a Circle (We are going to use the icons from react bootstrap icons).

When a to do is completed, the user can repeat the to do next day.

We will add some animations (transitions) to our App, using react spring library.

react firebase

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

How to Create Protected Routes in a React app with Firebase and react-router

Using Firebase and react-router to create protected routes in a react app.

What is firebase,firebase bangla tutorial.

LIKE | COMMENT | SHARE | SUBSCRIBE The Firebase Realtime Database is a cloud-hosted NoSQL database that lets you store and sync data between your users in re...

How to Select and Hire the Best React JS and React Native Developers?

Hire React JS developer from Technoduce, we have a team of experienced and expert Angular JS developer. With our hire React JS developer, you have complete control over the technical resource throughout the development process.

Firebase Introduction with C#

LIKE | COMMENT | SHARE | SUBSCRIBE Firebase is a mobile and web application development platform developed by Firebase, Inc. in 2011, then acquired by Google...