React Course | Create A Todo App With React JS and Firebase | React Project For Beginners
🎁 Join my channel to get access to perks:
/ @codeexplained
📜 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.
🕔 Timeline :
00:00:00 - Introduction
00:08:05 - Set Up Our React Project
00:12:16 - Create a Functional Component
00:24:29 - Style a React App
00:38:23 - Create a Modal
00:55:27 - Controlled Component
01:18:05 - Array map() in React
01:31:43 - Projects Component
01:52:30 - Add New/Rename Project
02:14:19 - Todos Component
02:22:41 - Todo Component
02:37:06 - Edit a Todo
02:55:38 - React Context API
03:16:09 - useEffect hook & TodoForm Update
03:43:20 - Firebase Firestore & Custom Hooks
04:15:24 - Run Effect Once & Firestore quota exceeded FIX
04:23:12 - moment JS, random color & Add Data To Firestore
04:45:50 - Next 7 days component
05:04:15 - Filter todos
05:19:22 - Delete Todo/Project from firestore database
05:33:40 - Rename a Project
05:48:30 - Check And Repeat a Todo
06:12:22 - Edit a Todo
06:38:22 - Animations With React Spring
07:05:16 - Deploy Our React App
🌍 Social Media Links.
◾ Facebook : / code.explained.official
◾ Twitter : / code_explained
◾ Instagram : / code.explained.official
◾ GitHub : https://github.com/CodeExplainedRepo
💲 Suppport the Channel
Paypal : https://paypal.me/CodeExplained
Buy Me a Coffee: https://www.buymeacoffee.com/CodeExpl...
Watch video React Course | Create A Todo App With React JS and Firebase | React Project For Beginners online without registration, duration hours minute second in high quality. This video was added by user Code Explained 24 August 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 2,409 once and liked it 132 people.